[jQuery] ui-tabs + ajaxContent
I am building a page that uses jQuery + ui.tabs to load content into
the right half of the page. In this "loaded" content I am trying to
do a ajaxContent to load a small html form when a link is clicked.
The ajaxContent is unable to find any ajax class elements...ie the
ajaxContent does not work. The structure is like so...
mainpage:
//javascript to do ajaxContent
$(document).ready(function(){
$('.ajax').ajaxContent({
target:'ajaxContent',
success: function(obj,target,msg){
$(obj).css({color: 'blue'});
$(target).css({border:'7px solid blue'});
},
error: function(target){
$(target).css({color: 'red',fontSize:'24px',border:'3px
dotted #FF0000'});
},
errorMsg:'Something went wrong'
});
});
--left half (doesn't matter)
---right half:
-------ui-tabs(3 tabs):
-------------first tab (default)
--------------------link (class=ajax -- should load seperate html
form)
--------------------div to put form in (id=ajaxContent)
when you click the link, the href is loaded, just as if you clicked a
normal link...not ajaxContent behavior. I tried to do a little
experiment to see if jQuery could even see any "ajax-classed"
elements, I attached a mouseover even to them, and it worked, but only
the first time the page was loaded. Document object instance
problem? Please help, I've tried everything I can think of!
-Joe