jquery ajax serialize array


<html>
<head>
<script type=”text/javascript” src=”jquery.js”></script>
<script type=”text/javascript”>
$(document).ready(function(){
$(“button”).click(function(){
x=$(“form”).serializeArray();
$.each(x, function(i, field){
$(“#results”).append(field.name + “:” + field.value + ” “);
});
});
});
</script>
</head>
<body>
<form action=””>
First name: <input type=”text” name=”FirstName” value=”Mickey” /><br />
Last name: <input type=”text” name=”LastName” value=”Mouse” /><br />
</form>

<button>Serialize form values</button>
<div id=”results”></div>
</body>
</html>

Jquery Serialize ajax


<html>
<head>
<script type=”text/javascript” src=”jquery.js”></script>
<script type=”text/javascript”>
$(document).ready(function(){
$(“button”).click(function(){
$(“div”).text($(“form”).serialize());
});
});
</script>
</head>
<body>
<form action=””>
First name: <input type=”text” name=”FirstName” value=”Mickey” /><br />
Last name: <input type=”text” name=”LastName” value=”Mouse” /><br />
</form>

<button>Serialize form values</button>
<div></div>
</body>
</html>

Jquery JSON Ajax


<html>
<head>
<script type=”text/javascript” src=”jquery.js”></script>
<script type=”text/javascript”>
$(document).ready(function(){
$(“button”).click(function(){
$.getJSON(“demo_ajax_json.js”,function(result){
$.each(result, function(i, field){
$(“div”).append(field + ” “);
});
});
});
});
</script>
</head>
<body>

<button>Get JSON data</button>
<div></div>

</body>
</html>

pop up external page in light box


What is it?

Facebox is a jQuery-based, Facebook-style lightbox which can display images, divs, or entire remote pages.

It’s simple to use and easy on the eyes. Download the tarball, view the examples, then start enjoying the curves.

Why another lightbox?

Because we wanted, nay, needed a Facebook-style lightbox on FamSpam.

Download

Requires jQuery 1.2.1.

You’ll need a loading image, close label, four corners, and solid border images in addition to the javascript and css files. All are included
in the tarball.

Download Facebox v1.3

Want to live on the edge? The code is kept in GitHub at http://github.com/defunkt/facebox

Help!

Need help? Join our Google Groups mailing list.

Images

View ‘images/stairs.jpg’ in the Facebox

The Code

<a href="images/stairs.jpg" rel="facebox">text</a>

Divs

View the ‘info’ div in the Facebox

The Code

<a href="#info" rel="facebox">text</a>

Ajaxes

View ‘remote.html’ in the Facebox

The Code

<a href="remote.html" rel="facebox">text</a>

Load Dependencies

Make sure jQuery is loaded before Facebox.


<script src="jquery.js" type="text/javascript"></script>

<link href="/facebox/facebox.css" media="screen" rel="stylesheet" type="text/css"/>

<script src="/facebox/facebox.js" type="text/javascript"></script>

Attach It onLoad

While calling facebox() on any anchor tag will do the trick, it’s easier to give your Faceboxy links a rel="facebox" and hit them all onLoad.


jQuery(document).ready(function($) {

$('a[rel*=facebox]').facebox()

})

Extra Classes

You can give the facebox container an extra class (to fine-tune the display of reusable remote pages)
with the facebox[.class] rel syntax.

Maybe your Terms and Conditions can be loaded standalone or via Facebox. When loaded in Facebox,
you might want to tweak some styles — like making the h1 positioned absolutely?
We do this on FamSpam.


View an an example which makes the remote.html page bigger and bolder using css.

The Code

<a href="remote.html" rel="facebox[.bolder]">text</a>

Controlling Facebox Programmatically

It’s possible to attain a higher level control over Facebox by calling methods directly.
The following will open the Facebox and insert the passed string into it:

Arbitrary Text


jQuery.facebox('something cool');

jQuery.facebox('something cool', 'my-groovy-style');

Remote files


jQuery.facebox({ ajax: 'remote.html' });

jQuery.facebox({ ajax: 'remote.html' }, 'my-groovy-style');

Image


jQuery.facebox({ image: 'images/stairs.jpg' });

jQuery.facebox({ image: 'images/stairs.jpg' }, 'my-groovy-style');

A Page Element


jQuery.facebox({ div: '#box' });

jQuery.facebox({ div: '#box' }, 'my-groovy-style');

If you plan to fill the Facebox with the result of an Ajax call, you’ll want the loading graphic
displayed whilst your asynchronus task runs. This is the automatic behavior if the facebox()
method is passed a function.

Loading Image Displayed

 

jQuery.facebox(function() {

jQuery.get('code.js', function(data) {

jQuery.facebox('<textarea>' + data + '</textarea>')

})

})

Thanks & Contact

Thanks to Facebook for the idea and style. Thanks to Mindy Tchieu for her help in getting this working.

Comments, concerns, complaints, criticisms, confessions? Join our Google Groups mailing list

convert accentuated characters of french into english


function stripVowelAccent(str)
{
var s=str;

var rExps=[ /[\xC0-\xC2]/g, /[\xE0-\xE2]/g,
/[\xC8-\xCA]/g, /[\xE8-\xEB]/g,
/[\xCC-\xCE]/g, /[\xEC-\xEE]/g,
/[\xD2-\xD4]/g, /[\xF2-\xF4]/g,
/[\xD9-\xDB]/g, /[\xF9-\xFB]/g ];

var repChar=[‘A’,’a’,’E’,’e’,’I’,’i’,’O’,’o’,’U’,’u’];

for(var i=0; i<rExps.length; i++)
s=s.replace(rExps[i],repChar[i]);

return s;
}

How to pass value from child window to parent window


To open the child window this is the code used in parent window

<form method=post action=” name=f1>
<table border=0 cellpadding=0 cellspacing=0 width=550> <tr>
<td ><font size=2 face=’Verdana’>Your Name</font><input type=text name=’p_name’ size=’8′>
<a href=”javascript:void(0);” NAME=”My Window Name” title=” My title here ”
onClick=window.open(“child3.html”,”Ratting”,
“width=550,height=170,left=150,top=200,toolbar=1,status=1,”);>Click here to open the child window</a> 

</td></tr> </table></form>

Inside the Child window code is here

<html>
<head>

<script langauge=”javascript”>
function post_value(){
opener.document.f1.p_name.value = document.frm.c_name.value;
self.close();
}
</script>

<title>(Type a title for your page here)</title>
</head>

<body bgcolor=”#ffffff” text=”#000000″ link=”#0000ff” vlink=”#800080″ alink=”#ff0000″>

<form name=”frm” method=post action=”>
<table border=0 cellpadding=0 cellspacing=0 width=250>

<tr><td align=”center”> Your name<input type=”text” name=”c_name” size=12 value=test> <input type=button value=’Submit’ onclick=”post_value();”>
</td></tr>
</table></form>

Basic JQuery Tutorial


jQuery Tutorial for Beginners: Nothing But the Goods

Not too long ago I wrote an article for Six Revisions called "Getting Started with jQuery" that covered some important

things (concept-wise) that beginning jQuery developers should know. This article is the complete opposite; there’s no

concepts, no principles, and very little lecturing — just some straight example code with brief descriptions

demonstrating what you can do with jQuery.

This fast-paced tutorial should be able to get beginners up and running with jQuery very quickly, while also providing a

good overview of what jQuery is capable of (although jQuery’s capabilities go far beyond this beginning tutorial).

Keep in mind that this tutorial is just a bunch of straightforward, superficial code examples and very brief explanations

for beginners who want to avoid all the jargon and complexities. But I still highly recommend that all beginners get

past this stuff by means of a good book, some more in-depth tutorials online, or by using the jQuery documentation.

Link to jQuery’s Source Code Remotely

This is an optional technique that many developers are using today. Instead of hosting the jQuery source code on

your own server, you can link to it remotely. This ensures the fastest possible download time of the source code, since

many users visiting your site might have the file already cached in their browser. Here is how your <script> tag should

look:

<script type="text/javascript">

src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js?ver=1.4.0"></scri

pt>

Running Code Unobtrusively When the DOM is Ready

The first thing you need to be up and running with jQuery is what’s called the "document ready" handler. Pretty much

everything you code in jQuery will be contained inside one of these. This accomplishes two things: First, it ensures

that the code does not run until the DOM is ready. This confirms that any elements being accessed are actually in

existence, so the script won’t return any errors. Second, this ensures that your code is unobtrusive. That is, it’s

separated from content (XHTML) and presentation (CSS).

Here is what it looks like:

$(document).ready(function() {

// all jQuery code goes here

});

Although you will normally include your jQuery code inside the above handler, for brevity the rest of the code

examples in this tutorial will not include the "ready" handler.

Selecting Elements in jQuery

The jQuery library allows you to select elements in your XHTML by wrapping them in $("") (you could also use single

quotes), which is the jQuery wrapper. Here are some examples of "wrapped sets" in jQuery:

$("div"); // selects all HTML div elements

$("#myElement"); // selects one HTML element with ID "myElement"

$(".myClass"); // selects HTML elements with class "myClass"

$("p#myElement"); // selects HTML paragraph element with ID "myElement"

$("ul li a.navigation");

// selects anchors with class "navigation" that are nested in list items

jQuery supports the use of all CSS selectors, even those in CSS3. Here are some examples of alternate selectors:

$("p > a"); // selects anchors that are direct children of paragraphs

$("input[type=text]"); // selects inputs that have specified type

$("a:first"); // selects the first anchor on the page

$("p:odd"); // selects all odd numbered paragraphs

$("li:first-child"); // selects each list item that’s the first child in its list

jQuery also allows the use of its own custom selectors. Here are some examples:

$(":animated"); // selects elements currently being animated

$(":button"); // selects any button elements (inputs or buttons)

$(":radio"); // selects radio buttons

$(":checkbox"); // selects checkboxes

$(":checked"); // selects checkboxes or radio buttons that are selected

$(":header"); // selects header elements (h1, h2, h3, etc.)

Manipulating and Accessing CSS Class Names

jQuery allows you to easily add, remove, and toggle CSS classes, which comes in handy for a variety of practical

uses. Here are the different syntaxes for accomplishing this:

$("div").addClass("content"); // adds class "content" to all <div> elements

$("div").removeClass("content"); // removes class "content" from all <div> elements

$("div").toggleClass("content");

// toggles the class "content" on all <div> elements (adds it if it doesn’t exist, //

and removes it if it does)

