Implementing ajax request with JSON and HTML response is quite simple as we don’t need to keep in mind to disable layout like in other frameworks. Assuming that the ajax code already exists using your preferred java-script library. Ajax request with JSON response: In controller action that hit with ajax request for JSON response, you… Read More »
Hello friends, Here we shall discuss about some advantages and disadvantages of using AJAX. Advantages of ajax: #1) Almost supports all modern browsers #2) Reduce the traffic travels between the client and the server. #3) Response time is faster so increases performance and speed. #4) Many open source javaScript libraries available for ajax support like… Read More »
In any application, record listing with pagination and sorting is very common thing. ZF2 also provides support for pagination. Lets start with an example to understand the concept more clearly. Step 1: Create a database table countries and states
|
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 |
// Country Table CREATE TABLE `countries` ( `country_id` INT(10) NOT NULL AUTO_INCREMENT, `country_name` VARCHAR(100) NOT NULL, `status` ENUM('Y','N') NULL DEFAULT 'Y', PRIMARY KEY (`country_id`) ) ENGINE=InnoDB ROW_FORMAT=DEFAULT AUTO_INCREMENT=1 // State tables CREATE TABLE `states` ( `state_id` INT(10) NOT NULL AUTO_INCREMENT, `state_name` VARCHAR(100) NOT NULL, `country_id` INT(10) NOT NULL, `status` ENUM('Y','N') NOT NULL DEFAULT 'Y', PRIMARY KEY (`state_id`), INDEX `FK_states_countries` (`country_id`) ) ENGINE=InnoDB ROW_FORMAT=DEFAULT AUTO_INCREMENT=1 |
Step 2: Now create database configuration
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
// config/autoload/global.php return array( 'db' => array( 'driver' => 'pdo', 'dsn' => 'mysql:dbname=db_name;host=host_name', 'driver_options' => array(PDO::MYSQL_ATTR_INIT_COMMAND => "SET NAMES 'UTF8'"), 'username' => 'db_user', 'password' => 'db_password' ), 'service_manager' => array( 'factories' => array( 'Zend\Db\Adapter\Adapter' => 'Zend\Db\Adapter\AdapterServiceFactory', ), ), ); |
Step 3: Lets create a new module “Sample”… Read More »
Step 1 : Include jquery.js file in layout.phtml Step 2 : Create Contorller JavascriptController.php in /path/to/yourapp/module/Application/src/Application/Controller/
|
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 49 |
namespace Application\Controller; use Zend\View\Model\ViewModel; use Zend\Mvc\Controller\AbstractActionController; use Zend\View\Model\JsonModel; class JavascriptController extends AbstractActionController { public function indexAction(){ $this->_getHelper('HeadScript', $this->getServiceLocator()) ->appendFile('/js/modules/javascript/ajax.js'); } public function processAjaxRequestAction(){ $result = array('status' => 'error', 'message' => 'There was some error. Try again.'); $request = $this->getRequest(); if($request->isXmlHttpRequest()){ $data = $request->getPost(); if(isset($data['tempData']) && !empty($data['tempData'])){ $result['status'] = 'success'; $result['message'] = 'We got the posted data successfully.'; } } return new JsonModel($result); } public function getHtmlResponseAction(){ $request = $this->getRequest(); $view = new ViewModel(); if($request->isXmlHttpRequest()){ $data = $request->getPost(); if(isset($data['tempData']) && !empty($data['tempData'])){ $view->setVariable('tempData', $data['tempData']); } } $view->setTerminal(true); return $view; } } |
Step 3 : Create a javascript file ajax.js in /public/js/modules/javascript/ajax.js
|
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 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 |
var application = { 'init': function(){ // Intialize code here } } /* You can use common function for ajax request in order to manage all ajax request from one place */ function clickMe(obj){ jQuery.ajax({ url : '/application/javascript/process-ajax-request', type: 'POST', dataType: 'JSON', data: {'tempData': jQuery('#tempData').val()}, beforeSend : function() { /* Logic before ajax request sent */ }, success: function(data, status){ alert(data.message); if(data.status == 'error'){ // Perform any operation on error }else{ // Perform any operation on success } }, error : function(xhr, textStatus, errorThrown) { if (xhr.status === 0) { alert('Not connect.\n Verify Network.'); } else if (xhr.status == 404) { alert('Requested page not found. [404]'); } else if (xhr.status == 500) { alert('Server Error [500].'); } else if (errorThrown === 'parsererror') { alert('Requested JSON parse failed.'); } else if (errorThrown === 'timeout') { alert('Time out error.'); } else if (errorThrown === 'abort') { alert('Ajax request aborted.'); } else { alert('There was some error. Try again.'); } }, complete: function(){ // Perform any operation need on success/error } }); } function getHtmlResponse(obj){ jQuery.ajax({ url : '/application/javascript/get-html-response', type: 'POST', data: {'tempData': jQuery('#tempData').val()}, beforeSend : function() { /* Logic before ajax request sent */ }, success: function(data, status){ if(status){ jQuery("#response").html(data); }else{ jQuery("#response").html('There was some error. Try again.'); } }, error : function(xhr, textStatus, errorThrown) { if (xhr.status === 0) { alert('Not connect.\n Verify Network.'); } else if (xhr.status == 404) { alert('Requested page not found. [404]'); } else if (xhr.status == 500) { alert('Server Error [500].'); } else if (errorThrown === 'parsererror') { alert('Requested JSON parse failed.'); } else if (errorThrown === 'timeout') { alert('Time out error.'); } else if (errorThrown === 'abort') { alert('Ajax request aborted.'); } else { alert('There was some error. Try again.'); } }, complete: function(){ // Perform any operation need on success/error } }); } jQuery(document).ready(function(){ application.init(); }); |
Step 4 : Create index.phtml in /path/to/yourapp/module/Application/view/application/jsvascript/index.phtml
|
1 2 3 4 5 |
<input type='text' name="tempData" id="tempData" value="" /> <a href="javascript:void(0);" onclick="return clickMe(this)" title="Click here">Click here</a> | <a href="javascript:void(0);" onclick="return getHtmlResponse(this)" title="Click here to get HTML response">Click here to get HTML response</a> <div id="response"></div> |
Step 5 : Finally, in /path/to/yourapp/module/Application/comfig/module.config.php file add following code in [view_manager] to support ajax requests
|
1 2 3 4 5 6 7 8 |
'view_manager' => array( ...., ...., 'strategies' => array( 'ViewJsonStrategy' ) ) |
