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

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.

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

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

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;

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

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

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.

Collectives™ on Stack Overflow

Trouble executing javascript after ajax .load call

3 Answers 3

1 Comment

1 Comment

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

Comments

Related