pageinit does not work after form submit in jQuery Mobile.

It has been a horrible few days trying to tame jQuery Mobile, screaming and shouting in front of my computer.

In the end, a little basic html form solved my issues. Hope this little tips will save you all from brain damages.

I have two html page, “index.html” & “searchresult.html”.

1. “index.html” consist of 2 Sliders and a submit type button.

... all the other crap...
<form method="get" action="searchresult.html" >
<div data-role="collapsible" data-theme="b" data-content-theme="d">
<h3>Search Options</h3>
<fieldset class="ui-body-d">
<label for="g">Gender:</label>
<select id="g" name="g" data-role="slider" >
<option value="0">Male</option>
<option value="1">Female</option>
</select>
</fieldset>
</div>
<fieldset class="ui-grid-a">
<button data-theme="b" type="submit" aria-disabled="false" rel="external" data-ajax="false">Search</button>
</fieldset>
</form>
... all the other crap...

2. “searchresult.html” consist of a page that loads data via ajax call to a php web services.

<script type="text/javascript">
     $('div[data-role="page"]').live('pageinit', function() {         loadresult("#searchresult");             });
</script>

When click on the “Search” button on “index.html”, the form submit to this url “searchresult.html?g=0″, but the pageinit does not run at the first time. If you refresh the browser, the pageinit event will only run.

Tried changing the pageint to pagecreate, change the button to hyperlinks but still not working.

In the end, adding target=”_parent” to the form tags solved everything.

<form action="searchresult.html" method="get" target="_parent">