홈>2020-02-01 00:42

javascript - 선택한 이전 값을 ajax에 저장 한 다음 해당 값을 사용하여 페이지로드 후 선택

사용자가 office 를 선택할 때이 코드가 있습니다 선택 옵션에서 다른 선택 상자가 employees 를로드합니다. 그 office 에서 .

내 문제는 어떻게 old selected value 를 저장하거나 유지할 수 있는가이다 '확인'버튼을 눌렀을 때 페이지가로드 된 다음 직원을 사용하면 직원으로부터 같은 old value 를 다시 선택하려면 사무실이 변경되지 않은 경우

코드는 다음과 같습니다.

current value

아약스 마스터가 있습니까? 도와주세요.

$( 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);
        }
    });
}

javascriptjqueryajax

답변 # 1

Kakada Naeng이 제공 한 답변은 두 가지 가능성을 설명했습니다.

그러나이 시점에서 모든 것을 백엔드에 저장하므로 폼을 렌더링하기 전에이를 백엔드에서 가져와야합니다. 민감한 것들에 대한 브라우저 메모리를 신뢰하지 마십시오!. (크롬을 사용하여 다음에 IE에서 편집하고 엽니 다 ...)

예를 들어 보겠습니다.

$( 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;
  }
}

답변 # 2
기본적으로 페이지를 다시로드하거나 새로 고친 후 데이터를 가져 오려면 페이지를 새로 고치거나 다시로드하기 전에 데이터를 저장해야합니다. 저장 장소는 2 곳입니다. 첫 번째는 서버 (DB 또는 ...), 다른 하나는 클라이언트 측 (브라우저의 로컬 스토리지)입니다.

자신의 상황에 따라 브라우저의 로컬 저장소에 저장 한 다음 다시 사용하기 위해 호출 할 수 있다고 생각합니다.

Python2.net

javascript - 선택한 이전 값을 ajax에 저장 한 다음 해당 값을 사용하여 페이지로드 후 선택

관련 자료