This is hard to sum up in the title. I’m using CodeIgniter with jQuery Mobile. I have a page(index.php) with a dropdown list which submits the form when clicked (onChange).
<select name="organiser_dropdown" onchange="this.form.submit()">
It works fine. So it brings me to the next page (view_events) with no problems. However, when I press the ‘back’ button on the mobile (Samsung Galaxy S Plus), and select an option from the dropdown list in index.php, the form submits, I go to the correct page (view_events) with the correct information, and then it brings me back to the page with the dropdown list.
There are no redirects and the code logic seems to be correct. When I test it in the desktop browser, everything works as normal.
I’m almost certain that the problem is that the phone is caching the page so when I click back to index.php, it doesn’t reload the page, and somehow this is breaking it? I think it’s caching because the page doesn’t seem to take time to reload.
I have used a submit button instead of the onChange() function, and everything works as normal. That also indicates that it’s an issue with caching.
I used jQuery to listen for the onChange event and to submit the form by clicking a hidden button. It worked without problems, but it loaded the page with the dropdown list still appearing on the phone GUI. This would seem a bit weird for usability reasons, if I was to kepe this as an option.
It’s not a native phone App, it’s a mobile website.
In CodeIgniter, the controller is using a function with 1 parameter which is the selected item from the dropdown list:
public function view_events($organiser_type = '') {...}
When the *$organiser_type* is not sent through the url, I have a piece of code which retrieves the value from the POSTed form:
if($this->input->post('organiser_dropdown')) {
$organiser_type = $this->input->post('organiser_dropdown');
}
I have kind of figured out the problem here. I think that jQuery Mobile is not fully executing the index.php page once i press the back button on the phone.
I put this in all my links to force a page load without ajax:
More information regarding this can be found here: http://jquerymobile.com/test/docs/pages/page-links.html