ASP.NET AJAX.BeginForm sends multiple requests - asp.net-mvc-3

Im relatevely new with Asp.net MVC3,
I have a form handled with Ajax, like this:
#using (Ajax.BeginForm("dtjson", new AjaxOptions { HttpMethod = "Post", UpdateTargetId = "detalle_tarifa", OnSuccess = "exito2", OnBegin="bloquear" }))
My problem is that when I submit data, it sends the request twice.
Lets take a look at the view.
This is the form:
ok, now the view after submit:
And this one is to show firebug debugging:
On the layout, I have those javascript files..
<script src="#Url.Content("~/Scripts/jquery-ui.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery.windows-engine.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery.jqDock.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery.jqDock.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery.tablePagination.0.4.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery.tools.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery.cookie.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery.treeview.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery.treeview.edit.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery.unobtrusive-ajax.min.js")" type="text/javascript"></script>
And on the view (A Partial View), I have this:
<script src="#Url.Content("~/Scripts/jquery-1.4.4.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery-ui.js")" type="text/javascript"></script>
<script type="text/javascript" src=#Url.Content("~/Content/tinymce/jscripts/tiny_mce/jquery.tinymce.js")></script>
<script type="text/javascript" src=#Url.Content("~/Content/tinymce/jscripts/tiny_mce/tiny_mce.js")></script>
<script src="#Url.Content("~/Scripts/jquery.unobtrusive-ajax.min.js")" type="text/javascript"></script>
<script src="#Href("~/Scripts/jquery.uploadify.js")" type="text/javascript"></script>
<script src="#Href("~/Scripts/jquery.scrollTo.js")" type="text/javascript"></script>
<script src="#Href("~/Scripts/jquery.blockUI.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery.validate.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>
<script src="/Scripts/jquery.cookie.js" type="text/javascript"></script>
<script src="/Scripts/jquery.treeview.js" type="text/javascript"></script>
<script src="/Scripts/jquery.treeview.edit.js" type="text/javascript"></script>
It seems like it's a problem with jquery... but Im not sure of it...
Any help would be great, Thanks everybody!

You have included jquery.unobtrusive-ajax.min.js twice once in the layout once in the partial. So your browser executes the js inside twice which will subscribe twice on the form click event that is why doing two POST instead of one.
So you need to remove the jquery.unobtrusive-ajax.min.js from the partial.
Note: If your are using a partial with a layout you don't need to duplicate the js included in the partial because it's already done by the layout. There are some good articles about layouts and partials.

You have added jquery.unobtrusive-ajax.js three times. It had happened to me as well.
Check in bundle config "~/ui/js/jquery.unobtrusive.*". the * is wildcard to match both minified or un-minified version. As your solution contains both of the files, it is adding "jquery.unobtrusive-ajax.js" and "jquery.unobtrusive-ajax.min.js". Again in your view page or layout page, you have added jquery.unobtrusive-ajax.js/jquery.unobtrusive-ajax.min.js which is making three times request/post

I my case I had "return View" instead of "return PartialView".

Related

jquery datepicker not working ,date box not appearing?

I try to use jQueryUIHelpers.Mvc3 but when i click on the box the datebox picker not appear.
I installed the jqueryUIHelpers.Mvc 3 package like here http://jqueryuihelpers.apphb.com/Docmo/Overview/GettingStarted
But when i am running the page and click the date box nothing appears.
Here is my view:
#model MvcApplication4.Models.Reservation
#using JQueryUIHelpers
#{
ViewBag.Title = "Create";
}
<head>
<h2>Create</h2>
<title>jQuery UI Helpers - #ViewBag.Title</title>
<script src="#Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>
<link href="#Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
<link href="#Url.Content("~/Content/themes/base/jquery.ui.all.css")" rel="stylesheet" type="text/css" />
<script src="#Url.Content("~/Scripts/jquery-1.7.1.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery-ui-1.8.18.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery-ui.unobtrusive.min.js")" type="text/javascript"></script>
</head>
#using (Html.BeginForm()) {
#Html.ValidationSummary(true)
<fieldset>
<legend>Reservation</legend>
<div>
<label for="anotherDate">Select another date: </label>
#(Html.JQueryUI().Datepicker("anotherDate").MinDate(DateTime.Today).ShowButtonPanel(true)
.ChangeYear(true).ChangeMonth(true).NumberOfMonths(2))
</div>
May be it is because you have called jquery after the validate js and an error occurred and script stopped functioning. Check your error console and include jquery-1.7.1.min.js before all other jquery plugin js and try again. I didnt find any error in the datepicker initialisation function.
I believe it is because when you run Install-Package jQueryUIHelpers.Mvc3 the current version installs ~/Scripts/jquery-ui-1.8.19.min.js and ~/Scripts/jquery-1.7.2.min.js. However, the demo code references version ~/Scripts/jquery-ui-1.8.18.min.js and ~/Scripts/jquery-1.7.1.min.js which is the version you have used. Unless you have manually installed this file, you will not be referencing the correct version.

