How to refresh a UI page after deleting a record?

[jenny32]

Hi All,

I have a UI page, in which I have written code to display he list of records from a table. I created a "delete" button next to every record.

The code is shown below:

HTML:

<button style="width:95%; color:#1E90FF;" type="Submit" onClick="deleteFunction('$[inc.sys_id]');"><b>Delete</b></button>

CLient Script:

function deleteFunction(id){

  var gr= new GlideRecord('<table name>);

gr.addQuery('sys_id','=',id);

gr.query();

while(gr.next()){

gr.deleteRecord();

    }

//window.location.reload(); //page is reloaded but the data is not deleted

//window.reload(); not working

//contentWindow.location.reload();

//location.reload(); //loading but data not deleted

self.location['reload']();

}

I tried with these three lines of code:

1)window.location.reload();

2) location.reload();

3) self.location['reload']();

In above cases, when I click delete button, the page is reloading but the record is not deleted from the page.

Can anyone tell me what has to be done?

Any help will be highly appreciated.

Thanks,

Jenny

[bernyalvarado]

Hi Jennifer, you may also want to try

location.reload(true);

I understand that should force a reload without using the client cache.

Thanks,

Berny

[jenny32]

Hi Berny,

I tried with the code u suggested.

1) window.location.href = "/ui_page.do"; again I have to manually refresh my page.

2)location.reload(true); its not working, even after I refresh my page the record still exists.

Here is my code:

HTML:

<?xml version="1.0" encoding="utf-8" ?>
<j:jelly trim="false" xmlns:j="jelly:core" xmlns:g="glide" xmlns:j2="null" xmlns:g2="null">

<g2:evaluate var="jvar_inc">
    var inc = new GlideRecord('<table name');
    inc.orderBy('u_position');
    inc.query();
</g2:evaluate>

<g2 height="200px">
<table class="a2_table">
<tr>
        <th class="a2_th"><h4><b>abc</b></h4></th>
  <th class="a2_th"></th>
        <th class="a2_th"><h4><b>Levels</b></h4></th>
        <th class="a2_th"></th>
  <th class="a2_th"><h4><b>xyz</b></h4></th>
  <th class="a2_th" style="width:150px;"><a href="tablename.do"><button class="button" style="width:100%; font-size:50%;" ><h4><b>Add Level</b></h4></button></a> </th>
</tr>
 
  <j2:while test="$[inc.next()]">
 
      <tr>
  <td class="a2_td">
  $[inc.columnName.getDisplayValue()]
        </td>
 
  <td class="a2_td">
    <img src="blue_arrow1.png" width="40"/>
  </td>
 
        <td class="a2_td"><b> $[inc.columnName]<br/></b> Description: $[inc.columnName] <br/>Frequency: $[inc.columnName] <br/>
  <a href="home.do?sysparm_view=$[inc.columnName.getDisplayValue()]">Dashboard</a>
 
  </td>
 
  <td class="a2_td">
    <img src="blue_arrow1_r.png" width="40" />
  </td>
 
  <td class="a2_td">
  $[inc.columnName.getDisplayValue()]</td>
 
  <td class="a2_td">
     
    <button style="width:95%; color:#1E90FF;" type="Submit" onClick="deleteFunction('$[inc.sys_id]');"><b>Delete</b></button><br/>
         
    </td>
  </tr>
      </j2:while>
  </table>
</g2>

</j:jelly>

Client Script:

function deleteFunction(id){

var gr= new GlideRecord('u_goverancelevel');

gr.addQuery('sys_id','=',id);

gr.query();

while(gr.next()){

gr.deleteRecord();

}

//window.location.reload(); //page is reloaded but the data is not deleted

//window.reload(); //not working

//contentWindow.location.reload();

//location.reload(); //loading but data not deleted

//self.location['reload']();

//window.location.href = "GoveranceUI.do";

location.reload(true);

}

Thanks,

Jenny

[bernyalvarado]

Hi Jenny,

I was able to figure out what is wrong in your script. The problem is that you're executing a deleteRecord in the client side and then immediately forcing a refresh which does not allow the deleteRecord transaction to actually finish deleting the record in the server.

This is why when you do a manual refresh it works

Thanks,

Berny

[bernyalvarado]

Jenny, I will then offer to options

Option a) Use a GlideAjax in the client script which calls a script include that takes care of deleting the record. On the callback function of the GlideAjax you should then perform the refresh of a page. This is the most elegant and by far the recommended option of how to do this.

The wiki should be able to walk you through in how to write a GlideAjax and its script include:

wiki.servicenow.com/index.php?title=GlideAjax

Option b) This is just the quick one to demonstrate that the race-condition which i shared in the prior post is true. This will be to add a simple timer at then end of your deleteFunction client script. This could be added right after the deleteRecord() line. The code which you will need to include is something like the following:

setTimeout(function(){

   location.reload(true);

}, 1000); //waits for 1 second (1000 milliseconds) before refreshing the page

Thanks,

Berny

[bernyalvarado]

I hope this is helpful!