Press submit on Ajax Form from javascript / jquery timer

Question

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...

user1104203 · Accepted Answer · 2013-06-14 20:27:40Z

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.

monkeyhouse · Accepted Answer · 2013-06-14 04:05:12Z

0

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.

answered Jun 14, 2013 at 4:05

monkeyhouse

2,8963 gold badges32 silver badges42 bronze badges

7 Comments

user1104203 Over a year ago

This does not work unfortunately. I do get a Post and the controller does update, however, the div is not updated correctly. Nothing happens to the page itself, that part is good. However, the part where it doesn't actually work is not so good.

user1104203 Over a year ago

If you notice in my solutions above, the one you provided is right there. So that already doesn't work.

monkeyhouse Over a year ago

so, is markup sent back? check network traffic to make sure that something is sent back response. Also, check the id that you replace the content with

monkeyhouse Over a year ago

does your controller return a partial view?

user1104203 Over a year ago

Yes it does. Remember also that the process works when I click using the mouse right. So the normal ajax process is already setup and works. All I'm trying to do is call this from javascript instead of having a user click the button. When I do, the process fails.

|

Collectives™ on Stack Overflow

Press submit on Ajax Form from javascript / jquery timer

2 Answers 2

Comments

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related