$('#list').jqgrid is not a function

I'm trying to use jqgrid and I got this error: $('#list').jqgrid is not a function
My js files are loaded from another url than the one my page is displayed.
Here is my head's js includes:
<script src="http://js.abc.com/js/jquery-1.5.2.min.js" type="text/javascript"></script>
<script src="http://js.abc.com/js/jquery-ui-1.8.2.custom.min.js" type="text/javascript"></script>
<script src="http://js.abc.com/js/jqgrid/i18n/grid.locale-en.js" type="text/javascript"></script>
<script src="http://js.abc.com/js/jquery.jqGrid.min.js" type="text/javascript"></script>
<script src="http://js.abc.com/js/jquery.layout.js" type="text/javascript"></script>
my js code to load the grid:
<script type="text/javascript">
$(function() {
$('#list').jqgrid({});
});
</script>
When I look at the page source code and click on the js links, the js code is there.
Did I miss something?
$('#list').jqgrid({}); is really wrong. You should use
$('#list').jqGrid({});
(with capital 'G') instead.

I am having some problems here-Date Picker and all javascript including client validation not working in a Dynamically loaded Partial View

I am working with ASP.NET MVC 3 (Razor)
I loaded a partial view by holds a form by clicking on Ajax Link that is located on my view as follows
#Ajax.ActionLink("Students List", "Create", "Student", new AjaxOptions {OnSuccess = "updatePlaceholder", UpdateTargetId = "holder" })
The partial view loads properly, but I discovered that the Telerek DatePicker isn't showing when I click on the button to bring it down
and also client side validations arent working also. I followed the approch described here but it still insn't working
http://www.telerik.com/help/aspnet-mvc/using-with-partial-views-loaded-via-ajax.html
My code is below
HERE IS MY VIEW
#Ajax.ActionLink("Students List", "Create", "Student", new AjaxOptions {OnSuccess = "updatePlaceholder", UpdateTargetId = "holder" })
function updatePlaceholder(context) {
// the HTML output of the partial view
var html = context.get_data();
// the DOM element representing the placeholder
var placeholder = context.get_updateTarget();
// use jQuery to update the placeholder. It will execute any JavaScript statements
$(placeholder).html(html);
// return false to prevent the automatic update of the placeholder
return false;
}
HERE IS MY PARTIALVIEW
#model MyUniversity.Models.Student
#using (Ajax.BeginForm(new AjaxOptions {UpdateTargetId="holder"}))
{
#Html.ValidationSummary(true)
Student
#Html.Telerik().DateTimePicker().Name("EnrollmentDate").Value(DateTime.Now.ToString())
#Html.ValidationMessageFor(model => model.EnrollmentDate)
<p>
<input type="submit" value="Create" />
</p>
</fieldset>
}
#Html.ActionLink("Back to List", "Index")
Here is my _Layout.cshtml with the registered scripts
#ViewBag.Title
<script src="#Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
<link href="#Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
<script src="#Url.Content("~/Scripts/jquery-1.4.4.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/MicrosoftAjax.debug.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/MicrosoftMvcAjax.debug.js")" type="text/javascript"></script>
#(Html.Telerik().StyleSheetRegistrar().DefaultGroup(group => group.Add("telerik.common.css").Add("telerik.telerik.css").Combined(true).Compress(true)))
<script src="#Url.Content("~/Scripts/jquery.unobtrusive-ajax.min.js")" type="text/javascript"></script>
#(Html.Telerik().ScriptRegistrar().Globalization(true).DefaultGroup(group => group.Combined(true).Compress(true)))
I have partial view that is loaded without Ajax. I had trouble making both the validation and Telerik datepicker popup to work. On my partial view I added the three scripts for validation:
<script src="#Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>
But with this the popup wouldnt work, so I added these scripts to my _layout.cshtml just before:
#Html.Telerik().ScriptRegistrar()
I had already registered the following scripts on the _layout.cshtml page on the top:
<script src="#Url.Content("~/Scripts/MicrosoftAjaxTemplates.debug.js")" type="text/javascript"></script>
<script src="../../Scripts/MicrosoftMvcAjax.js" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/ui/jquery.ui.core.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/ui/jquery.ui.widget.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery.ui.datepicker.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery.ui.tabs.js")" type="text/javascript"></script>
<!-- Telerik Extensions for MVC Scripts -->
<script src="#Url.Content("~/Scripts/2011.2.712/telerik.combobox.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/2011.2.712/telerik.grid.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/2011.2.712/telerik.grid.editing.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/2011.2.712/telerik.grid.filtering.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/2011.2.712/telerik.grid.grouping.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/2011.2.712/telerik.grid.reordering.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/2011.2.712/telerik.grid.resizing.min.js")" type="text/javascript"></script>
<script src="../../Scripts/2011.2.712/telerik.datetimepicker.min.js" type="text/javascript"></script>
<script src="../../Scripts/2011.2.712/telerik.datepicker.min.js" type="text/javascript"></script>
<script src="../../Scripts/jquery-1.2.6.min.js" type="text/javascript"></script>
After that all seems to work fine.

