2016-07-15 5 views
5

chiara dinamica elenco comprimibile, vuota() html (" ") non funziona

<div data-role="page" id="leavebal_page" class="home_page_style" style="position:fixed; overflow:hidden;"> 
 
      <div data-role="content" id="leavebal_page_content"style="overflow:hidden;margin: 0; 
 
       padding: 0;" > 
 
       <div id="leavebal_header" style="width: 100%; margin: -2%; height:12.5%;"> 
 
        <h4 style="text-align: center; color: white;line-height: 3;">AppName</h4> 
 
        <a href="#menupanel" class="ui-btn ui-btn-left ui-btn-icon-notext ui-icon-bars ui-corner-all ui-shadow ui-nodisc-icon" style="background: transparent;">Menu</a> 
 
        <a href="#" class="ui-btn ui-btn-right ui-btn-icon-notext ui-icon-arrow-l ui-corner-all ui-shadow ui-nodisc-icon" style="background: transparent;" onclick="changePageForHome();">Back</a> 
 
       </div> 
 
       <hr style="width:100%; margin-top:-9%;"> 
 
       <div id="leave_query" class="open_tab_bckgrnd" style="margin-top: -6%;"> 
 
        <h6 style="background-color:#D3D3D3;text-align:center;height:6%;color: #C32036;text-shadow: none;font-size: 18px;font-weight: normal;position: relative;top: 2%;">Leave Balance</h6> 
 
        <div data-role="collapsible-set" id="leavebalstatus"> 
 
         
 
        </div> 
 
       </div> 
 
      </div> 
 
      
 
     </div>

voglio cancellare i dati precedenti ogni volta che ho lasciato la mia pagina. Ho usato .empty() & html ('') per questo ma non funziona. Mi aiuti per favore.

Ecco il mio codice -

$("#leavebalstatus").html(" "); 
$("#leavebalstatus").empty(); 

     var leaveBallist= ''; 
for(i=0; i<getLeaveBal.length;i++){ 
       leavebalgrp_name = getLeaveBal[i].find('Leave_Group_Name').text(); 
       leavebal_code = getLeaveBal[i].find('Leave_Type_Code').text(); 
       leavebal_name = getLeaveBal[i].find('Leave_Name').text(); 

       leaveBallist += '<div data-role="collapsible" data-iconpos="right" data-collapsed-icon="carat-d" data-expanded-icon="carat-u" style="background:white;" id="leaveBalMainData"><h3 style="margin-bottom:2%;"><div style="width:100%;" id="leaveBal_contaner"><p style="display:inline-block;width:35%;background: red;text-align:center; color:white;">'+leavebal_name+'</p><p style="display:inline-block;width:60%; margin-left:5%;">'+leavebalgrp_name+'</p></div></h3>'; 

       for(k=0; k<collapseArray.length;k++){ 
      if (i == k){ 

      leaveBallist += '<p style="width:100%;margin-left:5%;"><span style="width:33%; dispaly:inlne-block;float:left;">Entitled</span><span style="width:33%; dispaly:inlne-block;float:left;">Availed</span><span style="width:33%; dispaly:inlne-block;float:left;">Balance</span></p><p style="width:100%;margin-left:5%;"><span style="width:33%; dispaly:inlne-block; float:left;">'+collapseArray[i].find('LeaveEntitled').text()+'</span><span style="width:33%; dispaly:inlne-block; float:left;">'+collapseArray[i].find('LeaveAvailed').text()+'</span><span style="width:33%; dispaly:inlne-block; float:left;">'+collapseArray[i].find('LeaveBal').text()+'</span></p>'; 
      } 

      } 
       leaveBallist += '<p style="width:100%;"><hr style="width:100%;"></p><p style="width:100%;"><span style="color:red; width:100%;font-size:16px;margin-left:42%" onclick="applyLeaveForBal('+i+');">APPLY</span></p></div>'; 
      } 

        $('#leavebalstatus').html(leaveBallist); 
    // $('#leavebalstatus').collapsible(); 
     $('#leavebalstatus').collapsibleset("refresh"); 
     $('#leavebalstatus').trigger("create"); 

