RSS
 

Using XML in your jQuery to populate input boxes

11 Aug

In a previous post I wrote about creating XML pages with MySQL data, using PHP. In this article, I’ll explain in simple terms how to parse that XML data and insert some of its values in to your page using jQuery.

I’m going to keep this very simple, as there seem to be very few examples of this on the net. It took me a while to work out a neat way of doing this, and I’m sure someone can improve on things. If so – please let me know in the comments.

First, lets set up an example. A very simple example.

Imagine an invoice. 4 boxes at the top of a grid, with a ‘Save’ button that will add the contents of those boxes to the list below. The fields are such as ‘Item code’, ‘Description’, ‘Quantity’ and ‘Unit Price’. The user enters the values and clicks the ‘Save’ button to add that row to the list and clear the boxes, ready for the next row to be added. For the purposes of what we are doing, we will also want a 5th box (which would usually be hidden) to store the ‘Invoice Detail Id’.

Something like this:






Code

Description

Quantity

Price



Hidden ID

Creating this application is all quite trivial for someone experienced in PHP. However, what would be nice is to be able to edit each row without having to re-load the page. Well we can do this quickly and easily using jQuery.

Before we start with the jQuery code, we need to have ready a PHP page that will return valid XML with the details of an invoice detail record. Please see my previous post for some help on how to do this.

This is an example output from the getDetailRow.php file.

<?xml version="1.0" encoding="utf-8" ?>
<invoice>
  <invoiceDetail>
    <invoiceDetailId>10</invoiceDetailId>
    <code>CR282</code>
    <description>Software Support</description>
    <quantity>3</quantity>
    <unitPrice>40</unitPrice>
 </invoiceDetail>
<invoice>

Against each row, add a button labeled ‘Edit’, and attach some jQuery code that calls a function called editDetailRow(detailRowId) – as the grid is built, insert this code in to each button with the parameter of that row’s detail ID.

Assuming that there is only ever one result in the XML output, you could use the following code to insert the values in to your input boxes.

<script type="text/javascript">
function editDetailRow(detailId) {
    //first we need to load the XML data for that detail row
    //if the function is a success it will call the function called processDetail
    $.ajax({
       type: "GET",
       url: "getDetailRow.php?detailId=" + detailId,
       dataType: "xml",
       success: processDetail
     });
}
 
function processDetail(xml) {
    //this function gets the results from the xml file
    //and inserts them in to the boxes
    $(xml).find("invoiceDetail").each(function()   {
        $("#code").val($(this).find("code").text());
        $("#description").val($(this).find("description").text());
        $("#quantity").val($(this).find("quantity").text());
        $("#unitPrice").val($(this).find("unitPrice").text());
        $("#invoiceDetailId").val($(this).find("invoiceDetailId").text());
    });
}
</script>

Yes, it really is that simple. You will need to add a reset button, and make sure you check for a value in the invoiceDetailId when you save (to either call an UPDATE or an INSERT) but thats it.

Hopefully you will find this useful and can use this as the basis for much more complicated XML and jQuery hookup’s.

 
4 Comments

Posted in Programming, Science and Tech

 

Tags: , , ,

Leave a Reply

 

 
 
 

  1. Hakan Atil

    August 24, 2009 at 4:44 pm

    Any ideas how to establish this using MySQL database.

     

  2. Sam

    August 24, 2009 at 4:51 pm

    Hi Hakan,

    In the past when getting data from MySQL I have written a getValueFromTableUsingSingleId.php page which handles a few parameters (such as table name, field to search, criteria and field to return) and then returns the value – like below:

    Please note that these functions need work – They are open to all sorts of injection attacks and more. Dont just copy and paste them in to your project!

    <?php
//pick up the values from the query string
//these will be used to create an SQL statement
$fieldToGet = $_GET['fieldToGet'];
$tableToSearch = $_GET['tableToSearch'];
$fieldToSearch = $_GET['fieldToSearch'];
$valueToFind = $_GET['valueToFind'];
 
//this is a function which just runs the sql and returns the value
$result = getValueFromTable("SELECT ".$fieldToGet." FROM ".$tableToSearch." WHERE ".$fieldToSearch." = '$valueToFind'", $fieldToGet);
 
//print out the value returned
print stripSlashes($result);
?>

    Then I would create an ajax function which you can include in your .js files which gets that database value by calling your new PHP page and uses the output, like this:

    function InsertDataToControlFromTableUsingSingleId(fieldToGet, tableToSearch, fieldToSearch, valueToFind, controlToInsert) {
	$.get('getValueFromTableUsingSingleId.php?fieldToGet=' + fieldToGet + '&tableToSearch=' + tableToSearch + '&fieldToSearch=' + fieldToSearch + '&valueToFind=' + valueToFind , function (myResult) {
		$('#' + controlToInsert).val(myResult);
        });
}

    This can then be used in your js functions to put data straight from the DB in to your controls.

    Obviously you can write your own function to do this, but I found it quite handy to be able to use one function to get the data and put the data in to a control.

    Hope this helps!

    Sam

     

  3. Sam

    August 24, 2009 at 5:01 pm

    Hakan, It is potentially worth looking in to creating some MySQL to XML pages that I mentioned in a previous post. Its much easier dealing with XML or JSON data in JQuery than it is getting data from MySQL.

    Its actually pretty easy to do… Dont be put off if you dont get it right away.

     

  4. Hakan Atil

    August 24, 2009 at 6:11 pm

    thank you Sam. I appreciate your help.