You can also check to see if a selected element has a particular CSS class, and then run some code if it does. You

would check this using an if statement. Here is an example:

if ($("#myElement").hasClass("content")) {

// do something here

}

You could also check a set of elements (instead of just one), and the result would return "true" if any one of the

elements contained the class.

Manipulating CSS Styles with jQuery

CSS styles can be added to elements easily using jQuery, and it’s done in a cross-browser fashion. Here are some

examples to demonstrate this:

$("p").css("width", "400px"); // adds a width to all paragraphs

$("#myElement").css("color", "blue") // makes text color blue on element #myElement

$("ul").css("border", "solid 1px #ccc") // adds a border to all lists

Adding, Removing, and Appending Elements and Content

There are a number of ways to manipulate groups of elements with jQuery, including manipulating the content of

those elements (whether text, inline elements, etc).

Get the HTML of any element (similar to innerHTML in JavaScript):

var myElementHTML = $("#myElement").html();

// variable contains all HTML (including text) inside #myElement

If you don’t want to access the HTML, but only want the text of an element:

var myElementHTML = $("#myElement").text();

// variable contains all text (excluding HTML) inside #myElement

Using similar syntax to the above two examples, you can change the HTML or text content of a specified element:

$("#myElement").html("<p>This is the new content.</p>");

