Not A n00b » jQuery

jQuery, PHP, and Forms

pyr0t3chnician — Sat, 05 Sep 2009 01:56:57 +0000

I decided to put up a quick post on how I have been using jQuery and PHP to process forms for me very easily. To get started, let me give you a background on what I have been trying to do. I have a page with a list of info, and I wanted to give the user the option of editing that info using jQuery’s built in dialog box because it is awesome looking. There were a few ways to go about doing this, which is what I am going to describe.

This is the goal!

I click the link

A dialog box pops up

The text boxes have info filled in already

Something like this:
Name:

I can edit it, then submit it

I want the code to be small

The first way that I thought of was to create a form for every piece of info I pulled from the database. So lets say for ID=1, there would be 1 form with all the info preloaded into it. ID=2 would be a separate form with all different info. This works, but I had to have about 20 dialog boxes per page, and it would cause the HTML output to be about 20 times larger than I needed.

In my head, I knew there had to be a way to do this with DHTML and jQuery, and I finally figured it out. All I had to do was create a value and store it in the button that I was already using (well it was actually just a link). So I turned Edit! into Edit!. I used PHP to echo out the data already but now each link will have a different ID:

echo "\"#\" class\"editThis\" id=\"$row[UserId]\">Edit!";

So now we have 20 links, each looking the same, but each with a unique ID. This is where jQuery comes in handy. We can look up the anchor by class, and then store the ID as a variable for later use!

$(".editThis").click(function{
   var id=$(this).attr('id');
});

So now we have the ID of the info we want to manipulate. The next part was a little more difficult to figure out. I want only 1 dialog box and 1 form, but want the info auto filled. At first I was thinking we needed to do a lot of AJAX to pull out each and every variable that we want to edit, but then I figured out we could pass that info into HTML as a “HIDDEN” variable. HTML is great because you can hide all sorts of stuff and the user will never see it. I can set the style as “hidden”, or I can include it inside a tag somewhere, or better yet, and my favorite, I can create a hidden variable: Now we need to implement this into our PHP to write it to the HTML:

echo "\"#\" class\"editThis\" id=\"$row[UserId]\">Edit!";
echo "\"hidden\"";
echo " name=\"editinfo{$row['UserId']}\""; 
echo " id=\"editinfo{$row['UserId']}\""; 
echo " value=\"$row[Name]::$row[Address]::$row[Age]\">";

So now our HTML will look like this:

All our info is now conveniently stored for jQuery to access later!

$(".editThis").click(function{
   var id=$(this).attr('id');
   var variables=$("#editinfo"+id).val();
   var info=variables.split('::');
   alert(info[0]+"\n"+info[1]+"\n"+info[2]);
});

Now for the fun part, using jQuery to dynamically change the values of our SINGLE form!
Our form might look like this:

And our jQuery would look like this:

$(".editThis").click(function{
   var id=$(this).attr('id');
   var variables=$("#editinfo"+id).val();
   var info=variables.split('::');
   $("#eusername").val(info[0]);
   $("#eaddress").val(info[1]);
   $("#eage").val(info[2]);
   $("euid").val(id);
   $("#dialog").dialog("open");
});
$('#dialog').dialog({
        autoOpen: false,
        width: 600,
        modal: true,
        position: 'top',
        buttons: {
            "Update user": function() {
                document.edituserform.submit();
            }, 
            "Cancel": function() { 
                $(this).dialog("close"); 
            } 
        }
    });

That’s it! Hopefully it was easy to understand. Let me know if you need anything cleared up a little! Thanks!

Nifty PHP/AJAX tricks

pyr0t3chnician — Sun, 26 Jul 2009 21:03:52 +0000

These are a couple awesome AJAX/PHP tricks I learned to make coding just slightly easier on myself.

Exit

Lets say we had an index page, and when the user click a button, it would display the time. Typically, in the past I would have it go to another “remote procedure call” (RPC) page, like “time.php” where the main portion of the script would be “echo time();”. This tends to clutter my folders with miscellaneous scripts if I have multiple AJAX events. I may have a different RPC for every page, which could mean I have like 50 php files in one folder and I’m not sure which ones are the RPC and which ones are the main files.

I then started condensing them, making one large script for a few files, and using a $_POST['action'] to decide what to do. So if I had an ajax.php page it might look something like this:


if($_POST['action']=='time'){
   echo time();
}else if($_POST['action']=='hello'){
   echo "hello!";
}?>

So now it will execute the portion of the script that it is told. So if I point my AJAX to ajax.php and pass a post variable called “action=time”, it will return the time. We have now condensed it slightly.

We can condense it even further by using the php function “exit();”. This function completely stops (exits) the script. If my script looked like this:


echo "hello ";
exit();
echo "world!";
?>

The output would look like this: hello
Exit will abort the script and not run anything after it.

Exit also has the capability to display (echo) a message as to why it is quitting, so you could essentially use exit() and let people know they aren’t logged in if you wanted. Here is an example:


