reload page and stay in current page-CodePudding

I need to understand how I can change the data of a customer on page 2 without returning to page 1 when reloading the page. In practice I need to stay on the current page, but currently when I change the data of a customer and save the card, if I am on page 3 it always returns me to page 1. I tried window.location.reload() Is there any way to avoid resetting the filters?

This is my JavaScript function:

function rinnova(id) {
  var formData = new FormData();

  var abbonamento = id.split("-");
  var abb = $("#abb"   abbonamento[3]).val();
  console.log(abb);

  formData.append(
    "id",
    abbonamento[0]   "-"   abbonamento[1]   "-"   abbonamento[2]
  );
  formData.append("abb", abb);

  $.ajax({
    url: "include/rinnovaabbonamento.php",
    data: formData,
    type: "POST",
    contentType: false,
    processData: false,
    beforeSend: function () {
      return confirm("Vuoi rinnovare l'abbonamento?");
    },
    success: function (response) {
      $(".box").html(
        "<h3 class='text-center pb-3 pt-3'>Rinnovo confermato!</h3>"
      );
      document.location.reload();
    }
  });
}

this is FooTable function

if( $('.footable-editing').length ) {
            var $modal = $('#footable-editor-modal'),
                $editor = $('#footable-editor'),
                $editorTitle = $('#footable-editor-title'),
                ft = FooTable.init('.footable-editing', {
                    editing: {
                        enabled: true,
                        addRow: function(){
                            $modal.removeData('row');
                            $editor.find('#id').val("");
                            $editor.find('#account').show();
                            $editor.find('#categoria').val("1");
                            $editor.find('#costo').val("40.00");
                            $editor[0].reset();
                            $editorTitle.text('Add a new row');
                            $modal.modal('show');

                        },
                        editRow: function(row){
                            var values = row.val();
                            $editor.find('#account').hide();
                            $editor.find('#id').val(values.id);
                            $editor.find('#nome').val(values.nome);
                            $editor.find('#cognome').val(values.cognome);
                            $editor.find('#data').val(values.data);
                            $editor.find('#luogonascita').val(values.luogonascita);
                            $editor.find('#residenza').val(values.residenza);
                            $editor.find('#codicefiscale').val(values.codicefiscale);
                            $editor.find('#scadenza').val(values.scadenza);
                            $editor.find('#costo').val(values.costo);
                            $editor.find('#note').val(values.note);
                            $editor.find('#attivo').val(values.attivo);


                            var cat = values.categoria.split(".");
                            var idcat = cat[0];

                            if(values.categoria=="Nessuna categoria"){
                              $("#nessunacategoria").attr('selected', 'selected');
                            }else{
                              $("#cat" idcat).attr('selected', 'selected');
                            }


                            $modal.data('row', row);
                            $editorTitle.text('Edit - '   values.nome   ' Data');
                            $modal.modal('show');
                        },
                        deleteRow: function(row){
                            if (confirm('Sei sicuro di voler cancellare?')){
                              var values = row.val();
                              var formData = new FormData();

                              formData.append('id', values.id);
                              formData.append('elimina',"1");
                              $.ajax({
                                url: "include/register_account.php",
                                data: formData,
                                type: "POST",
                                contentType: false,
                                processData:false,
                                success: function(response){
                                  alert(response);
                              }
                            });
                            }
                        }
                    }
                }),
                uid = 10;

CodePudding user response：

you have to populate the html page with updated content after the ajax call instead of calling window.reload or document.reload

CodePudding user response：

It's hard to know the details without seeing more of the relevant code, but it sounds like -- from your server's point of view -- there is only ever one page being loaded. When the user sees "page 2", the browser has merely changed the appearance of the page (probably, but not necessarily, including an AJAX request to exchange some information with the server) without actually loading an enire new page. Then, when you ask the server to reload the page, you logically get the original state of the page, which looks like "page 1".

If the address in the URL bar changes whenever the user's view changes (e.g. from "page 1" to "page 2"), then you can control which view the user sees by setting the document.location property, (although using the history API might give you more precise control).

On the other hand, if the address is always the same, you probably can't rely on as much help from the browser to set a particular state, but if the change to "page 2" used an AJAX request to the server, then you can send a similar request to reproduce a similar state.

In either case, the state you get (from the browser's history API or the server's AJAX response) will probably not exacly match the state you want because the user has already made some changes to "page 2". You are already capturing some user-entered information: the id parameter of your rinnova function presumably represents something the user entered. Once you have captured any such information you need, you will trigger the reset of "page 2", then add the finishing touch by restoring the captured values into whatever page elements they were captured from.

For example, let's imagine that the earlier code said:

const cardID = ("#card-id").val();
rinnova(cardID);

Now that you have reset "page 2", you would repopulate the #card-id element by doing something like:

$("#card-id").val(cardID);

A small caveat about making your changes directly in the browser:
Seeing a change in the URL (when the user's view changes) does means that the browser knows about the change, but it doesn't guarantee that the browser was directly responsible for the change. Using the browser to navigate between views is appropriate in a "single-page application" website where such navigation is generally handled on the client side (i.e. by the browser). But if your site is making these changes from the server side via AJAX, your reset of "page 2" should also be done via AJAX so the server always knows what you're doing.