Submitting form from Jquery Mobile Pop-up

I am writing a web app for iPad using Jquery Mobile and ASP.NET MVC4.

I have a form in one of my views that looks like this:

@using (Html.BeginForm("UpdateClose", "WO", FormMethod.Post, new { id = "CloseForm" })) {
  <input type="hidden" name="idNumber" value="@Model.idNumber">              
  <a href="#popupCloseDialog" data-rel="popup" data-role="button" data-inline="true" data-position-to="window" data-transition="pop" style="width:96%; margin-top: 4px">Close</a>
}

The <a href> in the above form calls a pop-up dialog in that same view that looks like this:

<div data-role="popup" id="popupCloseDialog" data-overlay-theme="a" data-theme="b" data-dismissible="false"
    style="max-width:416px;" class="ui-corner-all">
        <div data-role="header" data-theme="a" class="ui-corner-top" >       
            <h1 class="ui-title" style="width:80%; margin-left:40px">Confirm</h1>        
        </div> 
        <div data-role="content" data-theme="a" class="ui-corner-bottom ui-content">      
            <h3 class="ui-title" style="text-align:center; height:22px;">Are you sure you want to close Order # @Model.idNumber?</h3>
            <br />                                             
            <a id="popupCloseSubmit" data-role="button" data-inline="true" data-rel="back"
            data-mini="true" data-theme="b" style="width:175px;" type="button">OK</a>
            <a href="#" data-role="button" data-inline="true" data-rel="back" 
                data-mini="true" data-transition="flow" style="width:175px; margin-left:10px" data-theme="b" >Cancel</a>                 
        </div>                   
</div> 

Note that this pop-up is outside of the "CloseForm".

I have simple jquery to submit "CloseForm" when a button inside the pop-up is clicked. Here it is:

$(document).on('pageinit', function () {
 $("#popupCloseSubmit").on("tap", pwHandler);
   function pwHandler(event) {
     try {
       $("#CloseForm").submit();
     }
     catch (e) {
       alert(e.Message);
     }
   }
});

Now, this works most of the time. The Dialog is called when the Close button in the form is clicked. Once the "popCloseSubmit" button is clicked inside the pop-up, CloseForm is submitted and code proceeds to the "UpdateClose" Action in the "WO" Controller. However, sometimes this process hangs up and the site just hangs there and does nothing. I've put event logging in my Controller Action and in my database, so I can confirm that when this "hang up" behavior occurs, the code is never advancing to the "UpdateClose" Action.

The inconsistency of this behavior is baffling to me. There seems to be no rhyme or reason why this is happening when it does.

Does anyone have any ideas? Is there another way I should be submitting a form from a jquery mobile pop-up?

Please note that I am only testing this on an iPad - because that's the only place we need to it to function. Thanks in advance for any pointers.

Answers


Full credit for this answer goes to @Omar, who suggested the solution. After much testing, I can say that this was the answer for me.

When the form submit would "hang up", it was because the form was trying to submit prior to the Jquery Mobile pop-up box closing. As @Omar pointed out, the URL changes when the pop-up is open.

Therefore my solution for this was to force the pop-up to close prior to the form submission.

Here's the code:

$(document).on('pageinit', function () {
 var srclicked;
 $("#popupCloseSubmit").on("tap", srsubHandler);

   function srsubHandler(event) {
       srclicked = true;
   }

   $("#popupCloseDialog").on("popupafterclose", pcHandler);

   function pcHandler(event) {
       if (srclicked) {
           $("#CloseForm").submit();
           srclicked = false;
        }
   }
});

So, the pop-up, #popupCloseDialog contains a submit button (#popCloseSubmit) and a cancel button. When the submit (#popupCloseSubmit) button is clicked, I flag a variable (srclicked) as true. The "popupafterclose" event fires every time #popupCloseDialog closes. So, when the pop-up closes, I check to see if the variable srclicked is true. If it is, I close the form (#CloseForm) and set the variable back to false.

I hope this helps someone else. Many, many thanks to @Omar for taking the time to talk this over with me in chat.


Need Your Help

Counting number of events per week in PHP

php mysql date count strtotime

I have a table which contains members signups and I would like to be able to start doing some charting and analysis on the data and look for signup trends etc so I would like to be able to plot a l...