session_start();
$notlogged="\"login.php\">Please log in to view this page";
if(!$_SESSION['loggedin'])
   exit($notlogged);
/* Main Content Starts Here */
?>

So if we had never logged into the site, all we would see is “Please log in to view this page” as a link that we could click.

Lets put this all together. The exit function allows you to point the ajax script to the current page, as it will “exit” and echo the data you want without running the main content of the page over again. Let me show you what I mean, using jQuery ajax, with a time.php.


//time.php
if($_GET['do'] && $_GET['do']=='time')
   exit(date('g:i A'));
if($_GET['do'] && $_GET['do']=='hello')
   exit("Hello World!");
?>




AJAX Example

Pretty simple stuff right? You can reduce the number of extra files by simply putting the AJAX commands at the top of the file. If you put “echo(time());”, it would continue to run the entire page and mess up your AJAX. This has made my life easier and my code a little more succinct.

Arrays

Because AJAX only accepts strings to be echo, and returned to the AJAX function, so a lot of people struggle with returning an array to Javascript through AJAX. There are 2 ways to do this that don’t require JSON.

The first is simply to break the array up and make it into a string using the “implode” function:


$array[1]="hello";
$array[2]="world";
$array[3]="!";
$newarray=implode("::",$array);
echo $newarray;
?>

On the Javascript end, just split it up into an array again!

var myArray=data.split('::');

That is by far the easiest way to return arrays.

There is one problem. What if in PHP, your arrays didn’t have numerical keys, but strings: $array['name']='bob'. This is where we run into a problem. There is a way around this fairly easy. Most languages have an “evaluate” command, which will take a string, and execute it as though it were code. In PHP and Javascript, it is eval(). Here is a PHP example: eval("echo 'Hello World!';");. This would output “Hello World!”. In Javascript, it is exactly the same thing. So lets use eval() to return a Javascript array!


$array['name']='bob';
$array['age']='96';
$array['sex']='male';
$return='var myArray={"name":"'.$array['name'].'", "age":"'.$array['age'].'", "sex":"'.$array['sex'].'"};
echo $return;
?>

And on the Javascript side, all you need to do is evaluate the string:

function handler(data){
   eval(data);
   alert(myArray['name']);
}

Its a bit lengthy to do it this way, but will definitely get the job done. One thing to watch out for would be quotes, plus signs, slashes, especially if the user gets to define some of the stuff that is being returned.

I hope this has helped out a little with using PHP and AJAX. I spent hours trying to figure this stuff out the first time, but when I did, it made my life a lot simpler.

jQuery tutorial has been posted.

pyr0t3chnician — Tue, 21 Jul 2009 01:54:03 +0000

This is a simple tutorial, designed mostly just to introduce you to jQuery. If you have had some experience with Javascript, you should be able to pick this up very quickly after reading through the tutorial. I provide the structure and a couple examples. If anyone needs help with a script or is having problems getting it working, post a comment and I will help out as best I can. Check out the page!

jQuery – Lesson 2

pyr0t3chnician — Sat, 18 Jul 2009 00:05:25 +0000

I have been working pretty intensely with jQuery and have learned a lot. It is a difficult language to work with because it is picky. But once you understand it, it is actually quite simple to manipulate.

Today I want to cover parent/child/sibling relationships and how jQuery can be very effective here. I spent a while trying to figure this out in javascript, and yes, it is completely do-able in just a little more code, but jQuery always has the UI plugins that make coding super easy. Let me show you some code I currently have:

$('div').each(function (){ 
   if($(this).is('#rows')) {
      $(this).hover(
         function() { $(this).addClass('rows-add-class'); }, 
         function() { $(this).removeClass('rows-add-class'); }
      );
      $(this).children('.section2, .section3, .section4, .section5').click(function(){
         window.location.href="viewClient.php?id="+$(this).siblings('.small').children('#cb').val();
      });
      $(this).children('.section1').click(function(){
         if($(this).siblings('.small').children('#cb').attr('checked'))
            $(this).siblings('.small').children('#cb').attr('checked',false);
         else
            $(this).siblings('.small').children('#cb').attr('checked',true);
      });
   }
});

I know this looks complicated, but lets break it down line by line.

