I'm really hoping someone can help. I just got over one big hurdle in my current project, only to hit another. I have a deadline fast approaching, so any advice would be very much appreciated.
I am developing a mobile application for iPad using MVC4 and Jquery Mobile. At a certain point in my app, the user will trigger a pop-up box, which contains "yes" and "no" buttons. If the user clicks "yes", I want to send some parameters to an action in my controller, do some database work, and then return a partial view (with updated model) that will be displayed in my main view. I have the following jquery that executes upon click of a href button that is inside a pop-up.
$(function () {
$("#popupSubmit").bind("tap", tHandler);
function tHandler(event) {
$.post('@Url.Action("LoadTestData", "WO")',
{TestKey: lblTestKey.innerHTML, TestRequestNumber: lblTestServiceRequestNum.innerHTML },
function (data) { $('#detailsDiv').html(data); $('#detailsDiv').trigger("create"); });
}
});
In the above code, #popupSubmit is the href button, LoadTestData is an Action that returns a partial view, WO is the Controller, and #detailsDiv is a placeholder div in the main view. TestKey and TestRequestNumber are parameters that must be passed to the Action. Below is the code for the Action, LoadTestData. _ShowTestPartial is the Partial View.
[HttpPost]
public ActionResult LoadTestData(string TestKey, string TestRequestNumber)
{
//do database work
return PartialView("_ShowTestPartial", model);
}
Now, all of this code works on my desktop in Safari. However, this DOES NOT work on the iPad. I've tested, and the code does make it into the tHandler event when the button is clicked on the iPad, but there's something about the URL.Action or about returning a partial view in this way that the iPad just doesn't like.
Does anyone know how to solve this issue for iPad?
Edit (additional info from comments): To be clear, the partial view isn't being rendered at all on iPad, but it is on desktop Safari (and in Chrome for that matter). I have tried replaced "create" with "pagecreate" but this actually took away the JQM styling in the desktop browers and didn't change anything about the iPad.
It also doesn't seem to matter where I place the bind function...I've tried it as a separate function. I've tried it in .ready() and in .on('pageinit'). In all of these cases, it works on desktop Safari and Chrome, but not on iPad.
Also, as I said before, the .bind("tap") works on iPad. I've tested by putting other code in the tHandler. However something in the .$post does not work on iPad.
Thank you Omar, and anyone else who has any ideas. All are welcome!
Edit # 2: On Omar's advice I moved my function to $(document).on('pageinit'). I also added error catching on the $.post. Updated code below:
$(document).on('pageinit', function () {
$("#popupSubmit").bind("tap", tHandler);
function tHandler(event) {
$.post('@Url.Action("LoadTestData", "WO")', { TestKey: lblTestKey.innerHTML, TestRequestNumber: lblTestRequestNum.innerHTML })
.done(function (data) { $('#detailsDiv').html(data); $('#detailsDiv').trigger("create"); })
.fail(function (xhr, textStatus, errorThrown) { alert(xhr.responseText); })
}
});
Fortunately, this enabled me to see the error occurring on the iPad. Unfortunately, the error coming out of $.post is "An unknown error occurred while processing your request". Everything is still running smoothly on the desktop browsers with this code.
It turns out the answer was that, on the iPad the parameters were not getting passed to $.post. lblTestRequestNum and lblTestKey are labels on my JQM popup dialog box. See below:
<div data-role="popup" id="popupDialog" 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>Selection <label id="lblTestRequestNum" style="text-align:left; height:22px; font-size:14px;">@Model.TestRequestNumber</label></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?</h3>
<label id="lblTestKeyLabel" style="text-align:left; height:22px; font-size:14px; margin-left:95px;">Test Key: </label>
<label id="lblTestKey" style="text-align:left; height:22px; font-size:14px;"></label>
<label id="lblTestType" style="text-align:left; height:22px; font-size:14px; margin-left:95px;"></label>
<a id="popupSubmit" data-role="button" data-inline="true" data-rel="back"
data-mini="true" data-theme="b" style="width:150px;" type="submit">Yes</a>
<a href="#" data-role="button" data-inline="true" data-rel="back"
data-mini="true" data-transition="flow" data-theme="b" style="width:150px;">No</a>
</div>
</div>
On the desktop, Safari was able to retrieve the parameters I needed from the labels in the popup. But on iPad, it could not. So, I simply found places outside of the pop-up, in my main view to display/retrieve my parameters from. Lesson learned: Don't expect iPad to be able to read anything from labels/inputs inside your pop-up dialog.