JQuery FetchRow Demo

Fetch Row on Enter
ID: * Type item ID and press Enter.
Item name:
Qty:

The code:

$("#item_id").fetchrow({
  url : "data.php?id=",
  onPopulated : function(data, textfield){
    $("#item_name").val(data.name);
    $("#item_qty").val(data.qty);
  },
  onNullPopulated : function(textfield){
    $("#item_name").val("");
    $("#item_qty").val("");
    alert('Item not found!');
    $(':focus').blur(); // Unfocus on the element so we wont get alert message repeatedly when pressing Enter to close it.
  }
});
Fetch Row on Lost Focus
ID:
Item name:
Qty:

The code:

$("#item_id2").fetchrow({
  url : "data.php?id=",
  trigger : "blur",
  onPopulated : function(data, textfield){
    $("#item_name2").val(data.name);
    $("#item_qty2").val(data.qty);
  },
  onNullPopulated : function(textfield){
    $("#item_name2").val("");
    $("#item_qty2").val("");

    // Only show alert if the ID field is not empty.
    if (textfield.val() !== "") {
      alert('Item not found!');
    }

    $(':focus').blur(); // Unfocus on the element so we wont get alert message repeatedly when pressing Enter to close it.
  }
});
Fetch Row on Change
ID:
Item name:
Qty:

The code:

$("#item_id3").fetchrow({
  url : "data.php?id=",
  trigger : "change",
  onPopulated : function(data, textfield){
    $("#item_name3").val(data.name);
    $("#item_qty3").val(data.qty);
  },
  onNullPopulated : function(textfield){
    $("#item_name3").val("");
    $("#item_qty3").val("");
  }
});
Fetch Row on Button Click
ID:
Item name:
Qty:

The code:

// Use the button ID instead of the textfield ID.
$("#button4").fetchrow({
  url : "data.php?id=",
  trigger : "click",
  onPopulated : function(data, textfield){
    $("#item_name4").val(data.name);
    $("#item_qty4").val(data.qty);
  },
  onNullPopulated : function(textfield){
    $("#item_name4").val("");
    $("#item_qty4").val("");
  },
  keyfield : $("#item_id4") // Pass the textfield as key field.
});
Loading Indicator

Using onRequest to display loading indicator then hide it using onComplete callback after the request is done.

ID:
Type item ID and press Enter.
Item name:
Qty:

The code:

$("#item_id5").fetchrow({
  url : "data.php?id=",
  onRequest: function() {
    $("#loading5").show();
  },
  onComplete: function() {
    $("#loading5").hide();
  },
  onPopulated : function(data, textfield){
    $("#item_name5").val(data.name);
    $("#item_qty5").val(data.qty);
  },
  onNullPopulated : function(textfield){
    $("#item_name5").val("");
    $("#item_qty5").val("");
  }
});
Additional Query String

Pass additional query string using additionalFields parameter. We can pass more than one additional parameter in key value pair. In this example we will send the category value along with the query string.

Category :
ID:
Type item ID and press Enter.
Make sure you have chosen the correct category.
Item name:
Qty:
Parameter:

The code:

$("#item_id6").fetchrow({
  url : "data.php?id=",
  onPopulated : function(data, textfield){
    $("#item_name6").val(data.name);
    $("#item_qty6").val(data.qty);
    $("#request_url6").html(data.request_param);
  },
  onNullPopulated : function(textfield){
    $("#item_name6").val("");
    $("#item_qty6").val("");
    $("#request_url6").val("");
    alert("Please choose a correct category!");
    $(':focus').blur(); // Unfocus on the element so we wont get alert message repeatedly when pressing Enter to close it.
  },
  additionalFields : {
    "&category=" : $("#category6")
  }
});
Custom Error Message

Custom error message using callback function (we intentionally point to wrong URL to raise error).

ID: * Type item ID and press Enter.
Item name:
Qty:

The code:

$("input[name=id7]").fetchrow({
  url : "data2.php?id=", // Wrong URL to raise the error.
  onPopulated : function(data, textfield){
    $("input[name=name7]").val(data.name);
    $("input[name=qty7]").val(data.qty);
  },
  onNullPopulated : function(textfield){
    $("input[name=name7]").val("");
    $("input[name=name7]").val("");
  },
  onError : function () { // Custom error callback.
    alert("ERROR: Sorry there is an unexpected error, please try again later.");
    $(':focus').blur(); // Unfocus on the element so we wont get alert message repeatedly when pressing Enter to close it.
  }
});
Multiple Events

Use multiple events as trigger. Fetch row action will be executed on button click or when enter key is pressed.

ID:
Item name:
Qty:

The code:

$("input[name=id8]").fetchrow({
  url : "data.php?id=", // Wrong URL to raise the error.
  trigger : "click,keypress|13", // Use comma (,) to separate each event.
  onPopulated : function(data, textfield){
    $("input[name=name8]").val(data.name);
    $("input[name=qty8]").val(data.qty);
  },
  onNullPopulated : function(textfield){
    $("input[name=name8]").val("");
    $("input[name=name8]").val("");
  },
  button : $("#button8") // The button as the source of click event.
});