Keep button disabled till the current page reloads (using Jquery)
I have a search bar in index.php and when I type an ID, the SQL data is fetched from fetch.php. The fetch.php contains "AddToZip" button for each row of SQL data. When I click on a selected button, the selected button is disabled (going properly till here). But when I clear the search bar to write a different ID or perhaps same ID, all the disabled buttons of "AddToZip" are reactivated/enabled. How do I keep them disabled when the user uses the search bar multiple times and they anyhow get enabled only when the user refreshes the page.
index.php
<php code> <?php session_start(); ... ... ... ?> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>LiveData</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" /> </head> <body> <div class="container"> <br /> <h2 align="center">Live Data Search</h2><br /> <div class="form-group"> <div class="input-group"> <span class="input-group-addon">Search</span> <input type="text" name="search_text" id="search_text" placeholder="Search by ID" class="form-control" /> </div> </div> <p> <a href="logout.php" class="btn btn-danger">Sign Out of Your Account</a> </p> <br /> <div id="result"></div> </div> </html> <script> $(document).ready(function(){ $('#search_text').keyup(function(){ var txt = $(this).val(); if(txt != '') { $.ajax({ url:"fetch.php", method: "post", data: {search:txt}, dataType: "text", success: function(data) { $('#result').html(data); } }); } else if(txt == '') { $.ajax({ url:"null.php", method: "post", data: {search:txt}, dataType: "text", success: function(data) { $('#result').html(data); } }); } }); }); </script> <script> var addToZip = function(id, btn) { $.ajax({ url:"AddToZip.php?id=" + id, success: function(data) { btn.disabled = true; } }); }; </script> fetch.php
<?php ... if(mysqli_num_rows($result) > 0) { $output .= '<h4 align = "center">Search Result</h4>'; $output .= '<div class="table-responsive"> <table class = "table table bordered"> <tr> <th>ID</th> </tr>'; while($row = mysqli_fetch_array($result)) { $output .= ' <tr> <td>'.$row["ID"].'</td> <td><button type="button" class="btn btn-primary" onclick="addToZip(\''.$row["ID"].'\', this)"><i class="fa fa-pdf" aria-hidden="true"> </i>Add to Zip</button></td> </tr> '; } echo $output; } ... ?> 
Can you add the code of AddToZip.php ?
You could store all ids into a session value, and check if the id is containt inside this array on your fetch.php.
AddToZip.php :
session_start(); if (!isset($_SESSION['added_to_zip_ids'])) $_SESSION['added_to_zip_ids'] = []; if (array_search($_GET['id'], $_SESSION['added_to_zip_ids']) === false) $_SESSION['added_to_zip_ids'][] = $_GET['id']; fetch.php :
<?php ... session_start(); if (!isset($_SESSION['added_to_zip_ids'])) $_SESSION['added_to_zip_ids'] = []; if(mysqli_num_rows($result) > 0) { $output .= '<h4 align = "center">Search Result</h4>'; $output .= '<div class="table-responsive"> <table class = "table table bordered"> <tr> <th>ID</th> </tr>'; while($row = mysqli_fetch_array($result)) { $output .= ' <tr> <td>'.$row["ID"].'</td> <td><button '.(array_search($row["ID"], $_SESSION['added_to_zip_ids']) === false ? '' : 'disabled').' type="button" class="btn btn-primary" onclick="addToZip(\''.$row["ID"].'\', this)"><i class="fa fa-pdf" aria-hidden="true"> </i>Add to Zip</button></td> </tr> '; } echo $output; } ... ?> And to clear the stored values, you have two solutions :
-
Keep other session datas
session_start();
if (isset($_SESSION[‘added_to_zip_ids’]))
unset($_SESSION[‘added_to_zip_ids’]); -
Clear everything
session_start();
session_unset();
These line can be anywhere on the server.
I would recommend to use the event handler ‘keyup’ (as you already do) and / or the ‘change’ handler to activate a function (e.g. check_disable_status)
$('#search_text').keyup(check_disable_status) $('#search_text').change(check_disable_status) and you should start this function also on "ready" state of the DOM.
In this function you just check the current "STATE" of your field, or maybe other dependencies for your business logic and set the field always in ENABLED or DISABLED state.
Since you override all the html content on search you need to save the state of the button before overriding the html and reply it afterwards. something along those lines:
success: function(data) { var btnDisabled = $("#btnId123").is(':disabled'); $('#result').html(data); if(btnDisabled) $("#btnId123").disable(); } Otherwise it would be recommended to just refresh the parts of the page that need to be refreshed and fetch the data as a json from the server.
