www.webdeveloper.com
Results 1 to 4 of 4

Thread: Action jquery inside an AJAX call

Hybrid View

  1. #1
    Join Date
    Jul 2010
    Posts
    50

    Action jquery inside an AJAX call

    Hi All,

    It's hard to get a code sample running as this is a Wordpress site on my localhost. Anyway I shall try to explain and if anyone can send me off in the right direction great.

    Basically when you click a div a box slides down and calls in the wordpress post information relating to the div id clicked.

    This all works but once I am inside the slidedown i want some more click events.

    This is the function which works well outside of the AJAX call but not inside the slidedown box where I need it working. It simply swaps the image in a div with the image contained within the data-href link.

    Code:
    $(function () {
      $(".subnav a").click(function (e) {
         var url = $(this).data('href')
        $('#imageBox img').prop('src', url)
      return false;
     });
    });
    This is how I have the AJAX working to call in post data:-
    Code:
    $.ajaxSetup({cache:false});
     var post_link = $(this).attr("rel");
     $("#panel").empty().html("loading...");
     $("#panel").load(post_link);	  
    //return false;	 
    var height = $("#panel").height();
      if( height > 0 ) {
        $('#panel').css('height','0');
      } else {
      var clone = $('#panel').clone()
    	.css({'position':'absolute','visibility':'hidden','height':'624px'})
    	.addClass('slideClone')
    	.appendTo('body');
    	
      var newHeight = $(".slideClone").height();
      $(".slideClone").remove();
      $('#panel').css('height',newHeight + 'px');
    }
    });
    
    $('.close').click(function() {
      $('#panel').css('height','0');
    });

  2. #2
    Join Date
    Mar 2005
    Location
    Behind you...
    Posts
    969
    Bare with me as I'm trying to grasp the full concept of what your site/page does without seeing any of it. I'm thinking that you want to run the first block of code you have after the new content loads, which would apply the click function to all of the new elements that are on the page (and weren't present when that block first ran).

    So you end up with something like...
    Code:
    $.ajaxSetup({cache:false});
    var post_link = $(this).attr("rel");
    $("#panel").empty().html("loading...");
    $("#panel").load(post_link, function () {
      $(".subnav a").click(function (e) {
        var url = $(this).data('href');
        $('#imageBox img').prop('src', url);
    		return false;
     });
    });	  
    //return false;	 
    var height = $("#panel").height();
      if(height > 0) {
        $('#panel').css('height','0');
      } else {
    		var clone = $('#panel').clone()
    		.css({'position':'absolute','visibility':'hidden','height':'624px'})
    		.addClass('slideClone')
    		.appendTo('body');
    	
      var newHeight = $(".slideClone").height();
      $(".slideClone").remove();
      $('#panel').css('height',newHeight + 'px');
    }
    });
    
    $('.close').click(function() {
      $('#panel').css('height','0');
    });
    "Given billions of tries, could a spilled bottle of ink ever fall into the words of Shakespeare?"

  3. #3
    Join Date
    Jul 2010
    Posts
    50
    Hello and thank you so much for looking at my code.

    I gave your solution a try and it's not working. I tried something similar before and there must be something stopping it working once inside the AJAX call.

    I can PM you a link to the website if that is any help. Only if you have time as there is no rush.

  4. #4
    Join Date
    Mar 2005
    Location
    Behind you...
    Posts
    969
    I'm certainly willing to take a look if you don't mind. It's definitely a lot easier to debug with live/running code than it is when looking at the text.
    "Given billions of tries, could a spilled bottle of ink ever fall into the words of Shakespeare?"

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles