Welcome Guest ( Log In | Register )

Outline · [ Standard ] · Linear+

 Jquery's library list view, how to generate dynamically?

views
     
TSragk
post Nov 10 2015, 08:08 PM, updated 9y ago

BooBoo~
*******
Senior Member
2,265 posts

Joined: Apr 2009


Hi,
i'm trying to create dynamic listview with Jquery widget, in the image, the top list view 'dynamic list' was from my code, and the bottom 'Original List' was the original code from jquery widget example.

My code
» Click to show Spoiler - click again to hide... «

Original Code
» Click to show Spoiler - click again to hide... «


HTML generated from both code:
My Code
» Click to show Spoiler - click again to hide... «


Original Code:
» Click to show Spoiler - click again to hide... «


For the original result, can see that's additional class added on which is not inside the original code, where my dynamic code just presented as how its look like literally. How to get those additional class to attach on it? If i copy the class and attach by my self doesn't seems proper? Since its generated automatically from the example.

This post has been edited by ragk: Nov 11 2015, 11:58 AM


Attached thumbnail(s)
Attached Image
exhauster
post Nov 11 2015, 01:44 PM

Casual
***
Junior Member
427 posts

Joined: Sep 2006
From: KK



QUOTE(ragk @ Nov 10 2015, 08:08 PM)
Hi,
i'm trying to create dynamic listview with Jquery widget, in the image, the top list view 'dynamic list' was from my code, and the bottom 'Original List' was the original code from jquery widget example.

For the original result, can see that's additional class added on which is not inside the original code, where my dynamic code just presented as how its look like literally. How to get those additional class to attach on it? If i copy the class and attach by my self doesn't seems proper? Since its generated automatically from the example.
*
From your code, I can see that you populate your list in your "Body's onload"


Since you are using jQuery widget, I assume you call your jquery list init function in your document ready whereas your list is populate only after the onload
So that means, jquery widget scan through your list and append the class on each child element for its widget to work. But since your list is empty at the moment of ready, so it doesn't append any class

Kindly refer to the bottom links and get an idea of onload vs document ready
http://stackoverflow.com/questions/4395780...nload-and-ready

To solve your problem, just remove your generateList from body's onload and append before your jQuery widget initialization
TSragk
post Nov 11 2015, 03:16 PM

BooBoo~
*******
Senior Member
2,265 posts

Joined: Apr 2009


QUOTE(exhauster @ Nov 11 2015, 01:44 PM)
From your code, I can see that you populate your list in your "Body's onload"
Since you are using jQuery widget, I assume you call your jquery list init function in your document ready whereas your list is populate only after the onload
So that means, jquery widget scan through your list and append the class on each child element for its widget to work. But since your list is empty at the moment of ready, so it doesn't append any class

Kindly refer to the bottom links and get an idea of onload vs document ready
http://stackoverflow.com/questions/4395780...nload-and-ready

To solve your problem, just remove your generateList from body's onload and append before your jQuery widget initialization
*
sound legit, thx for the explanation, will look into it notworthy.gif
TSragk
post Nov 12 2015, 12:31 AM

BooBoo~
*******
Senior Member
2,265 posts

Joined: Apr 2009


QUOTE(exhauster @ Nov 11 2015, 01:44 PM)
From your code, I can see that you populate your list in your "Body's onload"
Since you are using jQuery widget, I assume you call your jquery list init function in your document ready whereas your list is populate only after the onload
So that means, jquery widget scan through your list and append the class on each child element for its widget to work. But since your list is empty at the moment of ready, so it doesn't append any class

Kindly refer to the bottom links and get an idea of onload vs document ready
http://stackoverflow.com/questions/4395780...nload-and-ready

To solve your problem, just remove your generateList from body's onload and append before your jQuery widget initialization
*
Is this the only thing i need to add in javascript part?
CODE
$(document).ready(generateList);

it load without the body onload event, but the result still the same:-/
Am i using the right method to load in the class and attribute?

This post has been edited by ragk: Nov 12 2015, 12:37 AM
exhauster
post Nov 12 2015, 03:14 AM

Casual
***
Junior Member
427 posts

Joined: Sep 2006
From: KK



QUOTE(ragk @ Nov 12 2015, 12:31 AM)
Is this the only thing i need to add in javascript part?
CODE
$(document).ready(generateList);

it load without the body onload event, but the result still the same:-/
Am i using the right method to load in the class and attribute?
*
Yes that's the correct way however there is still 1 step you missed out.

You are creating another document ready call to execute that list population. You should find out where is your jQuery widget initialization is and put that generateList before it. Just 1 sentence before will do as it will create those Li elements and then jQuery widget initialized and add those class respectively.

If you are not sure where it is located, maybe post your entire HTML code with those header included
TSragk
post Nov 12 2015, 09:59 PM

BooBoo~
*******
Senior Member
2,265 posts

Joined: Apr 2009


QUOTE(exhauster @ Nov 12 2015, 03:14 AM)
Yes that's the correct way however there is still 1 step you missed out.

