CODEWITHSUNDEEP
javascriptjqueryhtmlajaxfrontend
Stachoo
Stachoo

Reputation: 23

Loading content to the div using AJAX/jQuery

I am a beginner in playing with jQuery/AJAX, my goal is to load content to the div below: 

<div id="blogcontentloaded">
    
</div>

I came up with .load and it worked, the page loads but it keeps refreshing and loads over and over. 

$(function loadBlog(e) {
    $('#blogcontentloaded').load('/blog/page1.html');
    e.preventDefault();
    return false;
});

I tried using e.preventDefault but it doesn't work for me. Also my goal is to do this without any buttons. When main page loads portion of the page that I want to load along with main page is going to be for updating the content in loaded element.
Thanks for the help!

Upvotes: 1

Views: 366

Answers (3)

Sujan Gainju
Sujan Gainju

Reputation: 4767

Have you used the jQuery file on the top of other js files?

Add the jQuery.js file

$(document).ready(function(){
  $('#blogcontentloaded').load('/blog/page1.html');
    e.preventDefault();
    return false;
})

Upvotes: 0

PaulShovan
PaulShovan

Reputation: 2134

You can use the javascript load function. It may solve your problem. here you can get some information about windows load and jQuery ready functions.

$( window ).on( "load", function() {
    $('#blogcontentloaded').load('/blog/page1.html');
});

Upvotes: 1

Alexander Z
Alexander Z

Reputation: 604

You need to wrap the function in the 'ready' function and make sure that it is executed once:

$(document).ready(function(){
    $('#blogcontentloaded').load('/blog/page1.html');
});

Upvotes: 0

Related Questions