JQUERY
35 cool JQuery plugins
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
Basic usage of .ajax would look something like this: HTML:
|
1 2 3 4 5 6 7 8 |
<form id="foo">
<label for="bar">A bar</label>
<input id="bar" name="bar" type="text" value="" />
<input type="submit" value="Send" />
</form> |
JavaScript:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 |
<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();
}); |
PHP (i.e. form.php):
|
1 2 3 |
// 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:
|
1 2 3 4 |
$.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
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 and PHP contact form example
View demo click here Download demo
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
<?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
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
View demo click here Download demo Home page
|
1 2 3 4 5 6 7 |
<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> |
|
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
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
View demo click here Download demo CSS
|
1 |
<link rel="stylesheet" type="text/css" href="demo.css" /> |
JQUERY
|
1 |
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> |
Javascript
|
1 |
<script type="text/javascript" src="script.js"></script> |
Birthday html
|
1 2 3 4 5 |
<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> |
Birthday PHP function
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 |
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
jQuery is a JavaScript Library. jQuery greatly simplifies JavaScript programming. jQuery is easy to learn.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<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> |