CODEWITHSUNDEEP
asp.net-mvc-4asp.net-ajax
user1104203
user1104203

Reputation: 167

Press submit on Ajax Form from javascript / jquery timer

I would like to automatically click the submit button of an Ajax enabled form, so that the user does not have to click the button (but can optionally).

Right now, I'm working on the first boundary, which is to call the form from Javascript, so that at the very least, once i build my timer, I will have this part figured out.

I've tried many ways to do this, and NONE work. Please keep in mind that this is an ASP.NET MVC 4 Mobile application (which uses jquery.mobile) but I do have the jquery.mobile ajax disabled so that my button works at all (creating manual ajax based forms with updating divs, does not work in a jquery.mobile app because it hooks on the submit of all ajax forms).

So my current button works fine, I just can't seem to fire it programmatically.

I have my form:

<% using (Ajax.BeginForm("SendLocation", null, new AjaxOptions { InsertionMode = InsertionMode.Replace, UpdateTargetId = "result", HttpMethod = "POST" }, new { @id = "locationForm" }))
   { %>
<ul data-role="listview" data-inset="true">
    <li data-role="list-divider">Navigation</li>
    <li><%: Html.ActionLink("About", "About", "Home")%></li>
    <li><%: Html.ActionLink("Support", "Support", "Home")%></li>
    <li data-role="list-divider">Location</li>
    <%: Html.HiddenFor(model => model.GPSLongitude)%>
    <%: Html.HiddenFor(model => model.GPSLatitude)%>
    <li><input type="submit" id="submitButton" value="Send" /></li>
</ul>
<% } %>

I have tried to do this in javascript:

$.ajax({
                type: "POST",
                url: action,
                success: function () {
                    alert('success');
                }
            });

And I do get the server code firing that normally would. However, the DIV is not updated and also, the model was not intact either (it existed with all internal values null, so i assume newly instantiated).

I have also tried different ways to fire the form:

        var form = $('#locationForm', $('#myForm'));
        if (form == null) {
            alert('could not find form');
        } else {
            alert('firigin on form');
           form.submit(function (event) { eval($(this).attr("onsubmit")); return false; });
            form.submit();
        }

This did not work either:

        var f = $('#locationForm', $('#myForm'));
        var action = f.attr("action");
        var data = f.attr("data");
        $.post(action, data, function() { alert('back'); });

Which were all ways to do this that I found throughout the web.

None of them worked to fire the form and have it work the way it would normally as if a user had pressed the submit button themselves. Of course, once this fails, if I hit my submit button, it works perfectly...

Upvotes: 0

Views: 571

Answers (2)

user1104203
user1104203

Reputation: 167

Using Chrome Developer Tools, I found that the $.ajax call needs to have valid data before it will even attempt to function.

I was getting a silent Internal 500 Error on the post. But of course because of AJAX it was silent and the controller was not firing because it didn't get past IIS.

So I found out that the data I was sending, saying its JSON, was not and the .serialize() does not use JSON formatting. I tried to incorporate the JSON Javascript libraries to convert the object into JavaScript, however, this does not work either, because the Data Model object (or the form object) seems to not be compatible with those libraries. I would get errors in the JavaScript console and those libraries would crash when trying.

I decided to actually just pass the object I want manually:

var encoded = '{ GPSLongitude: ' + $('#GPSLongitude', $('#myForm')).val() + ',GPSLatitude: ' + $('#GPSLatitude', $('#myForm')).val() + '}';

Which passed the hidden fields i wanted to send (GPS LON/LAT) to the controller, and the model was intact in the controller call!

Now, for anyone that is reading this answer. the actual AJAX update process that is supposed to update the view, failed to work. Although for my purpose, I did not actually need the view to update correctly. Eventhough a partial view is returned, the special AJAX call seems to break the linkage between the form's div to update.

However, since the data was passed to the controller intact, this basically passed the GPS data that I needed to the server which was my ultimate goal.

Upvotes: 1

monkeyhouse
monkeyhouse

Reputation: 2896

make sure you are including the proper js libraries. you need. jquery.js, jquery.unobtrusive-ajax.js

make sure unobtrusivejavascriptenabled = true in the web.confg

  <appSettings>
     <add key="UnobtrusiveJavaScriptEnabled" value="true"/>
  </appSettings>

please try $('#locationForm').submit();

does it give error message? if you're using i.e. you can look use the develper tools to look at network traffic to make sure nothing is sent.

Upvotes: 0

Related Questions