$('div').each(function (){

This code goes through each

in my code, and with each

it finds, it executes a function, which is the remainder of the code.

if($(this).is('#rows')) {

So when it finds a

, it checks to see if the

that was found “is” (or has the property of) ‘#rows’. The # in the front means the

id. If there is a “.” in front, it means the

class. If there is nothing, then it means that it is a tag itself. So when it finds the div tag with the id=”rows”, it will execute the following code.

$(this).hover(

Simply, it adds a hover class to the div with the id=”rows”. When you add a hover, you need to have it do 2 things, mouseover and mouseout. So the next parts of the code describe mouseover and mouseout respectively.

function() { $(this).addClass('rows-add-class'); },

So on mouseover, it will execute this function, which is, it will add a class called ‘rows-add-class’ to the div we have selected. Note the “,” at the end, which means that this is the next line is also part of hover().

function() { $(this).removeClass('rows-add-class'); }

On mouseout, it will remove the class. We could have it add another class or give us an alert if we wanted, but typically when you hover over something with the mouse, you want to emphasize/change something, and when you move it out, you want it to return to normal.

);

So finally we start closing stuff up. This closes up the hover statement.

$(this).children('.section2, .section3, .section4, .section5').click(function(){

Here we are getting into children. If you have a div, and inside that div, you have multiple other divs, you may want to do something to those divs. What I am doing here is adding an “onclick” function to the children divs with classes “section2″, “section3″, “section4″, “section5″. Notice how here I used ‘.section1, etc’, the “.” signifies classes. So this is statement, I am adding an “onclick” to the child tags under &ltldiv id=”rows”>. The next line will tell me what exactly I am going to do when I click on one of those 4 child divs.

window.location.href= "viewClient.php?id="+$(this).siblings('.small').children('#cb').val();

Wow, thats a long line of code! window.location.href= is a redirect, so basically, when you click the divs, it will act like a link and take you somewhere else. It looks like it will take you to a viewClient.php page with the id= whatever $(this).siblings(‘.small’).children(‘#cb’).val(); equals. It gets a little confusing here. So

is set up with a few children tags, and those children have a few tags. All of the children are siblings. So if I was to click on one of the children, say one with the class “section2″, I want to find out info about his sibling, with the class “small”. Now “small” has a child with the id=”cb”. Cb stands for check box. Basically, when you click on the div, it will find its sibling’s, child’s value, which is the ID # we are looking for. At the bottom of the page you can see the layout of the div with children and grandchildren. So to recap, this line redirects us to “viewClient.php?id=1″.
Why did I do this? Well I am pulling data out of a database, and I don’t want to make a link in every div so they have to click on the words to be redirected. These couple lines of code make it much easier for the user to redirect to the page they want.

});

Just closing up the “onclick” that we added to those 4 divs.

$(this).children('.section1').click(function(){

Here is the div with class=”section1″ and we are adding a different “onclick” function to it. Let’s see what we want it to do.

if($(this).siblings('.small').children('#cb').attr('checked'))

This looks similar to line 8 where we locate the sibling with the class=”small” and the child it has with the id=”cb”. So we are locating our checkbox. If our checkbox is checked (.attr(‘checked’) returns true if checked, false if not checked), we are going to do something. That was pretty easy now that siblings and children make a little sense.

$(this).siblings('.small').children('#cb').attr('checked',false);

Ok, so if it was checked, all this will do is set ‘checked’ to false, meaning it will un-check the check box.

else

If it wasn’t checked, then what.

$(this).siblings('.small').children('#cb').attr('checked',true);

Well then, check it! So why did I add this code? Well just to add it really. It makes clicking the check box slightly easier. They can click on this div, and it will check/uncheck the checkbox for them.

The rest of the code simply closes up the function that I created. This is something I would have it do on start up, rather than allowing the user to click a button to enable these features.

This is the HTML markup that was used in the code. The classes are easily created and is something you can do on your own.


   
   1 (Clients ID)
   Bob (Clients Name)
   123 Fast Lane (Clients Address)
   12345 (Clients Zip)
   (123)555-1212 (Clients Phone)

Pretty simple layout causes pretty intense code. Hopefully my explanation shows you some of what jQuery can do for you and provides a plan of attack for you. If you want any help, let me know and I will be willing to explain something, review your code, etc.

jQueryui drop down menu

pyr0t3chnician — Wed, 15 Jul 2009 01:26:22 +0000

I was going to title this post: “jQuery, your friend and enemy” because I spent close to 2 hours today hating it and thinking of coding my own functions rather than trying to work with it. Eventually I figured out what I was doing and made it work beautifully with the custom ui template I made at their website. Because I learned it, I figured I would share it.

The menu is very simple, and very customizable. Because I am using a jQuery theme/template, you may have to tweak yours a little to take out the icons. First the jQuery code in the header:

<script type="text/javascript">
$(document).ready(function(){
	$('ul#icons li').hover(
		function() { $(this).addClass('ui-state-hover'); }, 
		function() { $(this).removeClass('ui-state-hover'); }
	);
	$('#menu').hover(
		function() { $('ul#icons').show('fast'); }, 
		function() { $('ul#icons').hide('fast'); }
	);
});
script>

For jQuery n00bs, there are 2 things done here when the page loads. The first is it adds a hover class to my links (which I chose to do as a list). With a little editing, you could make it add a cover class to anything you want. Secondly, I add another hover function to the tag with the id “menu”. This one will show the list with the id=”icons” when I hover over it, and take it away when I move my mouse away. Not to mention, it is animated slightly, so it drops down, which is something that would take a hell of a lot more lines than just 3-4 to do.

Now for a little css to make our menu fantabulous and have it stuck at the top of the page:

	



Menu

Home
View Orders
View Tickets

Thats it! Good luck. I will post more jQuery tutorials as I figure stuff out.