You are creating another document ready call to execute that list population. You should find out where is your jQuery widget initialization is and put that generateList before it. Just 1 sentence before will do as it will create those Li elements and then jQuery widget initialized and add those class respectively.

If you are not sure where it is located, maybe post your entire HTML code with those header included
*
Hi, this is my html code. Thx notworthy.gif

CODE
<head>
  <base href="file:///C:/Users/W7/Desktop/sample/js%20+%20jq%20-%20dynamic%20list%20with%20jq/index.html">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0">
  <link rel="stylesheet" type="text/css" href="css/profile.css">
  <link rel="stylesheet" href="js/jquery.mobile-1.4.4.min.css">
  <script src="js/jquery.js"></script>
  <script src="../_assets/js/index.js"></script>
  <!-- <script src="https://code.jquery.com/jquery-1.9.1.min.js"></script> -->
  <script src="js/jquery.mobile-1.4.4.min.js"></script>
  <script type="text/javascript">
     $( generateList);
     
     function generateList()
     {
      var YourArray = ['United States', 'Canada', 'Argentina'];
               var ObjUl = $('<ul></ul>');
               for (i = 0; i < YourArray.length; i++)
               {
                   var Objli = $('<li></li>');
                   var Obja = $('<a></a>');
                   var Objh2 = $('<h2></h2>');
     
                   ObjUl.attr("data-role", "listview");
                   ObjUl.attr("data-split-theme", "a");
                   ObjUl.attr("data-inset", "true");
     
                   Obja.attr("href", "#");
     
                   Objh2.text(YourArray[i]);
                   Obja.append(Objh2);
     
                   Objli.append(Obja);
                   ObjUl.append(Objli);
               }
               $('#list').append(ObjUl);
     }
     
  </script>  
  <title></title>
</head>
<body class="ui-mobile-viewport ui-overlay-a">
  <div style="min-height: 763px;" class="ui-page ui-page-theme-a ui-page-active" tabindex="0" data-url="/C:/Users/W7/Desktop/sample/js + jq - dynamic list with jq/index.html" data-role="page">
     <div id="header">
     </div>
     <div id="body">
        <div class="ui-collapsible ui-collapsible-inset ui-corner-all ui-collapsible-themed-content ui-collapsible-collapsed" data-role="collapsible">
           <h3 class="ui-collapsible-heading ui-collapsible-heading-collapsed"><a href="#" class="ui-collapsible-heading-toggle ui-btn ui-icon-plus ui-btn-icon-left ui-btn-inherit">Dynamic List<span class="ui-collapsible-heading-status"> click to expand contents</span></a></h3>
           <div aria-hidden="true" class="ui-collapsible-content ui-body-inherit ui-collapsible-content-collapsed">
              <button class=" ui-btn ui-shadow ui-corner-all" type="button">Edit</button>
              <div id="list">
                 <ul data-inset="true" data-split-theme="a" data-role="listview">
                    <li>
                       <a href="#">
                          <h2>United States</h2>
                       </a>
                    </li>
                    <li>
                       <a href="#">
                          <h2>Canada</h2>
                       </a>
                    </li>
                    <li>
                       <a href="#">
                          <h2>Argentina</h2>
                       </a>
                    </li>
                 </ul>
              </div>
           </div>
        </div>
     </div>
  </div>
  <div class="ui-loader ui-corner-all ui-body-a ui-loader-default">
     <span class="ui-icon-loading"></span>
     <h1>loading</h1>
  </div>
</body>


This post has been edited by ragk: Nov 12 2015, 09:59 PM
exhauster
post Nov 13 2015, 01:48 AM

Casual
***
Junior Member
427 posts

Joined: Sep 2006
From: KK



QUOTE(ragk @ Nov 12 2015, 09:59 PM)
Hi, this is my html code. Thx  notworthy.gif

*
Ok.. Now I get your meaning. Actually, you didn't even initialize the list widget yet. Previously, I thought that you already initialize it then only populate the list but it shows otherwise.

I did some changes to your code
-You don't have to create an element with its end tag in jQuery, it will do it for you. (e.g. var ObjUl = $('<ul>')wink.gif
refer to the code below.

CODE

<script type="text/javascript">
function generateList() {
 var YourArray = ['United States', 'Canada', 'Argentina'];
 var ObjUl = $('<ul>');
 
 for(var i = 0; i < YourArray.length; i++) {
  var Objli = $('<li>');
  var Obja = $('<a>');
  var Objh2 = $('<h2>');
 
  ObjUl.attr('data-role', 'listview');
  ObjUl.attr('data-split-theme', 'a');
  ObjUl.attr('data-inset', 'true');
 
  Obja.attr('href', '#');
 
  Objh2.text(YourArray[i]);
  Obja.append(Objh2);
 
  Objli.append(Obja);
  ObjUl.append(Objli);
 }
 
 $('#list').append(ObjUl);
}

