Would you like to be notified for every new articles? Please click HERE to subscribe for newsletter.

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, 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);
?>

You can also learn the Angular version for this script there.

Please feel free to contact me if you want to make any contribution for this small project.

Add new comment

Limited HTML

  • Allowed HTML tags: <em> <strong> <cite> <blockquote> <code> <ul> <ol> <li>
  • Lines and paragraphs break automatically.

Plain text

  • No HTML tags allowed.
  • Web page addresses and e-mail addresses turn into links automatically.
  • Lines and paragraphs break automatically.
By submitting this form, you accept the Mollom privacy policy.