Leaderboard
Popular Content
Showing content with the highest reputation on 04/04/2021 in all areas
-
If you want to use AJAX, here is the same example using that method. The main difference is that instead of using the array naming convention for the selects (name="rating[A001]") it uses class and data attributes <select class="rating" data-id="A001"> ... </select> Again, the "stars" are used as visual confirmation that the update was successful. Code // // PROCESS POSTED DATA // if ($_SERVER['REQUEST_METHOD'] == 'POST') { if ($_POST['ajax'] == 'update-all') { $updt = $pdo->prepare("UPDATE product SET rating = ? WHERE product_code = ? "); foreach ($_POST['rating'] as $rdata) { $updt->execute( [ $rdata['rate'], $rdata['id'] ] ); $stars[] = ["id" => $rdata['id'], "stars" => stars($rdata['rate'])]; } exit(json_encode($stars)); } } // // MAIN PROCESSING // $res = $pdo->query("SELECT product_code , product_name , price , rating+0 as rating -- force numeric value FROM product ORDER BY product_code "); $products = ''; foreach ($res as $r) { $products .= "<tr> <td>{$r['product_code']}</td> <td>{$r['product_name']}</td> <td>£{$r['price']}</td> <td> <select class='w3-input w3-border rating' data-id='{$r['product_code']}' > " . ratingOptions($r['rating']) . "</select> </td> <td class='stars' data-id='{$r['product_code']}'>" . stars($r['rating']) . "</td> </tr>\n"; } // // FUNCTIONS // function ratingOptions($current) { $ratings = [1 => 'vpoor', 'poor', 'ok', 'good', 'vgood']; $opts = "<option value=''>- select -</option>\n"; foreach ($ratings as $r => $rdesc) { $sel = $r == $current ? 'selected' : ''; $opts .= "<option $sel value='$r'>$rdesc</option>\n"; } return $opts; } function stars($n) { if ($n > 5) $n = 5; return "<span style='color:gold'>" . str_repeat("<i class='fas fa-star'></i>", $n) . "</span>" . "<span style='color:#e7e7e7'>" . str_repeat("<i class='fas fa-star'></i>", 5-$n) . "</span>"; } ?> <!DOCTYPE html> <html lang="en"> <head> <title>Example</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css"> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.1/css/all.css"> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script> <script type='text/javascript'> $().ready( function() { $("#btnSave").click( function() { var rating = [] $("select.rating").each( function(k,v) { var id = $(v).data("id") var rate = $(v).val() rating.push( { "id":id, "rate":rate } ) }) $.post ( "", {"ajax":"update-all", "rating":rating}, function(resp) { $.each(resp, function(k, v) { $(".stars[data-id="+v.id+"]").html(v.stars) }) }, "JSON" ) }) }) </script> </head> <body> <div class="w3-content"> <div class="w3-panel w3-black w3-padding"> <h1>Example</h1> </div> <table class='w3-table-all'> <tr class='w3-dark-gray'> <th>Code</th> <th>Product</th> <th>Price</th> <th colspan="2">Rating</th> </tr> <?=$products?> </table> <br> <button class="w3-button w3-blue w3-right" id="btnSave">Save</button> </div> </body> </html>1 point
-
Plan D Same PHP code as Plan B but with a variation to the ajax response handling This gives... Code... if (isset($_GET['ajax'])) { $mydata = []; $cols = []; $rows = []; $data = $pdo->query('SELECT user_id as id , firstname , lastname FROM user LIMIT 3 '); $row = $data->fetch(PDO::FETCH_OBJ); $keys = array_keys((array)$row); foreach ($keys as $key) { $cols[] = (object)[ 'name'=>$key, 'title'=>$key ]; } do { $rows[] = $row; } while ($row = $data->fetch(PDO::FETCH_OBJ)); $mydata['columns'] = $cols; $mydata['rows'] = $rows; exit(json_encode($mydata)); } ?> <!DOCTYPE html> <html> <head> <title>Example</title> <meta http-equiv="content-language" content="en"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css"> <!-- link to jquery functions --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script type='text/javascript'> $().ready( function() { $("#get-data").click(function() { $.get( "", {"ajax":1}, function(resp) { $("#coldata").html(JSON.stringify(resp.columns)) $("#rowdata").html(JSON.stringify(resp.rows)) $("#crdata").html(JSON.stringify(resp)) }, "JSON" ) }) }) </script> <style type='text/css'> .data { font-family: monospace; } </style> </head> <body> <span id="get-data" class="w3-button w3-blue w3-margin">Get Data</span> <div class="w3-container w3-margin"> <h3>Columns</h3> <div id="coldata" class='data'></div> <h3>Rows</h3> <div id="rowdata" class='data'></div> <h3>All</h3> <div id="crdata" class='data'></div> </div> </body> </html> There should now be something you can use, in whole or in part
1 point
This leaderboard is set to New York/GMT-04:00