Weird double post call in sitefinity

Question

I have a very weird problem. Let's say I have two same forms/widgets on the same page , this is the code for the form:

<form>


  <input class="form-group" type="text" title="FirstName" name="FirstName" id="FirstName" /><br />
  <input class="form-group" type="text" title="LastName" name="LastName" id="LastName" /><br />
  <input class="form-group" type="tel" title="PhoneNumber" name="PhoneNumber" id="PhoneNumber" /><br />
  @Html.DropDownListFor(m => m.HearingID, Model.Hierings, new { @id = "HearingID", @class = "form-group" })<br />
  @Html.DropDownListFor(m => m.ConnectTypeID, Model.ConnectTypes, new { @id = "ConnectTypeID", @class = "form-group" })<br />
  <input type="button" value="Save" id="@buttonid" />



</form>

And the following js sends an ajax request.

<script type="text/javascript">
    $(document).ready(function () {

        $("form").submit(function (e) {
            debugger;
            e.preventDefault();

            var form = $("form");
            $.ajax({
                type: "POST",
                url: jQuery(location).attr('pathname') + '/Save/',
                data: form.serialize(),
                error: function (xhr, status, error) {
                    alert("Error");
                },
                success: function (e) {

                }
            });

        });
        return false;
    });


</script>

By the laws of logic it should send the post request one time, but for some weird reason the number of calls correlates with the number of forms on the page. So if I have two forms - it sends the request two times. I tried everything, even giving the form a unique id, and yet still - two requests. The JS isn't working two times, the JS works one time but it still sends the request two times, and I can't figure out why.

When you gave your form a unique ID did you update your Javascript to reflect that? Specifically the code $("form").submit to $("#
").submit . My guess would be that simply putting form in your jquery binds all forms elements, where as you need it to be a specific form. — Bearcat9425, Mar 15 '16 at 13:17
Yeah I did. Still did it two times. It submits the same form multiple times, it does not submit the other forms. — Dave Demirkhanyan, Mar 15 '16 at 13:18
I am seeing you are using a button as your submit trigger, try returning False inside the $("form").submit function and not just in your document ready. Took that from here http://stackoverflow.com/questions/20195483/jquery-ajax-form-submits-twice — Bearcat9425, Mar 15 '16 at 13:21
You see, the problem is that the JS is working only one time, I checked that. The problem is somehow on the server side. — Dave Demirkhanyan, Mar 15 '16 at 13:29
Then you need to post some of your server side code. All that's on here is your Razor and JS. Without knowing what it looks like no one on here will be able to assist. Typically when you are getting double posts as you are describing its "usually" a client side issue. — Bearcat9425, Mar 15 '16 at 13:37

score 1 · Answer 1 · answered Mar 16 '16 at 10:40

I think you should give your form a unique ID which is generated on the server. In this way, when you drag your widget twice on the page, it will be rendered with different IDs, and moreover the jQuery selector will look for the form with the right ID. Following is a sample code of how I managed to get only one submit when I drag the widget two times on the page:

@{
    // generate ID on the server
    string formId = System.Guid.NewGuid().ToString();
}
<form id="@formId">
    ...
</form>
<script type="text/javascript">
    $(document).ready(function () {

        $('#' + '@formId').submit(function (e) {
            // code here
        });
    });
</script>

Weird double post call in sitefinity

1 Answers1