JQuery-ui Tabs - reload page with completely new content not working -
JQuery-ui Tabs - reload page with completely new content not working -
i'm loading in study , displaying jquery-ui in tab format. study returned ajax phone call in json, , function formatting html. illustration code below:
<div id="reportdiv"> </div> <script> function displayreport(objectid) { $( "#reportdiv" ).hide(); $( "#reportdiv" ).html(""); $.ajax({ type: "get", headers: { 'authtoken': gettoken() }, url:'/reportservice/v1/report/'+objectid.id, success: function(data){ if(data == null) { alert("that study not exist."); } else { var rethtml = datatotabhtml(data.config); $("#reportdiv").html(rethtml).fadein(500); $(function() { tabs = $( "#reportdiv" ).tabs(); tabs.find( ".ui-tabs-nav" ).sortable({ axis: "x", stop: function() { tabs.tabs( "refresh" ); } }); }); } } }); } </script>
this works fine first time displayreport called. however, if user enters value , runs displayreport again, "tabs" format lost (the tabs displayed links above sections, , clicking on link takes section farther downwards page).
i figured re-setting reportdiv html @ origin of function bring me original state , allow work every time. suggestions?
after more testing, found destroy way go. if i've set tabs already, run destroy, otherwise, skip destroy (http://jsfiddle.net/scmxyras/1/) :
if(tabs!=undefined)$( "#reportdiv" ).tabs("destroy");
jquery-ui tabs
Comments
Post a Comment