Jquery Dynamically generated buttons no css

Question

I am fetching some data from a Google Places Api, I am using jquerymobile to show a user nearest places, the data comes in JSON I want to generate a set of buttons so is easy for user to click selected location.

The data is generated but the button is showed as a link with no style, even is the same code of another button with style. here is the code snippet.

$.each(pdata.results, function(key) { 
    if (key>0 && key<6) {
$('#dPlaces').append('<a href="#" data-role="button">'+pdata.results[key].name+'</a>');                  
} //endif
}); //each

Data is returned but no Button style.. the idea is I will put a onclick() to set some value and way a list of buttons but with JQM style.

thanks.

Norman

can you show the other button code you're referring to as well as the css that should be applied to these links? — pthurlow
– pthurlow, Commented May 23, 2011 at 7:04
may be you need to render not <a> but <button> or <input type='button'> ? — Genius
– Genius, Commented May 23, 2011 at 8:35

Phill Pafford · Accepted Answer · 2011-05-24 18:44:27Z

0

You need to refresh the page, try something like this:

$.each(pdata.results, function(key) { 
    if (key>0 && key<6) {
        $('#dPlaces').append('<a href="#" data-role="button">'+pdata.results[key].name+'</a>').page();                  
    } //endif
});

or maybe:

$.each(pdata.results, function(key) { 
    if (key>0 && key<6) {
        $('#dPlaces').append('<a href="#" data-role="button">'+pdata.results[key].name+'</a>');                  
    } //endif
});

$('#dPlaces').page();

UPDATE:

$('div').live('pageshow',function(event, ui){
    $.each(pdata.results, function(key) { 
        if (key>0 && key<6) {
            $('#dPlaces').append('<a href="#" data-role="button">'+pdata.results[key].name+'</a>');                  
        } //endif
    });

    $('#dPlaces').page();
});

Docs: http://jquerymobile.com/demos/1.0a4.1/#docs/api/events.html

edited May 24, 2011 at 18:44

answered May 23, 2011 at 12:55

Phill Pafford

85.5k92 gold badges268 silver badges385 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

neavilag Over a year ago

Thanks the $('#dPlaces').page(); after the loop worked, but something weird is that the 2nd time it does not work as desired :-/

Phill Pafford Over a year ago

you may need to add it to a .live() jquerymobile.com/demos/1.0a4.1/#docs/api/events.html

neavilag Over a year ago

You mean, add the .Page() to the live()? I changed to be used with simple <p>My text</p> and a </hr> to divide.. but will like to test with buttons, thanks..

Phill Pafford Over a year ago

if you're transitioning to a new page you need to encapsulate the code above inside a .live event. See update

Collectives™ on Stack Overflow

Jquery Dynamically generated buttons no css

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related