I have seen a good amount of people wanting to see learn how to load data on their website using jQuery, JSON, and PHP. I thought I would show a simple example that should give you a jump start to your project.
We are going to use $.getJSON() function, you have something like:
$.getJSON("readJSON.php",function(data){
$.each(data.posts, function(i,post){
content = '
\n';
content += '
' + post.author + '
\n';
content += '+ post.date_added + '\n';
content += '' + post.post_content + ';
content += ''
';
$("#contents").append(content).fadeIn("slow");
});
});
And example of JSON from the PHP page could look like:
{ posts: [{"id":"151","date_added":"2009-05-05 13:40:34","post_content":"This is a test post. jQuery!","author":"Ryan"},
{"id":"152","date_added":"2009-05-05 13:40:55","post_content":"Hey, you got to love Ajax","author":"John"}] }
That JSON above loads two records that will be displayed on to the page.
The results are being pulled from a MySQL database with tables: id, author, post_content, date_added, and author.
I am going to wrap up and article on the jQuery/PHP/JSON comment form with the results loaded on to the page after form submission, stay tuned for a much more in depth explanation of using JSON with PHP and jQuery.
Tags: ajax, form, jquery, json, php
Posted in jQuery | 5 Comments »
May 5th, 2009
So i came across my old iGoogle theme I made in the fall and was thinking of making another one. Shockingly, they’re extremely easy to create. Its a large XML document. I have been working on a new layout for my site. I was thinking of another landscape but similar to the landscape, but different style.
I am trying to free my schedule from client work to start working on the new layout, stil need to work on the move right text, bottom posts boxes, colors, and what the single page is going to look like, all in all its a work in progress. Almost done with a jQuery tutorial on submitting a comment form and having the results loaded using jQuery/Ajax. The comments on the page are loading using PHP, JSON, and jQuery, very slick. Expect that very soon.
Tags: ajax, design, igoogle, jquery, json, theme
Posted in Blog, Ranting | No Comments »
May 4th, 2009
When I first started working with jQuery and submitting forms via Ajax, I’ve never really used .serialize() and wasn’t too familiar with it. I started to look in to how it works and what it can do. It can be a huge time saver, especially for larger forms.
Instead of declaring all of your data to be sent using something like:
var fname = $('#fname').attr('value');
var lname = $('#lname').attr('value');
$.ajax({
data: “fname=”+ fname + “& lname=” + lname,
});
For a couple of fields above, that is fine, but what if you were creating a form with a large amount of fields. The last thing you would want to do is want to copy/paste that line 20 times for your field. Instead of grabbing each value of each form field we can use jQuery’s .serialize() to do the dirty work for us, which is a huge time saver. We can use something like:
$(function() {
$('form').bind('submit',function() { showValues(); return false; });
});
function showValues() {
var str = $("form").serialize();
$(".results-box").fadeIn();
$(".results").text(str);
}
The first section binds the submit to a function. When a user submits the form call the function showValues(), the next bit. We grab the form and attach .serialize() to it. We want to serialize all fields within this form and display what data is going to be sent to the sever. A working demo has been uploaded.
Now with our data serialized it is ready to be sent over to the server side. Using jQuery .serialize() is much more effiecient compared to retrieving the value using .val().
Tags: ajax, form, jquery, serialize
Posted in jQuery | 2 Comments »
May 4th, 2009
The other day, I wasn’t really too acquainted with the .live() jQuery function. I did some research and it finally clicked for me. I put together a quick example that can I uploaded. The basics of the function can be known as:
Binds a handler to an event (like click) for all current – and future – matched element. Can also bind custom events. – (source: jquery.com)
This function is extremely similar to the .click() but .click() will only match elements that are created via the XHTML with DOM is loaded. With that said, using .live() is extremely useful for dynamic websites, where you are creating/removing elements on you’re website.
Lets see the base example of using .live()
$('a.edit').live('click', function() {
alert("The power of .live() - dynamically created objects will have bound events!")
return false;
});
This code will work for all links that have the class edit, even when new a.link tags are created dynamically after DOM has been loaded. If your code looked like:
$('a.edit-nolive').click(function() {
alert("Items created via AJAX will be called on using .live()")
return false;
});
It would not work on dynamically created items. Lets take another look at the full demo. Hopefully this will clear up any problems with understanding how the jQuery .live() function works in comparison to the .click() event. Like to see something else like this? Drop me a line.
Tags: bind, click, dynamic, jquery, live
Posted in jQuery | 2 Comments »