// content inside #myElement will be replaced with that specified

$("#myElement").text("This is the new content.");

// text content will be replaced with that specified

To append content to an element:

$("#myElement").append("<p>This is the new content.</p>");

// keeps content intact, and adds the new content to the end

$("p").append("<p>This is the new content.</p>");

// add the same content to all paragraphs

jQuery also offers use of the commands appendTo(), prepend(), prependTo(), before(), insertBefore(), after(), and

insertAfter(), which work similarly to append() but with their own unique characteristics that go beyond the scope of

this simple tutorial.

Dealing with Events in jQuery

Specific event handlers can be established using the following code:

$("a").click(function() {

// do something here

// when any anchor is clicked

});

The code inside function() will only run when an anchor is clicked. Some other common events you might use in

jQuery include:

blur, focus, hover, keydown, load, mousemove, resize, scroll, submit, select.

Showing and Hiding Elements with jQuery

The syntax for showing, hiding an element (or toggling show/hide) is:

$("#myElement").hide("slow", function() {

// do something once the element is hidden

}

$("#myElement").show("fast", function() {

// do something once the element is shown

}

$("#myElement").toggle(1000, function() {

// do something once the element is shown/hidden

}

Remember that the "toggle" command will change whatever state the element currently has, and the parameters are

both optional. The first parameter indicates the speed of the showing/hiding. If no speed is set, it will occur instantly,

with no animation. A number for "speed" represents the speed in milliseconds. The second parameter is an optional

function that will run when the command is finished executing.

You can also specifically choose to fade an element in or out, which is always done by animation:

$("#myElement").fadeOut("slow", function() {

// do something when fade out finished

}

$("#myElement").fadeIn("fast", function() {

// do something when fade in finished

}

To fade an element only partially, either in or out:

$("#myElement").fadeTo(2000, 0.4, function() {

// do something when fade is finished

}

The second parameter (0.4) represents "opacity", and is similar to the way opacity is set in CSS. Whatever the opacity

is to start with, it will animate (fadeTo) until it reaches the setting specified, at the speed set (2000 milliseconds). The

optional function (called a "callback function") will run when the opacity change is complete. This is the way virtually

all callback functions in jQuery work.

jQuery Animations and Effects

You can slide elements, animate elements, and even stop animations in mid-sequence. To slide elements up or

down:

$("#myElement").slideDown("fast", function() {

// do something when slide down is finished

}

$("#myElement").slideUp("slow", function() {

// do something when slide up is finished

}

$("#myElement").slideToggle(1000, function() {

// do something when slide up/down is finished

}

To animate an element, you do so by telling jQuery the CSS styles that the item should change to. jQuery will set the

new styles, but instead of setting them instantly (as CSS or raw JavaScript would do), it does so gradually, animating

the effect at the chosen speed:

$("#myElement").animate(

{

opacity: .3,

width: "500px",

height: "700px"

}, 2000, function() {

// optional callback after animation completes

}

);

Animation with jQuery is very powerful, and it does have its quirks (for example, to animate colors, you need a special

plugin). It’s worth taking the time to learn to use the animate command in-depth, but it is quite easy to use even for

beginners.

This is Just the Beginning

There is so much more you can do with jQuery beyond these basics I’ve introduced here. I highly recommend that all

developers buy a good book on jQuery, and also take the time to learn some important JavaScript concepts (like

anonymous functions, closures, scope, etc.) in order to be able to use jQuery in a more powerful way.

And please note that I’ve introduced a lot of commands and syntaxes in a very superficial manner, without explaining

many of the problems you could have with some of these, so if you do run into problems, you can check out

the jQuery documentation.