UnDeprived » jQuery

Image maps within an image map

Mon — Fri, 19 Feb 2010 15:36:07 +0000

jQuery CSV2Table — Modified

Mon — Wed, 21 Oct 2009 23:02:10 +0000

jQuery Journal: jEditable & PHP Basic — Step by Step

Mon — Wed, 22 Jul 2009 13:42:49 +0000

jEditable passes values as $_POST as default
It grabs the ID from the container as value to the $_POST. Example:
```
Editable text
```
To retrieve: $id = $_POST[’id’] will return “item01″ – this is meant to be passing unique ID. An example would be the Primary Auto-increment ID.
Set a class and delcare it to jEditable to make them editable. Example:
```
This is the editable text
This is the editable text
```

The HTML

This is item 1

This is item 2

This is item 2

Javascript:

		$(document).ready(function() {
            $('.editable').editable( 'jedit.php', {
                "indicator" : 'Saving...',
                "tooltip"   : "Click to edit...",
                "type"		: "textarea",
                "cancel"	: "Cancel",
                "submit"	: "Save"
            });
        });

The PHP: jedit.php
Note: Must re-echo the results for the updated value(s) to display the new value(s)
jEditable Configurations: you have the options to choose what to show up for an editable field. Such as a tooltip popup, what the submit button shows, or have a cancel button etc… you can see the full documentation on jEditable website.

If you want to pass multiple parameters, you can either use JSON or trick the ID to pass multiple fields. I have a hard time with JSON, so I tricked the ID part to pass multiple fields by using the PHP explode() function. For example:

This is editable text

Newb, but works.

jQuery Journal: each() vs Selectors

Mon — Tue, 21 Jul 2009 21:25:11 +0000

One of the first few things I learned in jQuery, importantly enough that I can’t live without this function. I like to note that when I first learned jQuery, I was a bit confused of the Selectors and the each() core function. After I got a hang of how to use the Selectors, I slowly grasp the usage of each(). A few things to note about the two:

$(selectors) selects everything that you feed to it
The each() function is used conjunctionally with $(selectors)
The each() function separates each of the returned item from the $(selectors) individually

Why you probably can’t live without each()

Let’s say you want to change all the paragraphs (

) into I don’t know… say “No paragraph for you!” to all of them:

From:

This is a paragraph 1

Second paragraph

3rd paragraph

To:

No paragraph for you!

No paragraph for you!

No paragraph for you!

All you have to do is one fell swoop with jQuery:

	$("p").text("No paragraph for you!");

What if you want to change the text individually ONLY when the user clicks on each of the paragraph? That’s when each() comes in as hero of the day:

$("p").each(function(){
    $(this).click(function(){
        $(this).text("No paragraph for you!!!");
    });
});

The above example / Image Swap Example using each()

That’s just the most basic use of the each() function, if you still don’t see the light with the above examples, let me know.

jQuery Journal: Easy jQuery image swap — Step by step

Mon — Tue, 21 Jul 2009 20:49:17 +0000