CODEWITHSUNDEEP
javascriptjqueryhtml
unammedkiller
unammedkiller

Reputation: 89

jquery .load() function multiple time

How do i load a test.html multiple time using jQuery.

function loadScreen()
{
  $('#result').load('test.html');
}

main.html

<div id='result'></div>
<input type="button" value="click me" onclick="loadScreen()">

test.html

<body>
<p>
testing
</p>
</body>

Current situation

when i click the button click me. it will load once show on main.html testing

what i want to do

How can i do it when i click the button twice it will show

testing
testing

and with different div id

1st time button click show testing <div id="result1">testing</div> 2nd time button click show testing <div id="result2">testing</div>

it will append incremental 1 at id.

Upvotes: 2

Views: 2230

Answers (2)

Rory McCrossan
Rory McCrossan

Reputation: 337560

load() will replace the content of the target element which is why it's not working as you want.

Try this instead:

function loadScreen() {
    var divId = $("#result > div").length + 1;
    $('#result').append("<div></div>").attr("id", "result" + divId).load('test.html');
}

Upvotes: 5

Joseph
Joseph

Reputation: 119827

Then it's about time you should use $.get(), then create a div via the $(), add in the contents using .html() and .appendTo() the results div.

var result = $('#result'),            //cache result box
    i = 0;

function loadScreen(){
    $.get('test.html',function(data){ //initiate get
        $('<div>',{                   //create div for return data
            id : 'result'+(++i)       //add attributes
        })
        .html(data)                   //add data
        .appendTo(result);            //append to result
    });
}

Upvotes: 0

Related Questions