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
Related
please can anyone help me with this problem that i've encountered. i'm able to capture a url parameter with javascript and i want to add it to my jquery code which calls a page in a div but i'm able to do it. here's my code:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script language="javascript" type="text/javascript">
function urlink()
{
var tlink = window.location.search.substring(1);
}
jQuery(function($){
$('#mydiv').load('real_news.asp?'+ urllink());
});
</script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script language="javascript" type="text/javascript">
function urlink()
{
return window.location.search.substring(1);
}
jQuery(function($){
$('#mydiv').load('real_news.asp?'+ urllink());
});
</script>
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".
I'm trying to load some views using ajax, and they are loading OK.
But the scripts they have, are not being loaded on the specific section. Why?
View code:
#model INTREPWEB.Models.BoardingViewModel
#{
ViewBag.Title = "Create";
if (IsAjax)
{
Layout = null;
}
}
#using (Html.BeginForm())
{
#Html.Partial("CreateEdit")
}
#section Scripts{
<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>
<script src="#Url.Content("~/Scripts/jquery-ui-timepicker-addon.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/intrep-datetime.js")" type="text/javascript"></script>
}
Because you are loading just a content like a plain text. Try to parse loaded content and invoke all your script references with $.getScript().
EDIT
As an alternative can be used:
$.ajax({
url: url,
dataType: 'script'
});
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 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.