Question

I’ve created a page with a grid block consists of buttons using “jquery-mobile” plugin. The buttons inside the grid are created dynamically at run time. After a post back call the old values still remain. I want to refresh the grid with new values after update.

Here is the code.

Html:

<div id="chapter_div" data-role="page" data-content-theme="a">
    <div data-role="header">
    <h1>Chapter Chooser</h1>
    </div>
    <div data-role="content" class="ui-grid-d" id="show_chapter_number"> 
    </div>                  
</div>  

Javascript/Jquery code:

function showChapter(book_id) {

           var chapter_count=" ";
           var menu = " ";

           var html = " ";
           var row_count = 1;
           var row_block_id = 'a';

           chapter_count = getChapterCount(book_id);

           for (itr = 1; itr <= chapter_count; itr++) {

             switch(row_count) {
                    case 1:
                    row_block_id = 'a';
                    row_count++;
                    break;
                    case 2:
                    row_block_id = 'b';
                    row_count++;
                    break;
                    case 3:
                    row_block_id = 'c';
                    row_count++;
                    break;
                    case 4:
                    row_block_id = 'd';
                    row_count++;
                    break;
                    case 5:
                    row_block_id = 'e';
                    row_count=1;
                    break;

                }

                html += "<div class=\"ui-block-"+row_block_id+"\"><button onclick=\"javascript:showVerse(" + book_id + ",\'" + itr + "\');\" class=\"ui-bar ui-bar-c\" style=\"width:70px\">" + itr + "</button></div>";

            }               

            var grid_chapter = $('#show_chapter_number');

            grid_chapter.append(html);

            $.mobile.changePage("#chapter_div", {transition: 'pop', role: 'dialog'});              

            **grid_chapter.content("refresh");**

        }

What should I do to refresh the items in the grid or in the content after a postback?

How should I change this line of the code: grid_chapter.content("refresh"); to make it work properly?

Thanks.

Answer 1

Try trigger("create") method:

grid_chapter.append(html).trigger("create");