Noobie Jquery Question - Why doesn't this simple script work?

Question

Hello! 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;
    });

Answer 2

The selector is probably the cause.

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

        return false;
    });
});

Answer 3

I believe your #contact_container selector is not quite kosher. Check out the selector doco (http://docs.jquery.com/Selectors) at the JQuery site. I think something like this might be a little better:

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

    return false;
});
});