jQuery - AJAX - PHP:

Create JSON response for jQuery

Description

jQuery-PHP - is PHP library for work with jQuery JavaScript framework. jQuery-PHP have very similar syntax to javascript.

Initialize

PHP: require jQuery library 
  1. require_once 'libraries/jQuery.php';
  2. // many actions
  3. // ...
  4.  
  5. // get JSON response
  6. jQuery::getResponse();
HTML: initialize jQuery and jQuery.php 
  1. <script src="javascript/jquery.js" type="text/javascript"></script>
  2. <script src="javascript/jquery.php.js" type="text/javascript"></script>
JavaScript: call AJAX (example) 
  1. // do an ajax post request (example)
  2. $.ajax({
  3.    // AJAX-specified URL
  4.    url: "http://"+document.domain+"/ajax.php",
  5.    // JSON
  6.    type: "POST",
  7.    data: {},
  8.    dataType : "json",
  9.    // Handle the success event
  10.    // response parser call (it's requried for work php)
  11.    success: function(data, textStatus){
  12.        return php.success(data, textStatus);
  13.    }
  14. })

Requirements:

System requirements

  • PHP 5.2.0 or higher (with JSON extension)
  • jQuery 1.1.2 or higher

Download:

Google Code

Web Access:
http://code.google.com/p/jquery-php/downloads/list
SVN Command-Line Access:
svn checkout http://jquery-php.googlecode.com/svn/trunk/ jquery-php-read-only

Ads:

Google Ads

Examples:

Should be work...

jQuery

Assign html by ID (click to run): 
  1. jQuery::jQuery('#test0') -> html('new content');
This is PHP code equal JavaScript (click to run): 
  1. // set new content to element with ID test0
  2. $('#test0').html('new content');
old content

Assign html and chage CSS by ID (click to run): 
  1. jQuery::jQuery('#test1') -> html('new content')
  2.                          -> css('backgroundColor' , '#ffff00');
This is PHP code equal JavaScript (click to run): 
  1. // set new content to element with ID test1 and change CSS options
  2. $('#test1').html('new content')
  3.            .css('backgroundColor' , '#ffff00');
old content

Assign html and chage CSS by Path (click to run): 
  1. jQuery::jQuery('#test2 div')     -> html('new content');
  2. jQuery::jQuery('#test2 div.red') -> html('new content')
  3.                                  -> css('backgroundColor' , '#ff0000');
This is PHP code equal JavaScript (click to run): 
  1. // set new content to element by Path and change CSS options by another Path
  2. $('#test2 div')    .html('new content');
  3. $('#test2 div.red').html('new content')
  4.                    .css('backgroundColor' , '#ff0000');
old content
old content
old content

Bind event by Path(click to run): 
  1. // event function
  2. function eventAlert(event) {
  3.     alert('Run "eventAlert": ' + event.data.test);
  4. }
  1. jQuery::jQuery('#test3 div')     -> bind('click', array('test'=>'answer'), 'eventAlert')
  2.                                  -> css ('cursor', 'pointer')
  3.                                  -> css ('color',  '#0000ff')
  4.                                  -> css ('textDecoration', 'underline');
This is PHP code equal JavaScript (click to run): 
  1. // set event to elements by Path and change CSS options
  2. $('#test3 div').bind('click', {'test':'answer'}, eventAlert)
  3.                .css('cursor', 'pointer')
  4.                .css('color',  '#0000ff')
  5.                .css('textDecoration', 'underline');
Element 1
Element 2
Element 3

Use animate (click to run, restore): 
  1. jQuery::jQuery('#test4 div.hide')-> css ('color',  '#ff0000')
  2.                                  -> animate (array('opacity'=>'show'), 1000);
This is PHP code equal JavaScript (click to run): 
  1.  
  2. $('#test4 div.hide').css ('color',  '#ff0000')
  3.                     .animate ({'opacity':'show'}, 1000);
old content

Use animate with callback (click to run, restore): 
  1. var eventHideCounter = 0;
  2. function eventHide() {
  3.     alert('Run "eventHide" (count:'+ ++eventHideCounter +')');
  4. }
  1. jQuery::jQuery('#test5 div.hide')-> slideUp(500, 'eventHide');
This is PHP code equal JavaScript (click to run): 
  1. $('#test5 div.hide').slideUp(500, eventHide);
content
old content
content

Additional Actions

addMessage():

Return message (click to run): 
  1. jQuery::addMessage('Message 1...');
  2. jQuery::addMessage('Message 2...');
Message handler: you can reset default callback function: 
  1. // example registering simple callback function for messages
  2. php.messages.defaultCallBack = function (msg, params){
  3.     alert ("My messages CallBack func: " + msg);
  4. }
Or create own callback function: 
  1. // example registering simple callback function for messages
  2. php.messages.myCallBack = function (msg, params){
  3.     alert ("My messages CallBack func: " + msg);
  4. }
and call it from PHP: 
  1. jQuery::addMessage('Message...', 'myCallBack');

addError():

Return error (click to run): 
  1. jQuery::addError('Error 1...');
  2. jQuery::addError('Error 2...');
Errors handler equal to messages handler

evalScript():

Eval script (click to run): 
  1. jQuery::evalScript('alert("Eval script...");');