Start using Ajax Link in Zend Framework

04 Jul 2011

When we look at the biggest sites like Google and Facebook we must notice they all have one thing in common. Smooth loading. It is not just about the speed of their whole pages, but rather about applying actions to already opened page. In that case – we can notice that they are using ajax to load their pages content. This is easily achieved with jQuery and $.ajax requests, but Zend Framework has given us an option to make this even easier task.

This option is currently part of ZendX library and it is called ajaxLink. What it does is help you to easily create menu for your website and then fetch content of each page with AJAX.

Let’s imagine that we have assembled a layout, controllers and actions to give us a desired content and it looks like this:

 

 

Now we can fill in the ul with our AJAX links to create a page that will load via AJAX request. To create AJAX link – use following code:

	echo $this->ajaxLink("Ajax Link Text",
		"ajax-content-url.php",
		array('update' => '#container')
	);

This way – with not a single line of JavaScript written by us – we have created a menu that is able to fetch a page content for us and place it inside desired container. We have achieved to have a smooth loading website with virtually no effort at all, but we still didn’t make it look nice as we might be able to add effects on events like “beforeSend” and “complete”. These events can have jQuery effects applied to our contents container.

To show you how to do this – I have prepared a small example for you:

	echo $this->ajaxLink("Ajax Link Text",
		"ajax-content-url.php",
		array(
			'update' => '#container',
			'beforeSend' => 'fadeout',
			'complete' => 'fadeinfast'
		)
	);

With these effects applied – we have achieved good look and feel for our visitors and have reduced number of requests towards server and therefore made our website load faster.

Where to go from here?

If you have not included the ZendX library in your web application and are not sure about how to do it, visit our article how-to article: How to include ZendX in Zend Framework project.

  • Was this helpful?
  • Yes   No
  • Back