jquery callback and nesting problem

Question

Hey guys,

I'am really confused and don't know how to get on, probably you can help me :)

I'e made an html-page with an menu which loads external content into an div(all done with jquery and ajax-load).

If i want to add a second function nothing happens and i'am not sure about the nesting, wheather it's right or not.

Here are two function, the first one loads a whole html page, the second loads a external div into a div of the previous loaded file(hope that i described it so that you can understand it :)) (numRand is a random number, not important for the question).

function changeMenu(menupunkt) {
$(function(){
 $('#mainContent').fadeOut('fast', function(){ $("#mainContent").load(menupunkt+".html?"+numRand);});
 $('#mainContent').fadeIn('fast');});
 return false;

}

Here's the second code:

function changeSubMenu(submenupunkt,subdiv) {
 $(function(){
  $('#htmlContainer').fadeOut('fast',function(){ $("#htmlContainer").load(submenupunkt+".html?"+numRand+" div#"+subdiv);});
  $('#htmlContainer').fadeIn('fast');});
  return false;

}

I want to combine the two function so that i can call a function:

someFunction(menupunkt,submenupunkt,subdiv)

This should first load the menupunkt.html and if this action has finished it should load the div.

if i only want to load a menupunkt and no submenupunkt or subdiv, how can i call the function?

I hope i could explain my question so that you guys can follow it, bit complicated i know :)

Thank you in advance!

Answer 1

first of all

$(function() { .... code here .... });

is shorthand for

$(document).ready(function() { .... code here .... });

which is a jQuery way of setting up a function to execute when the DOM has loaded. you are using this inside of your functions changeMenu and changeSubMenu which is not necessary (unless you are executing both functions immediately when a page starts to load, but that would be a strange way to set things up).

The load() command takes a callback function that will execute when load has completed. For example,

$("#mainContent").load(menupunkt+".html?"+numRand, [callback here]);

[callback] can either be an anonymous function (inline function) or a named function.

Hope this helps