December, 2011

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, 3

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 […]

Click button change div contents by Ajax

December 28, 2011 Ning AJAX, 4

<script type="text/javascript">
function loadXMLDoc()
{
var xmlhttp;
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
    }
  }
xmlhttp.open("GET","sample.txt",true);
xmlhttp.send();
}
</script>
<div id="myDiv">
<h2>Let AJAX change this text</h2>
</div>
<button onclick="loadXMLDoc()" type="button">Change Content</button>

function loadXMLDoc()

{

var xmlhttp;

if (window.XMLHttpRequest)

{// code for IE7+, Firefox, Chrome, Opera, Safari

xmlhttp=new XMLHttpRequest();

}

else

{// code for IE6, IE5

xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");

}

xmlhttp.onreadystatechange=function()

{

if (xmlhttp.readyState==4 && xmlhttp.status==200)

{

document.getElementById("myDiv").innerHTML=xmlhttp.responseText;

}

xmlhttp.open("GET","sample.txt",true);

xmlhttp.send();

}

</script>

<h2>Let AJAX change this text</h2>

</div>

<button onclick="loadXMLDoc()" type="button">Change Content</button>

sample.txt

<p>AJAX is not a new programming language.</p>

<p>AJAX is a technique for creating fast and dynamic web pages.</p>

<p>AJAX is not a new programming language.</p>

<p>AJAX is a technique for creating fast and dynamic web pages.</p>

XMLhttpRequest Beful using Ajax, we need create an XMLhttpRequest object. All modern browsers (IE7+, Firefox, Chrome, Safari, and Opera) have a built-in XMLHttpRequest object. Syntax for creating an XMLHttpRequest object: variable=new XMLHttpRequest(); Old versions of Internet Explorer (IE5 and IE6) uses an ActiveX Object: variable=new ActiveXObject(“Microsoft.XMLHTTP”); *better use try catch to avoid […]

how Ajax work-logical drawing

December 28, 2011 Ning AJAX, 0

POP up a message when leave the page

December 27, 2011 Ning JAVASCRIPT, 0

<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title></title>
</head>
<body bgcolor="#fef4d9" onUnload="window.alert('say something.')">
</body>
</html>

<head>

</head>

</body>

</html>

POP a message when open new page

December 27, 2011 Ning JAVASCRIPT, 0

<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title></title>
</head>
<body>
<SCRIPT LANGUAGE="JavaScript">
   alert("message contents")
</script>
</body>
</html>

<head>

</head>

<body>

alert("message contents")

</script>

</body>

</html>

Javascript check username and password validation

December 26, 2011 Ning JAVASCRIPT, 3

Use the “password” input type Instead of

<input type="text" />

1	<input type="text" />

you should always use

<input type="password" />

1	<input type="password" />

as this lets the browser (and the user) know that the contents of that field need to be secured. Your password won’t appear on the screen as you type and most browsers also won’t ‘remember’ the values entered in password fields as […]