$(function(){
 generateList();
 $("ul[data-role=listview]").each(function(){
  $(this).listview();
 });
});
</script>
<body bgcolor=white>
<div id="body">
 <div data-role="collapsible">
  <h3>Dynamic List</h3>
  <button type="button">Edit</button>
  <div id = "list"></div>
 </div>
</div>
</body>

TSragk
post Nov 14 2015, 01:12 AM

BooBoo~
*******
Senior Member
2,265 posts

Joined: Apr 2009


QUOTE(exhauster @ Nov 13 2015, 01:48 AM)
Ok.. Now I get your meaning. Actually, you didn't even initialize the list widget yet. Previously, I thought that you already initialize it then only populate the list but it shows otherwise.

I did some changes to your code
-You don't have to create an element with its end tag in jQuery, it will do it for you. (e.g. var ObjUl = $('<ul>')wink.gif
refer to the code below.
*
Great, its working now, tqvm rclxms.gif
But i dont really understand how this part logically work yet
CODE
  $("ul[data-role=listview]").each(function(){
  $(this).listview();
  });

Whats the key to Google for these tutorial/guide?

This post has been edited by ragk: Nov 14 2015, 01:13 AM
exhauster
post Nov 14 2015, 02:08 AM

Casual
***
Junior Member
427 posts

Joined: Sep 2006
From: KK



QUOTE(ragk @ Nov 14 2015, 01:12 AM)
Great, its working now, tqvm  rclxms.gif
But i dont really understand how this part logically work yet
CODE
  $("ul[data-role=listview]").each(function(){
  $(this).listview();
  });

Whats the key to Google for these tutorial/guide?
*
Not sure which part you don't understand
Basically what that means is find all ul with data-role=listview then .each loop through all of it and perform the function (init jQuery listview)

Erm just find jQuery each?
Or maybe 'jQuery listview initialization' if you are mentioning the $(this).listview() part
TSragk
post Nov 14 2015, 04:15 PM

BooBoo~
*******
Senior Member
2,265 posts

Joined: Apr 2009


QUOTE(exhauster @ Nov 14 2015, 02:08 AM)
Not sure which part you don't understand
Basically what that means is find all ul with data-role=listview then .each loop through all of it and perform the function (init jQuery listview)

Erm just find jQuery each?
Or maybe 'jQuery listview initialization' if you are mentioning the $(this).listview() part
*
I'm guessing this part $("ul[data-role=listview]").each will loop for each li in it(or loop each of the class in it?)
, and each li (or class?) will be initial through this $(this).listview()? (this referring for the 'each' control looped?)

What i dun quiet understand the most is this part $(this).listview()
Is that a list of what syntax we shud use for the initialization?
Some example i found here https://jqueryui.com/
CODE
$( "#radio" ).buttonset();
$( "button:first" ).button();
$( "#datepicker" ).datepicker();

So this part is initializing the button? But these syntax to initialize is diff (or diff method, certain control like list require .each() to initial?), so what i need is to find them out right?

This post has been edited by ragk: Nov 14 2015, 04:17 PM
exhauster
post Nov 15 2015, 05:43 PM

Casual
***
Junior Member
427 posts

Joined: Sep 2006
From: KK



QUOTE(ragk @ Nov 14 2015, 04:15 PM)
I'm guessing this part $("ul[data-role=listview]").each will loop for each li in it(or loop each of the class in it?)
, and each li (or class?) will be initial through this $(this).listview()? (this referring for the 'each' control looped?)

What i dun quiet understand the most is this part $(this).listview()
Is that a list of what syntax we shud use for the initialization?
Some example i found here https://jqueryui.com/
CODE
$( "#radio" ).buttonset();
$( "button:first" ).button();
$( "#datepicker" ).datepicker();

So this part is initializing the button? But these syntax to initialize is diff (or diff method, certain control like list require .each() to initial?), so what i need is to find them out right?
*
$("ul[data-role=listview]") actually returns an array of object and the each is used to define what each object have to do.

so if say there are 3 <ul data-role="listview"></ul> declaredand each ul contain 5 li respectively, it will loop 3 times only not 5 because it is looping merely the UL

yes, the .listview() is how the listview widget initiailized (get to know from the documentation of jQuery listview).


TSragk
post Nov 15 2015, 06:39 PM

BooBoo~
*******
Senior Member
2,265 posts

Joined: Apr 2009


QUOTE(exhauster @ Nov 15 2015, 05:43 PM)
$("ul[data-role=listview]") actually returns an array of object and the each is used to define what each object have to do.

so if say there are 3 <ul data-role="listview"></ul> declaredand each ul contain 5 li respectively, it will loop 3 times only not 5 because it is looping merely the UL

yes, the .listview() is how the listview widget initiailized (get to know from the documentation of jQuery listview).
*
understand now, tqvm for all the clarification, thx notworthy.gif

 

Change to:
| Lo-Fi Version
0.0163sec    0.38    6 queries    GZIP Disabled
Time is now: 29th March 2024 - 06:12 AM