Languages

Menu
Sites
Language
List not getting displayed well when created dynamically

Hi,

I am trying to develop a web app, and trying to create a list dynalically and trying to add slider type of checkbox.

All this im trying on a jquery based app, and trying to update list <li> item dynamically. 

 

When I add below code directly on index.html it displays well, but when I add dynalically on main.js, it doesn't come up properly.

in index.html   

 <select id="flip-3" data-role="slider">
                  <option value='nope'>Nope</option>
                  <option value='yep'>Yep</option>
              </select>
  in main.js

"<li> <select  id='flip-3' data-role='slider'> <option value='nope'>Nope</option> <option value='yep'>Yep</option></select></li>"

 

Please help me how can I make it look same as it looks in index,html. 

Also the list created is having very big list items, as I am adding a image as well of 35 px.

 

<li> <a href="#"><img src="chrome.png" height="35"> hello</a>  </li> 

thanks.

Edited by: Gaurav Gupta on 04 Aug, 2015
List

Responses

5 Replies
Marco Buettner

Initialize the listview widget and refresh your list with listWidget.refresh()

pius lee

Just call slider after add tag.

$('select').slider();

Upper code make every select tag to slider.

If you don't want make every select to slider, use selector like it.

$('#flip-3').slider();

 

Vikram

jquery mobile will initialize and apply styles on the static html tag with data-role attribute automatically after completed loading the index.html. but for dynamically created html tag, it won't do such action implicit, you need to apply styles on it manually as comments of "pius lee".

you can check the api on jquery mobile site, http://api.jquerymobile.com/

Vikram

refresh()Returns: jQuery (plugin only)

update the slider.

If you manipulate a slider via JavaScript, you must call the refresh method on it to update the visual styling.

  • This method does not accept any arguments.
Code examples:

Invoke the refresh method:

1
 

 
$( ".selector" ).slider( "refresh" );
colin Rao

Hi,

As my testing result.

For dynamic create case, should call 

$('.selector').slider();

for dynamic update case, that means just add/update/remove options of an exist select widget, should call

$('.selector').slider("refresh");