Using AJAX in a backoffice PrestaShop module

Question

I'm creating a module for the shopping cart PrestaShop so I have to follow a set framework of rules when creating a module that will work in their system, and I want to submit forms via AJAX without reloading the page.

Here is a trimmed version of the module page which builds and determines what is displayed:

<?php
    class mymodule extends Module
    {
        private $_html = '';

        // Module information
            function __construct()
            {
                // Get shop version
                    $versionMask = explode('.', _PS_VERSION_, 3);
                    $versionTest = $versionMask[0] > 0 && $versionMask[1] > 3;
                // Module info
                    $this->name  = 'MyModule';
                    $this->tab   = $versionTest ? 'administration' : 'Administration';
                    if ($versionTest) { $this->author = 'JD'; }
                    $this->version = '0';
                    parent::__construct();
                    $this->displayName = $this->l('MyModule'); 
                    $this->description = $this->l('Description...');
            }

        // Display content
            public function getContent()
            {
                $this->_displayForm();
                return $this->_html;
            }

        // Build the display
            private function _displayForm()
            {
                $this->_html .= '<script src="../modules/mymodule/scripts.js" type="text/javascript"></script>
                                <form name="formName" id="formName" method="get">
                                    <input type="submit" name="submitModule" value="Continue" />
                                </form>';
            }
    }
?>

Normally there is a private _postProcess function which processes form data which then calls the function getContent on page reload where you can then check to see if it should show the form or the results etc.

But since I want to do this with AJAX, I've removed the _postProcess function as it's not needed, linked to my scripts.js which has the following:

$(document).ready(function() {
    $('#formName').submit(function(e)
    {
        e.preventDefault();
        $.ajax({
            url: "ajax.php",
            type: "GET",
            dataType: "json",
            success: function(data)
            {
                if (data.response == 1)
                {
                    alert('true');
                }
                else
                {
                    alert('false');
                }
            }
        });
    });
});

And the ajax.php file itself which I've really trimmed down so it's forced to show a result:

<?php
    $json['response'] = 1;
    echo json_encode($json);
    exit();
?>

But I always get the error Uncaught TypeError: Cannot read property 'response' of null, which is obviously telling me the data.response isn't being sent through properly as it doesn't know what response is.

If I test the pages manually, everything works fine, so it leads me to believe either it has something to with the fact it could be in a class perhaps? And that I have to do something different to usual to get it to send the data through?

Or PrestaShop doesn't allow modules to run via AJAX, yet the only thing I can find on their site which relates to this is someone asking the same question in their forum and it has no replies/fixes.

I'd also like to note the AJAX is working to an extent, that if in the success function I put alert("hello"); the alert popup is shown.

Does anyone have any ideas where I might be going wrong?

Uncaught TypeError: Cannot read property 'response' of null scripts.js:132
$.ajax.success scripts.js:132
o jquery-1.7.2.min.js:2
p.fireWith jquery-1.7.2.min.js:2
w jquery-1.7.2.min.js:4
d

scripts.js:132 refers to the line: if (data.response == 1)

Also I've taken it out of the class and put it on a normal page/seperate directory and have the same code, just not inside the class/functions:

index.php

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="scripts.js" type="text/javascript"></script>
<form name="formName" id="formName" method="get">
<input type="submit" name="submitModule" value="Continue" />
</form>

scripts.js

$(document).ready(function() {
    $('#formName').submit(function(e)
    {
        e.preventDefault();
        $.ajax({
            url: "ajax.php",
            type: "GET",
            dataType: "json",
            success: function(data)
            {
                if (data.response == 1)
                {
                    alert('true');
                }
                else
                {
                    alert('false');
                }
            }
        });
    });
});

ajax.php

<?php
    $json['response'] = 1;
    echo json_encode($json);
    exit();
?>

And when I submit the page I get the alert true and if I view ajax.php I get {"response":1}. So that code itself is ok, it's just integrating it with their class/functions.

Answer 1

It appears the path to the ajax.php file in the scripts.js file was causing the problem.

It's to do with the structure of the folders in prestashop, all modules are placed in /prestashop/modules/ directory but the modules are viewed from /prestashop/admin/. So changing them to the full paths fixed the problem.

Thanks to the guys that helped on here though, it's still appreciated!

Answer 2

I think your result is being sent ok, but not interpreted as JSON, a bit of the jquerys fault - I dare to say.

header('Content-Type: text/javascript; charset=utf8');

Putting this in the PHP script should do the trick and force the correct interpretation of the json the data. If the previous suggestion didn't get you anywhere also try using $.parseJson(); as in jQuery docs:

var obj = jQuery.parseJSON('{"name":"John"}');
alert( obj.name === "John" );