Loading content to the div using AJAX/jQuery

Question

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!

As I said I am a beginner in coding, rather than voting down I could use some explaination what is wrong with code/post. — Stachoo, May 04 '18 at 11:57
I have read this and vote up your question. Try to use my answer. — Alexander Z, May 04 '18 at 12:00

PaulShovan · Accepted Answer · 2018-05-04T12:23:12.150

1

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

edited May 04 '18 at 12:23

answered May 04 '18 at 12:15

PaulShovan

2,140
1
13
22

score 0 · Answer 2 · answered May 04 '18 at 11:59

0

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

answered May 04 '18 at 11:59

Alexander Z

630
3
22

score 0 · Answer 3 · answered May 04 '18 at 12:32

0

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

answered May 04 '18 at 12:32

Sujan Gainju

4,273
2
14
34

Loading content to the div using AJAX/jQuery

3 Answers3