StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POSimple MVC4 unobtrusive ajax not working
primarykey
Id
17974825
data
AcceptedAnswerId
17979511
AnswerCount
1
ClosedDate
CommentCount
3
CommunityOwnedDate
CreationDate
2013-07-31T15:40:43.747
FavoriteCount
0
LastActivityDate
2013-10-02T08:30:09.150
LastEditDate
LastEditorUserId
0
OwnerUserId
1617407
ParentId
0
PostTypeId
1
Score
0
ViewCount
3238
LastEditorDisplayName
text
Body
<p>I am writing a very simple MVC4 test page and unobtrusive Ajax does not seem to be working. When I click my submit Button the page is not submitted. </p> <p>I have a breakpoint is VS and can tell there is no request.</p> <p>I am using Firefox and when I click the submit button the Web Console shows this JavaScript error:<br/> --- Empty string passed to getElementById()</p> <p>Which occurs at line 16 in.<br/>--- jquery.unobtrusive-ajax.js</p> <p><br/><br/></p> <p>I setup ajax Options as follows:<br/></p> <pre><code>AjaxOptions ajaxOpts = new AjaxOptions { UpdateTargetId = "officeList", Confirm = "Are you sure?", Url = Url.Action("GetOfficeData") }; </code></pre> <p>Here is my AjaxForm:<br/></p> <pre><code>@using (Ajax.BeginForm("GetOfficeData", ajaxOpts)) { <div> @Html.DropDownList("orgList", new SelectList(Model.Organizations, "ORGID", "ORGNAME")); <button type="submit" id="btnSubmit">Submit</button> </div> } </code></pre> <p>I do get the 'Are you sure prompt' when I click the submit button (as defined in the ajax options).<br /> <br /> <br /></p> <p>If I change Ajax.BeginForm to:<br/></p> <pre><code>@using (Html.BeginForm()) ... </code></pre> <p>Then there is a request, my breakpoints get hit, and there as no JS errors. <br /><br /><br /></p> <p>I have used NuGet to get the latest version of both jQuery and unobtrusive-ajax. Here are my script tags from view source (all of them – in order): <br/></p> <pre><code><script src="/Scripts/jquery-2.0.3.js"></script> <script src="/Scripts/DataTables-1.9.4/media/js/jquery.dataTables.js"></script> <script src="/Scripts/jquery.unobtrusive-ajax.js"></script> <script src="/Scripts/jquery.validate.js"></script> <script src="/Scripts/jquery.validate.unobtrusive.js"></script> <script src="/Scripts/modernizr-2.5.3.js"></script> </code></pre> <p><br /><br /><br /> Here is the form that gets rendered:</p> <pre><code><form action="/Selectee/GetOfficeData" data-ajax="true" data-ajax-confirm="Are you sure?" data-ajax-mode="replace" data-ajax-update="#officeList" data-ajax-url="/Selectee/GetOfficeData" id="form0" method="post"> <div> /*--my drop down ..... <br /> <button type="submit" id="btnSubmit">Submit</button> </div> </form> </code></pre> <p><br /><br /><br /> Any ideas?</p>
Tags
<asp.net-mvc-4><ajax.beginform><unobtrusive><unobtrusive-ajax>
Title
Simple MVC4 unobtrusive ajax not working
singulars
PostAcceptedAnswerId
1. PO
  singulars
  PostTypePostTypeId
  PTAnswer
PostParentId
1. This table or related slice is empty.
PostTypePostTypeId
1. PTQuestion
UserLastEditorUserId
1. This table or related slice is empty.
UserOwnerUserId
1. USDon Chambers
plurals
PostLinksPostIdRelatedPostId
1. This table or related slice is empty.
PostLinksRelatedPostIdPostId
1. This table or related slice is empty.
PostsAcceptedAnswerId
1. This table or related slice is empty.
PostsParentIdCreationDate
1. PO
  singulars
  PostTypePostTypeId
  PTAnswer
VotesPostIdCreationDate
1. This table or related slice is empty.
CommentsPostId

Querying!

Guidance

A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.