Using AJAX in a backoffice PrestaShop module

[hellojd]

I'm creating a module for the admin/backoffice section, and I want to submit forms via AJAX without reloading the page.

 

Here is a trimmed version of the module page:

 

<?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>
			';
		}
}
?>

 

Since I want to do this with AJAX, I've removed any processing functions as they're not needed and 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 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/parse the data through?

 

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?

 

Here is the console log from Chrome:

 

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 and parsing the data through correctly, it just doesn't seem to be working.

 

http://www.prestasho...office-modules/

Edited December 5, 2012 by hellojd (see edit history)

[Burhan BVK]

Your javascript is trying to load ajax.php file from your admin directory, because that is the current directory in the url. If it is under your module folder it won't be accessed, you need to use the absolute path to your module folder.

[hellojd]

Something so simple! Thank you!