Ryan Coughlin | Web and Graphic Designer » ajax

How to load data using JSON/PHP using jQuery

Ryan Coughlin — Wed, 06 May 2009 16:00:53 +0000

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.

Use jQuery To Submit Form To PHP/MySQL Learn to submit a form using jQuery without a page...
How to use jQuery to Serialize Ajax Forms When I first started working with jQuery and submitting forms...
Time for another iGoogle theme? Thinking about making another iGoogle theme and almost done with...

Time for another iGoogle theme?

Ryan Coughlin — Tue, 05 May 2009 17:30:43 +0000

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.

Busy…Busy Finally...the end of the semester is here, no more finals...
New Layout and Trip Its been a very long time! I have been extremely...
Coroflot and New Design Just added some more work to my Coroflot.com portfolio and...

How to use jQuery to Serialize Ajax Forms

Ryan Coughlin — Mon, 04 May 2009 15:17:08 +0000

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().

Use jQuery To Submit Form To PHP/MySQL Learn to submit a form using jQuery without a page...
How to load data using JSON/PHP using jQuery I have seen a good amount of people wanting to...
jQuery Search And Highlight Work with the jQuery framework to create a fast Ajax...

Combining Selectables And Draggables Using jQuery UI

Ryan Coughlin — Sun, 23 Nov 2008 19:59:36 +0000

There are two powerful and fun elements that the jQuery UI provides. When both of them work together you will be able to come up with some creative web application uses for them. The two I am going to be covering are:

UI Selectable – Demo – Documentation
UI Draggable – Demo – Documentation

I am sure you all want to see what the final product will look like, check it out.

To start working with the jQuery UI you are going to need to add the following files to the head of your document:

jquery-1.2.6.min.js – the main core jquery framework
ui.core.js – the UI core javascript
ui.draggable.js - the draggable javascript
ui.selectable.js – the selectable javascript

Before we get started let me just say, thanks a ton to Richard Worth who has helped develop the jQuery UI and provided a ton of help to me last year trying to get this to work, and boom here is the working copy, you can find Richards blog here.

The jQuery UI adds classes for different mouse events, for instance:

jQuery UI Draggable
- .ui-draggable – the class it adds you when create the draggable(); object
- .ui-draggable-dragging - the class it adds when you are dragging the object around the page
jQuery UI Selectable
- .ui-selectee - the class it adds when you create the selectable(); object
- .ui-selectable – the class it adds when you select the object
- .ui-selecting – the class it adds when you click and start to create the bounding box around the elements you wish to select, once you let go, it becomes .ui-selectable

That is the basic structure how how the jQuery UI draggable and selectable generates classes to manipulate change for each action.

I am going to be using console.log(); to report what the code is doing after different steps throughout the page. Make sure you have Firebug installed if you are on Firefox. If you are unsure what console.log() does view the documentation. Be sure that if you use this technique in a real world example, remove the console.log() functions to decrease page loading time. This neat little function allows us to see what our code is doing, we can call:

console.log(variable);

When we open up the page and open Firebug, it will print out what the variable contains, it is a great tool for debugging, keep it handy.

Now that we have the understanding on how it works with different classes, lets start looking at the code that makes it work. I have commented it to make it easier for you to translate on your own time.

The first bits of the code

// creates the selected variable
// we are going to be storing the selected objects in here
var selected = $([]), offset = {top:0, left:0};
console.log("This is the value of selected when it is created " +selected + "");

As you can see from above, our first line creates the variable selected and is able to store numerous values because we are setting up an array for this variable. And the offset, resets the top and left values. If you use console.log it will output: Object length=0 prevObject=Object jquery=1.2.6 notice the length is 0 that is fine we haven’t selected any items yet.

// initiate the selectable id to be recognized by UI
$("#selectable1").selectable();

This part above, calls the selectable to generate the selectable region. NOTE: that #selectable is container and is the box not each element we are selecting.

The following part is important because, this is the where we start to hook up selectables with the draggables.

