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

[ChrisBurks]

Out of curiosity is there a specific reason why you wouldn't use the Processing Script in the UI page?

[ChrisBurks · Accepted solution]

If there weren't any stipulations on using the Process Script portion of the UI Page, one solution that should work is to

1. Wrap the table within   <g:ui_form>   tags
2. Change the button markup to something similar to this
   • <button type="submit" onclick="getRecord('$[inc.sys_id]')">Delete</button><br/>
3. After the table place a hidden input element giving it a name and id attribute
   • <input type="text" name="record_id" id="record_id" />
4. The Client Script will hold the getRecordId() function that is called via the onclick on the button element. This will place the record sys_id in the hidden input element
   • var recordItem = gel('record_id');
     function getRecord(recID){
       recordItem.value = recID;
     }
     
     
5. The Process Script will do the job the client script did before. I used the .get() method to grab the record directly instead of running a query since we have the sys_id already and will just delete the record. And finally use the GlideSession() method to grab where we're at and use the sendRedirect to drop us right back on the page refreshing it.
   • var gr= new GlideRecord('incident');
     gr.get(record_id);
     if(gr){
       gr.deleteRecord();
     }
     var urlOnStack = GlideSession.get().getStack().bottom();
     response.sendRedirect(urlOnStack);

The modified   HTML markup from steps 1-3 is below. My proposed changes are bolded:

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

<g:ui_form>

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

<!-- below button replaces button above -->

<button type="submit" onclick="getRecord('$[inc.sys_id]')">Delete</button><br/>

    </td>
  </tr>
      </j2:while>
  </table>

<input type="text" name="record_id" id="record_id" />

  </g:ui_form>

</g2>

</j:jelly>

[jenny32]

Hi Chris,

Thanks a lot for the solution Its working absolutely fine.

Thanks,

Jenny