Ajax Handler - hostbrook/videna Wiki

Basic usage

A simple AJAX request looks like this:

<script src="https://code.jquery.com/jquery-latest.min.js"></script>
<script>
$.ajax({
    url: "/ajax-test",
    data: {param: 'test'}
    dataType: 'json',
    success: function(data) {
       // Response from server has been received.
       console.log(data);
    }
});
</script>

And to handle this request:

  1. Add URL into the registered routes list, for example:
use \Videna\Core\Route;
...

Route::add('/ajax-test', '[email protected]');
  1. Add a controller Ajax.php to folder /App/Controllers/
namespace App\Controllers;

use \Videna\Core\Router;

class Ajax extends \Videna\Controllers\AjaxHandler
{
    public function actionTest()
    {
        Log::add('Param: ' . Router::get('param'));
    }
}

Load a simple view

if you need simply load a view via AJAX and no controller is required, you can use static method Route::view.

Example of HTML file:

<div class="view"></div>
<script src="https://code.jquery.com/jquery-latest.min.js"></script>
<script>
$.ajax({
    url: "/ajax/get-html",
    dataType: 'json',
    success: function(data) {
       $('div.view').html(data.view);
    }
});
</script>

Example of routes.php file:

use \Videna\Core\Route;
...

Route::view('/ajax/get-html', 'ajax/test.html');

With this way the view from file /App/Views/ajax/test.html will be passed in the property data.view of AJAX response.

Handle request errors

You can use provided Videna script videna-ajax.js that helps you to catch errors and handle error description output.

Example 1: Output errors in the browser console:

<script src="https://code.jquery.com/jquery-latest.min.js"></script>
<script src="/js/videna-ajax.js"></script>
<script>
$.ajax({
    url: "/ajax/privacy-policy",
    dataType: 'json',

    success: function(data) {
       // Response from server has been received.

    },

    error: function(jqXHR, textStatus, errorThrown) {
        // If an error occurred during Ajax request
        // see browser's terminal for error description
        jqXHRErrorHandler(jqXHR);
    }
});
</script>

Example 2: Catch errors and output description in the browser console:

<script src="https://code.jquery.com/jquery-latest.min.js"></script>
<script src="/js/videna-ajax.js"></script>
<script>
$.ajax({
    url: "/ajax/social-login",
    data: {userData: userData},

    success: function(data) {
        // Response from server has been received.

        if ( data = validResponse(data) ) {
            // received 'data' is in JSON format and 'data.response = 200'
            ...
        } else {
            // received 'data' is not in JSON format or 'data.response != 200'
            // See browser's terminal for error description
        }
    },

    error: function(jqXHR, textStatus, errorThrown) {
        // If an error occurred during Ajax request
        // see browser's terminal for error description
        jqXHRErrorHandler(jqXHR);
    }

});
</script>

Passing data to JS script

Default passed data

Any data returned from Videna framework with the AJAX request are in JSON format. By default, three properties are always returned:

Example:

<div id="view"></div>
<script src="https://code.jquery.com/jquery-latest.min.js"></script>
<script src="/js/videna-ajax.js"></script>
<script>
$.ajax({
    url: "/ajax/privacy-policy",
    dataType: 'json',
    success: function(data) {
       $('div#view').html(data.view);
       console.log(data.response);
       console.log(data.status);
    }
});
</script>

Passing custom data

You can set data in the controller to pass them back to JS, using the static method View::set().

Example:

namespace App\Controllers;

use \Videna\Core\View;

class Ajax extends \Videna\Controllers\AjaxHandler
{
    public function actionTest()
    {
        View::set([
            'text' => 'Text test phrase',
            'html' => '<p>Text test phrase</p>',
            'bool' => true,
            'num' => 100
        ]);
    }
}

Also, you can pass HTML view through a parameter, for example:

$data = [ 'var1' => 'test'];
View::set([
    // View is here: '/App/Views/ajax/test-view.html':
    'view' => View::render('ajax/test-view.html', $data)
]);

where optional $data - some data that your view is required.