Hide table page in javascript

Question

In my code below, when i select a checkbox it displays the name of the item checked. But my problem now is, the table is paginated so when i move to the next page and return, the already checked item goes back unchecked. The same applies when i check a box and filter using the ajax request, when i return the already checked box will have moved to unchecked state.

How do i hide the table page to resolve this issue?

HTML

<table class="table" id="table" style="background-color:white" >
   <thead>
      <tr>
         <th></th>
         <th colspan="5"></th>
         <th></th>
      </tr>
   </thead>
   <tbody>
      @foreach($items as $item) 
      <tr>
         <td><input onclick="return results(this)" data-item="{{$item->toJson()}}" type="checkbox" id="{!! $item->id !!}" name="{!! $item->name !!}" value="{!! $item->price !!}" /> </td>
         <td>{{$item->name }}</td>
      </tr>
      @endforeach       
   </tbody>
</table>
{{$items->links()}}

JS

function results(item){   
    var major = JSON.parse(item.dataset.item);
    if(item.checked == true)  {
     $('.panel').append(
        '<div class="container "> '+ 
        '<table style="width:100%;" class="table" id="tables">'+
        '<thead>'+'<thead>'+
        '<tbody>'+
         '<tr>'+ '<td  class="name" >'+major.name+'</td>'+] '</tr>'+
       '</tbody>'+'</table>'+'</div>')}
     } else {
     });
  }           
}
}

AJAX

success: function (data) {
   console.log(data);
   $("#table").slideDown('fast');
   var table = $("#table tbody");
   table.html("");
   $.each(data, function(idx, elem){
        table.append(
            "<tr><td><input type='checkbox' onclick='return results(this)' data-item='"+JSON.stringify(elem)+"' id='"+elem.id+"' name='"+elem.name+"' value='"+elem.price+"'  data-id="+elem.id+"  /></td><td >"+elem.name+"</td><tr>"
        );           
    });
}

Answer 1

I made a fiddle for you so that you can improve it in the way that you can use it for your purpose,here is the fiddle and the code:

HTML:

<div class="checkbox-set">

</div>

<div id = "result">

</div>

Js:

var id = "";
for(i=1 ; i<8 ;i++){
    id="checkbox_"+i;
    $('.checkbox-set').append('<input type="checkbox" id="'+ id +'" value="Click on me"/> <label for="'+id+'">Click on me</label> <br/> ');
}
var selected = [];
        if(sessionStorage.selected) {
    // selected = sessionStorage.selected;
    var checkedIds= sessionStorage.selected.split(",");
    $.each(checkedIds,function(i){
    $("#" + checkedIds[i]).prop('checked', true);
    selected.push(checkedIds[i]);
});

    }

$('input[type="checkbox"]').change(function() {
    if(this.checked) {        
        $(this).each(function(){
        selected.push($(this).attr('id'));
        //$("#result").html(selected);
        });
    }
    if(!this.checked) {
         const index = selected.indexOf($(this).attr('id'));
         var tt= selected.splice(index, 1);
             //$("#result").html(selected);
    }

    sessionStorage.selected = selected;

    $("#result").html(sessionStorage.selected);

})

please confirm if it is helpful

Answer 2

Saving state is possible via "JavaScript - localStorage" functionality. Today browsers have capability to save information that is more "cleaner" and informative then cookies.

On "checkbox" element I would add event listener that would start function called "saveState()". In this function I would save information about checkbox.

function saveState()
{
    localStorage.setItem("checkBoxStatus", "Checked");
}

This information is saved into browser`s storage and won't be deleted until you delete it yourself. To delete it you have two options:

`localStorage.removeItem("checkBoxStatus");` 
`localStorage.clear();` 

Then when you re-enter that page again, while you are "constructing" view you can add small function that will set state equal to the "saved" one.

function resumeState()
{
    if(localStorage.getItem("checkBoxStatus") === "Checked)
         //get check box and check or uncheck
}

HOW STORED DATA CAN BE USED

It's my point of view but I prefer building my HTML views via JavaScript, as I find it more cleaner way and easier also, because today you have frequent communication with "JavaScript/Ajax" functions and need more responsiveness.

so I would build my entire view with JavaScript Dom **

function buildView()
{
    var element = document.createElement("div"); 
        var checkBox = document.createElement("input"); 
            checkBox.settAttribute("type", "checkbox");
        //here we will check
        localStorage.getItem("checkBoxStatus") === "Checked" ? checkBox.setAttribute("checked", "true") : checkBox.setAttribute("checked", false); 
        element.appendChild(checkBox);
    document.body.appendChild(element);
}

**

or use setTimeout function and stick to "HTML" views:

<body onload='setTimeout(buildView(), 2000);>'

this will wait until all the views are constructed and start after it. You can set correct timing depending on how much data you are loading during "onload" event. If it's small data you can even wait for 1 second -> 1000

 function buildView()
{
     var checkBox = document.getElementById("checkBox"); 
        //here we will check
        if(localStorage.getItem("checkBoxStatus") === "Checked")
        {
            checkBox.setAttribute("checked", "true");
        }
        else 
        {
            checkBox.setAttribute("checked", false);
        }
}

Remember that main here is to use localStorage functionality to save data and after that how you will use that data, totally depends on developers imagination and creativity