jquery .load() function multiple time

Question

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.

Rory McCrossan · Accepted Answer · 2012-05-21 10:09:03Z

5

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');
}

edited May 21, 2012 at 10:09

answered May 21, 2012 at 9:07

Rory McCrossan

338k41 gold badges322 silver badges353 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

unammedkiller Over a year ago

hmm i can't still unable to load test.html multiple times.

Joseph · Accepted Answer · 2012-05-21 09:06:35Z

0

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
    });
}

answered May 21, 2012 at 9:06

Joseph

120k31 gold badges186 silver badges238 bronze badges

1 Comment

unammedkiller Over a year ago

hmm when i click the button 2nd time.nothing happen

Collectives™ on Stack Overflow

jquery .load() function multiple time

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related