Search jQuery

jQuery Forum

Screen name:
theandybob

theandybob's Profile

3 Posts

2 Responses

0 Followers

Activity Trend

Last 30 days

Loading Chart...

Show:

Expanded view
List view

Search Bar for separate UL
[0Replies]
- 18-Nov-2012 09:04 PM
- Forum: jQuery Mobile
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:
2. <body>
4. 
5. <div data-role="page" id="storeHome">
7. <div data-role="header" data-theme="b" id="storeHeader" >
8. <a href="Home.html" class="ui-btn-left" rel="external" data-icon="back" data-add-back-btn="true" >Back</a>
9. <h1>Choose Store</h1>
10. </div>
13. <input type="text" id="searchStoreBar" placeholder="Search Stores">
16. <ul data-role="listview" data-autodividers="false" id="storeList">
18. <li class="opt" id="recentStores"><a href="#storesPage" data-transition="slide">Recent Stores</a></li>
20. <li class="opt" id="localStores"><a href="#storesPage" data-transition="slide" >Local Stores</a></li>
22. <li class="opt" id="allStores"><a href="#storesPage" data-transition="slide">All Stores</a></li>
23. </ul>
27. <div data-role="footer" data-theme="c" class="ui-bar" data-position="fixed" style="padding:0;">
28. <a href="Home.html" class="ui-btn-left" data-icon="ROER-burrisLogo" data-iconpos="notext"></a>
29. <h4>Prototype</h4>
30. <p class="ui-btn-right"><img data-inline="true" src="img/ROERLogo-03.png" width="40" height="34"></p>
31. </div>
34. </div>
36. <div data-role="page" id="storesPage">
38. <div data-role="header" data-theme="b" id="storeHeader" >
39. <a href="#" class="ui-btn-left back" data-rel="back" data-icon="back" id="backBtn" data-add-back-btn="true" >Back</a>
40. <h1>Choose Store</h1>
41. </div>
43. 
44. <ul data-role="listview" id="storesUL" data-autodividers="true" data-divider-theme="d" data-filter="true">
45. 
49. 
50. </ul>
51. <div data-role="footer" data-theme="c" class="ui-bar" data-position="fixed" style="padding:0;">
52. <a href="Home.html" class="ui-btn-left" data-icon="ROER-burrisLogo" data-iconpos="notext"></a>
53. <h4>Prototype</h4>
54. <p class="ui-btn-right"><img data-inline="true" src="img/ROERLogo-03.png" width="40" height="34"></p>
55. </div>
57. </div>
59. </body>
And here is the javascript/jquery code:
2. $(document).ready(function() {
3. User.loadSession(function(){
5. $("#backBtn").click(function() {
6. $("#storesUL").empty();
7. //TODO Empty other store UL's
8. });
10. $("#recentStores").click(function() {
11. Customer.getRecentStores(function(stores){
12. for(var i = 0; i < stores.length; i++){
13. $("#storesUL").append('<li class="store" id="' + stores[i].id + '"><a data-transition="slide" data-filter="false">' + stores[i].fullname + '</a></li>');
14. }
15. $("#storesUL").listview("refresh");
16. });
17. });
19. $("#localStores").click(function() {
20. Customer.getLocalStores(13, 12, function(stores){
21. for(var i = 0; i < stores.length; i++){
22. $("#storesUL").append('<li class="store" id="' + stores[i].id + '"><a data-transition="slide">' + stores[i].fullname + '</a></li>');
23. }
24. $("#storesUL").listview("refresh");
25. });
26. });
28. $("#allStores").click(function() {
29. Customer.getAllStores(function(stores){
30. for(var i = 0; i < stores.length; i++){
31. $("#storesUL").append('<li class="store" id="' + stores[i].id + '"><a data-transition="slide" data-filter="false">' + stores[i].fullname + '</a></li>');
32. }
33. $("#storesUL").listview("refresh");
34. });
35. });
37. $("#searchStoreBar").keyup(function(){
38. //TODO: Search all stores
41. //alert("pressed key");
42. /*Customer.getAllStores(function(stores){
43. window.location="#storesPage";
44. for(var i = 0; i < stores.length; i++){
45. $("#storesUL").append('<li class="store" id="' + stores[i].id + '"><a data-transition="slide" >' + stores[i].fullname + '</a></li>');
46. }
47. $("#storesUL").listview("refresh");
50. });*/
52. });
54. $("#localStoresUL").on("click", ".store" ,function() {
55. //alert("store clicked");
56. var storeId = this.id;
58. new Order(storeId, function(){
59. window.location = "Orders/NewOrder.html";
60. });
61. });
63. $("#recentStoresUL").on("click", ".store" ,function() {
64. //alert("store clicked");
65. var storeId = this.id;
67. Order = new Order(storeId, function() {
68. window.location = "Orders/NewOrder.html";
69. });
71. });
73. $("#allStoresUL").on("click", ".store" ,function() {
74. //alert("store clicked");
75. var storeId = this.id;
77. new Order(storeId, function(){
78. window.location = "Orders/NewOrder.html";
79. });
80. });
81. });
82. });
And a good screen is always nice to see to try and get a visual.
Thanks for any help y'all can give!

