jquery ui tab appending content when reloaded -
i have jquery ui tab gets loaded via ajax , remote page:
<div id="tabs" style="width:1200px" class="ui-tabs"> <ul> <li><a href="/bugs/loadtab1">view</a></li> <li><a href="#tabs-2">add bug/request</a></li> </ul>... <script type="text/javascript"> jquery(function($) { $('#tabs').tabs({ ajaxoptions: { error: function(xhr, status, index, anchor) { $(anchor.hash).html("couldn't load tab."); }, data: {}, success: function(data, textstatus) { }, } }); }); </script> in page gets loaded table rows of php data, , jquery-ui boxes. problem when reload tab via .tabs("load",0);, tabi s reloading, appending div's contain dialog's. once each time it's reloaded.
here page being returned tab. seems structurally correct (no out of place div's, etc...).
<div style="height:300px;overflow:auto;width:1110px;"> <img src="/shared/img/icons2.0/16x16/arrow_refresh.png" onclick="bug_updatelist()" style="cursor:pointer" title='reload'> </div> <?php $w=1; foreach($bugs->result() $row){ switch($row->status){ case 0: $status='<b class="stat-0">new</b>'; break; case 1: $status='<b class="stat-1">review</b>'; break; case 2: $status='<b class="stat-2">in process</b>'; break; case 3: $status='<b class="stat-3">testing</b>'; break; case 4: $status='<b class="stat-4">complete</b>'; break; } switch($row->importance){ case 0: $import='<b class="imp-0">feature</b>'; break; case 1: $import='<b class="imp-1">very low</b>'; break; case 2: $import='<b class="imp-2">low</b>'; break; case 3: $import='<b class="imp-3">medium</b>'; break; case 4: $import='<b class="imp-4">high</b>'; break; case 5: $import='<b class="imp-5">urgent</b>'; break; } $notes=$this->db->query('select * bugs_notes bug_id='.$row->id); echo" <div id='dialog_$w' title='$row->description'> <p>$row->detail</p> <hr> <fieldset><legend>notes</legend> <div id='notes-$w'>"; foreach($notes->result() $nrow){ echo ' <div style="border-bottom:1px dotted #000;width:98%;padding:5px"><b>'.$nrow->user.'</b>: '.$nrow->note.'</div>'; } echo " <hr> <div id='addnote'> <label for='noteinput'>add note:</label> <form name='bugs_note-$w'> <input type='text' id='bugs_note-$w' name='note' size='60' /> <input type='hidden' name='bug_id' value='$row->id' /> <input type='button' value='add note' onclick='bug_addnote(\"bugs_note-$w\",$row->id,\"notes-$w\")' /> </form> </div> </div> </fieldset> <hr> <fieldset><legend>update status</legend> <div id='updatestatus-$w'> current status:<span id='curstatus-$w'>$status</span><br><br> <form name='status-radio-$w' id='status-radio-$w'> <span style='border:1px dotted #666;padding:3px;margin-right:3px'> <label for='radio-new-$w'>new</label> <input type='radio' id='radio-new-$w' name='status' value='0'> </span> <span style='border:1px dotted #666;padding:3px;margin-right:3px'> <label for='radio-rev-$w'>review</label> <input type='radio' id='radio-rev-$w' name='status' value='1'> </span> <span style='border:1px dotted #666;padding:3px;margin-right:3px'> <label for='radio-proc-$w'>in process</label> <input type='radio' id='radio-proc-$w' name='status' value='2'> </span> <span style='border:1px dotted #666;padding:3px;margin-right:3px'> <label for='radio-test-$w'>testing</label> <input type='radio' id='radio-test-$w' name='status' value='3'> </span> <span style='border:1px dotted #666;padding:3px;margin-right:3px'> <label for='radio-comp-$w'>complete</label> <input type='radio' id='radio-comp-$w' name='status' value='4'> </span> <input type='button' style='float:right' value='update status' onclick='bug_updatestatus(\"status-radio-$w\",$row->id,$i,\"curstatus-$w\",\"dialog_$w\")'> </form> </div> </fieldset> <fieldset><legend>update importance</legend> <div id='updateimportance-$w'> current importance:<span id='curimport-$w'>$import</span><br><br> <form name='status-import-$w' id='status-import-$w'> <span style='border:1px dotted #666;padding:3px;margin-right:3px'> <label for='radio-fet-$w'>feature</label> <input type='radio' id='radio-new-$w' name='import' value='0'> </span> <span style='border:1px dotted #666;padding:3px;margin-right:3px'> <label for='radio-vlow-$w'>very low</label> <input type='radio' id='radio-vlow-$w' name='import' value='1'> </span> <span style='border:1px dotted #666;padding:3px;margin-right:3px'> <label for='radio-low-$w'>low</label> <input type='radio' id='radio-low-$w' name='import' value='2'> </span> <span style='border:1px dotted #666;padding:3px;margin-right:3px'> <label for='radio-med-$w'>medium</label> <input type='radio' id='radio-med-$w' name='import' value='3'> </span> <span style='border:1px dotted #666;padding:3px;margin-right:3px'> <label for='radio-high-$w'>high</label> <input type='radio' id='radio-high-$w' name='import' value='4'> </span> <span style='border:1px dotted #666;padding:3px;margin-right:3px'> <label for='radio-urg-$w'>urgent</label> <input type='radio' id='radio-urg-$w' name='import' value='5'> </span> <input type='button' style='float:right' value='update importance' onclick='bug_updateimport(\"status-import-$w\",$row->id,$i,\"curimport-$w\",\"dialog_$w\")'> </form> </div> </fieldset> <div align='center'><br> <input type='button' value='delete' onclick='bug_delete($row->id,\"dialog_$w\",\"tr-$w\")'> <input type='button' value='close' onclick='bug_dialog_close(\"dialog_$w\")'> <br>asdf-dialog_$w</br> </div> </div>"; $w++; } ?> <script> <?php $ee=1; foreach($bugs->result() $rr){ echo "jquery(\"#dialog_$ee\").dialog({autoopen:false,width:850,height:550});\n"; $ee++; } ?> </script> i can't life of me figure out why .tabs("load",0) appending data... appreciated...
edit:
this insanely frustrating... i've tried 3 different workarounds, including loading listing , dialogs separately, , refreshing whichever appropriate. but, whenever need refresh dialogs, appending them. i've checked transport.responsetext.length make sure somehow php wasn't spitting out more data, checks out. tabs plugin doing something append stuff, , can't find out how replace it...
http://blog.nemikor.com/category/jquery-ui/jquery-ui-dialog/
i think may related...
Comments
Post a Comment