jQuery AJAX load of content

JavaScript
1

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

2

Can’t someone at least point out what might cause the problem? I tried to make the loaded html a separate full html webpage and include the function there but didn’t help

That’s what im using:

<script src=“http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js”></script>
my html


	<nav>
			<div id="wrapper">
					<a class="loadnew" href="loadcontent/skiing.html"><img class="zoom" src="images/alpineskiing.png" alt="alpine skiing" /></a>
					<a class="loadnew" href="loadcontent/biathlon.html"><img class="zoom" src="images/biathlon.png" alt="biathlon" /></a>
					<a class="loadnew" href="loadcontent/bobsleigh.html"><img class="zoom" src="images/bobsleigh.png" alt="bobsleigh" /></a>
					<a class="loadnew" href="loadcontent/icehokey.html"><img class="zoom" src="images/icehokey.png" alt="ice hokey" /></a>
					<a class="loadnew" href="loadcontent/luge.html"><img class="zoom" src="images/luge.png" alt="luge" /></a>
					<a class="loadnew" href="loadcontent/skating.html"><img class="zoom" src="images/skating.png" alt="skating" /></a>
		</div>
		</nav>
		
		<div id="contentwrapper">
			<div id="ajax-main">

			</div>
		</div>

and my scripts


$(document).ready(function() {
	$(".zoom").hover( zoomIn );
	$(".zoom").mouseout( zoomOut );
	$(".zoom").click( select );
	function zoomIn() {
	
			$(this).animate({
			  left:'10px',
			  height:'190px',
			  width:'190px',
			});
			$(this).css({"border-radius": "110px"});
			
	}
		function zoomOut() {
			$(this).animate({
			  left:'-10px',
			  height:'140px',
			  width:'140px'
			});
			$(this).css({"border-radius": "90px"});

	}
			function select() {
			$(this).css({"border":"8px #e53cc7 solid", "border-radius": "110px"});
			$(".zoom").not(this).css({"border":"none"});

	}
	function getRandom(num){
		var my_num = Math.floor(Math.random()*num);
		return my_num;
	}

}); //End document.ready()
$(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();
            });
    });
});
3

Hi,

I’m not sure what you mean by this.

Could you maybe post a link to a page where we can see this not working?