Geek Answers Handbook

Pure dynamic dumped list, empty () html ("") does not work

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

I want to delete the previous data every time I left my page. I used .empty () and html ('') for this, but it does not work. Please help me.

Here is my code -

 $("#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");

to clear data from the page I was trying to call

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

but both do not work. thanks for the help

+5
source share
4 answers

This is because you re-create the value even after the value is omitted by the following code in the fragment:

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

the value is emptied, but at the end it is updated and created again.

You must check the box to check if an event related to the page has occurred, and if it didn’t, execute above the other two.

+3
source

You can try to remove this method:

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

Hope this helps you!

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

I cannot be sure of what I will say without testing it, but perhaps this can help. Last week, I worked with Bootstrap, and I had problems with modal when I tried to clean them in certain cases.

The fact is that in some situations Bootstrap again created a modal form as a direct child of the body. So when I called an empty function, it pointed somewhere else.

My suggestion is to evaluate alert($('#leavebalstatus').length) as @AlenaKastsiukavets says in the comments, but changing the identifier of leftbalstatus in the class so that jQuery has no problem choosing more than one object.

Finally, I solved this by putting the modal as a direct child of the body, but obviously, it is likely that the solution you need can change a little.

0
source

More articles:


All Articles