Refresh page call back the selected checkboxes Kendo in treeview

Question

Here, I supposed to click the checkboxes then I send the data into database using submit button (AJAX). After click on submit button, it will be refresh the page but all the selected checkboxes gone. How I do to keep the selected checkboxes after refresh the page? Any idea or guide to do it?

AJAX

//AJAX call for button
    $("#primaryTextButton").kendoButton();
    var button = $("#primaryTextButton").data("kendoButton");
    button.bind("click", function(e) {

    var test = $("#dropdown").val()

    $.ajax({
        url: "../DesignationProgramTemplate/getTemplate.php",
        type: "post",
            data: {'id':test,'progid':array},
                success: function () {
                // you will get response from your php page (what you echo or print)                 
                    kendo.alert('Success'); // alert notification
                    //refresh
                    //location.reload("http://hq-global.winx.ehors.com:9280/ehors/HumanResource/EmployeeManagement/DesignationProgramTemplate/template.php");
                },
        });
    });

PHP for getTemplate

$employeeID = $_SESSION['employeeID'];
$propertyID = $_SESSION['propertyID'];
$id = $_POST['id'];
$progid = $_POST['progid'];

for($x=0; $x< sizeof($progid); $x++ )
{
    $array = array();   

$positionTemplateID = $ehorsObj->EHORS_PK("tblHrsPositionProgramTemplate"); 
$sqlAdd = "INSERT INTO tblHrsPositionProgramTemplate 
            SET positionTemplateID = '" . $positionTemplateID . "',
            programID = '" . $progid[$x] . "',
            hrsPositionID  = '" . $id . "',
            propertyID   = '" . $propertyID . "',
            employeeID  = '" . $employeeID . "',
            dateTimeEmployee = NOW() ";     

$ehorsObj->ExecuteData($sqlAdd, $ehorsObj->DEFAULT_PDO_CONNECTIONS);

$positionTemplateIDLog = $ehorsObj->EHORS_PK("tblHrsPositionProgramTemplateLog");   
$sqlAddLog = "INSERT INTO tblHrsPositionProgramTemplateLog 
            SET positionTemplateIDLog = '" . $positionTemplateIDLog . "',
            positionTemplateID = '" . $positionTemplateID . "',
            programID = '" . $progid[$x] . "',
            hrsPositionID  = '" . $id . "',
            propertyID   = '" . $propertyID . "',
            employeeID  = '" . $employeeID . "',
            dateTimeEmployee = NOW() ";     

$ehorsObj->ExecuteData($sqlAddLog, $ehorsObj->DEFAULT_PDO_CONNECTIONS);
}

Function for checkboxes

function checkedNodeIds(nodes, checkedNodes) {
  for (var i = 0; i < nodes.length; i++) {
    if (nodes[i].checked) {
      //checkedNodes.push(nodes[i].moduleID);
     // checkedNodes.push(nodes[i].groupID);
      checkedNodes.push(nodes[i].id);
    }

    if (nodes[i].hasChildren) {
      checkedNodeIds(nodes[i].children.view(), checkedNodes);
    }
  }

}

Checkboxes check

function toggleCheckAll() {
        var checkButtonValue = $("#chbAll").val();

        if(checkButtonValue == "Uncheck"){
          $("#AccountingTree .k-checkbox-wrapper input").prop("checked", true).trigger("change");
          $("#AdminSystemTree .k-checkbox-wrapper input").prop("checked", true).trigger("change");

          $("#chbAll").val("Check");
        } else {
          $("#AccountingTree .k-checkbox-wrapper input").prop("checked", false).trigger("change");
          $("#AdminSystemTree .k-checkbox-wrapper input").prop("checked", false).trigger("change");

          $("#chbAll").val("Uncheck");

        }

}

HTML

<div class="selectAll">
  <input type="checkbox" id="chbAll" value="Uncheck" class="k-checkbox" onchange="toggleCheckAll()" />

  <label class="k-checkbox-label" for="chbAll">Select All</label>

Anyone have the idea about it?

Output

For example, when you send, to data base you are using PHP, in this case you can save the ``nodes[i].id`` in a session, for example if you are iterating about checked boxes, if you find, add to a session, for example: ``SESSION['somesession'] .= nodes[i].id .';'`` — deon cagadoes, Jul 24 '19 at 08:20
Only 1 time for link all sessions, separated for example by ``';'``. nodeid1;nodeid2... — deon cagadoes, Jul 24 '19 at 08:25
I understand what you mean but I can't see it clearly. Can you modified into my PHP above? — HelpMe, Jul 24 '19 at 08:27
https://www.w3schools.com/php/php_mysql_prepared_statements.asp — deon cagadoes, Jul 24 '19 at 08:29
Because I'm try to see some solution are using cookies, localStorage etc .But I don't know how to apply it into my code. — HelpMe, Jul 24 '19 at 08:33
OK, i will do it, idk how much time i will be this, i will back with 1 PHP, example. — deon cagadoes, Jul 24 '19 at 08:37
But here, my checkboxes not in html. I will put above the code for checkboxes which using treeview kendo that have checkboxes. — HelpMe, Jul 24 '19 at 09:13
But, you for see the checkboxes like on the picture, are in html no ? Can you inspect element and add the HTML output ? — deon cagadoes, Jul 24 '19 at 09:16
The function ``toggleCheckAll()`` its JavaScript ? looks like to jquery idk — deon cagadoes, Jul 24 '19 at 09:22
https://stackoverflow.com/questions/44589201/save-checkbox-value-with-javascript-the-easy-way — deon cagadoes, Jul 24 '19 at 09:26
This probably can make a solution to your question: https://stackoverflow.com/questions/1961069/getting-value-get-or-post-variable-using-javascript But only from GET method. You can parse these values. — deon cagadoes, Jul 24 '19 at 09:31
I'm sorry, but your solution not helped me. I'm still stuck here. — HelpMe, Jul 29 '19 at 01:17
This is an example, you need implement on your script, works 100% — deon cagadoes, Jul 29 '19 at 06:56
With POST no. But another trick is using document.cookie https://www.w3schools.com/js/js_cookies.asp — deon cagadoes, Jul 29 '19 at 07:27

score 0 · Answer 1 · answered Jul 24 '19 at 10:42

With this you can save the checked boxes, remember its with GET method.


<html>

<body>

<form method="get" action="">

    <input type="checkbox" name="vehicle1" value="Bike"> I have a bike<br>
    <input type="checkbox" name="vehicle2" value="Car"> I have a car<br>
    <input type="checkbox" name="vehicle3" value="Boat"> I have a boat<br>

    <input type="submit" name="submit">

</form>

</body>

    <script>

        var a = window.location.search.substr(1).split('&');
        console.log(a);
        function test(value, index){ a[index] = value.split("="); }
        function test2(value, index){ console.log(document.getElementsByName(value[0])); document.getElementsByName(value[0])[0].checked = true; }
        a.forEach(test);
        a.forEach(test2);

    </script>

</html>

Refresh page call back the selected checkboxes Kendo in treeview

1 Answers1

Linked