JQuery FetchRow

Posted on: 25 March 2015
By: admin

Do you need to fetch one row from your table and display its fields to any input elements in your page? You can do it easily using this simple jQuery plugin. I name it jQuery FetchRow. Let's see how does it work in the live example there. The full source code is available at GitHub, https://github.com/w3shaman/jquery-fetchrow.

The current version of this plugin, version 1.4.1, has the following features:

Can be triggered with keypress, blur, change, or another element click.
Applicable to textfield or dropdown list.
Able to display the loading image when request is made by using onRequest callback to display loading indicator then hide it using onComplete callback after the request is done..
Support additional query string by using additionalFields parameter.
Custom error using onError callback.
Multiple events for one element.

The more complete sample cases can be seen in the live example I've mentioned before. In here I just write the sample of basic usage of this plugin. First of all we must include jQuery and also this plugin in your HTML head.

<script language="javascript" type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script language="javascript" type="text/javascript" src="js/jquery.fetchrow.js"></script>

Then we must define the input element that will be acting as the key. The value we put in there will be sent to server when we press Enter.

$("#item_id").fetchrow({
  url : "data.php?id=",
  onPopulated : function(data, textfield){
    $("#item_name").val(data.name);
    $("#item_qty").val(data.qty);
  },
  onNullPopulated : function(textfield){
    alert('Item not found!');
    $("#item_name").val("");
    $("#item_qty").val("");
  }
});

As you can see, we have to define two callback functions. One function will be executed when the data is retreived from server. In this case we will fill the item name and quantity textfield when the returned value from server. The other one will be executed if no row found in the server. What will we do here can be varies. In this example I will clear all the textfields and show the message with Javascript alert.

Don't forget, we need to prepare the server side script as we defined in URL option. I use following PHP code for it. In the implementation, the server side script is not limited to PHP only. We can use whatever server side programming language as long as it can output JSON format.


<?php
header("Cache-Control: no-cache, must-revalidate");
header("Expires: Mon, 26 Jul 1997 05:00:00 GMT");
$host = "localhost";
$username = "root";
$password = "";
$database = "test";
$con = mysqli_connect($host,$username,$password,$database);
// Uncomment the sleep function if you want some the delay effect.
// sleep(1);
$data = null;
$where = "";
if (isset($_GET['category']))
  $where = " AND category = '" . mysqli_real_escape_string($con, $_GET['category']) . "'";
$result = mysqli_query($con, "SELECT id, name, qty FROM item WHERE id = ".intval($_GET['id']) . $where);
if(mysqli_num_rows($result) > 0){
  $data = mysqli_fetch_assoc($result);
  if (isset($_GET['category']))
    $data['request_param'] = $_SERVER['QUERY_STRING'];
}
mysqli_close($con);
// Encode it with JSON format
echo json_encode($data);
?>