CODEWITHSUNDEEP
javascriptjqueryhtmlonclickload
Filip Grkinic
Filip Grkinic

Reputation: 130

Loading div inside html with jquery

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.

Upvotes: 2

Views: 583

Answers (2)

GautamD31
GautamD31

Reputation: 28763

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

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

Upvotes: 0

Roko C. Buljan
Roko C. Buljan

Reputation: 205997

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.

Upvotes: 2

Related Questions