Trouble executing javascript after ajax .load call

Question

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!

Use a callback function that isn't anonymous

Sterling Archer
– Sterling Archer

2013-12-12 03:08:03 +00:00
Commented Dec 12, 2013 at 3:08 — Sterling Archer
– Sterling Archer, Commented Dec 12, 2013 at 3:08

nbsp · Accepted Answer · 2013-12-12 03:35:03Z

1

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.

edited Dec 12, 2013 at 3:35

answered Dec 12, 2013 at 3:27

nbsp

2,2911 gold badge15 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

user59046 Over a year ago

Thanks... this seems to be a viable alternative solution as well.

Christophe · Accepted Answer · 2013-12-12 03:14:37Z

0

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;

answered Dec 12, 2013 at 3:14

Christophe

28.3k29 gold badges104 silver badges145 bronze badges

1 Comment

user59046 Over a year ago

Perfect...this worked (as well as AustinAllover's response). Huge help

score 0 · Accepted Answer · 2013-12-12 03:24:20Z

0

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.

edited Dec 12, 2013 at 3:24

answered Dec 12, 2013 at 3:14

user1403947

Collectives™ on Stack Overflow

Trouble executing javascript after ajax .load call

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related