JQUERY

35 cool JQuery plugins

February 8, 2012 Ning JQUERY, 0

jQuery is a speedy, succinct library that make traversing HTML documents, handling events, performing animations, and adding AJAX simpler. jQuery imparts web developers the opportunity to make websites better with incredible elements without the necessity to write down dozens of lines of code. In this compilation, you will find top 35 highly advanced and […]

JQuery Ajax post all fileds values example

January 30, 2012 Ning AJAX, JAVASCRIPT, JQUERY, PHP, 1

Basic usage of .ajax would look something like this: HTML:

<form id="foo"> 
 
    <label for="bar">A bar</label> 
    <input id="bar" name="bar" type="text" value="" /> 
 
    <input type="submit" value="Send" /> 
 
</form>

</form>

JavaScript:

    <label for="bar">A bar</label> 
    <input id="bar" name="bar" type="text" value="" /> 
 
    <input type="submit" value="Send" /> 
 
</form> 

 JavaScript:
$("#foo").submit(function(event){ 
    // setup some local variables 
    var $form = $(this), 
        // let's select and cache all the fields 
        $inputs = $form.find("input, select, button, textarea"), 
        // serialize the data in the form 
        serializedData = $form.serialize(); 
 
    // let's disable the inputs for the duration of the ajax request 
    $inputs.attr("disabled", "disabled"); 
 
    // fire off the request to /form.php 
    $.ajax({ 
        url: "/form.php", 
        type: "post", 
        data: serializedData, 
        // callback handler that will be called on success 
        success: function(response, textStatus, jqXHR){ 
            // log a message to the console 
            console.log("Hooray, it worked!"); 
        }, 
        // callback handler that will be called on error 
        error: function(jqXHR, textStatus, errorThrown){ 
            // log the error to the console 
            console.log( 
                "The following error occured: "+ 
                textStatus, errorThrown 
            ); 
        }, 
        // callback handler that will be called on completion 
        // which means, either on success or error 
        complete: function(){ 
            // enable the inputs 
            $inputs.removeAttr("disabled"); 
        } 
    }); 
 
    // prevent default posting of form 
    event.preventDefault(); 
});

</form>

JavaScript:

