Sticky ajax content reload in jQuery tab
I am very new to programming, so please forgive me. I am using great jQuery tabs for my application, I am loading external content into tabs using ajax and in one of these tabs I need to programmatically reload the content of that tab for the result. I've followed the documentation * to no avail.
I initialized the tabs on my root page very simply:
JavaScript:
$(document).ready(function(){
$("#tabs").tabs({ cookie: { expires: 30 } });
});
HTML:
<div id="tabs">
<ul>
<li><a href="#moderatorManage"><span>Find and Manage Moderators</span></a></li>
<li><a href="flaggedCards/" id="flaggedCards" ><span>Flagged Cards</span></a></li>
<li><a href="pendingDelete/"><span>SinBin / Pending Delete</span></a></li>
</ul>
</div>
You can see that I am loading the external url "flagsgedCards /". There I have more jQuery with this function:
$(document).ready(function(){
$("#controls_{{id}} input").click(function() {
$(this).parent().parent().parent().addClass("highlight").fadeTo("slow", 0.1);
$("#tabs").tabs( 'load' , 0 ); // fails also tried various selectors
});
});
What I am trying to do is trigger the flaggedCards to reload when this function is called, I have tried different syntaxes to no avail.
- docs.jquery.com/UI/API/1.7.1/Tabs#method-load
I was able to duplicate the exact same problem you are reporting in your post. This is how I solved it.
On the root page where the tabs are placed add this function:
function selectTab(index){
$("#tabs").tabs('load', index);
}
Then on the "flaggedCards /" external url page, replace the line that reads:
$("#tabs").tabs( 'load' , 0 );
with this:
selectTab(0);
I don't know why this workaround does the trick. This may be a mistake.
a source to share
To execute the script, you must ensure that the datatype of the ajax requests is "html" - see $. ajax options . To do this, use the ajaxOptions tabs when configuring tabs.
$("#tabs").tabs({ cookie: { expires: 30 }, ajaxOptions: {dataType: "html"} });
Another problem might be that $(document).ready(function(){
it probably doesn't fire when the tab content is loaded via ajax. Try to remove that and the corresponding one }
. When he loads your content via ajax, we hope he inserted it into the document before he evaluates the scripts.
I have no idea. Hope that helps :-)
a source to share