Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • How to retain the sorted value after refresh div?

    • 0
    • 1
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 206
    Comment on it

    Here, we are using both sessionStorage and localStorage to retain the values after refresh a div. The div named refresh (#refresh) get refresh after a time interval of 5s. Values in the array sort using updateContent(arr,$opts) function. These sorted values are stored using localStorage.setItem("res", JSON.stringify(arr)) and corresponding selected dropdown value is stored using sessionStorage.setItem("SelectedItem", dropVal). To get the values after refresh, we used .getItem() method.

    Example:

    abc.js

    $(document).ready( function(){   
          var arr = [], $opts = 1;
          arr.push({"name":"Corsair","price":"2000"});
          arr.push({"name":"Cooler Master","price":"3000"});
          arr.push({"name":"Antec","price":"1000"});
    
          $(document).on('change', '#sort-item', function() { 
            var dropVal = $(this).val();
            sessionStorage.setItem("SelectedItem", dropVal);
            $opts = $(this).find('option:selected')[0].dataset.sort; 
            updateContent(arr,$opts); 
    
            });
          updateContent(arr,$opts);
        });
    
    
        var refreshIntervalId = setInterval("myfunction();",5000); 
        function myfunction()
        {
             $('#refresh').load(location.href +' #refresh',function(){
             var res = localStorage.getItem( "res" );
             var ress = JSON.parse(res);
             var $result = $('#content-container');
             $result.text("");
             for (var i =0; i< ress.length; i++){         
             $result.append('<li>'+ress[i].name+" $"+ress[i].price+'</li>');
             }
    
            var selectedItem = sessionStorage.getItem("SelectedItem");  
            $('#sort-item').val(selectedItem);
            });
         }
    
    
        function updateContent(arr,$opts) {
          var $result = $('#content-container');
          $result.text("");
    
          if ( $opts == 1 ){
    
              arr.sort( function(a,b) { return a.name > b.name; } );
          }
          else if ($opts == 2) {
              arr.sort( function(a,b) { return a.price - b.price; } );
          }
          else if ($opts == 3) {
              arr.sort( function(a,b) { return b.price - a.price; } );
          }
    
          for (var i =0; i< arr.length; i++) {         
            $result.append('<li>'+arr[i].name+" $"+arr[i].price+'</li>');
            }
    
          $(document).on('change', '#sort-item', function() { 
              $opts = $(this).find('option:selected')[0]; 
              localStorage.setItem("res", JSON.stringify(arr));
              console.log($opts.dataset.sort);
            });
        }
    

    index.html

     <body>
          <div id="refresh">
            <div id="sort-wrapper" class="sort-position">
               <div id="sort-container">
                   Sort by: 
                   <select id="sort-item">
                       <option value="Alphabetical" data-sort="1">Alphabetical</option>
                       <option value="low to high" data-sort="2">Low to High Price</option>
                       <option value="high to low" data-sort="3">High to Low Price</option>
                    </select>
               </div>
            </div>
    
            <div id="content-wrapper" class="content-position">
               <div id="content-container">
               </div>
            </div>
          </div>
        </body>
    

 0 Comment(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: