Question

I am new to JQuery and I have the following issue:

Source file:

function handleDropEvent( event, ui )
{
    var draggable = ui.draggable;

    switch (draggable.attr('id'))
    {
        case "artOfBeing":
            alert("Life is a bunch of pointless moments.");
            break;

        case "perfectAndroid":
            $('#dataFrame').load('android/androidConfessions.html #androidData');
            break;
    }

    return false;
}

---

Ajax should load the following file but it only displays <div id="androidTip"> content and the Javascript is completely ignored! How can I fix this please?

<div id="androidData">
    <div id="androidVideo" style="width:640px; height:360px; background-color:#25283c; margin-left:70px; margin-top:0px;">
    </div>

    <script type="text/javascript">
        FlashReplace.replace("androidVideo", "thoughtOfYou/thought.swf", "flash-element-id", 640, 360, 10);
    </script>

    <div id="androidTip">
        <div><span style="font-weight:bold">"Android"</span> - An alien female incapable of breeding... Even then love gets old and dies.
             <div id="xClose" style="float:right; margin-left:5px; cursor:pointer;">x</div>
        </div>
    </div>
</div>

---

Thank you very much.

Answer 1

I don’t think the JS code on your html file will get called when appended to your document. You need to call the JS function from a callback of the load function.

Something like:

$('#dataFrame').load('android/androidConfessions.html #androidData', function() {
    FlashReplace.replace("androidVideo", "thoughtOfYou/thought.swf", "flash-element-id", 640, 360, 10);

});