gEt DoWn ToNiGhT » jquery

Sample Page for sending JSON data as string to web-service

Sam — Mon, 05 Dec 2011 16:56:04 +0000

Just realised it has been a year since I posted anything on here! Time really flies when you’re busy!

I remember when I was first starting off with jQuery, JSON and all that jazz that I struggled to find some simple examples of how to do things like send data to a web-service.

Here is a quick example of how to send some JSON data (as a single post field) to a web service, using jQuery’s post method.

Keep in mind that if you are posting to another domain you may need to use something called jsonP – but if you are just learning, this is a good starting point!



    
        JSON Web Service Demo
 
        
 
        
 
        <script type="text/javascript">
            $(document).ready(function() {
 
                //this code will be added to the onclick event
                $('#save_user_button').click(function() {
 
                    //add the values we need for the API to an object
                    var data = new Object;
 
                    //build the object
                    data.guid                   = $('#guid').val();
                    data.defaultallocation      = $('#projecttype').val();
                    data.email                  = $('#email').val();
                    data.username               = $('#username').val();
                    data.fullname               = $('#fullname').val();
 
                    //turn the object in to a JSON string
                    var myJson = JSON.stringify(data);
 
                    var url = "http://testurl/service/user";
 
                    //call the post
                    $.post(url, {jsonUser : myJson}, function(myResult) {
                        alert(myResult)
                    });
 
                });
 
            });
        script>
 
    
    
        
            
 
                
 
                
 
                
 
                
 
                
 
            
                    Project Type
                    
                

                    GUID
                    
                

                    User Name
                    
                

                    Full Name
                    
                

                    Email

Loading JSON data – the EASY way!

Sam — Wed, 18 Nov 2009 12:22:04 +0000

A few weeks ago I wrote a blog post about using jQuery and JSON to automatically load data from a JSON file in to name-matched controls on an HTML page.

It is only now that I realise quite how powerful this is!

The great thing about it is that you do not have to edit your data-load function if you add a new field to the database. Because the jQuery function loops through all the fields in the JSON data, it will automatically insert the values in to the correct fields, providing those fields are named the same as the html form controls.

Here is the code again for those who dont want to check back.

$.getJSON("/yourJson.js, function(myJson){
	$.each(myJson.rows, function(i,item) {
		 for (prop in item) {
		 	 $('#' + prop).val(item[prop]);
		 }
	});
});

Inserting JSON data in to name-matched controls

Sam — Tue, 01 Sep 2009 12:08:10 +0000

Thought this might be handy… This loop will insert the values from a JSON object in to text boxes.

It loops around each key-pair and inserts the value if there is a text box with an ID that matches the key name.

This is the JSON data: (yourJson.js)

{"page":1,"total":1,"records":1,"paging":20,"rows":[
{"clipId":"14792","barcode":"02528","title":"My Project Sample","format":"DigiBeta","source":"1242",
"runningTime":"14 Mins","location":"Library","timeCode":"10:00:00","cUser":"Sam",
"cDate":"1 Jan 2007","mUser":"Sam","mDate":"1 Jan 2008"}]}

This is the form HTML:

<form>
	<table>
		<tr>
			<th>Clip Idth>
			<td><input id='clipId'>td>
		tr>
		<tr>
			<th>Barcodeth>
			<td><input id='barcode'>td>
		tr>
		<tr>
			<th>Titleth>
			<td><input id='title'>td>
		tr>
		<tr>
			<th>Formatth>
			<td><input id='format'>td>
		tr>
		<tr>
			<th>Sourceth>
			<td><input id='source'>td>
		tr>
		<tr>
			<th>Running Timeth>
			<td><input id='runningTime'>td>
		tr>
		<tr>
			<th>Locationth>
			<td><input id='location'>td>
		tr>
		<tr>
			<th>Time Codeth>
			<td><input id='timeCode'>td>
		tr>
	table>
form>

This is the jQuery:

	$.getJSON("/yourJson.js, function(myJson){
		$.each(myJson.rows, function(i,item) {
		    for (prop in item) {
				$('#' + prop).val(item[prop]);
		    }
		}); 
	});

Using XML in your jQuery to populate input boxes

Sam — Tue, 11 Aug 2009 18:06:13 +0000

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.

 version="1.0" encoding="utf-8" ?>
>
  >
    >10>
    >CR282>
    >Software Support>
    >3>
    >40>
 >
>

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.