Styling Dynamically Added Content
[2Replies]
- 13-Nov-2012 01:23 PM
- Forum: jQuery Mobile
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:
1. <ul data-role="listview" id="localStoresUL" data-autodividers="true" data-divider-theme="d">
3. </ul>
I have a list item somewhere else that is clicked and loads this up with data, and I am doing that with the following code:
1. $("#localStores").click(function() {
2. Customer.getLocalStores(13, 12, function(stores){
3. for(var i = 0; i < stores.length; i++){
4. $("#localStoresUL").append('<li class="store" id="' + stores[i].id + '"><a data-transition="slide" data-filter="false">' + stores[i].fullname + '</a></li>');
5. }
6. });
7. });
Now this works all fine and dandy the first time the user clicks the link and it populates that <ul>. But I have a back button on the page using this code:
1. <a href="#" class="ui-btn-left back" data-rel="back" data-icon="back" data-add-back-btn="true" >Back</a>
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?

Headers and Footers with <li> click transitions
[2Replies]
- 29-Oct-2012 05:48 PM
- Forum: jQuery Mobile
Hello,
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.
2. <!DOCTYPE html>
4. <html>
5. <head>
6. <link rel="stylesheet" type="text/css" href="../js/lib/jquery.mobile-1.2.0/jquery.mobile-1.2.0.css">
7. <link rel="stylesheet" type="text/css" href="../css/NewProduct.css">
8. <script type="text/javascript" src="../js/lib/jquery-1.8.1.js"></script>
9. <script type="text/javascript" src="../js/lib/jquery.mobile-1.2.0/jquery.mobile-1.2.0.js"></script>
10. <script type="text/javascript" src="../js/config/config.js"></script>
11. <script type="text/javascript" src="../js/objects/database.js"></script>
12. <script type="text/javascript" src="../js/objects/session.js"></script>
13. <script type="text/javascript" src="../js/globals.js"></script>
14. <script type="text/javascript" src="../js/views/NewProduct.js"></script>
16. <title>New Product</title>
17. </head>
19. <body>
20. <div data-role="page">
22. <div data-role="header" data-theme="b" >
23. <a href="#" class="ui-btn-left" data-rel="back" data-icon="back" data-add-back-btn="true" >Back</a>
24. <h1>New Product</h1>
25. </div>
28. <input type="search" name="search" id="searchProducts" value="" data-mini="false" placeholder="Product or UPC"/>
30. <ul data-role="listview" data-autodividers="true" data-divider-theme="d">
32. <li><a id="kraft" data-transition="slide">Kraft</a>
34. <ul data-role="listview" data-autodividers="true" data-divider-theme="d">
36. <li><a id="kraft-Dairy" data-transition="slide">Dairy</a>
38. <ul data-role="listview" data-autodividers="true" data-divider-theme="d">
40. <li><a id="kraft-Dairy-SqueezyCheesy">Squeezy Cheesy</a></li>
42. <li><a id="kraft-Veggies-WholeMilk">Whole Milk</a></li>
43. </ul>
45. </li>
47. <li><a id="kraft-Veggies" data-transition="slide">Veggies</a></li>
49. </ul>
51. </li>
53. <li><a id="nestle" data-transition="slide">Nestle</a></li>
55. <li><a id="pillsbury" data-transition="slide">Pillsbury</a></li>
56. </ul>
58. <div data-role="footer" data-theme="c" class="ui-bar" data-position="fixed" style="padding:0;">
59. <a href="#" class="ui-btn-left" data-icon="ROER-burrisLogo" data-iconpos="notext"></a>
60. <h4>Prototype</h4>
61. <p class="ui-btn-right"><img data-inline="true" src="../img/ROERLogo-03.png" width="40" height="34"></p>
62. </div>
65. </div>
66. </body>
67. </html>

«Prev
Next »

Response title

Attachments

jQuery Forum

Activity Trend