How To Load An External Html File Into A Div

I want to load a html file into the div on a button click. When i click on create button it should load 'createarray.html' file into div tabcontent. This is my html file:

Solution 1:

Html:

<divclass="tab"><buttonclass="tablinks"onclick="createarray()"id= "defaultOpen">Creation</button><buttonclass="tablinks"onclick="insertarray()">Insertion</button><buttonclass="tablinks"onclick="deletearray()">Deletion</button></div><divid="create"class="tabcontent"></div><divid="insert"class="tabcontent"></div><divid="delete"class="tabcontent"></div>

Javascript:

functioncreatearray(){
$.ajax({
url : "createarray.html",
success : function (data) {
    $("#create").html(data);
}
});
}

functioninsertarray(){
$.ajax({
url : "insertarray.html",
success : function (data) {
    $("#insert").html(data);
}
});
}

functiondeletearray(){
$.ajax({
url : "deletearray.html",
success : function (data) {
    $("#delete").html(data);
}
});
}

Solution 2:

Firstly your use of onclick will be causing errors as the contents are expected to be valid JS code.

To achieve what you need you can use an unobtrusive event handler on the button elements to along with data attributes to store their custom data. In the event handler you can then load() the required content in to the given target. Try this:

<button type="button" class="tablinks defaultOpen" data-url="createarray.html" data-target="#create">Creation</button>
<button type="button" class="tablinks" data-url="insertarray.html" data-target="#insert">Insertion</button>
<button type="button" class="tablinks" data-url="deletearray.html" data-target="#delete">Deletion</button>

$(function() {
  $('.tablinks').click(function() {
    var target = $(this).data('target');
    $(target).load($(this).data('url'));
  });
});

Note that I amended defaultOpen to a class as it makes more sense semantically.

Solution 3:

The onclick attribute accepts Javascript - onclick="createarray.html" etc isn't right. I'm assuming you'd like to load your HTML when those buttons are clicked. Your Javascript is a little repetitive too so we could put it in a function like this instead:

functionloadHtml(file){
    $.ajax({
        url : file+"array.html",
        dataType: "html",
        success : function (data) {
            $("#"+file).html(data);
        }
    });
}

We can do better with this though. It's mostly replicating the jQuery load method, so you could use that instead:

functionloadHtml(file){
    $("#" + file).load(file + "array.html");
}

Which you would then call from your onclick attribute like this:

<buttonclass="tablinks"onclick="loadHtml('create')"id= "defaultOpen">Creation</button><buttonclass="tablinks"onclick="loadHtml('insert')">Insertion</button><buttonclass="tablinks"onclick="loadHtml('delete')">Deletion</button>

Solution 4:

Instead of making ajax request, you can use jQuery's load method. Here's the documentation link.

Sample code

<buttonclass="tablinks"data-url="insertarray.html"data-target="create">Insertion</button>

$(function(){
    $(".tablinks").click(function(){
        var url = $(this).attr("data-url");
        var target = "#" + $(this).attr("data-target");
        $(target).load(url);
    });
});

Solution 5:

$(document).ready(function(){    
  $("#idOfWhereYouClick").click(function(){
  $("#idOfDivWhereYouWantToLoad").load("yourPage.html");
});

Share