2010-07-23 3 views
0

J'ai un onglet ui jquery qui est chargé via ajax et page à distance:jquery onglet ui contenu annexant quand rechargées

<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> 

dans la page qui est chargée est une table avec des lignes de données PHP et jquery- boîtes d'ui. Le problème est que lorsque je recharge l'onglet via .tabs("load",0);, les tabi s rechargent, mais en ajoutant les divs qui contiennent les dialogues. Une fois pour chaque fois, il est rechargé.

Voici la page qui est retournée à l'onglet. Il semble être structurellement correct (pas div divorcée, 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> 

Je ne peux pas pour la vie de me comprendre pourquoi la .tabs("load",0) est apposent des données ... Toute aide serait appréciée ...


EDIT:

C'est incroyablement frustrant ... J'ai essayé 3 solutions de contournement différentes, y compris le chargement de la liste et des boîtes de dialogue séparément, et rafraîchissant seulement ce qui est approprié. Mais, chaque fois que j'ai besoin de rafraîchir les boîtes de dialogue, il les ajoute. J'ai vérifié le transport.responseText.length pour m'assurer que PHP ne crachait pas plus de données, mais il vérifie. Le plugin onglets est en train de faire quelque chose pour ajouter ce genre de choses, et je ne peux pas savoir comment remplacer ... il

Répondre

Questions connexes