CODEWITHSUNDEEP
javascriptjqueryjquery-mobile
yvonnezoe
yvonnezoe

Reputation: 7427

jQuery Mobile elements not displaying properly

I am using jQuery Mobile to display a table. However when i append a new row using addMore button, the display is off! Why is it so? it is suppose to follow the first row. Ans also, it is displayed in black theme on my browser... but it is suppose to be white as in the fiddle. why?

Here is my fiddle: http://jsfiddle.net/BgxKW/1/

this is the code to add new row

var addmore = '<tr><td style="text-align: center">' + currentIndex + '</td>' +
    '<td class="small">' +
    '<div data-role="fieldcontain" class="ui-hide-label">' +
    '<label for="number_' + currentIndex + '">Response Number</label>' +
    '<input type="text" name="number_' + currentIndex + '" id="number_' + currentIndex + '" value="" placeholder="Response Number"/>' +
    '</div></td><td>' +


    '<div data-role="fieldcontain" class="ui-hide-label">' +
    '<label for="label_' + currentIndex + '">Description</label>' +
    '<input type="text" name="label_' + currentIndex + '" id="label_' + currentIndex + '" value="" placeholder="Description "/>' +
    '</div></td></tr>';

Also, how can i remove the row?

Upvotes: 0

Views: 115

Answers (1)

vinothini
vinothini

Reputation: 2604

You want to do $(".config").trigger("create"); at the final to resolve style problem.

Updated fiddle link is http://jsfiddle.net/BgxKW/7/

$("#addMore").click(function () {
    currentIndex = $(".config tr:last td:first").text()
    if(currentIndex == ""){currentIndex = 0}
    currentIndex = parseInt(currentIndex) + 1
    var addmore = '<tr><td style="text-align: center">' + currentIndex + '</td>' +
        '<td class="small">' +
        '<div data-role="fieldcontain" class="ui-hide-label">' +
        '<label for="number_' + currentIndex + '">Response Number</label>' +
        '<input type="text" name="number_' + currentIndex + '" id="number_' + currentIndex + '" value="" placeholder="Response Number"/>' +
        '</div></td><td>' +


        '<div data-role="fieldcontain" class="ui-hide-label">' +
        '<label for="label_' + currentIndex + '">Description</label>' +
        '<input type="text" name="label_' + currentIndex + '" id="label_' + currentIndex + '" value="" placeholder="Description "/>' +
        '</div></td></tr>';

     ++currentIndex;
    $('#labels .config tr:last').after(addmore);
    $(".config").trigger("create");
});

$("#remove").click(function(){
    $(".config tr:last").remove();
});

Note: I fixed the style problem and remove function.

Upvotes: 1

Related Questions