Why doesn't the following piece of jquery run?

Question

I'm trying to fetch some html with jquery/ajax, load it into a div, then call the show method with the blind effect on it. But I can't figure out what's going wrong for the life of me.

 $(document).ready(function() { // The relevant jQuery
    $("#effect").hide(); // Make sure the div I'm going to show is not visible first off.
    $("#foo").click(function(){  // foo is a button
        $.ajax({url:"after.html", success:function(result){ // Grab the html I want.  (just an <h1> tag)
            $("#effect").html(result).show("blind", {direction: "horizontal"}, 400); // When I comment out this line it works, but with the exception of the id's to select it's exactly the same as in another working page.
            alert("loaded after.html...");
        }});
    });
});

HTML:

<div class="narrow">
   <p><input type="submit" id="foo"/></p>
</div>


<div id="effect" style="background-color:white; float:right; height:400px; width:400px;">
</div>

Without calling the $("#effect").html(result).show("blind", {direction: "horizontal"}, 400); line, everything runs fine. However, with that line it says Uncaught SyntaxError: Unexpected end of input in the console. (Chrome)

I was using this page as a reference when I ran into this problem.

What's going on here?

Answer 1

Blind effect is a part of JQueryUI. In the tutorial you shared, you can see that code. Are you sure that something like jquery-ui-1.7.2.custom.min.js is referenced on your page as:

<script type="text/javascript" src="/jquery/jquery-ui-1.7.2.custom.min.js"></script>

Answer 2

I let this problem sit for a while, then I came back to work and took out the alert("loaded after.html..."); It then worked fine. I have no idea what caused this, but I can only assume that the alert disrupted it somehow.