Hello, So let me explain the setup i'm shooting for, that way you understand the method to my madness. I have a page that allows the user to select different list items (options for Recent stores, Local stores, and All stores). When the user clicks on one of those list items, the page dynamically adds content to a different ul that is revealed on the page. And in that dynamically added ul, via the data-filter="true" the user can search that particular ul (whatever the user clicked, either recent, local, or all). That all works fine. Now my goal is to have a search bar that will search all the stores from the original page (the one that shows recent, local, and all stores). Trouble is that the data-filter="true" addition just filters what's inside that particular ul. I want a search bar that will search the separate ul.
The reason I have my ul's separate is because I have a header and a footer that don't transfer nice (as in they don't come over at all) with how JQuery handles transitions down to lower list items. So each of my three original ul's point to a different part of the page (multipage document) that contains an area for loading the dynamic data.
That's kind of a long winded explanation, hopefully it made sense. Here is my code:
<!-- Start of first page (Shows Store Options) -->
So I've looked online in this issue, but can't seem to find the answer. Let me explain my problem fully. I'm trying to dynamically add content to an <ul> and have it all formatted correctly. What I'm inserting to is this:
And when the user clicks this back button and then clicks on the previous <li> again (which should populate the <ul>) the content is loaded dynamically, but not formatted at all. I have no idea why this is happening. Does this problem make sense, and does anybody have any tips for how to fix it?
So I'm new to JQuery mobile, and so I'm still trying to firmly grasp how it deals with pages.
What I'm trying to do is have an unordered list <ul> with list items <li> under to make a kind of hierarchy menu. I have a header and a footer in the page that I want to stay even when the user clicks on one of the list items.
What JQuery mobile is doing is creating a new header with a title of clicked list item, and then showing subsequent lists. What I want to do is keep that original header and footer even when the user clicks on the list item. How can I do this? Here is my code.