javascript - 执行删除操作后如何自动刷新页面

问题描述

我有一个正在执行删除操作的视图。执行删除操作后，页面没有变化，当我手动刷新页面时它仍然存在，然后我才知道记录已被删除。每次我删除时，我都需要手动刷新页面。如何在删除操作后自动刷新。我最后一次执行删除功能。
这是我的 ejs 文件和 ajax 调用
<script>
 $(document).ready(function() { 
    $('#expenseId').hide();
    let expenseId =document.getElementById('expenseId').innerHTML;

   // alert(expenseId);
   
    let columns ={
        sequence : 'Sequence',
        deleteAction: 'Action',
        name: 'Conveyance Voucher ',
        TravellingPurpose : 'Purpose of Travelling',
        modeOfTravel : 'Nature Of Travel',
        createDdate : 'Created Date',

    }
    
  var table = $('#ConveyanceVoucherTable').tableSortable({
    data :[],
    columns,
    searchField: '#searchField',
    sorting: true,
    rowsPerPage: 15,
    pagination:true,
    tableWillMount: () => {
        console.log('table will mount')
        
    },
    tableDidMount: () => {
        console.log('table did mount');

        $('#spinner').hide();
    },
    tableWillUpdate: () => {
        console.log('table will update')
    //  table.refresh();
    // onLoadTask();
    },
    tableDidUpdate: () => {
    console.log('table did update');
     anchorClickFunctionalities();
     additionaldeleteFunctionality();
    
    },
    tableWillUnmount: () => console.log('table will unmount'),
    tableDidUnmount: () => console.log('table did unmount'),
    onPaginationChange: function(nextPage, setPage) {
        setPage(nextPage);
    },
     
  });


  $('#changeRows').on('change', function() {
    table.updateRowsPerPage(parseInt($(this).val(), 15));
    })

    $('#refresh').click(function() {
        table.refresh(true);
        onLoadTask();
    })


    $.ajax({
        url:'/expense/getconveyancelist',
        type:"get",
        data:
        {
            expenseId:expenseId
        },
        datatype:'json'
    })
    .done((response)=>{
        console.log('response '+JSON.stringify(response));
        table.setData(response, columns);
        anchorClickFunctionalities();

     })
     .fail((jqXHR,status,error)=>{
         console.log('jqXHR: '+jqXHR);
         console.log('error: '+JSON.stringify(jqXHR));

     })
     function anchorClickFunctionalities(){
        $('a.conveyanceTag').on('click',function(event){
            event.stopImmediatePropagation();
            event.stopPropagation();
            let conveyanceId = this.id;
          //  alert('conveyanceId  '+conveyanceId);
            $('#conveyanceModal').modal('show');

            $.ajax({
                url : '/expense/getConveyanceVoucherDetail',
                type:'get',
                data : {
                    conveyanceId : conveyanceId
                },
                dataType: 'json',
                beforeSend : function(){
                  $('#detailLoadingSpinner').show();
                }
            })
                .done((response)=>{
                    console.log('ConveyanceVoucherDetail '+JSON.stringify(response));
                  $('#detailLoadingSpinner').hide();
                  if(response.length > 0)
                        {
                          let conveyanceRecord = response[0];
                          let htmlTable = '';
                        //  let strCreatedDate = new 
   Date(conveyanceRecord.createddate).toLocaleString();
                          let strCreatedDate = new Date(conveyanceRecord.createddate);
                          strCreatedDate.setHours(strCreatedDate.getHours() + 5);
                          strCreatedDate.setMinutes(strCreatedDate.getMinutes() + 30);
                          let strDate = strCreatedDate.toLocaleString();
                          htmlTable += '<tr>';
                              htmlTable += '<td><strong>Name</strong></td>';
                              htmlTable += '<td>'+conveyanceRecord.conveyancename+'</td>';
                              htmlTable += '<td><strong>Expense Name</strong></td>';
                              htmlTable += '<td>'+conveyanceRecord.expname+'</td>';
                          htmlTable += '</tr>';
                          htmlTable += '<tr>';
                            htmlTable += '<td><strong>From</strong></td>';
                            htmlTable += '<td>'+conveyanceRecord.from__c.slice(0, 10)+'</td>';
                            htmlTable += '<td><strong>To</strong></td>';
                            htmlTable += '<td>'+conveyanceRecord.to__c.slice(0, 10)+'</td>';
                          htmlTable += '</tr>';
                          htmlTable += '<tr>';
                            htmlTable += '<td><strong>Amount</strong></td>';
                            htmlTable += '<td>'+conveyanceRecord.amount__c+'</td>';
                            htmlTable += '<td><strong>Mode of Conveyance</strong></td>';
                            htmlTable += '<td>'+conveyanceRecord.mode_of_conveyance__c+'</td>';
                          htmlTable += '</tr>';
                          htmlTable += '<tr>';  
                          htmlTable += '<td><strong>Activity Code</strong></td>';
                          if(conveyanceRecord.activitycode != null)
                              htmlTable += '<td>'+conveyanceRecord.activitycode+'</td>';
                              else
                              htmlTable += '<td></td>';
                              htmlTable += '<td><strong>KM. TRAVELLED</strong></td>';
                            htmlTable += '<td>'+conveyanceRecord.kms_travelled__c+'</td>';

                          htmlTable += '</tr>';
                          htmlTable += '<tr>';
                            htmlTable += '<td><strong>Purpose of Travel</strong></td>';
                            htmlTable += '<td>'+conveyanceRecord.purpose_of_travel__c+'</td>';
                            htmlTable += '<td><strong>Create Date</strong></td>';
                            htmlTable += '<td>'+strDate+'</td>';
                          htmlTable += '</tr>';
                           htmlTable += '<tr>';
                          htmlTable += '<td><strong>View Image</strong></td>';
                          console.log('conveyanceRecord.heroku_image_url__c) 
    '+conveyanceRecord.heroku_image_url__c);
                          if(conveyanceRecord.heroku_image_url__c != null && 
     conveyanceRecord.heroku_image_url__c != '' && conveyanceRecord.heroku_image_url__c != 'demo')
                              htmlTable += '<td><a target="_blank" 
     href="'+conveyanceRecord.heroku_image_url__c+'" >Click Here</a></td>';
                          else
                              htmlTable += '<td></td>';
                          
                              htmlTable += '<td><strong></strong></td>';
                              htmlTable += '<td></td>';
                          htmlTable += '</tr>';
                          $('#conveyanceVouchertable').empty();
                          $('#conveyanceVouchertable').html(htmlTable);
    

                        }


                })
                .fail((jqXHR, status, error) =>{
                    $('#detailLoadingSpinner').show();
                    console.log('jqXHR  : '+JSON.stringify(jqXHR));
                    console.log('error  : '+error);
                  })
            })
    }
   })

   function additionaldeleteFunctionality(){

    $('.deleteButton').on('click',function(event){

  event.preventDefault();
  event.stopPropagation();
  event.stopImmediatePropagation();
  //  $('#parentId').hide();
  // let parentId = document.getElementById('parentId').innerHTML;
    let parentId = this.id;
  console.log('pettyCashId  '+parentId);
  alert('Are you sure to  Delete this record !');

    $.ajax({
    url : '/expense/deleteConveyance/'+parentId,
   type:'get',

  dataType: 'json',

  })
  .done((response) => {
      console.log('resonse   :'+response);
      alert("Conveyance Voucher Deleted Succesfullly !");
  })
  .fail((jqXHR, status, error) => {
      console.log('jqXHR  '+JSON.stringify(jqXHR));
}) 
})
}
标签： javascripthtmlnode.jsajax
javascript - 执行删除操作后如何自动刷新页面

问题描述

解决方案

推荐阅读
