I have a jquery ui tab that gets loaded via ajax and 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 this tab.");
},
data: {},
success: function(data, textStatus) {
},
}
});
});
</script>
in the page that gets loaded is a table with rows of PHP data, and jquery-ui boxes. The problem is that when I reload the tab via .tabs("load",0);, the tabi s reloading, but appending the div’s that contain the Dialog’s. Once for each time it’s reloaded.
Here is the page that is being returned to the tab. It seems to be 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() as $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 * FROM bugs_notes WHERE 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() as $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() as $rr){
echo "jQuery(\"#dialog_$ee\").dialog({autoOpen:false,width:850,height:550});\n";
$ee++;
}
?>
</script>
I can’t for the life of me figure out why the .tabs("load",0) is appending data… Any help would be appreciated…
EDIT:
This is insanely frustrating… I’ve tried 3 different workarounds, including loading the listing and dialogs separately, and only refreshing whichever is appropriate. But, whenever I need to refresh the dialogs, it is appending them. I’ve checked the transport.responseText.length just to make sure somehow PHP wasn’t spitting out more data, but it checks out. The tabs plugin is doing something to append this stuff, and I can’t find out how to replace it…
http://blog.nemikor.com/category/jquery-ui/jquery-ui-dialog/
I think this may be related…