如何使用jquery重新渲染

Question

I was wondering how to re-render a dom element by using jquery. I want to capture a table by ID and re-render the table by using jquery.

this table is dynamically entered. and since I'm adding the table after the html file is loaded Js files which are on the head does not responds to the table which I have added after loading the html page . This is done through a editor.

So I need to re-render the table using jquery. I'm using Jquery and Jquery mobile as my frameworks.

* Sorry it seems I was following the wrong path . What I actually want to do is re-render a dom element by using jquery mobile .

    function insertTemplate(ui, html) {
    var el, n, dom = editor.dom, sel = editor.selection.getContent();

    each(editor.getParam('template_replace_values'), function(v, k) {
        if (typeof(v) != 'function') {
            html = html.replace(new RegExp('\\{\\$' + k + '\\}', 'g'), v);
        }

    });

    el = dom.create('div', null, html);

    // Find template element within div
    n = dom.select('.mceTmpl', el);
    if (n && n.length > 0) {
        el = dom.create('div', null);
        el.appendChild(n[0].cloneNode(true));
    }

    function hasClass(n, c) {
        return new RegExp('\\b' + c + '\\b', 'g').test(n.className);
    }

    each(dom.select('*', el), function(n) {
        // Replace cdate
        if (hasClass(n, editor.getParam('template_cdate_classes', 'cdate').replace(/\s+/g, '|'))) {
            n.innerHTML = getDateTime(editor.getParam("template_cdate_format", editor.getLang("template.cdate_format")));
        }

        // Replace mdate
        if (hasClass(n, editor.getParam('template_mdate_classes', 'mdate').replace(/\s+/g, '|'))) {
            n.innerHTML = getDateTime(editor.getParam("template_mdate_format", editor.getLang("template.mdate_format")));
        }

        // Replace selection
        if (hasClass(n, editor.getParam('template_selected_content_classes', 'selcontent').replace(/\s+/g, '|'))) {
            n.innerHTML = sel;
        }
    });

    replaceVals(el);

    editor.execCommand('mceInsertContent', false, el.innerHTML);
    editor.addVisual();
    /*$('#testjqtable').trigger("create");*/
  //$("#testjqtable").table("refresh");

   // $("#lsEditorArea_ifr").load('<table data-role="table" id="movie-table" data-mode="reflow" class="ui-responsive table-stroke jqm-table"><thead><tr><th data-priority="1">Rank</th><th data-priority="persist">Movie Title</th><th data-priority="2">Year</th><th data-priority="3"><abbr title="Rotten Tomato Rating">Rating</abbr></th><th data-priority="4">Reviews</th></tr></thead><tbody><tr><th>1</th><td><a href="http://en.wikipedia.org/wiki/Citizen_Kane" data-rel="external">Citizen Kane</a></td><td>1941</td><td>100%</td><td>74</td></tr><tr><th>2</th><td><a href="http://en.wikipedia.org/wiki/Casablanca_(film)" data-rel="external">Casablanca</a></td><td>1942</td><td>97%</td><td>64</td></tr><tr><th>3</th><td><a href="http://en.wikipedia.org/wiki/The_Godfather" data-rel="external">The Godfather</a></td><td>1972</td><td>97%</td><td>87</td></tr><tr><th>4</th><td><a href="http://en.wikipedia.org/wiki/Gone_with_the_Wind_(film)" data-rel="external">Gone with the Wind</a></td><td>1939</td><td>96%</td><td>87</td></tr><tr><th>5</th><td><a href="http://en.wikipedia.org/wiki/Lawrence_of_Arabia_(film)" data-rel="external">Lawrence of Arabia</a></td><td>1962</td><td>94%</td><td>87</td></tr></tbody></table>');

}

Answer 1

Try this for your div, add in after ajax call.

$('#yourDiv').trigger("create");

Or, for your listview, add in after ajax call.

$('ul#listID').listview('refresh');