Question

我正在使用jQuery开发移动应用程序。有趣的是，当我编辑员工的详细信息时，在列表视图中可以看到更新，但是当我查看本地存储中更新没有反映时，员工的完整详细信息的页面也不会更新。但是，如果我刷新浏览器，则会显示更新。如何在不刷新浏览器的情况下同时更新本地存储和详细信息页面。

我使用两种不同的表单，一种是添加新员工，另一种是编辑员工详细信息。

感谢您的任何建议

以下是我添加新员工的代码

                       //user input to Add Employee Form
        $('#add_new_employee_form').on('submit', function(){



          var newEmployee = {
       id: employees.length+1,
       employeeno: $('#employeeno').val(),
       employeename:$('#employeename').val(),
       employeebirth:$('#employeebirth').val(),
       employeestate: $('#employeestate').val(),
       employeephone:$('#employeephone').val(),

     };
       employees.push(newEmployee);

       addEmployee(newEmployee);


   //save offline
    localStorage.setItem('employees', JSON.stringify(employees));

     //Alert when case saved successfull
       toast('Employee added successfully.'); 

    //refresh the list view
      $('#employee_list').listview("refresh");     

     //Change page to home
      $.mobile.changePage('#home_page');

       return true;

   });        


 //execute function to show cases
      showEmployees();

这是我编辑员工的代码

                      // Editing Saved Cases

        //User input to Edit form function
     $('#edit_employee_form').on("submit", function(){

var x=document.forms["edit_employee_form"]["id"].value;  //here we are taking the value of employee id

      //and saves the new values to editEmployees
 var editEmployees = JSON.stringify({
    id: x,
     employeeno: document.forms["edit_employee_form"][" employeeno"].value,
    employeename:document.forms["edit_employee_form"]["employeename"].value,
   employeebirth:document.forms["edit_employee_form"]["employeebirth"].value,
   employeestate: document.forms["edit_employee_form"]["employeestate"].value,
    employeephone:document.forms["edit_employee_form"]["employeephone"].value,
    });
    var y=x-1;                      

    cases[y]=JSON.parse(editCases);   //here we updates the values

//After the selected case has been edited
localStorage.setItem("employees", JSON.stringify(employees));   //set the update values to localstorage
toast('Employee Updated Successfully');



      //refresh the list view
       $('#employee_list').listview("refresh");

        //update list view
         showCases();
         $.mobile.changePage('#home_page');

         //refresh the list view
      $('#employee_list').listview("refresh"); 
      return true;



});

          //Edit button
      $(".edit_button").live('click', 'tap', function(e){

e.stopPropagation();
$.mobile.changePage("#edit_employee_page");  // the edit_employee_page was brought to front for making 
                                        // the edit_employee_form inside the access scope

var employeeId=$(this).attr('id');          // here we are taking the id of the button for that particular employee.


 $('#edit_employee_page').ready(function(e) {       //this is for initializing the values on ready of the edit_employee_page
     for (var i = 0; i < employees.length; i++){
   if(employees[i].id == employeeId){
    document.forms["edit_employee_form"]["id"].value=employeeId;
    document.forms["edit_employee_form"]["employeeno"].value=employees[i].employeeno;
    document.forms["edit_employee_form"]["employeename"].value=employees[i].employeename;
    document.forms["edit_employee_form"]["employeebirth"].value=employees[i].employeebirth;
    document.forms["edit_employee_form"]["employeestate"].value=employees[i].employeestate;
    document.forms["edit_employee_form"]["employeephone"].value=employees[i].employeephone;
    document.forms["edit_employee_form"]["id"].setAttribute('id',"readonly");



   }
     }

});


    return false;
});

以下是动态列表视图的代码，以及每个列表项的动态页面

                          //add an eliment to list view
      var addEmployees = function(empData){
      //HTML content of one list element
      var listElementHTML = '<li><a class="employee_list" ui-btn ui-btn-e ui-btn-icon-right ui-icon-carat-r" data-transition="fade" data-split-icon="delete"  href="#item'+empData.id+'">'+empData.employeename+'<br> '+empData.birth+'</br></a></li>';


     //appending the HTML code to list view
      $('#employee_list').append(listElementHTML);


      //Dynamically adding HTML Pages
      var employeePageHTML = '<div id="item'+empData.id+'" data-role="page" data-theme="b"><div data-theme="a" data-role="header"><h1>'+empData.employeename+'</h1><a href="#home_page" data-icon="home" data-iconpos="left" class="ui-btn ui-corner-all ui-btn ui-shadow ui-btn ui-btn-left ui-icon-home ui-btn-icon-notext ui-shadow ui-corner-all ui-btn-icon-left">Home</a>\
                          <a href="#delete'+empData.id+'" data-icon="delete" data-rel="dialog" class="ui-btn-middle delete_button">Delete</a></div><div data-role="content">\
                          <div data-role="collapsible" data-inset="false" data-collapsed="true" data-theme="b"><h3>Case Details</h3><i><strong>Employee No:</i></strong>'+empData.employeeno+'</br><i><p><strong>Employee Name:</i></strong> '+empData.employeename+'</br><i><p><strong>State Of Origine:</i></strong>'+empData.state+'</br><i><p><strong>Employee Phone:</i></strong>'+empData.employeephone+'</br><i><p><strong>Date Of Birth:</i></strong>'+empData.birth+'</div></div>\
                          <div data-position="fixed" data-theme="a" data-role="footer"><a href="#edit_employee_page" role="button" data-icon="edit" data-iconpos="" class="ui-btn  ui-icon-edit ui-btn-icon-right ui-btn-icon-notext ui-shadow ui-corner-all edit_button">Edit</a></div></div></div>';

Answer 1

您可以在jquery中发出一个异步加载内容的AJAX请求。使用AJAX允许请求和函数在不重新加载浏览器的情况下执行操作，因为它连接到服务器并返回到方法中。在您的jquery中，您可以执行以下操作：

var data="all the data you want to update with";
$.ajax({

          $("body").load(data);
          //this would load that string inside the body but you can do whatever
            you want in this ajax function.

      });

当我从编辑表单提交详细信息时，LocalStorage不会更新

1 个答案: