jQuery - Can someone help stitching jQuery code with .ajaxComplete()?

Question

Hi, so I've got this content loader that replaces content within a div with content from a separate page. But the content that arrives contains a menu that uses jQuery and this is not working. Someone told me I need to reinitialize the code. But how do I do that? I've looked into .ajaxComplete(), but I don't really get how I'm supposed to stitch that together with my existing code?

$('.dynload').live('click',
 function(){

 var toLoad = $(this).attr('href')+' #content';
 $('#content').fadeOut('fast',loadContent);
 $('#ajaxloader').fadeIn('normal'); 
 function loadContent() {
     $('#content').load(toLoad,'',showNewContent())
 }
 function showNewContent() {
    $('#content').fadeIn('fast',hideLoader());
    //Cufon.replace('h1, h2, h3, h4, .menuwrapper', { fontFamily: 
'advent'}); 
 }
 function hideLoader() {
     $('#ajaxloader').fadeOut('normal');
 }

 return false;

 });

This is the code I'm using for the jQuery menu:

    $().ready(function() {
                $('#kontrollpanel .slidepanels').kwicks({
                min : 42,
                spacing : 3,
                isVertical : true,
                sticky : true,
                event : 'click'
            });                    
    });

Also, notice how I try to call Cufon as well within the first function? That doesn't really work either, could that be reinitialized as well? Would really appreciate any help at all..

Answer 1

In your showNewContent() function call this:

       $('#kontrollpanel .slidepanels').kwicks({
            min : 42,
            spacing : 3,
            isVertical : true,
            sticky : true,
            event : 'click'

Answer 2

You can change all your current code to this:

$(function() {
  $('.dynload').live('click', function(){
    $('#ajaxloader').fadeIn('normal');
    var href = this.href + ' #content';
    $('#content').fadeOut('fast',function() {
      $(this).load(href,'', function(data) {
        createMenus();
        $('#ajaxloader').fadeOut('normal');
        $('#content').fadeIn('fast');
        Cufon.replace('h1, h2, h3, h4, .menuwrapper', { fontFamily: 'advent'});
      });
    }); 
    return false;
  });
});
$(createMenus);

function createMenus() {
  $('#kontrollpanel .slidepanels').kwicks({
     min : 42,
     spacing : 3,
     isVertical : true,
     sticky : true,
     event : 'click'
  });                    
}

Currently you have some problems areas here:

$('#content').load(toLoad,'',showNewContent())
//and...
$('#content').fadeIn('fast',hideLoader());

In the above I'm fading out the ajax loader as soon as the content is coming in, but in showNewContent and hideLoader with the () this was likely causing your Cufron error as well). Also I turned your menu creation into a function so it can be re-used, by passing a content. When you do $(selector) what you're actually doing is $(selector, document), document being the default context (update: looking at your actual page, it doesn't matter so simplified the above).

You can pass any context you want, so in your load callback we're now using data as the context which is the content that was just loaded, so it's only looking inside the content your loading for elements to create menus on...not messing with existing menus.