Loading div inside html with jquery

Question

I'm using jquery to load my website content once its fully loaded. That works great.

jquery code

function check() {
$("#content").load('items.html');
}
$(document).ready(function() {
check(); 
});

html

<div id="content">

</div>

Is there a way without refreshing the whole page to dynamically load html element (div) when user clicks on one of the items which were already loaded('items.html')?. On one click I want to remove already loaded 'items.html' inside #content div and load new div from any.html file.

So basically, I need to show more info for that particular item by dynamically replacing already loaded items.html and adding new div instead.

I managed to load new html page by adding anchor tags on every item, but it would be much better if I could load only one part(div) of a html file and not a whole page, that way I can write all items informations in only one html file, and then add those div's dynamically when user clicks on any item.

Roko C. Buljan · Accepted Answer · 2014-02-27 12:13:28Z

2

function check() {
  $("#content").load('items.html #loadable'); // #ID to load
}

$('#loadCont').click(check);

main page example
page 2 example

You might also want to put this somewhere

$.ajaxSetup({ cache: false });

https://api.jquery.com/jquery.ajaxsetup/

As seen from the demo, .load() does already content-replacement, so no need to .empty() or .html('') beforehand.

edited Feb 27, 2014 at 12:13

answered Feb 27, 2014 at 12:06

Roko C. Buljan

209k41 gold badges335 silver badges346 bronze badges

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

Comments

GautamD31 · Accepted Answer · 2014-02-27 12:13:58Z

0

Simple.Try to call the check() function on clicking of the element

$('element').click(function(){
    check();
});

edited Feb 27, 2014 at 12:13

answered Feb 27, 2014 at 11:55

GautamD31

28.8k10 gold badges66 silver badges86 bronze badges

3 Comments

Filip Grkinic Over a year ago

Thank you. I get that, but how can I target specific .html, and then specific div inside that html file with this jquery function? I hope it makes any sense what I'm asking.

A. Wolff Over a year ago

@maddesign this is explain in DOC, read it and be aware, GET requests are cached api.jquery.com/load/#loading-page-fragments

GautamD31 Over a year ago

That's why I added also

Collectives™ on Stack Overflow

Loading div inside html with jquery

2 Answers 2

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related