jQuery AJAX load of content

[Tyska]

Hello

I’ve got a webpage where I want to load a content with Ajax without realoading which I did, however I want the code to work on links from the loaded content as well. As far the loaded content seems to behave as a separate document which is not my intention here.

$(function () {
//ajax load of main div content specified in links 	
	   // attaching click handler to links
    $("a.loadnew").click(function (e) {
        // cancel the default behaviour
        e.preventDefault();

        // get the address of the link
        var href = $(this).attr('href');

        // getting the desired element for working with it later
        var $wrap = $('#ajax-main');

        $wrap
            // removing old data
            .html('')

            // slide it up
            .slideUp()

            // load the remote page
            .load(href + ' #content', function () {
                // now slide it down
                $wrap.slideDown();
            });
    });
});

and the content html

<div id="content">
<a class="loadnew" href="loadcontent/figure.html">content1</a><br/>
<a class="loadnew" href="loadcontent/speed.html">content2</a><br/>
<a class="loadnew" href="loadcontent/shortspeed.html">content3</a>
</div>

Thx

[Strider64]

[php]
var url = ‘printList.php’; // the printList.php file:
$(’#cms’).load(url + ’ #printList’); // id html tag #printList in the printeList.php file:
[/php]
I just use a different snippet just to show as an example in what I’m getting at.

remember that it pulls both the html/css from that particular file (which might be the reason why it looks like a seperate document). If those pages are brought in via php then you could just bring it in via true ajax, but if not then you would have to do some kind of scrapping (which someone else would have to help you with).

[ErnieAlex]

Tyska, perhaps I do not understand what you are asking.

When you load PHP code via AJAX, it is like loading a new page.
So, inside that new code, you would have to add all of your CSS as Strider64 mentioned.
Add the CLASS=“LOADNEW” to the page you are loading.

Here is a link on how someone else solved this. Note, using AJAX is mostly for content loading.
If you use CSS and other pre-browser coding, you have to include that inside your content which
is being loaded.

Hope this helps…
http://stackoverflow.com/questions/16956446/dynamically-loading-content-with-ajax