how to make function and call the function in ajax call?

Question

How do I make this:

$('.projects').hover(function(){
 $defBox.stop(true, true).fadeToggle(1000).html('test');
});

into a function, and then call it in a ajax call?

// Check to ensure that a link with href == hash is on the page 
if ($('a[href="' + hash + '"]').length) {
 // Load the page.
 var toLoad = hash + '.php #main-content';
 $('#main-content').load(toLoad);
}
$('nav ul li a').click(function () {
 var goingTo = $(this).attr('href');
 goingTo = goingTo.substring(goingTo.lastIndexOf('/') + 1);
 if (window.location.hash.substring(1) === goingTo) return false;
 var toLoad = $(this).attr('href') + ' #main-content',
 $content = $('#main-content'),
 $loadimg = $('#load');
 $content.fadeOut('fast', loadContent);
 $loadimg.remove();
 $content.append('<span id="load"></span>');
 $loadimg.fadeIn('slow');
 window.location.hash = goingTo;
 function loadContent() {
 $content.load(toLoad, '', showNewContent)
 }
 function showNewContent() {
 $content.fadeIn('fast', hideLoader, log);
 }
 function hideLoader() {
 $loadimg.fadeOut('fast');
 }
 return false;
});

my functions

$('.projects dl').find('dd').hide();
 function fadeBox(){
 $('#def-box').stop(true, true)
 .fadeToggle(1000)
 .html('test');
 }
 $('.projects').hover(function(){ 
 fadeBox();
 });
 function descBox(){
 $('.projects dl').find('dd').hide();
 var $data = $(this)
 .next('dd')
 .html();
 $('#def-box').html($data);
 }
 $('.projects dl dt').hover(function(){
 descBox();
 }); 

and ajax

function showNewContent() {
 fadeBox();
 descBox();
 $content.fadeIn('fast',hideLoader); 
 } 

Also this isn't working. Its suppose to get the hidden dd element an place it in #def-box when its hovered when the dt is hovered.

function descBox(){
 $('.projects dl').find('dd').hide();
 var $data = $(this)
 .next('dd')
 .html('test');
 $('#def-box').html($data);
 }

Also the dd elements are hidden if I click to anotherpage, but on load... http://example.co/#home the dd isn't hidden no more.

• Brad Christie: Making it a function is easy, surround it with function <name>(){ and }. but now sure I understand what you mean by call it with AJAX--have it run when AJAX returns?

Answer 1

 // create the function
function myfunc(){
 $defBox.stop(true, true).fadeToggle(1000).html('test');
}
 // use it as the handler
$('.projects').hover( myfunc );
 // call it in the showNewContent function
function showNewContent() {
 myfunc();
 $content.fadeIn('fast',hideLoader, log); 
} 

• nowayyy: Hey Patrick, thanks for helping again. I put the function in showNewContent() but doesn't seem to work. How can I find out if its being called? console.log()? alert?
• user113716: @Trippy: Yeah, you can put console.logs in the functions to see where it is breaking down.
• nowayyy: Hey patrick! after 2 weeks of searching,, you finally helped me out! everything is kinda working now! But some of it doesn't work, look at the question I edited and tell me if what I'm doing is right
• user113716: @Trippy: Everything looks alright, though for your hovers you can simply do $('.projects').hover(fadeBox);, which is a little more efficient than wrapping the function call in another function. What part of it isn't working for you?
• user113716: @Trippy: In your descBox function, the keyword this is referring to the window if you're calling it like you are. If you do $('.projects dl dt').hover(descBox); then this will refer to the dt getting hovered. If you call it like descBox() in the AJAX callback, you'll have the same issue with this.