Ajax: Load content to a div from another div

347
December 10, 2016, at 3:40 PM

I am trying to use ajax to change the content of a div (as html), when a link is clicked in that same div. I am not very skilled in ajax, so I am pretty sure that this is a noob question. I have tried searching the web for solutions, but I didn't manage to make anything work.

I have a div with the id "main" and inside it I am trying to make a link with the id "link01". When "link01" is clicked, I want "main" to load content from another div in another page ("txt2"-div in site2.html). But I can't get it to work.

Firstly, this is my index.html page:

<head>
    <title>site1</title>
    <meta charset="UTF-8">
</head>
<body>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
    <script type="text/javascript" language="javascript">
        $(document).ready(function() {
            $('#link01').click(function() {
                $('#main').load('site2.html #txt2', function() {});
            });
        });
    </script>
    <div id="main">
        <a>
            <div id="link01">link</div>
        </a>
        Main div where the content will change</div>
    <br>
    <br>
</body>
</html>

And this is my site2.html page:

<!DOCTYPE html>
 <html>
<head>
    <title>Site2</title>
    <meta charset="UTF-8">
</head>
<body>
<div id="txt2">Text that will go into the main div at the index-page when link01 is clicked (contains links, images, etc)</div>
</body>
</html>

I have probably misunderstood something completeley.

Answer 1

There is a very bad practice way that may work... But you should really have a server side code that listens you your ajax call, and returns just the desired HTML fragment as a response. Having said that, try this, it MIGHT work (didn't check):

$(function() { 
  $('#link01').click(function(){
    $.ajax({
      url: 'site2.html',
      type: 'GET',
      success: function(data){
        data = $(data);
        var $div = $('#txt2', data);
        $('#main').html($div);
      }
    });   
  });
}); 
Rent Charter Buses Company
READ ALSO
add selected class via jQuery in mmenu

add selected class via jQuery in mmenu

hi for open default extended menu in jquery mmenu, we must add 'Selected' class like this (before open webpage)

370
Why `$(&#39;audio&#39;).trigger(play)` fires playHandler twice while `$(&#39;audio&#39;)[0].play()` only fires once?

Why `$('audio').trigger(play)` fires playHandler twice while `$('audio')[0].play()` only fires once?

I used to think trigger(play) just fires the native play function of audio, but today I just noticed that there is a slight difference between these two methodsIf you register a callback for play, e

235
set div color when page loads using jquery

set div color when page loads using jquery

Please check my attached imageIn this image three rows are showing

305
replace innerhtml from get().innerHTML with html()

replace innerhtml from get().innerHTML with html()

I want to remove all instances of innerHTML from my code, but I'm unable to do so on this line:

382