Alright, so I'm trying to switch over from having to enter a manual date and time to using jquery to select the date and time.
I didnt think it would be too hard.
My View:
<%= Html.LabelFor(x => x.DDate) %>
<%= Html.EditorFor(x => x.DDate) %>
<%= Html.ValidationMessageFor(x => x.DDate)%> <br />
My Site.Master(I'm also using this: http://trentrichardson.com/examples/timepicker/):
<script type="text/javascript" src="/Content/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="/Content/jquery-ui-1.8.6.custom.min.js"></script>
<script type="text/javascript" src="/Content/jquery-ui-timepicker-addon.js"></script>
<script type="text/javascript">
$('.dp').datetimepicker({
ampm: true
});
</script>
DateTime.ascx:
<%# Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<System.DateTime?>" %>
<%= Html.TextBox("", String.Format("{0:MM-dd-yyyy}", Model.HasValue ? Model : DateTime.Today), new { #class = "dp"})%>
Now I know somethings working right becuase when I load the page, there is a date preset with today's date.
However, when I click the textbox, NOTHING shows up.
Does anyone have an ideas what I'm doing wrong?
Try waiting for the document to be ready before manipulating it, otherwise at the time you execute your $('.dp') selector there is no corresponding elements loaded yet:
<script type="text/javascript">
$(function() {
$('.dp').datetimepicker({
ampm: true
});
});
</script>
Another possibility is to move this script at the end of your document (just before the closing </body>). This way you no longer need to wrap it in a document.ready handler.
Related
I am working with MVC trying to load the results of a form submission into a specific DIV.
Below is the code of my form:
<div class="segmentForm clearfix">
<% using (Ajax.BeginForm("ShopByAirCriteria", "AirOption", new AjaxOptions { UpdateTargetId = "DynamicAirOptions", InsertionMode = InsertionMode.Replace, HttpMethod = "POST", OnBegin = "return loadingBar();" }, new { #name = "AirOptionSegment_Air" }))
{ %>
<%
Html.RenderPartial("AirOneWay", Model);
%>
<br/>
<div class="agent-actions">
Load Original Data
<input type="submit" class="btn green" id="a1" name="SearchAir" value="Search" />
</div>
<% } %>
</div>
I have included the necessary js files in my site master:
<script type="text/javascript" src="<%= Url.Content("~/Scripts/jquery.unobtrusive-ajax.js")%>"></script>
<script type="text/javascript" src="<%= Url.Content("~/Scripts/jquery.unobtrusive-ajax.min.js")%>"></script>
<script type="text/javascript" src="<%= Url.Content("~/Scripts/MicrosoftAjax.js") %>"></script>
<script type="text/javascript" src="<%= Url.Content("~/Scripts/MicrosoftMvcAjax.js") %>"></script>
But somehow, the Partial view that is rendered by the AirOption/ShopByAirCriteria action method is not being loaded in the DynamicAirOptions div but in a new page.
Any idea on what the issue might be?
It was working properly when I was using the html.BeginForm helper, but I changed it to use the ajax helper instead because I need to load the results into a specific div. Is there any way to specify the TargetID with the html helper?
I would caution against using Ajax.BeginForm. It's a bit of a hold-over from Web Forms, and in my humble opinion, should never be used under any circumstances. It hides logic and therefore leads the developer pretty inevitably into a situation like yours, where it's not working and there's no obvious reason why. Explicit is always better than implicit; when you control the AJAX call, you'll always know why it does or does not work.
So, just use a regular Html.BeginForm and then tie into the submit event with some custom JavaScript. Make your AJAX call to submit the form in your event handler and then render the resulting response to the page in the div you want. Since you're already using jQuery, this is super simple:
$('#YourForm').on('submit', function (evt) {
evt.preventDefault();
$.post('/some/url', $(this).serialize(), function (response) {
$('#YourDiv').html(response); // assuming response is HTML
});
});
A side benefit to this approach is that you're not crippling the standard form. It's still just a regular old form, so if JavaScript is disabled, or not available at all (such as with many screen readers used for the blind), the form can still submit the standard old way and return a new page with the results.
Have you include jquery before jquery.unobtrusive-ajax.js? it could be also some javascript error, check Console in your browser developer tool.
I've paste your code in blank mvc4 app and works as expected.
Master:
<script src="/Scripts/jquery-1.8.2.js"></script>
<script type="text/javascript" src="/Scripts/jquery.unobtrusive-ajax.js"></script>
View:
<div class="segmentForm clearfix">
<% using (Ajax.BeginForm("ShopByAirCriteria", "AirOption", new AjaxOptions { UpdateTargetId = "DynamicAirOptions", InsertionMode = InsertionMode.Replace, HttpMethod = "POST" }, new { #name = "AirOptionSegment_Air" }))
{ %>
<div id="DynamicAirOptions">
</div>
<br/>
<input type="submit" class="btn green" id="a1" name="SearchAir" value="Search" />
<% } %>
</div>
My problem was using the following in my layout. I believe it was loading unnecessary files that were causing a conflict. It all worked fine in Edge and Safari, but the PartialView would not render inside the div on Chrome. It would display in a new page.
#Scripts.Render("~/bundles/jquery")
#Scripts.Render("~/bundles/jqueryval")
Instead of using the bundles, I went with this and Ajax.BeginForm works great!
<script src="~/Scripts/jquery-1.10.2.min.js" type="text/javascript"></script>
<script src="~/Scripts/jquery.unobtrusive-ajax.js" type="text/javascript"></script>
My Rails app uses partials to load different pieces of the site into view. I'd like to add a close icon that removes the partial from view when clicked. Example: The user opens a folder in the app, and clicks an icon to "close" the folder. Is this possible?
Ok quick solution with jquery:
_partial.html.erb
<div id="unique">
<p>Html code here</p>
</div>
View.html.erb
<%= render :partial => 'partial' %>
<script type="text/javascript">
window.onload = function () {
$('#unique').remove()
}
</script>
removing the DOM node with jquery .remove()
http://api.jquery.com/remove/
The script on the following ASP.NET partial view is causing me endless amounts of grief:
<%# Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<AkwiMemorial.Models.CalendarModel>" %>
<link href="../../Content/jquery.ui.all.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="../../Scripts/jquery-1.6.1.min.js"></script>
<script type="text/javascript" src="../../Scripts/jquery.ui.core.js"></script>
<script type="text/javascript" src="../../Scripts/jquery.ui.datepicker.js"></script>
**<script type="text/javascript">
$(document).ready(function () {
$('#datepicker').datepicker({
inline: true,
onSelect: function(dateText, inst) {
$('#DateStr').val(dateText);
$('form').trigger('submit'); }});
});
</script>**
<% using (Html.BeginForm()) { %>
<div>
<div id="datepicker" ></div>
<%= Html.HiddenFor(x => x.DateStr)%>
</div>
<% } %>
I have tried using jQuery 1.4.4, 1.5.1 and 1.6.1, all to no avail. From the numerous related posts I have come across, it sounds like the datepicker script is not being loaded. Why so, even when it is referenced?
I am pretty new to MVC. I have my first Ajax Form here:
<div id="test"></div>
<div id="MainChatMenu">
<% using (Ajax.BeginForm("SendMessage", "MainChat", new AjaxOptions { UpdateTargetId="test"}))
{ %>
<input id="chatMessageText" type="text" maxlength="200" />
<input type="submit" value="Go"/>
<% } %>
Now, if I click the submit button, the page is reloading, goint to mysite/controller/action.
I thought that the default behaviour of the Ajax.BeginForm was exactly not to do that?
Where's my newbie mistake?
My Controller is called correctly, but data passing also doesn't work. Probably because of the same mistake?
Here's the code:
public class MainChatController : Controller
{
[AcceptVerbs(HttpVerbs.Post)]
public EmptyResult SendMessage(FormCollection formValues)
{
return new EmptyResult();
}
}
Make sure you have included the necessary script libraries:
<script type="text/javascript" src="<%= Url.Content("~/scripts/MicrosoftAjax.js") %>"></script>
<script type="text/javascript" src="<%= Url.Content("~/scripts/MicrosoftMvcAjax.js") %>"></script>
<% using (Ajax.BeginForm("SendMessage", "MainChat", new{}, new AjaxOptions { UpdateTargetId="test", HttpMethod="POST"})) %>
I have an ajax form in asp.net mvc which is as simple as this:
<% using (this.Ajax.BeginForm("LatestBlogPosts", "Blog", null, new AjaxOptions { UpdateTargetId = "blogPostPanel" }, new { id = "BlogPostForm" })) { %>
<div class="panel" id="blogPostPanel">
<img src="/images/ajax-loader.gif" alt="ajax-loader" />
</div>
<% } %>
I want to invoke the form submit when document is loaded. This should supposedly, call the controller's action and return a result that should be replaced with the placeholder DIV. If I add a SUBMIT button to the form, it works perfectly, but when I invoke the submit via jQuery, the whole page is refreshed, and the content returned by the server is displayed in the newly displayed page. Here's my jQuery code:
<script type="text/javascript">
$(document).ready(function() {
$("#BlogPostForm").submit();
});
</script>
Anyway to do this?
I think it may work if you use the trigger method to generate the submit event, but I think there's a less complicated way to do this using jQuery.
<div class="panel" id="blogPostPanel">
<img src="/images/ajax-loader.gif" alt="ajax-loader" />
</div>
<script type="text/javascript">
$(function() {
$('#blogPostPanel').load( '<%= Url.Action( "LatestBlogPosts", "Blog" ) %>' );
});
</script>