Store old selected value in ajax, then use that value to select after page load

Question

So I have this code when user selects an office in the select option, another select box loads the employees in that office.

My Problem is how can I store or retain the old selected value from the employee when the 'Confirm' button is pressed and the page loads and then use that old value to select again the same current value if the office is not changed?

Here is the code:

$( document ).ready(function() {

    var $option = $('#office_id').find('option:selected');
    var value = $option.val();
    updateSalesDay(value);

    $('#office_id').change(function(e){
        var $option = $(this).find('option:selected');
        //Added with the EDIT
        var value = $option.val();
        updateSalesDay(value);
        console.log(value);
    });
});

function updateSalesDay(office_id){
    $('.load-bar').css('display','block');
    $('.panel-body').css('pointer-events','none');

    $('#employee_id').empty();

    $.ajax({
        type: "POST",
        headers: { 'X-CSRF-TOKEN': $('[name="csrf-token"]').attr('content') },
        url: "{{ route('postFilterEmployee') }}",
        data:  {
            'office_id': office_id
        },
        dataType: 'json',
        success: function (data) {
            console.log(data);
            employeesList = data;

            if (employeesList.length === 0) {
                $('#employee_id').append('<option></option>');
            }else{
                $('#employee_id').append('<option></option>');
                for (index = 0; index < employeesList.length; index++) {
                    $('#employee_id').append('<option value="'+employeesList[index].id+'">'+employeesList[index].last_name+' '+employeesList[index].first_name+'</option>');
                }
            }
            $('.load-bar').css('display','none');
            $('.panel-body').css('pointer-events','');
        },
        error: function (data) {
            console.log(data);
        }
    });
}

Any ajax masters here? Please help.

Cant you save the old value in a global variable or maybe in a hidden field? — imanshu15, Jan 25 '18 at 09:43
Store the `selected_office_id` in `localStorage` with such as `localStorage.setItem(selected_office_id, value)` and retrieve it on the next page with `localStorage.getItem(selected_office_id)` and use it to set the `selected option` — ild flue, Jan 25 '18 at 09:51
Possible duplicate of [Persist variables between page loads](https://stackoverflow.com/questions/29986657/persist-variables-between-page-loads) — Turnip, Jan 25 '18 at 10:14

VikingCode · Answer 1 · 2018-01-25T12:41:23.047

The answer provided by Kakada Naeng explained the 2 possibilities.

But @ this point you are storing everything on the backend, so you should fetch it from there before you render your form. Don't trust browser memory for sensitive stuff!. (i use chrome to edit & open it in IE next time....)

Let me give you an example.

$( document ).ready(function() {

    // function that will render form
    renderForm();

    var $option = $('#office_id').find('option:selected');
    var value = $option.val();
    updateSalesDay(value);

    $('#office_id').change(function(e){
        var $option = $(this).find('option:selected');
        //Added with the EDIT
        var value = $option.val();
        updateSalesDay(value);
        console.log(value);
    });
});

function renderForm(){
  // don't render form yet but show spinning wheel as default
  var data = fetchSalesDay();
  if(data === null){
    // hide spinning wheel render default form
  }
  else {
    //hide spinning wheel and render form with latest data
  }
}

function updateSalesDay(office_id){
 // code to save 
}

function fetchSalesDay(){
  // fetch the latest data (create backend api route for it)
  // google ajax GET request if you don't know how to do it
  if(data is back){
    return data;
  }
  else { 
   //render default form 
   return null;
  }
}

score -1 · Answer 2 · answered Jan 25 '18 at 12:08

-1

Basically, if you want to get the data after the page reloads or refresh, you must store it before your page refresh or reload. And it has 2 places to store it. First on the server(DB or...), another on client-side(local storage of browser).

And base on your context, I think you should store it on the local storage of browser then you can call it for using again.

answered Jan 25 '18 at 12:08

Kakada NEANG

451
1
6
16

why local storage? he is storing it at the back end... so he should fetch it from there. What if he changes it the first time in chrome and then opens it again on his smartphone? or IE or what so ever? – VikingCode Jan 25 '18 at 12:44
Emm maybe I am lose understanding the question, I just think that maybe user lazy select the **office box** again and again when they insert users data in the same office. And that why we should make the system to remember which office has been selected a moment. But after page reload or refresh the **office select box** will not remember the previous selected value. So my idea is just store the **office select box** value on browser, then fetch value of **employee box** base on it. – Kakada NEANG Jan 26 '18 at 13:29
**To answer your question:** * why local storage? because we just store the selected value of **office box** then use it as a **param** to fetch **employee**. * What if he changes..., it will not remember in the chrome. Base on this context, I think it is not necessary to remember. :) – Kakada NEANG Jan 26 '18 at 13:31

Store old selected value in ajax, then use that value to select after page load

2 Answers2