Loading Documents With Scripts in Ajax Tab

I am trying to call some script in a newly ajax loaded tab but it looks like the script blocks inside the tab are not being processed at all so when I go to call a function in the tab the function cannot be found. Is there a way to properly load the tab content such that the scripts are interpreted?

I have tried playing with the ajax options but that doesn't seem to help.

$("#tabs").tabs({
            ajaxOptions: {
                error: function (xhr, status, index, anchor) {
                    $(anchor.hash).html("This tab not yet built, sorry bub.");
                },
                dataType: 'html'

            },
            spinner: 'Loading tabs...',
        });

In the tabs I have something like

<script type="text/javascript">
   function SetupTab(){
     alert('loaded');
   }
</script>

but

$("#tabs").bind("tabsshow", function(event, ui){ SetupTab();});

cannot find SetupTab. Even if I allow the tab to load and then attempt to call SetupTab from fireb开发者_StackOverflow中文版ug it can't be found.

if you try and bind any events/actions to a html element that does not exist yet i.e.

$(document).ready(function(){
 //apply elemnt bindings here
});

when you do load the elements using ajax the elements will not take on the bindings you supplied on document ready because they did not exist at that point.

Add a call back to your ajax call to then bind any events/functions to ur new html elements, then this should work.

I think thats what you was reffering to.

EDIT: try this.

$("#tabs").bind("tabsshow", function(event, ui){ alert('loaded');}); 

EDIT AGAIN: you could try this.

make sure the page you are loading just contains the script itself and not the script tags and then use:

//lets say the data returned from your ajax call:
data = function SetupTab(){alert('loaded');}
eval(data);

then you could call that function no problem.

EDIT 3RD TIME: if you cant remove the script tags from the page your load you could regex the html. with this pattern.

pattern = /<script\b[^>]*>(.*?)</script>/i
urscript = data.match(pattern);
eval(urscript[1]);

this should work.

What you can do is also to detach your ajax call from the element (do just $.getScript for example).
Your loading tabs function should do something like this:

<div class="tabs" onclick="$.getScript('myScript.php?index='+$(this).index(#tabs"))">...

Then the server-side script should return something like this:

echo '
$("#tabs").eq('.$_GET['index'].')html("'.$myHTML.'");
/* Then the rest of your JS script (what you had in your HTML output) */
';