Ajax.BeginForm returns full page

I want to use the Ajax.BeginForm, without updating any element, only call the callback javascript function.
I've attached js libraries
<script src="#Url.Content("~/Scripts/jquery-1.4.4.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>
I use:
#using (Ajax.BeginForm(new AjaxOptions {OnComplete = "AddPostComplete"}))
{
//some code
}
and
<script type="text/javascript">
$('#asdf').click(function () {
//some code
});
</script>
the js function isn't used, and the page return full view.
With unobtrusive javascript enabled you will also need to include jquery.unobtrusive-ajax.min.js

Using the jQuery plugin ColorBox in noConflict() mode

I am using the jQuery plugin ColorBox in a Joomla! theme, and am having a hard time getting it to work in noConflict() mode. I have the following code that calls my jQuery and the noConflict(); call, followed by my actual jQuery markup:
<script type="text/javascript" language="javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" language="javascript">jQuery.noConflict();</script>
<script type="text/javascript" language="javascript" src="PATH TO COLORBOX"></script>
<script type="text/javascript" language="javascript">
jQuery(document).ready(function(){
jQuery('a.colorbox').colorbox();
})
</script>
However, I simply cannot get it to work under noConflict() mode. when disabling the no conflict mode it works no worries, but then the associated Mootools scripts in Joomla do not work.
Can someone point me in the right direction here?
Much Appreciated,
Simon
It turned out that after all of this, it was related to the order in which Joomla! was calling scripts. So for all those who stumble across the same issue, your script calls must all be called AFTER Joomla! include head tag, like follows:
<jdoc:include type="head" />
<script type="text/javascript" language="javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" language="javascript">jQuery.noConflict();</script>
<script type="text/javascript" language="javascript" src="<?php echo JURI::base(); ?>templates/helen-o-grady/js/jquery.colorbox-min.js"></script>
<script type="text/javascript" language="javascript">
jQuery(document).ready(function(){
jQuery('a.colorbox').colorbox({iframe:true, width:900, height:650});
})(jQuery)
</script>
Here is answer: How to use no conflict for two types of jquery scripts.
I have fixed this way:
<script type="text/javascript">
var jQuery1_10_2 = $.noConflict(true);
jQuery1_10_2 (document).ready(function() {
jQuery1_10_2 (".video-popup").colorbox({iframe:true, innerWidth:850, innerHeight:509, fixed:true});
});
</script>
here .video-popup is my popup wrapper class. change it.

Resources