jQuery load() replacing whole page instead of loading content into div

Question

I am trying to load in thumbnail of an inputted webpage when the user clicks a button. The thumbnail is generated properly on the page by itself, but when I attempt to load it into the div element, it replaces the whole page. Currently, this is just a proof of concept. I will switch to user inputted url if I can get this working.

Here is my click event code:

$('#check_url').click(function() {
    $('#thumb_loader').load('load_thumb.html');
});

thumb_loader is just a div. I have also tried it like this:

$('#check_url').click(function() {
    $('#thumb_loader').html($('<div>').load('load_thumb.html'));
});

Here is load_thumb.html:

<div>
    <script type="text/javascript">
        wsr_snapshot('http://google.com', 'xxxxxxxxxxxxxx', 'Small');
    </script>
</div>

wsr_snashot is WebSnapr. The image is generated on their server and appears where this code is.

First off, can I even load javascript like this? I have used load to drop in content that contains javascript before, so I doubt that is the case.

Anyone see any problems here?

EDIT:

Here is the table where the div I wish to load into is and the button that the user would click to trigger the AJAX.

<table>
    <tr>
        <td colspan="2">
                    <div id="thumb_loader"></div>
                </td>
            </tr>
            <tr>
                <td>
                    <label>Link Title:</label>
                </td>
                <td>
                    <label>Link Description:</label>
                </td>
            </tr>
            <tr>
                <td>
                    <input type="text" name="link_title" />
                </td>
                <td rowspan="3">
                    <textarea name="link_description"></textarea>
                </td>
            </tr>
            <tr>
                <td>
                    <label>Link URL:</label>
                </td>
                <td>

                </td>
            </tr>
            <tr>
                <td>
                    <input type="text" name="link_url" />
                </td>
                <td>

                </td>
            </tr>
            <tr>
                <td>
                    <input id="check_url" type="button" value="Check URL" />
                </td>
                <td align="right">
                    <input type="button" value="Cancel" /><input disabled="disabled" type="submit" value="Add Link" />
                </td>
            </tr>
        </table>

I don't see anything else that could be relevant in the code. Hope this is enough.

Answer 1

Put JS code out of load_thumb file and keep in a new js file like image.js and use $.getScript to dynamically add it in your principal page:

$.getScript('path/image.js', function(){
   // file loaded
});

You should put above code in your main file where you want to run your thumb image.

More:

http://api.jquery.com/jQuery.getScript/

Answer 2

jQuery#load() : When calling .load() using a URL without a suffixed selector expression, the content is passed to .html() prior to scripts being removed. This executes the script blocks before they are discarded. If .load() is called with a selector expression appended to the URL, however, the scripts are stripped out prior to the DOM being updated, and thus are not executed.

if wsr_snapshot('http://google.com', 'xxxxxxxxxxxxxx', 'Small'); contains any document.write calls, you're entire document is overwritten. Make sure you know what that function does.

---

Update:

according to the question's comments, this really is the issue. You need to figure out how wsr_snapshot() can be used in an asynchronous fashion. What API is that from anyways?