Load another HTML file inside dialog

Question

I have a index.html and have another html file with a lot of text.

Now I don't want to paste this bunch of codes into my index.html . I don't want to make it larger, the other file is not always called only if the button is clicked.

How do I get the div area from another_file.html ?

$("#buttonClick").on("click",function(evt) {
    $("#load-another-file").dialog({});

Answer 1

I believe you are looking for jQuery's $.ajax , which is a way of loading data without refreshing the page:

$("#buttonClick").on("click",function(evt) {
    $.ajax({
        url: 'another_file.html',
        success: function(data){ // You received the data
            $("#load-another-file").html(data).dialog("open");
        }
    });
});

Note : for this to work, you might have to put your files on a server (even a local one), because some browsers don't allow Ajax requests on local files for security reasons (eg Google Chrome).

Answer 2

Maybe you're looking for jquery.load() , load perform a server call and fetchs the HTML returned in your element.

$("#buttonClick").on("click",function(evt) {
    $("#load-another-file").dialog().load("another_file.html");
});