$("#foo").submit(function(event){

// setup some local variables

var $form = $(this),

// let's select and cache all the fields

$inputs = $form.find("input, select, button, textarea"),

// serialize the data in the form

serializedData = $form.serialize();

// let's disable the inputs for the duration of the ajax request

$inputs.attr("disabled", "disabled");

// fire off the request to /form.php

$.ajax({

url: "/form.php",

type: "post",

data: serializedData,

// callback handler that will be called on success

success: function(response, textStatus, jqXHR){

// log a message to the console

console.log("Hooray, it worked!");

// callback handler that will be called on error

error: function(jqXHR, textStatus, errorThrown){

// log the error to the console

console.log(

"The following error occured: "+

textStatus, errorThrown

);

// callback handler that will be called on completion

// which means, either on success or error

complete: function(){

// enable the inputs

$inputs.removeAttr("disabled");

}

});

// prevent default posting of form

event.preventDefault();

});

PHP (i.e. form.php):

// you can access the values posted by jQuery.ajax 
// through the global variable $_POST, like this: 
$bar = $_POST['bar'];

// you can access the values posted by jQuery.ajax

// through the global variable $_POST, like this:

$bar = $_POST['bar'];

Note: Always sanitize posted data, to prevent injections and other malicious code. You could also use the shorthand .post in place of .ajax in the above JavaScript code:

$.post('/form.php', serializedData, function(response) { 
    // log the response to the console 
    console.log("Response: "+response); 
});

$.post('/form.php', serializedData, function(response) {

// log the response to the console

console.log("Response: "+response);

});

Note: While the above JavaScript will work in jQuery […]

JQuery PHP MYSQL login panel example

January 3, 2012 Ning AJAX, CSS, JQUERY, MYSQL, PHP, 1

View demo click here Download demo This is a cool simple login / registration system. It will give you the ability to easily create a member-only area on your site and provide an easy registration process. It is going to be PHP driven and store all the registrations into a MySQL database. To add the […]

Ajax, JQuery, PHP

Ajax Jquery and PHP contact form example

December 31, 2011 Ning AJAX, CSS, JAVASCRIPT, JQUERY, PHP, 1

View demo click here Download demo

<?php

session_name("fancyform");
session_start();


$_SESSION['n1'] = rand(1,20);
$_SESSION['n2'] = rand(1,20);
$_SESSION['expect'] = $_SESSION['n1']+$_SESSION['n2'];


$str='';
if($_SESSION['errStr'])
{
	$str='<div class="error">'.$_SESSION['errStr'].'</div>';
	unset($_SESSION['errStr']);
}

$success='';
if($_SESSION['sent'])
{
	$success='<h1>Thank you!</h1>';
	
	$css='<style type="text/css">#contact-form{display:none;}</style>';
	
	unset($_SESSION['sent']);
}
?>

<?php

session_name("fancyform");

session_start();

$_SESSION['n1'] = rand(1,20);

$_SESSION['n2'] = rand(1,20);

$_SESSION['expect'] = $_SESSION['n1']+$_SESSION['n2'];

$str='';

if($_SESSION['errStr'])

{

$str='<div class="error">'.$_SESSION['errStr'].'</div>';

unset($_SESSION['errStr']);

}

$success='';

if($_SESSION['sent'])

{

$success='<h1>Thank you!</h1>';

$css='<style type="text/css">#contact-form{display:none;}</style>';

unset($_SESSION['sent']);

}

We use the $_SESSION array to populate the values of the input fields. This is done to insure that the data is not lost during page redirects, which occur when the form is submitted to submit.php during the regular form submit. Another important aspect are the classes assigned […]

JQuery gallery with pop up and next button

December 30, 2011 Ning AJAX, CSS, JAVASCRIPT, JQUERY, MYSQL, PHP, 0

View demo click here Download demo PHP The idea is simple – our PHP back-end is going to scan a folder that we’ve set up with our gallery images, and turn it into a fancy CSS & jQuery gallery. The great thing about this strategy is that it is incredibly easy to set up a […]

A simple site design by PHP and AJAX

December 29, 2011 Ning AJAX, JQUERY, PHP, 0

View demo click here Download demo Home page

<ul id="navigation">
    <li><a href="#page1">Page 1</a></li>
    <li><a href="#page2">Page 2</a></li>
    <li><a href="#page3">Page 3</a></li>
    <li><a href="#page4">Page 4</a></li>
    <li><img id="loading" src="img/ajax_load.gif" alt="loading" /></li>
</ul>

</ul>

<div id="pageContent">
    Hello, this is a demo for a <a href="http://www.maning.ca/demo/php/ajax-site/" target="_blank">Ajax site sample</a>. To test it, click some of the buttons above. Have a nice stay!</div>

1 2	<div id="pageContent"> Hello, this is a demo for a <a href="http://www.maning.ca/demo/php/ajax-site/" target="_blank">Ajax site sample</a>. To test it, click some of the buttons above. Have a nice stay!</div>

JQUERY The .ready() method is generally incompatible with the attribute. If load must be used, either do not use .ready() or use jQuery’s .load() method to attach load event handlers to the window or to more specific items, like images. Note how, on line 3, […]

Twitter and weibo example by PHP JQuery and AJAX

December 29, 2011 Ning AJAX, CSS, JAVASCRIPT, JQUERY, MYSQL, PHP, 7

View demo click here Download demo Creating the DB If you’d like to run a working demo on your own site, you will have to create a MySQL table where all your tweets are going to be stored. You can run the following SQL code through phpMyAdmin (the code is also available in table.sql in […]

Nice register form example with JQuery AJAX and PHP

December 29, 2011 Ning AJAX, CSS, JQUERY, PHP, 2

View demo click here Download demo CSS

<link rel="stylesheet" type="text/css" href="demo.css" />

1	<link rel="stylesheet" type="text/css" href="demo.css" />

JQUERY

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

1	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

Javascript

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

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

Birthday html

    <div class="input-container">
    <select name="month"><option value="0">Month:</option><?=generate_options(1,12,'callback_month')?></select>
    <select name="day"><option value="0">Day:</option><?=generate_options(1,31)?></select>
	<select name="year"><option value="0">Year:</option><?=generate_options(date('Y'),1900)?></select>
    </div>

<select name="month"><option value="0">Month:</option><?=generate_options(1,12,'callback_month')?></select>

</div>

Birthday PHP function

function generate_options($from,$to,$callback=false)
{
	$reverse=false;
	
	if($from>$to)
	{
		$tmp=$from;
		$from=$to;
		$to=$tmp;
		
		$reverse=true;
	}
	
	$return_string=array();
	for($i=$from;$i<=$to;$i++)
	{
		$return_string[]='
		<option value="'.$i.'">'.($callback?$callback($i):$i).'</option>
		';
	}
	
	if($reverse)
	{
		$return_string=array_reverse($return_string);
	}
	
	
	return join('',$return_string);
}


function callback_month($month)
{
	return date('M',mktime(0,0,0,$month,1));
}

function generate_options($from,$to,$callback=false)

{

$reverse=false;

if($from>$to)

{

$tmp=$from;

$from=$to;

$to=$tmp;

$reverse=true;

}

$return_string=array();

for($i=$from;$i<=$to;$i++)

{

$return_string[]='

<option value="'.$i.'">'.($callback?$callback($i):$i).'</option>

}

if($reverse)

{

$return_string=array_reverse($return_string);

}

return join('',$return_string);

}

function callback_month($month)

{

return date('M',mktime(0,0,0,$month,1));

}

join(value,array) join function is use for join all array value to one, and separated by “value” array_reverse() — Return an array with elements in reverse order The last two styles are #loading and #error, which select […]

JQuery Introduction, how works, example

December 25, 2011 Ning JQUERY, 0

jQuery is a JavaScript Library. jQuery greatly simplifies JavaScript programming. jQuery is easy to learn.

<html>
 <head>
 <script type="text/javascript" src="jquery.js"></script>
 <script type="text/javascript">
 $(document).ready(function(){
 $("p").click(function(){
 $(this).hide();
 });
 });
 </script>
 </head>

 <body>
 <p>If you click on me, I will disappear.</p>
 </body>

 </html>

<html>

<head>

$(document).ready(function(){

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

$(this).hide();

});

</script>

</head>

<body>

<p>If you click on me, I will disappear.</p>

</body>

</html>

JQUERY

35 cool JQuery plugins

JQuery Ajax post all fileds values example

JQuery PHP MYSQL login panel example

Ajax Jquery and PHP contact form example

JQuery gallery with pop up and next button

A simple site design by PHP and AJAX

Twitter and weibo example by PHP JQuery and AJAX

Nice register form example with JQuery AJAX and PHP

JQuery Introduction, how works, example

Pages

Categories

Archives