I have a situation where the forms on my page disappear after a single submission of each form. For example, a log-in prompt displays (using Jquery Mobile) for username and password, the dialog box displays normally, the input is processed and validated, the main page is displayed upon successful login. However, if I logoff and then attempt to log back in again, only the page header is displayed. The input fields and the labels are not there.
I have another page where there is a single input field, text is entered into it, the $.post call is made, HTML is returned and a element is updated with the results using the $('#results').html(dataReceived) function call.
The form seems to be disappearing when the results are displayed. This is the page text:
<div data-role="page" id="Search" data-title="Search">
<div data-role="header" data-theme="e">
<h1>Search</h1>
</div>
<div data-role="content">
<form name="SearchForm" action="search.php">
SSN: <input type=number name="snum" size="9" value=""><br>
<input id="SearchButton" type="submit" value="Begin Search" data-inline="true">
</form>
<div id=SearchResults></div>
</div><!-- /content -->
</div><!-- /Search -->
I intercept the submit event of the form and handle it somewhere else. The code that sets the div contents in the call back function of the $.post AJAX call is:
$('#SearchResults').html(dataReceived);
General information: Most recent stable version of jquery and jquery mobile. This is a multi-page file. No external pages are called. Everything is done with $.post calls. The login form does not update any HTML, it simply receives the ID of the user and stores it in a variable.
Any help would be appreciated. Google has not been my friend in this.
Amended to show form submission code:
$(document).ready(function() {
$('form').submit(function(event) {
event.preventDefault();
var thisForm=$(this);
var formUrl=thisForm.attr('action');
var formName=thisForm.attr('name');
var dataToSend=thisForm.serialize();
var callBack=function(dataReceived) {
thisForm.hide();
switch(formName) {
case 'loginForm':
if (dataReceived.length>0 && parseInt(dataReceived)>0) {
loggingIn=0;
userId=parseInt(dataReceived);
$.mobile.changePage("#home");
break;
}
thisForm.show();
break;
case 'SearchForm':
$('#SearchResults').html(dataReceived);
break;
}
};
dataToSend += '&seid=' + SESSID;
var rtnType="html";
switch(formName) {
case "loginForm":
rtnType="text";
break;
case 'SearchForm':
break;
}
$.post(formUrl,dataToSend,callBack,rtnType);
return false;
});
You are hiding your forms on the submit callback function:
thisForm.hide();
For "loginForm" you are calling show() but for the "SearchForm" you are not calling show() on the form:
var callBack=function(dataReceived) {
thisForm.hide();
switch(formName) {
case 'loginForm':
if (dataReceived.length>0 && parseInt(dataReceived)>0) {
loggingIn=0;
userId=parseInt(dataReceived);
$.mobile.changePage("#home");
break;
}
thisForm.show();
break;
case 'SearchForm':
$('#SearchResults').html(dataReceived);
break;
}
};