Can't get Ext.Ajax.request to work, please help! [Archive]

View Full Version : Can't get Ext.Ajax.request to work, please help!

BarryOg

7 Jul 2007, 11:13 AM

I seem to have found a solution or workaround but still don't know why Ext.Ajax.request was throwing a syntax error.

Hey everyone,
Just starting to learn ext and unfortunately js at the same time. I'm getting a repeated problem when trying to make an Ext.Ajax.request call. The error I'm getting in firebug is as follows: "Ext.Ajax has no properties"

What I'm trying to do is pass a json string to a php file which decodes it and takes an action against a mysql database. Now I'm pretty sure the json stuff is ok and the php/db as I got all this working with msg.load() but I wanted to be able to make requests against the db without having to go through a div. I've tried everything I can think of, changing all the params, reading the documentation, searching the forums and copying and pasting several examples all to no avail. So I'm guessing I've made so stupid mistake due to my lack of experience with javascript syntax.

You can see the page running here: http://www.liamolony.com/game/ExtStart.html , although this may change as I continue to work on it.

Here's my code ExtStart.js

Ext.onReady(function() {

Ext.get('okButton').on('click', function(){

var records ={'method':'initPlayer',
'PlayerName':'' + Ext.get('name').dom.value,
'PlayerLocX':'10',
'PlayerLocY':'11',
'Health':'101'};

sendCall(records);

});

Ext.get('myButton').on('click', function(){

var records ={'method':'getPlayers'};

var returnedJsonString = sendCall(records, 'myDiv');

var array = returnedJsonString.parseJSON();

Ext.get('myDiv').dom.innerHTML = array[2];

});

function sendCall(dataToSend){

var msg = Ext.get('msg');

Ext.Ajax.request(
{
url: './jsonInterface.php5',
params: Ext.util.JSON.encode(dataToSend),
method: 'post',
callback: function(response) { msg.dom.innerHTML = response.responseText; }
}
);

}
});

Here's my html file as well:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Introduction to Ext: Starter Page</title>


<script type="text/javascript" src="../yui/build/utilities/utilities.js"></script>
<script type="text/javascript" src="../ext-1.0.1/adapter/yui/ext-yui-adapter.js"></script>
<script type="text/javascript" src="../ext-1.0.1/ext-all-debug.js"></script>
<script type="text/javascript" src="ExtStart.js"></script>

<link rel="stylesheet" type="text/css" href="ExtStart.css">
</head>
<body>

<div id="myDiv">This is a test div.</div>

<input type="button" id="myButton" value="My Button" />

<div id="msg" style="visibility: hidden"></div>
Name: <input type="text" id="name" /><br />
<input type="button" id="okButton" value="OK" />

<div id="updateManager" style="visibility: hidden" />
</body>
</html>

BarryOg

7 Jul 2007, 1:24 PM

I found another forum post, saying that Ext.Ajax.Request hadn't been implemented in 1.0.1 beta, and gave this function which Ext.element.load uses:

var con = new Ext.data.Connection();
con.request({
url: 'http://www.liamolony.com/game/jsonInterface.php5',
params: Ext.util.JSON.encode(dataToSend),
method: 'post',
callback: function(response) {
msg.dom.innerHTML = response.responseText;
alert(response.responseText);
}
}
);

This seems to work without a syntax error and in firefox, the http post message seems to be well formed but its not reaching the database. Trying to figure out what's happening to it.

BarryOg

7 Jul 2007, 1:38 PM

Here's my php code as well:

<?php
include("gameActions.php");
include("BarryToolKit.php");

//var_dump(json_decode($_POST['data']));

if(isset($_POST['data']))
{

$data = json_decode($_POST['data']);

switch($data->method){
case "initPlayer":
initPlayer($data->PlayerName, $data->PlayerLocX, $data->PlayerLocY, $data->Health);
break;
case "getPlayers":
$arrayRet = getPlayers();
echo json_encode($arrayRet);
break;
}
//$mapArr = array('player1'=>50,'player2'=>100,'player3'=>150);

//echo json_encode($mapArr);

}
?>

here's the function it calls

function initPlayer($name, $locX, $locY, $health)
{
global $dbLoc, $dbname, $dbUser, $dbPass, $debug;

$con = mysql_connect($dbLoc, $dbUser, $dbPass);
if (!$con)
{
die('Could not connect: ' . mysql_error());
}

//mysql_select_db("game", $con);

mysql_query("INSERT INTO " . $dbname . " (PlayerName, PlayerLocX, PlayerLocY, Health)
VALUES ('" . $name . "', '" . $locX . "', '" . $locY . "', '" . $health . "')");

if($debug){
echo mysql_error();
}

mysql_close($con);

}

BarryOg

7 Jul 2007, 1:53 PM

Ah I found what was going wrong, I'm still not sure why Ext.Ajax.request was giving a syntax error but when I was using Ext.connection directly I was using Ext.util.JSON.encode(dataToSend) rather than {data : Ext.util.JSON.encode(dataToSend) so my php wasn't picking it up.

Skeleton

8 Jul 2007, 3:50 AM

In Ext 1.0.1 there seems to be no Ext.Ajax package, so instead I am using Ext.lib.Ajax for my 1.0.1 projects.