Question

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;
        });

Answer 1

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;
                    }
            };