// declare draggable UI and what we are going to be doing on start
$("#selectable1 div").draggable({
     start: function(ev, ui) {
          $(this).is(".ui-selected") || $(".ui-selected").removeClass("ui-selected");
	  console.log("The value of 'this' currently is: "+this);
          selected = $(".ui-selected").each(function() {
               var el = $(this);
	       el.data("offset", el.offset());
	       $(this).text("Selected and dragging object(s)");
	  });
console.log(selected);
offset = $(this).offset();
},

The part below, tells the draggable UI to create every element within to have dragging.

$("#selectable1 div").draggable({

$(this).is(".ui-selected") || $(".ui-selected").removeClass("ui-selected");
console.log("The value of 'this' currently is: "+this);

This next section above resets the select and drag, by removing the ui-selected class, when we output using console.log, to see the value of this is The value of ‘this’ currently is: [object HTMLDivElement].

selected = $(".ui-selected").each(function() {
     var el = $(this);
     console.log("The value of el is: "+el);
     el.data("offset", el.offset());
     $(this).text("Selected and dragging object(s)");
});

Now we are finally working with the selected variable we created at the start of this, we are to run through each element with the class of ui-selected. We are going to be storing the value of $(this) in the variable el, to make it easier to call and to work with the offset(); property later on.

el.data("offset", el.offset());
$(this).text("Selected and dragging object(s)");

We are going back to out el variable and working with the data object and the offset object. The offset object returns two integer values: top and right. The definition of the offset(); from the jQuery documentation is: Get the current offset of the first matched element relative to the view port.

The other line, changes the text of the elements to let us know that we have selected and are now dragging the objects stored in the variable selected.

Now that we have called offset we want to store it in the variable offset, for each DOM elements selected. The code that follows this part is below:

console.log("The new value of selected is now "+selected);
offset = $(this).offset();
console.log("The value of top value is "+offset.top+" and the left value is "+offset.left);

We have another console.log() to print out the selected value and it is storing the DOM element. Next we create the variable offset and store the offset() of the elements, I have printed the top and left values using console.log() above, the output is similar to: The value of top value is 207 and the left value is 672.

The next section below is the section of code that handles what is going to go on while we are dragging our selected elements. This part is also very important because we are bringing back the values of offset with the current values of the draggable ui, it stores the ui properties in ui.position.top and ui.position.left. Further down the code we will use the offset values to update the CSS top and left properties of the selected elements.

drag: function(ev, ui) {
     var dt = ui.position.top - offset.top, dl = ui.position.left - offset.left;
     console.log("The value of dt is "+dt);
     selected.not(this).each(function() {
          var el = $(this), off = el.data("offset");
          el.css({top: off.top + dt, left: off.left + dl});
     });
},

We are creating the variable dt on the second line there and this value is equal to ui.position.top – offset.top and we are also creating the variable dl that is dl = ui.position.left – offset.left. So we have:

var dl – working with the x axis or the left coordinates
var dt – working with the y axis or the top coordinates

Lets add a console.log to see what these values are before we do the math. Add the following code to see what our variables and math are doing:

console.log("The value of dt is "+dt+" and is equal to "+ui.position.top+" - "+offset.top);
console.log("The value of dl is "+dl+" and is equal to "+ui.position.left+" - "+offset.left);
console.log("The value of ui.position.top is "+ui.position.top);
console.log("The value of ui.position.left is "+ui.position.left);
console.log("The value of offset.left is "+offset.top);
console.log("The value of offset.left is "+offset.left);

When you run the code the console.log() outputs the following:

The value of dt is 37 and is equal to 237 - 200
The value of dl is 152 and is equal to 352 - 200
The value of ui.position.top is 237
The value of ui.position.left is 352
The value of offset.top is 200
The value of offset.left is 200

Notice what the code is printing out, it is taking the ui.position.top and subtracting the value of offset.top and giving us the difference to equal variable dt. We do this math so we can update the top and left CSS properties in the next section of code, if we didn’t do this math, we would select and drag our elements and they would move sporadically on the page.

Next we are going to cover the other each function that loops through each of the selected elements expect $(”this”):

// take all the elements that are selected expect $("this"), which is the element being dragged and loop through each.
selected.not(this).each(function() {
     // create the variable for we don't need to keep calling $("this")
     // el = current element we are on
     // off = what position was this element at when it was selected, before drag
     var el = $(this), off = el.data("offset");
     el.css({top: off.top + dt, left: off.left + dl});
});

So we have the last big piece of code to make this script work. Like I said, you have the each function that runs through each element expect $(”this”), then we create two variables:

el – which is the current element we are on
off – which is the position of the elements when they were selected, before any type of movement and drag

The last segment: we are going to be adding or subtracting (we will subtract if the dt or dl is negative). The dl stands for delta left and dt stands for delta top. For instance lets set something up:

The current element we are on start at the coordinates: 10, 30, now we drag that to: 8, 15. Now lets run the math, the new position of the element is: 2, 15. Say, you drag it again, it runs the loop once again, and the off will be 2, 15 and the new value will be wherever the new coordinates are subtract the total delta from when the drag started until now, not just the last mouse movement.

Now that we did the math and we have captured the new value, update it is the css property and plug in the top and left coordinates.

So what did you think of it? Pretty interesting effect when you combine both of those UI elements to create select and drag. Share your thoughts and make sure to bookmark using the button below. Any improvements? Contact me.

Enjoy!

jQuery Timeout Function A neat and simple way to creating a jQuery function...
Using the jQuery UI Slider Utilize the jQuery UI Slider to change CSS properties or...
jQuery Search And Highlight Work with the jQuery framework to create a fast Ajax...

Two Panel Slick Drop Down Using jQuery

Ryan Coughlin — Sun, 16 Nov 2008 19:53:40 +0000

UPDATE: I have updated the code and the post here, I have optimized and narrowed down the number of lines, the new demo is up and running.

I use to use something similar to this on my older site to bring down content and a contact form on one side using jQuery, then about a year later I was thinking why not bring it back up, change some styles, and write a post for others to use. The concept is pretty simple.

When you press the selector, it will slide down panel 1, then using window.setTimeout, we will call the panel 2 to come down 100ms later, just enough of a delay where we get a nice effect. Once the panels slide down, the content within are faded in using fadeIn(); To close the panels we call a closePanels() that does the opposite effect when it is sliding down.

The items/events/functions that are used in this article are:

Check out the demo to see what the final product will look like.

To make a note, I am using Blueprint CSS for the basic styles of the website, for the demo page. If you download Blueprint and link up the styles, then your layout, should appear as in the demo.

Lets start with the HTML:

Welcome to my site!

Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit
esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
occaecat cupidatat non proident, sunt in culpa qui officia
deserunt mollit anim id est laborum.

Click the panels to close.

Panel 1

Name:

E-Mail:

Website:

Comments:

Panel 2

You can see the basic structure, a three column layout with dummy text as a place holder and we have the button down at the bottom left. And of course you are able to change this to whatever you want. Thought it would be the simplest way to approach it for the article.

Besides the dummy text, we have a base setup with a wrapper called #panel-wrapper, which surrounds both panels. Within that element we have .panel-1 and .panel-2. Then is the inner element that is in place in order to fade in the contents of the panels, if we told the jQuery to fadeIn() .panel-1/.panel-2, then it would animate down, blink, then fade in the box. Using this other wrapper, we tell it to just fadeIn() the .panel-contents.

There you have the basic HTML structure of the panels, now time for the goodies! Lets take our first look at the block of jQuery we are going to be looking at.

The code to make it dance:

/*  */

The Structure Outline
A quick over view of the structure looks something like this:

.click() to open panels
animate .panel-1
window.setTimeout() and animate .panel-2 (execute 100ms after executing .panel-1
fadeIn() contents of panel
function closePanels() handles the code to close the panels and do the opposite effect when they slide down
.fadeOut() to fade out text
.click() to close panels

I have commented the code to make this easier to understand, thought this approach would help, going line by line and if you’re familiar with jQuery you should be right on target.

Code to build this is pretty repetitive and we see this line a great deal:

// open .panel-1 to 500px then shrink back fast to 425px
$("div.panel-1").animate({height: "500px"}).animate({height: "425px" }, "fast")

It does just what the comment says, this gives us the quick “bounce” effect. When we open the panels it animates to 500px then back to 425px quickly, and stops at 425px. And the same thing with .panel-2, animates down to 550px, then shoots back up quickly to 425px. Thank you to jQuery and its able to chain, makes this very easy to accomplish.

Inside the closePanels() function, we have the opposite effect as above, we have:

$("div.panel-1").animate({height: "520px"}).animate({height: "0px",top:"-30px"}, "fast");

This extends the height to 520px, then shoots it up to 0px for the new height and adjust it to the -30px position to the top. To have the element display off the page.

So all and all, there you have it a simple two panel drop down using jQuery selectors, effects, and functions to create a sleek effect. If you have any questions, leave a comment, and if you like this make sure to bookmark to delicious.

Your voice? What do you think, if I can improve it in anyway, let me know. If you want, please subscribe and stay in touch with the latest

Using the jQuery UI Slider Utilize the jQuery UI Slider to change CSS properties or...
jQuery Timeout Function A neat and simple way to creating a jQuery function...
How to load data using JSON/PHP using jQuery I have seen a good amount of people wanting to...

Use jQuery To Submit Form To PHP/MySQL

Ryan Coughlin — Tue, 04 Nov 2008 17:27:15 +0000

Using jQuery to submit a form, is something you are seeing more and more of as jQuery’s popularity builds. When I first started reading about jQuery and Ajax all I wanted to do was learn how to submit a form using jQuery.

I was so confused and lost, seeing the code was so abstract to me. So in this tutorial, I want to show you how to use the jQuery framework to submit data through a form using jQuery to a PHP page that submits to a database.

We are going to take form data and submit it to a jQuery Ajax call then send that to a PHP page with the data. Check out a live example of this post.

YOU SHOULD HAVE AN IDEA OF

Some principles of PHP
Basic knowledge of JavaScript and/or jQuery framework
MySQL
XHTML to build the form

JQUERY FUNCTIONS

submit() – documentation
jQuery.ajax – documentation

XHTML OUTLINE



		
			Enter Information
			Client First Name:


			Client Last Name:


			
		
	
Client has been added.

JQUERY TO COOK IT ALL

$(document).ready(function(){
	$("form#submit").submit(function() {
	// we want to store the values from the form input box, then send via ajax below
	var fname     = $('#fname').attr('value');
	var lname     = $('#lname').attr('value');
		$.ajax({
			type: "POST",
			url: "ajax.php",
			data: "fname="+ fname +"& lname="+ lname,
			success: function(){
				$('form#submit').hide(function(){$('div.success').fadeIn();});

			}
		});
	return false;
	});
});

We need to capture the values of the form and we do this by:

var fname     = $('#fname').attr('value');

We are storing it in the variable called “fname” and we are taking it from the input field with the id of “fname” and the “.attr(’value’) tells jQuery to take the value from the attribute of the value from the input field.

The next section is the bulk of the code. jQuery makes it very nice and easy to create Ajax calls. As you see, we have type, url, data, and success. These are pretty self explanatory.

TYPE – Are you going to use POST or GET
URL – What is the URL you are sending the data to
DATA – The data that you are sending the the URL to be processed
SUCCESS – What should the function do after the call has been executed

Remember that all of these are explained at the jQuery page, you can find the documentation for the Ajax calls here. There is a slew of options you can run within this one jQuery.ajax() function.

The success part:

success: function(){
     $('form#submit').hide(function(){$('div.success').fadeIn();});
}

Once the form is successfully submitted, the form will hide and thanks to jQuery callbacks, we then show the success message.

THE BACKEND – AJAX.PHP

Below is what our ajax.php file will look like, this will carry out the submission. Save this as ajax.php.

There you have it, a straight forward guide to to using jQuery, PHP, and a simple HTML form to submit a form. Hopefully this will be a help to users new to the jQuery/Ajax world! If you have any comments or questions get in touch with me, by emailing me or leaving a comment below.

How to use jQuery to Serialize Ajax Forms When I first started working with jQuery and submitting forms...
How to load data using JSON/PHP using jQuery I have seen a good amount of people wanting to...
jQuery Search And Highlight Work with the jQuery framework to create a fast Ajax...