per cancellare i dati dalla pagina Ho provato a chiamare

$(document).on("pagehide", "#leavebal_page", function(event, ui){ 
          alert(event.target); 
          $('#leavebalstatus').empty(); 
          $('#leavebalstatus').html(''); 
              }); 

ma entrambi non è working.Thanks di aiuto

+0

Hai solo bisogno di uno '.empty()' e '.html (" ")'; quasi la prima cosa che '.html()' fa è chiamare '.empty()' comunque. – Pointy

+0

Sì, hai ragione, ma nel mio caso non funzionano entrambi. è così che l'ho messo così, ma ancora senza fortuna. –

+0

Puoi inserire lo snippet qui e possiamo capire come funziona? – trungk18

risposta

1

si potrebbe provare con sopprimere questa way:

$("#leavebalstatus").children().remove(); 

Spero che questo ti aiuti!

+0

la sua pagina di rimozione completamente. la lista non sta creando usando questo @jcarrera –

+0

Hai provato a usarlo all'interno di pagehide? – jcarrera

+0

sì, ho provato con pagehide ma ancora senza fortuna. utilizzando rimuovi il contenuto della pagina rimosso completamente anche l'intestazione, e usando il contenuto della pagina vuota viene rimosso ma quando visito nuovamente la pagina..quella pagina non viene creata –

3

suo perché si sta creando di nuovo anche dopo che il valore è svuotato il seguente codice nel frammento il valore:

  $('#leavebalstatus').collapsibleset("refresh"); 
     $('#leavebalstatus').trigger("create"); 

il valore viene svuotato, ma alla fine ancora una volta riposati e creato.

È necessario impostare un flag per verificare se si è verificato l'evento pagehide e se non è stato eseguito eseguire sopra altri due not.

+0

pagehide si verifica ogni volta e inoltre è possibile vedere nel mio codice che hanno già queste due righe. –

+0

In secondo piano su questa risposta. Potresti cancellare l'elemento che desideri cancellare quando entri nella pagina, ma diverse righe in basso popolano lo stesso elemento con '$ ('# leavebalstatus'). Html (leaveBallist);'. Se questo viene eseguito rapidamente, non vedrai mai #leavebalstatus in uno stato vuoto. – jmealy

+0

grazie a @JohnAtNotion per la spiegazione. – orangespark

0
document.getElementById("#leavebalstatus").reset(); 
+0

, per favore, elabora ed estendi la tua risposta, fornisci un'introduzione e spiegazioni, o la tua risposta potrebbe essere cancellata, a causa del post di bassa qualità. Grazie per la comprensione. Si prega di leggere la ** sezione di aiuto **, per ulteriori informazioni su come scrivere e rispondere. – Farside

+1

Grazie per il consiglio @Farside, terrò a mente questo! –

+0

André van Rensburg, ma quello che voglio dire - devi farlo esplicitamente ora, altrimenti la tua risposta sarà nella coda delle recensioni sulla scrivania dei moderatori ancora una volta. Per favore, modifica la tua risposta in base a [le migliori pratiche] (http://stackoverflow.com/help/how-to-answer). Grazie. – Farside

0

Non posso essere sicuro di quello che dirò senza testarlo ma forse può essere d'aiuto. La settimana scorsa stavo lavorando con Bootstrap e ho avuto problemi con un modale quando ho provato a pulirlo in alcuni casi.

La cosa era che in alcune situazioni Bootstrap creava nuovamente il modale come figlio diretto del corpo. Così, quando ho chiamato la funzione vuota, indicava qualcos'altro.

Il mio suggerimento è di valutare lo alert($('#leavebalstatus').length) come dice @AlenaKastsiukavets nei commenti, ma cambiando l'ID leavebalstatus in una classe, in modo che jQuery non abbia problemi a selezionare più di un oggetto.

Finalmente l'ho risolto mettendo il modale come figlio diretto del corpo ma ovviamente è probabile che la soluzione di cui hai bisogno possa cambiare un po '.

Problemi correlati