I have a click handler on the submit button with preventDefault() and then it collects the values of all of the select menus. Works fine. If I change the value of any of the select menus and hit submit again, works fine.
However, if I hit the "back" button to a previous "page" and then return to the select menu and change the values, they are not updating properly and all I'm getting is the values of the last menus I submitted.
Now if I put a click handler on ul#containsMenus (see code above) and call:
The values will update properly and when you click submit the proper values will be sent.
So in essence, the select menu functions perfectly as long as you don't navigate away from the "page" it's on and return to it without calling refresh. I even tried calling:
But that didn't get the select menu functioning properly.
I'm not complaining but just trying to let you guys and gals know what I'm finding because I can't see how this would be the intended behavior. I love the nested list navigation but I'm finding all kinds of little bugs in the styling of certain elements (I've discussed these in other threads) and now this select menu issue and my code is starting to get littered with refreshes all over the place to get things to style and function properly when navigating around or adding dynamic content.
I wanted to put this out there and get some opinions on my methods because there's a lot of people having issues (myself included) with inserting dynamic content and then getting it properly styled. Here's what I've done, and what I've found works as of alpha 4.1:
I have an existing nested UL:
Now based on user input I want to dynamically insert a set of LI's into UL class="two", using ajax, which include form elements and collapsible content. After inserting the content I was having problems getting it to style and discovered that in order to style list items, you use listview("refresh"). But in order to style the collapsible content, you have to use page() on a parent item. So here's what I did:
After inserting the content dynamically, it isn't styled. Well, in order to style the LI elements, you call:
Now here's the part that I was hung up on - the collapsible content will not be styled - only the LI that contains them: class="placeholder". In order to style the collapsible content itself, you then have to call page() on the placeholder LI that contains it:
That is what I did, and that is currently what is working. I know others are having similar problems because normally the browser takes care of such things but as one very helpful forum member pointed out in a different thread, you aren't really just adding normal content to the DOM with jquery mobile, it's more like you're adding dynamic content to a widget and you have to re-initialize or refresh the widget. That explanation helped me a lot.
I would like some opinions regarding how fragile this code might be, and whether or not this may stop working in the near future as jquery mobile moves toward 1.0 final. I would also appreciate a bit of insight into the differences between listview() and page(), and why listview() doesn't style content contained within each LI. Lastly, any insights regarding the differences between using nested lists vs pages for navigation. It appears about the same visually to the user, but I was wondering about performance issues using too many levels of nested lists vs. creating different pages and passing variables between them.
Thanks so much. The amount of time, effort, and coding expertise involved in jquery, jquery ui, and jquery mobile is simply astounding and makes my head spin. I can't thank all of you guys and gals enough for what you've done for web development - it's truly amazing.
I will explain the issue, but I have the full working example and you'll see what I mean when you check it out. It's complicated to explain.
Ok, I've managed to add a collapsible div with an embedded form (just a textarea element and submit button) dynamically to a listview. To get it to style it properly, I tried calling listview() and listview('refresh') on the parent UL but that did nothing. Then I found calling page() on the parent UL styled the collapsible content div with the embedded form properly.
So far, so good.
I then added a click handler to the submit button with preventDefault() which then attempts to grab the value of whatever I typed into the textarea, but it keeps coming up undefined. I've tried everything I can think of.
All you have to do is choose "Arizona" on the "choose a state" menu and hit "go". Then click any truckstop on the list that comes up and on the next page you'll see a button that says "click to add content". Click that button and you'll see the new collapsible div appear below it with the textarea inside. Type something into that textarea and hit "submit" and I have console.log set to log the value of the textarea which keeps coming up undefined.