How Do I Load External Html Content To Be Manipulated By This Js Code?

Through the help of another user I have the following JSFiddle that looks at a table and cuts out columns I don't need. http://jsfiddle.net/9qme9/ What I would like to do is load t

Solution 1:

I'd suggest the following, which incorporates the previous answer for filtering out the columns you don't want, before appending the filtered-table to the page:

$(document).ready(function() {

    //define which column headers to keep
    $("#gvRealtime")
        .load("http://fiddle.jshell.net/UqZjt/show/", function(response, status, xhr){
            var html = $(response),
                table = html.find('#gvRealtime'),
                headersToKeep = ['---', 'C6', 'C7', 'C13', 'C14'],
                colsToKeep = [],
                ths = table.find('th');

            $.each(headersToKeep, function(i, v) {
                //finds each header and adds its index to the colsToKeep
                colsToKeep.push(ths.filter(function() {
                    return $(this).text() == v;
                }).index());
            });

            //makes a new jQuery object containing only the headers/cells not present in the colsToKeep
            $('th, td', '#gvRealtime, #gvTotal').filter(function() {
                return $.inArray($(this).index(), colsToKeep) == -1;
            }).hide(); //and hides them
        });

});

JS Fiddle demo.

Solution 2:

you can use

 $("#elem").load("url.aspx");

where #elem is the id of the HTML element where you want to put the content of the external url

check this for example: http://jsfiddle.net/9qme9/5/