CODEWITHSUNDEEP
javascriptjqueryhtmlajax
user59046
user59046

Reputation: 63

Trouble executing javascript after ajax .load call

I do not have much experience at all with Jquery and am having trouble writing a proper callback function so that a separate javascript function executes after having loaded html content through an ajax .load() call.

The following code loads the external html content

$('#myID').find('a').on('click', function(){
    e.preventDefault();
    var $desc = $('#insert');

    switch($(this).attr('href')) {
        case 'content1.html' :
            $desc.load('fragments/content1.html');
            break;
        case 'content2.html' :
            $desc.load('fragments/content2.html');
            break;
    }
});

The following code must then be executed on the html loaded by the previous function

var panelWidth = 0;
var startPanel = 1;

window.panelWidth = $('.sp').width();   


$('.panel_container .hiw_panel').each(function(index){
    $(this).css({'width':window.panelWidth+'px','left':(index*window.panelWidth)});
    $('.sp .panels').css('width',(index+1)*window.panelWidth+'px');
});


$('.switcher span').each(function(){
    $(this).on('click', function(){
        changePanels( $(this).index() );
    });
});


function changePanels(newIndex){

var newPanelPosition = ( window.panelWidth * newIndex ) * -1;
$('.switcher span').removeClass('selected');
}

I've deleted out excess content to make it as concise as possible. All I need to know is how to execute part II after part I. Thanks for your help!

Upvotes: 1

Views: 455

Answers (3)

nbsp
nbsp

Reputation: 2291

Hmm, something like this maybe:

$( '#myID' ).on( 'click', 'a', function( e ) {
    e.preventDefault();

    $( '#insert' ).load( $( this ).attr( 'href' ), function() {
        var panelWidth = 0;
        var startPanel = 1;

        window.panelWidth = $( '.sp' ).width();

        $( '.panel_container .hiw_panel' ).each( function( index ) {
            $( this ).css({
                'width': window.panelWidth,
                'left': ( index * window.panelWidth )
            });

            $( '.sp .panels' ).css({
                'width': ( index + 1 ) * window.panelWidth
            });
        });

        $( '.switcher span' ).each( function() {
            $( this ).bind( 'click', function() {
                changePanels( $( this ).index() );
            });
        });
    });
});

function changePanels( newIndex ) {
    var newPanelPosition = ( window.panelWidth * newIndex ) * -1;
    $( '.switcher span' ).removeClass( 'selected' );
}

What it's doing is binding to the a click, then loading in whatever the href attribute was for the a tag, then doing a callback function which is your step 2 code. (You can read more about .load() here);

I think something might be missing from your changePanels function as the var isn't used, but that's easy to tidy up.

Upvotes: 1

user1403947
user1403947

Reputation:

I think you're looking for:

$desc.load('fragments/content1.html', function(){
  //cb code here
});

The second argument is a callback function that is executed when the request completes.

Upvotes: 0

Christophe
Christophe

Reputation: 28134

Give your function a name - for example executeAfterLoad() - and include it as an argument of .load:

case 'content1.html' :
        $desc.load('fragments/content1.html',executeAfterLoad);
        break;
case 'content2.html' :
        $desc.load('fragments/content2.html',executeAfterLoad);
        break;

Upvotes: 0

Related Questions