PDA

View Full Version : Help with Ext.Ajax.request



waveslider
12 Sep 2008, 6:30 PM
I have the following code in an item on this page (http://lipid.org/dev/2.0.1/), that I am using to try to retrieve html from an external file via an ajax request:



{
title: 'Ajax Example',
tools: tools,
html: Ext.Ajax.request({
url : 'ajax.php' ,
// params : { action : 'getDate' },
method: 'GET',
success: function ( result, request) {
return result.responseText;
},
failure: function ( result, request) {
Ext.MessageBox.alert('Failed', result.responseText);
}
})
}


When the page loads, nothing happens within that container. However, the following code does work (successfully sends the html contents of the external file to an Ext.MessageBox.alert call):



{
title: 'Ajax Example',
tools: tools,
html: Ext.Ajax.request({
url : 'ajax.php' ,
// params : { action : 'getDate' },
method: 'GET',
success: function ( result, request) {
Ext.MessageBox.alert('Success', result.responseText);
},
failure: function ( result, request) {
Ext.MessageBox.alert('Failed', result.responseText);
}
})
}


Can anyone help me understand how to assign the return value of the success callback to the html parameter for the container? I have tried putting the Ext.Ajax.request function in an external function and calling it and assigning it to a variable, but that didn't work either.

Any help would be greatly appreciated. Thanks!

12 Sep 2008, 6:35 PM
return will not do anything because it's an asynchronous call - thus you're returning it to the window object.

What you need to do is send that result.respondText as a param to another method. Asynchronous development is something you should master.

.. a modified version of the wiki entry:http://extjs.com/learn/Manual:Core:Ext.Ajax



<div>
Here is a simple AJAX Request.
</div>
<div id="subButton"></div>
<textarea id="log" cols="40" rows="10"></textarea>

<script type="text/javascript">
function doJSON(stringData) {
try {
var jsonData = Ext.util.JSON.decode(stringData);
}
catch (err) {
Ext.MessageBox.alert('ERROR', 'Could not decode ' + stringData);
}
return jsonData || false;
}

function doAjax() {
Ext.Ajax.request({
url : 'ajax.php' ,
params : { action : 'getDate' },
method: 'GET',
success: function ( result, request) {
myAsyncFunction(doJSON(result.responseText));
},
failure: function ( result, request) {
Ext.MessageBox.alert('Failed', 'Successfully posted form: '+result.date);
}
});
}

var button = new Ext.Button('subButton', {
text: 'Click to submit an AJAX Request',
handler: doAjax
});
</script>

waveslider
12 Sep 2008, 6:39 PM
Cool, thanks! That makes sense.

I am not sure how to refer to the container I want to insert the response into so that I can send the responseText to it. Sorry - I am very new to Ext and even after reading through the examples, tutorials, and api, and can't find enough information to assemble the function. Can you help me figure it out?

watrboy00
12 Sep 2008, 6:46 PM
Look at the API for Ext.Panel...

html : String/Object An HTML fragment, or a DomHelper (http://extjs.com/forum/../deploy/dev/docs/output/Ext.DomHelper.html) specification to use as the panel's body content (defaults to '').

In your code you execute an Ext.Ajax.request and return the responseText...but to what? Ext.Panel already has a config option to dynamically load content from the same domain.

autoLoad : Object/String/Function A valid url spec according to the Updater Ext.Updater.update method. If autoLoad is not null, the panel will attempt ...
A valid url spec according to the Updater Ext.Updater.update (http://extjs.com/forum/../deploy/dev/docs/output/Ext.Updater.html#update) method. If autoLoad is not null, the panel will attempt to load its contents immediately upon render. The URL will become the default URL for this panel's body (http://extjs.com/forum/../deploy/dev/docs/output/Ext.Panel.html#body) element, so it may be refresh (http://extjs.com/forum/../deploy/dev/docs/output/Ext.Element.html#refresh)ed at any time.





{
autoLoad: 'ajax.php'
title: 'Ajax Exmaple',
tools: tools
}

or if you wanted to specify more configs for the autoLoad as per the update method... http://extjs.com/deploy/dev/docs/?class=Ext.Updater (http://extjs.com/deploy/dev/docs/?class=Ext.Updater#update)



{
autoLoad: {
url: 'ajax.php'
},
title: 'Ajax Exmaple',
tools: tools
}

waveslider
12 Sep 2008, 7:01 PM
Thanks! I can't believe I missed that.

Ultimately, I need to update the contents of the panel with data from an rss feed, not plain html from a file - I just did that for simplicity's sake until I could learn how to update the panel's contents.

I searched the API and forums for RSS, but there were no results.

Will the Ext.data.XmlReader (http://www.extjs.com/deploy/dev/docs/output/Ext.data.XmlReader.html) parse a valid RSS document?

13 Sep 2008, 1:35 AM
The RSS Reader example should show you how to do that.