Question

I’m learning JQuery and I wrote a simple AJAX external script for my homepage that tries to load some static markup from a seperate html file and insert it into my homepage when i hover over a link…

$(function()
{
    $('a#contact_link').hover(function() 
    {
        alert('test1'); 
        $('<div id="contact_container">').load('contact.htm #contact', function() 
        {
            alert('test2');
            /*$(this) + '</div>';
            $(this).hide()
                .insertAfter('#header')
                .slideDown(1000)  */  
        });

        return false;
    });
});

at this point, i’m simply trying to get the ‘test2’ alert box to show, which is why i have the code below that commented out. currently, the ‘test1’ alert box is the only the one that shows, meaning the ‘test2’ alert line never gets hit. your thoughts?

here’s the snippet of code from my contact.htm file…

<div id="contact_container">
    <div id="contact">
        <p>
        <strong>NAME</strong>: My Name<br/>
        <strong>EMAIL</strong>: My Email<br/>
        <strong>SKYPE</strong>: My Skype Handle<br/>
        <strong>ADDRESS</strong>: My Address<br/>
        </p>        
    </div><!--end contact-->
</div><!--end contact_container-->

thanks so much in advance for your help!

Answer 1

You were calling $.load using incorrect selector syntax, a selector is not an HTML string, it must conform to the syntax rules set by the jQuery Selectors manual:

$('a#contact_link').hover(function() 
    {
        alert('test1'); 
        $('div#contact_container').load('contact.htm #contact', function() 
        {
            alert('test2');
            /*$(this) + '</div>';
            $(this).hide()
                .insertAfter('#header')
                .slideDown(1000)  */  
        });

        return false;
    });