Push state

Using push state with ajax requests

When sending ajax requests with ofw.ajax.get you may want to simultaneously change the url in your browser’s location bar. Outlast Framework achieves this using push state.

// This will perform a standard ajax request and place results in the dom element specified
ofw.ajax.get('important/request/', $('#results'));

// This will perform an ajax request, place results in the dom element,
//   and change the url location to 'important/request/'
ofw.ajax.get('important/request/', $('#results'), true);

// This will perform an ajax request, place results in the dom element,
//   and change the url location to 'results/page/'
ofw.ajax.get('important/request/', $('#results'), 'results/page/');

For a list of full options, please see the ofw.ajax documentation.

Using push state with data parameters

The Outlast Framework now supports pushState ajax requests out of the box. Here is how to create a link:

<a href="{{baseurl}}some/content/" data-container="#divid" data-block="blockname" data-title="New Page Title">Load some content</a>

In your controller file (some.ctl.php  / function content()) you will have the following:

// do something then load template

$this->zajlib->template->show('some/content.html');

Outlast Framework will recognize that the current request is a pushState ajax request and will not generate the full content.html. Instead it will load up only the ‘blockname’ block within the template and place that content into divid. So:

This is my template and it includes:

{% block blockname %}some content{% endblock %}

…the end result will be that the page will NOT be reloaded, the URL will be set to some/content and the element with id ‘divid’ will be set to the returned content:

<div id="divid">some content</div>

Works much like pjax, but it’s OFW-friendly. It’s also fully compatible, so any old non-pushstate browsers (IE) and/or search engines that do not load Javascript will load the links like standard links.

Reload contents of a block

If you have used the data-block data attribute then you can also reload the contents of a block using the following javascript API:

ofw.plugins.block.reload("block_name");

This will do the following:

• Send a new request to the current full request url with ?zaj_pushstate_block=block_name appended to the query string
• The returned result will be injected into the element that was marked with data-block="block_name"