thr3ads.net - Rails spinoffs - Puzzle:How to return a value when an ajax request finished in a function?? [Apr 2007]

If this information is useful, please help other people find it:
Share via:

Vin

2007-Apr-02 05:03 UTC

Puzzle:How to return a value when an ajax request finished in a function??

Hi,
I wanna return a array object when the ajax request finished,but it
failed.And i just don''t know why.Any guidance would be greatly
appreciated.:>
Sample code as below:
function loadTopics(){
	var topicXml;
	var topicElements;
	var topics=[];//the array object that i wanna return
	var option={
		parameters:"",
		method:"get",
		onSuccess:function(transport){
			topicXml=transport.responseXML;
			topicElements=topicXml.getElementsByTagName("topics");
			topicElements=$A(topicElements);
			topicElements.each(function(elem){
				var currentTopic=Class.create();
				currentTopic.id=elem.getAttribute("id");
				currentTopic.title=elem.getAttribute("title");
				currentTopic.src=elem.getAttribute("src");
				currentTopic.isDefault=elem.getAttribute("default");
				if(currentTopic.isDefault==null||currentTopic.isDefault==undefined)
{
					currentTopic.isDefault=false;
				};
				currentTopic.toString=function(){
					return
"[id="+this.id+",title="+this.title+",src="+this.src
+",isDefault="+this.isDefault+"]";
				};
				topics.push(currentTopic);
			});
			//alert(topics.length)//it does show that the topics array has some
items when the request finished.But,how to return it??
		},
		onFailure:function(transport){
			alert("Request Failure...");
		}
	};
	var request=new Ajax.Request("Data/topics.xml",option);
	//return topics;//puzzling me here!!It failed returning here.The
topics.length show 0.
}

All i wanna do is:to return my topics array object in the above
function.Where should i put my return clause?
I try to definded my topics array as a global variable,pushing its
items through the function above(this step succeeded) and then
reference it in some other function,but what is strange is   that its
length property show 0 too.


--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Ruby on Rails: Spinoffs" group.
To post to this group, send email to
rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
For more options, visit this group at
http://groups.google.com/group/rubyonrails-spinoffs?hl=en
-~----------~----~----~----~------~----~------~--~---

Colin Mollenhour

2007-Apr-02 08:35 UTC

head link

Re: Puzzle:How to return a value when an ajax request finished in a function??

By default, Ajax requests are asynchronous, meaning that once 
Ajax.Request is called, it returns immediately. Your onSuccess code will 
be called at some later time when the server has responded.

See: http://prototypejs.org/api/ajax/options

You could try asynchronous: false, but I would recommend restructuring 
your code to not require synchronous calls since it will "freeze" the 
browser while waiting for the server response.

I don''t know what you are doing with loadTopics() once it returns, but 
there is very rarely if ever a need to do synchronous calls, you just 
have to approach the problem differently. If you can''t figure this out,
show us more code and maybe we can point you in the right direction.

Lastly, you are not using Class.create() how it was intended at all.. 
You could replace it with a simple {}, or if you want some OO structure, 
create a real class like so:

var Topic = Class.create();
Topic.prototype = {
    initialize: function(elem){      
        this.attributes = $H({
            id: elem.getAttribute("id"),
            title: elem.getAttribute("title"),
            src: elem.getAttribute("src"),
            isDefault: elem.getAttribute("default") || false
        });
    },
    toString: function(){
        return ''[''+this.attributes.collect(function(pair){
return
pair.key+''=''+pair.value;
}).join('','')+'']'';
    }
};

Then, inside your loop of topics, simply do this:

topicElements.each(function(elem){
  topics.push(new Topic(elem));
});


Colin


Vin wrote:> Hi,
> I wanna return a array object when the ajax request finished,but it
> failed.And i just don''t know why.Any guidance would be greatly
> appreciated.:>
> Sample code as below:
> function loadTopics(){
> 	var topicXml;
> 	var topicElements;
> 	var topics=[];//the array object that i wanna return
> 	var option={
> 		parameters:"",
> 		method:"get",
> 		onSuccess:function(transport){
> 			topicXml=transport.responseXML;
> 			topicElements=topicXml.getElementsByTagName("topics");
> 			topicElements=$A(topicElements);
> 			topicElements.each(function(elem){
> 				var currentTopic=Class.create();
> 				currentTopic.id=elem.getAttribute("id");
> 				currentTopic.title=elem.getAttribute("title");
> 				currentTopic.src=elem.getAttribute("src");
> 				currentTopic.isDefault=elem.getAttribute("default");
> 				if(currentTopic.isDefault==null||currentTopic.isDefault==undefined)
> {
> 					currentTopic.isDefault=false;
> 				};
> 				currentTopic.toString=function(){
> 					return
"[id="+this.id+",title="+this.title+",src="+this.src
> +",isDefault="+this.isDefault+"]";
> 				};
> 				topics.push(currentTopic);
> 			});
> 			//alert(topics.length)//it does show that the topics array has some
> items when the request finished.But,how to return it??
> 		},
> 		onFailure:function(transport){
> 			alert("Request Failure...");
> 		}
> 	};
> 	var request=new Ajax.Request("Data/topics.xml",option);
> 	//return topics;//puzzling me here!!It failed returning here.The
> topics.length show 0.
> }
>
> All i wanna do is:to return my topics array object in the above
> function.Where should i put my return clause?
> I try to definded my topics array as a global variable,pushing its
> items through the function above(this step succeeded) and then
> reference it in some other function,but what is strange is   that its
> length property show 0 too.
>
>
> >
>
>   

--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Ruby on Rails: Spinoffs" group.
To post to this group, send email to
rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
For more options, visit this group at
http://groups.google.com/group/rubyonrails-spinoffs?hl=en
-~----------~----~----~----~------~----~------~--~---

Vin

2007-Apr-03 04:37 UTC

head link

Re: Puzzle:How to return a value when an ajax request finished in a function??

Thanks so much,colin.:>
Please check out Brad Neuberg''s sample code on "how-to-handle-
bookmarks-and-back"(location as below),in his example he use "x dhtml
library" and "Sarissa" not prototype.js,but i wanna build his
example
with prototype.js,then hence my post for help above.
http://codinginparadise.org/weblog/2005/09/ajax-how-to-handle-bookmarks-and-back.html
If you have free time,i''ll be very very happy to receive your
suggestions.

After loadTopics(),there''s another function displayTopicList(),this
function will use the topics array returned by loadTopics().more code
as below:

Event.observe(window,''load'',init);
var topics=[];
function init(){
	dhtmlHistory.initialize();
	if(dhtmlHistory.isFirstLoad()){
		topics=oadTopics();
		//alert(topics.length);
		historyStorage.put("topics",topics);
	}else{
		topics=historyStorage.get("topics");
	};

	displayTopicsList();
	var currentTopic=dhtmlHistory.getCurrentLocation();
	displayTopic(currentTopic);

	$("menu").observe("click",handleTopicChange);

	dhtmlHistory.addListener(handleHistoryEvent);

};

function loadTopics(){
	var topicXml;
	var topicElements;
	var topicss=new Array();
	var option={
		parameters:"",
		method:"get",
		onSuccess:function(transport){
			topicXml=transport.responseXML;
			topicElements=topicXml.getElementsByTagName("topic");
			topicElements=$A(topicElements);
			topicElements.each(function(elem){
				var currentTopic={};
				currentTopic.id=elem.getAttribute("id");
				currentTopic.title=elem.getAttribute("title");
				currentTopic.src=elem.getAttribute("src");
				currentTopic.isDefault=elem.getAttribute("default");
				if(currentTopic.isDefault==null||currentTopic.isDefault==undefined)
{
					currentTopic.isDefault=false;
				};
				currentTopic.toString=function(){
					return
"[id="+this.id+",title="+this.title+",src="+this.src
+",isDefault="+this.isDefault+"]";
				};
				topicss.push(currentTopic);
			});
		},
		onFailure:function(transport){
			alert("Request Failure...");
		}
	};
	var request=new Ajax.Request("data/topics.xml",option);
        return topicss;
}

function displayTopicsList(){
	var menu=$("menu");
	topics.each(function(elem){
		var newTopic=document.createElement("a");
		newTopic.href=elem.src;
		newTopic.title=elem.title;
		newTopic.setAttribute("topicID",elem.id);
		newTopic.innerHTML=elem.title;
		menu.appendChild(newTopic);
	});
}
On 4月2日, 下午4时35分, Colin Mollenhour <eliteii...@mollenhour.com>
wrote:> By default, Ajax requests are asynchronous, meaning that once
> Ajax.Request is called, it returns immediately. Your onSuccess code will
> be called at some later time when the server has responded.
>
> See:http://prototypejs.org/api/ajax/options
>
> You could try asynchronous: false, but I would recommend restructuring
> your code to not require synchronous calls since it will "freeze"
the
> browser while waiting for the server response.
>
> I don''t know what you are doing with loadTopics() once it returns,
but
> there is very rarely if ever a need to do synchronous calls, you just
> have to approach the problem differently. If you can''t figure this
out,
> show us more code and maybe we can point you in the right direction.
>
> Lastly, you are not using Class.create() how it was intended at all..
> You could replace it with a simple {}, or if you want some OO structure,
> create a real class like so:
>
> var Topic = Class.create();
> Topic.prototype = {
>     initialize: function(elem){
>         this.attributes = $H({
>             id: elem.getAttribute("id"),
>             title: elem.getAttribute("title"),
>             src: elem.getAttribute("src"),
>             isDefault: elem.getAttribute("default") || false
>         });
>     },
>     toString: function(){
>         return
''[''+this.attributes.collect(function(pair){ return
> pair.key+''=''+pair.value;
}).join('','')+'']'';
>     }
>
> };
>
> Then, inside your loop of topics, simply do this:
>
> topicElements.each(function(elem){
>   topics.push(new Topic(elem));
>
> });
>
> Colin
>
> Vin wrote:
> > Hi,
> > I wanna return a array object when the ajax request finished,but it
> > failed.And i just don''t know why.Any guidance would be
greatly
> > appreciated.:>
> > Sample code as below:
> > function loadTopics(){
> >    var topicXml;
> >    var topicElements;
> >    var topics=[];//the array object that i wanna return
> >    var option={
> >            parameters:"",
> >            method:"get",
> >            onSuccess:function(transport){
> >                    topicXml=transport.responseXML;
> >                   
topicElements=topicXml.getElementsByTagName("topics");
> >                    topicElements=$A(topicElements);
> >                    topicElements.each(function(elem){
> >                            var currentTopic=Class.create();
> >                           
currentTopic.id=elem.getAttribute("id");
> >                           
currentTopic.title=elem.getAttribute("title");
> >                           
currentTopic.src=elem.getAttribute("src");
> >                           
currentTopic.isDefault=elem.getAttribute("default");
> >                           
if(currentTopic.isDefault==null||currentTopic.isDefault==undefined)
> > {
> >                                    currentTopic.isDefault=false;
> >                            };
> >                            currentTopic.toString=function(){
> >                                    return
"[id="+this.id+",title="+this.title+",src="+this.src
> > +",isDefault="+this.isDefault+"]";
> >                            };
> >                            topics.push(currentTopic);
> >                    });
> >                    //alert(topics.length)//it does show that the
topics array has some
> > items when the request finished.But,how to return it??
> >            },
> >            onFailure:function(transport){
> >                    alert("Request Failure...");
> >            }
> >    };
> >    var request=new Ajax.Request("Data/topics.xml",option);
> >    //return topics;//puzzling me here!!It failed returning here.The
> > topics.length show 0.
> > }
>
> > All i wanna do is:to return my topics array object in the above
> > function.Where should i put my return clause?
> > I try to definded my topics array as a global variable,pushing its
> > items through the function above(this step succeeded) and then
> > reference it in some other function,but what is strange is   that its
> > length property show 0 too.

--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Ruby on Rails: Spinoffs" group.
To post to this group, send email to
rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
For more options, visit this group at
http://groups.google.com/group/rubyonrails-spinoffs?hl=en
-~----------~----~----~----~------~----~------~--~---

Vin

2007-Apr-03 12:42 UTC

head link

Re: Puzzle:How to return a value when an ajax request finished in a function??

Colin,
I am so grateful for your help.
I am now checking out your modified code,and your suggestions on
coding neatly are very nice,i''ll pay attention to my code from now
on.:>
Thx again and best wishes.

On 4月3日, 下午8时46分, Colin Mollenhour <eliteii...@mollenhour.com>
wrote:> Vin, the changes I made should get it working, but honestly the code from
that article could be rewritten much more neatly...
> See the modified code here:http://pastie.caboo.se/51339
> In the future, please use pastie for anything large blocks of code like
this and use spaces rather than tabs, that just makes it so much easier to
read..
> So, basically what I did was structure the code so that the
"topics" array is not accessed until I can guarantee that it has been
populated. I think what you are missing is that the Ajax.Request call does not
"block" further execution of the code that it was called from, so any
code that follows the Ajax.Request call is going to get called immediately,
which will be before the onWhatever callbacks get called.
> I also removed some unnecessary variables and closures. I would recommend
also that you put this code into an object or class, like
> var Topics = {
>   topics: [],
>   init: function(){...},
>   loadTopics: function(){...},
>   displayTopicsList: function(){...}
> };
> Event.observe(window,''load'',Topics.init);
> This would help you avoid namespace issues, like using variables named
"topics".
> Colin
> Vin wrote:Thanks so much,colin.:> Please check out Brad
Neuberg''s sample code on "how-to-handle-
bookmarks-and-back"(location as below),in his example he use "x dhtml
library" and "Sarissa" not prototype.js,but i wanna build his
example with prototype.js,then hence my post for help
above.http://codinginparadise.org/weblog/2005/09/ajax-how-to-handle-bookmarks-and-back.htmlIf
you have free time,i''ll be very very happy to receive your suggestions.
After loadTopics(),there''s another function displayTopicList(),this
function will use the topics array returned by loadTopics().more code as below:
Event.observe(window,''load'',init); var topics=[]; function
init(){ dhtmlHistory.initialize(); if(dhtmlHistory.isFirstLoad()){
topics=oadTopics(); //alert(topics.length);
historyStorage.put("topics",topics); }else{
topics=historyStorage.get("topics"); }; displayTopicsList(); var
currentTopic=dhtmlHistory.getCurrentLocation(); displayTopic(currentTopic);
$("menu").observe("click",handleTopicChange);
dhtmlHistory.addListener(handleHistoryEvent); }; function loadTopics(){ var
topicXml; var topicElements; var topicss=new Array(); var option={
parameters:"", method:"get", onSuccess:function(transport){
topicXml=transport.responseXML;
topicElements=topicXml.getElementsByTagName("topic");
topicElements=$A(topicElements); topicElements.each(function(elem){ var
currentTopic={}; currentTopic.id=elem.getAttribute("id");
currentTopic.title=elem.getAttribute("title");
currentTopic.src=elem.getAttribute("src");
currentTopic.isDefault=elem.getAttribute("default");
if(currentTopic.isDefault==null||currentTopic.isDefault==undefined) {
currentTopic.isDefault=false; }; currentTopic.toString=function(){ return
"[id="+this.id+",title="+this.title+",src="+this.src
+",isDefault="+this.isDefault+"]"; };
topicss.push(currentTopic); }); }, onFailure:function(transport){
alert("Request Failure..."); } }; var request=new
Ajax.Request("data/topics.xml",option); return topicss; } function
displayTopicsList(){ var menu=$("menu"); topics.each(function(elem){
var newTopic=document.createElement("a"); newTopic.href=elem.src;
newTopic.title=elem.title; newTopic.setAttribute("topicID",elem.id);
newTopic.innerHTML=elem.title; menu.appendChild(newTopic); }); } On 4月2日,
下午4时35分, Colin
Mollenhour<eliteii...-NPSFNn/7+NYVo650/ln6uw@public.gmane.org>wrote:By
default, Ajax requests are asynchronous, meaning that once Ajax.Request is
called, it returns immediately. Your onSuccess code will be called at some later
time when the server has responded.
See:http://prototypejs.org/api/ajax/optionsYou could try asynchronous: false,
but I would recommend restructuring your code to not require synchronous calls
since it will "freeze" the browser while waiting for the server
response. I don''t know what you are doing with loadTopics() once it
returns, but there is very rarely if ever a need to do synchronous calls, you
just have to approach the problem differently. If you can''t figure this
out, show us more code and maybe we can point you in the right direction.
Lastly, you are not using Class.create() how it was intended at all.. You could
replace it with a simple {}, or if you want some OO structure, create a real
class like so: var Topic = Class.create(); Topic.prototype = { initialize:
function(elem){ this.attributes = $H({ id: elem.getAttribute("id"),
title: elem.getAttribute("title"), src:
elem.getAttribute("src"), isDefault:
elem.getAttribute("default") || false }); }, toString: function(){
return ''[''+this.attributes.collect(function(pair){ return
pair.key+''=''+pair.value;
}).join('','')+'']''; } }; Then, inside your
loop of topics, simply do this: topicElements.each(function(elem){
topics.push(new Topic(elem)); }); Colin Vin wrote:Hi, I wanna return a array
object when the ajax request finished,but it failed.And i just don''t
know why.Any guidance would be greatly appreciated.:> Sample code as below:
function loadTopics(){ var topicXml; var topicElements; var topics=[];//the
array object that i wanna return var option={ parameters:"",
method:"get", onSuccess:function(transport){
topicXml=transport.responseXML;
topicElements=topicXml.getElementsByTagName("topics");
topicElements=$A(topicElements); topicElements.each(function(elem){ var
currentTopic=Class.create(); currentTopic.id=elem.getAttribute("id");
currentTopic.title=elem.getAttribute("title");
currentTopic.src=elem.getAttribute("src");
currentTopic.isDefault=elem.getAttribute("default");
if(currentTopic.isDefault==null||currentTopic.isDefault==undefined) {
currentTopic.isDefault=false; }; currentTopic.toString=function(){ return
"[id="+this.id+",title="+this.title+",src="+this.src
+",isDefault="+this.isDefault+"]"; };
topics.push(currentTopic); }); //alert(topics.length)//it does show that the
topics array has some items when the request finished.But,how to return it?? },
onFailure:function(transport){ alert("Request Failure..."); } }; var
request=new Ajax.Request("Data/topics.xml",option); //return
topics;//puzzling me here!!It failed returning here.The topics.length show 0.
}All i wanna do is:to return my topics array object in the above function.Where
should i put my return clause? I try to definded my topics array as a global
variable,pushing its items through the function above(this step succeeded) and
then reference it in some other function,but what is strange is that its length
property show 0 too.

--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Ruby on Rails: Spinoffs" group.
To post to this group, send email to
rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
For more options, visit this group at
http://groups.google.com/group/rubyonrails-spinoffs?hl=en
-~----------~----~----~----~------~----~------~--~---

Colin Mollenhour

2007-Apr-03 12:46 UTC

head link

Re: Puzzle:How to return a value when an ajax request finished in a function??

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
  <meta content="text/html;charset=GB2312"
http-equiv="Content-Type">
</head>
<body bgcolor="#ffffff" text="#000000">
Vin, the changes I made should get it working, but honestly the code
from that article could be rewritten much more neatly...<br>
<br>
See the modified code here: <a class="moz-txt-link-freetext"
href="http://pastie.caboo.se/51339">http://pastie.caboo.se/51339</a><br>
<br>
In the future, please use pastie for anything large blocks of code like
this and use spaces rather than tabs, that just makes it so much easier
to read..<br>
<br>
So, basically what I did was structure the code so that the "topics"
array is not accessed until I can guarantee that it has been populated.
I think what you are missing is that the Ajax.Request call does not
"block" further execution of the code that it was called from, so any
code that follows the Ajax.Request call is going to get called
immediately, which will be before the onWhatever callbacks get called.<br>
<br>
I also removed some unnecessary variables and closures. I would
recommend also that you put this code into an object or class, like<br>
<br>
var Topics = {<br>
&nbsp; topics: [],<br>
&nbsp; init: function(){...},<br>
&nbsp; loadTopics: function(){...},<br>
&nbsp; displayTopicsList: function(){...}<br>
};<br>
Event.observe(window,''load'',Topics.init);<br>
<br>
This would help you avoid namespace issues, like using variables named
"topics".<br>
<br>
Colin<br>
<br>
<br>
Vin wrote:
<blockquote
 cite="mid:1175575056.653108.172440-0Ae/0oUGnOGLxTqHJMs4EmB/v6IoIuQBVpNB7YpNyf8@public.gmane.org"
 type="cite">
  <pre wrap="">Thanks so much,colin.:&gt;
Please check out Brad Neuberg''s sample code on "how-to-handle-
bookmarks-and-back"(location as below),in his example he use "x dhtml
library" and "Sarissa" not prototype.js,but i wanna build his
example
with prototype.js,then hence my post for help above.
<a class="moz-txt-link-freetext"
href="http://codinginparadise.org/weblog/2005/09/ajax-how-to-handle-bookmarks-and-back.html">http://codinginparadise.org/weblog/2005/09/ajax-how-to-handle-bookmarks-and-back.html</a>
If you have free time,i''ll be very very happy to receive your
suggestions.

After loadTopics(),there''s another function displayTopicList(),this
function will use the topics array returned by loadTopics().more code
as below:

Event.observe(window,''load'',init);
var topics=[];
function init(){
	dhtmlHistory.initialize();
	if(dhtmlHistory.isFirstLoad()){
		topics=oadTopics();
		//alert(topics.length);
		historyStorage.put("topics",topics);
	}else{
		topics=historyStorage.get("topics");
	};

	displayTopicsList();
	var currentTopic=dhtmlHistory.getCurrentLocation();
	displayTopic(currentTopic);

	$("menu").observe("click",handleTopicChange);

	dhtmlHistory.addListener(handleHistoryEvent);

};

function loadTopics(){
	var topicXml;
	var topicElements;
	var topicss=new Array();
	var option={
		parameters:"",
		method:"get",
		onSuccess:function(transport){
			topicXml=transport.responseXML;
			topicElements=topicXml.getElementsByTagName("topic");
			topicElements=$A(topicElements);
			topicElements.each(function(elem){
				var currentTopic={};
				currentTopic.id=elem.getAttribute("id");
				currentTopic.title=elem.getAttribute("title");
				currentTopic.src=elem.getAttribute("src");
				currentTopic.isDefault=elem.getAttribute("default");
				if(currentTopic.isDefault==null||currentTopic.isDefault==undefined)
{
					currentTopic.isDefault=false;
				};
				currentTopic.toString=function(){
					return
"[id="+this.id+",title="+this.title+",src="+this.src
+",isDefault="+this.isDefault+"]";
				};
				topicss.push(currentTopic);
			});
		},
		onFailure:function(transport){
			alert("Request Failure...");
		}
	};
	var request=new Ajax.Request("data/topics.xml",option);
        return topicss;
}

function displayTopicsList(){
	var menu=$("menu");
	topics.each(function(elem){
		var newTopic=document.createElement("a");
		newTopic.href=elem.src;
		newTopic.title=elem.title;
		newTopic.setAttribute("topicID",elem.id);
		newTopic.innerHTML=elem.title;
		menu.appendChild(newTopic);
	});
}
On 4月2日, 下午4时35分, Colin Mollenhour <a class="moz-txt-link-rfc2396E"
href="mailto:eliteii...-NPSFNn/7+NYVo650/ln6uw@public.gmane.org">&lt;eliteii...-NPSFNn/7+NYVo650/ln6uw@public.gmane.org&gt;</a>
wrote:
  </pre>
  <blockquote type="cite">
    <pre wrap="">By default, Ajax requests are asynchronous,
meaning that once
Ajax.Request is called, it returns immediately. Your onSuccess code will
be called at some later time when the server has responded.

See:<a class="moz-txt-link-freetext"
href="http://prototypejs.org/api/ajax/options">http://prototypejs.org/api/ajax/options</a>

You could try asynchronous: false, but I would recommend restructuring
your code to not require synchronous calls since it will "freeze" the
browser while waiting for the server response.

I don''t know what you are doing with loadTopics() once it returns, but
there is very rarely if ever a need to do synchronous calls, you just
have to approach the problem differently. If you can''t figure this out,
show us more code and maybe we can point you in the right direction.

Lastly, you are not using Class.create() how it was intended at all..
You could replace it with a simple {}, or if you want some OO structure,
create a real class like so:

var Topic = Class.create();
Topic.prototype = {
    initialize: function(elem){
        this.attributes = $H({
            id: elem.getAttribute("id"),
            title: elem.getAttribute("title"),
            src: elem.getAttribute("src"),
            isDefault: elem.getAttribute("default") || false
        });
    },
    toString: function(){
        return ''[''+this.attributes.collect(function(pair){
return
pair.key+''=''+pair.value;
}).join('','')+'']'';
    }

};

Then, inside your loop of topics, simply do this:

topicElements.each(function(elem){
  topics.push(new Topic(elem));

});

Colin

Vin wrote:
    </pre>
    <blockquote type="cite">
      <pre wrap="">Hi,
I wanna return a array object when the ajax request finished,but it
failed.And i just don''t know why.Any guidance would be greatly
appreciated.:&gt;
Sample code as below:
function loadTopics(){
   var topicXml;
   var topicElements;
   var topics=[];//the array object that i wanna return
   var option={
           parameters:"",
           method:"get",
           onSuccess:function(transport){
                   topicXml=transport.responseXML;
                  
topicElements=topicXml.getElementsByTagName("topics");
                   topicElements=$A(topicElements);
                   topicElements.each(function(elem){
                           var currentTopic=Class.create();
                           currentTopic.id=elem.getAttribute("id");
                          
currentTopic.title=elem.getAttribute("title");
                           currentTopic.src=elem.getAttribute("src");
                          
currentTopic.isDefault=elem.getAttribute("default");
                          
if(currentTopic.isDefault==null||currentTopic.isDefault==undefined)
{
                                   currentTopic.isDefault=false;
                           };
                           currentTopic.toString=function(){
                                   return
"[id="+this.id+",title="+this.title+",src="+this.src
+",isDefault="+this.isDefault+"]";
                           };
                           topics.push(currentTopic);
                   });
                   //alert(topics.length)//it does show that the topics array
has some
items when the request finished.But,how to return it??
           },
           onFailure:function(transport){
                   alert("Request Failure...");
           }
   };
   var request=new Ajax.Request("Data/topics.xml",option);
   //return topics;//puzzling me here!!It failed returning here.The
topics.length show 0.
}
      </pre>
    </blockquote>
    <blockquote type="cite">
      <pre wrap="">All i wanna do is:to return my topics array
object in the above
function.Where should i put my return clause?
I try to definded my topics array as a global variable,pushing its
items through the function above(this step succeeded) and then
reference it in some other function,but what is strange is   that its
length property show 0 too.
      </pre>
    </blockquote>
  </blockquote>
  <pre wrap=""><!---->



  </pre>
</blockquote>
<br>
--~--~---------~--~----~------------~-------~--~----~<br>
You received this message because you are subscribed to the Google Groups
&quot;Ruby on Rails: Spinoffs&quot; group. <br> To post to this
group, send email to
rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org <br> To
unsubscribe from this group, send email to
rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
<br> For more options, visit this group at
http://groups.google.com/group/rubyonrails-spinoffs?hl=en <br>
-~----------~----~----~----~------~----~------~--~---<br>
</body>
</html>

<br>

Vin

2007-Apr-04 03:20 UTC

head link

Re: Puzzle:How to return a value when an ajax request finished in a function??

Dear Colin:
I took few minutes this morning to modify my code following your
suggestion,and it works,but not entirely.
There is a problem in the "displayTopic" function,where and when i use
the "find" method of prototype''s Enumerable object,and i
couldn''t
figure it out.Is there anything wrong with my iterator function in
that "find" method??
I wrote the "displayTopic" function like this,and the iterator
function as its nested function:
The detail code i''ve pasted to pastie:http://pastie.caboo.se/
51571[line 73]
function displayTopic(topicID){
  var topic;
  function iterator(elem){
    if(topicID==null ||topicID==""){
      return (elem.isDefault==true)?true:false;
    }else{
       return (elem.id==topicID)?true:false;
    }
 };
 //find method here
 topic=topics.find(iterator);
 alert(topic.id);//this''s for test,it show nothing.
 alert("hi");//this''s for test too,it show "hi"
 ....
 ....
}

   Sincerely bookish Vin.:>


--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Ruby on Rails: Spinoffs" group.
To post to this group, send email to
rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
For more options, visit this group at
http://groups.google.com/group/rubyonrails-spinoffs?hl=en
-~----------~----~----~----~------~----~------~--~---

Colin Mollenhour

2007-Apr-04 12:01 UTC

head link

Re: Puzzle:How to return a value when an ajax request finished in a function??

Looks like it should work to me, but I don''t know because you are very 
specific in your boolean tests. For example:
var blah = ''true''; //the string "true"
blah == true //this is false

elem.isDefault==true //this probably isn''t working...

I don''t know what getAttribute("default") is returning in
your case, but
say it is a string representation of "true"/"false". If so,
change line
26 of your pastie to:
          isDefault: elem.getAttribute("default") == "true",

Now, in displayTopic, to get the topic use this simplified code:
  var topic = topics.find( topicID ?
    function(elem){ return elem.isDefault } :
    function(elem){ return elem.id == topicID } );

Firefox and Firebug are your friends if there is any doubt as to what 
values you have stored and how they are comparing in your code.

Colin

Vin wrote:> Dear Colin:
> I took few minutes this morning to modify my code following your
> suggestion,and it works,but not entirely.
> There is a problem in the "displayTopic" function,where and when
i use
> the "find" method of prototype''s Enumerable object,and i
couldn''t
> figure it out.Is there anything wrong with my iterator function in
> that "find" method??
> I wrote the "displayTopic" function like this,and the iterator
> function as its nested function:
> The detail code i''ve pasted to pastie:http://pastie.caboo.se/
> 51571[line 73]
> function displayTopic(topicID){
>   var topic;
>   function iterator(elem){
>     if(topicID==null ||topicID==""){
>       return (elem.isDefault==true)?true:false;
>     }else{
>        return (elem.id==topicID)?true:false;
>     }
>  };
>  //find method here
>  topic=topics.find(iterator);
>  alert(topic.id);//this''s for test,it show nothing.
>  alert("hi");//this''s for test too,it show
"hi"
>  ....
>  ....
> }
>
>    Sincerely bookish Vin.:>
>
>
> >
>
>   

--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Ruby on Rails: Spinoffs" group.
To post to this group, send email to
rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
For more options, visit this group at
http://groups.google.com/group/rubyonrails-spinoffs?hl=en
-~----------~----~----~----~------~----~------~--~---

Vin

2007-Apr-04 12:24 UTC

head link

Re: Puzzle:How to return a value when an ajax request finished in a function??

Got it!i''ve settled this problem this afternoon.:>
Thx.You ur really a leery man.

On 4月4日, 下午8时01分, Colin Mollenhour <eliteii...@mollenhour.com>
wrote:> Looks like it should work to me, but I don''t know because you are
very
> specific in your boolean tests. For example:
> var blah = ''true''; //the string "true"
> blah == true //this is false
>
> elem.isDefault==true //this probably isn''t working...
>
> I don''t know what getAttribute("default") is returning
in your case, but
> say it is a string representation of "true"/"false". If
so, change line
> 26 of your pastie to:
>           isDefault: elem.getAttribute("default") ==
"true",
>
> Now, in displayTopic, to get the topic use this simplified code:
>   var topic = topics.find( topicID ?
>     function(elem){ return elem.isDefault } :
>     function(elem){ return elem.id == topicID } );
>
> Firefox and Firebug are your friends if there is any doubt as to what
> values you have stored and how they are comparing in your code.
>
> Colin
>
> Vin wrote:
> > Dear Colin:
> > I took few minutes this morning to modify my code following your
> > suggestion,and it works,but not entirely.
> > There is a problem in the "displayTopic" function,where and
when i use
> > the "find" method of prototype''s Enumerable
object,and i couldn''t
> > figure it out.Is there anything wrong with my iterator function in
> > that "find" method??
> > I wrote the "displayTopic" function like this,and the
iterator
> > function as its nested function:
> > The detail code i''ve pasted to pastie:http://pastie.caboo.se/
> > 51571[line 73]
> > function displayTopic(topicID){
> >   var topic;
> >   function iterator(elem){
> >     if(topicID==null ||topicID==""){
> >       return (elem.isDefault==true)?true:false;
> >     }else{
> >        return (elem.id==topicID)?true:false;
> >     }
> >  };
> >  //find method here
> >  topic=topics.find(iterator);
> >  alert(topic.id);//this''s for test,it show nothing.
> >  alert("hi");//this''s for test too,it show
"hi"
> >  ....
> >  ....
> > }
>
> >    Sincerely bookish Vin.:>

--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Ruby on Rails: Spinoffs" group.
To post to this group, send email to
rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
For more options, visit this group at
http://groups.google.com/group/rubyonrails-spinoffs?hl=en
-~----------~----~----~----~------~----~------~--~---

Rails spinoffs - Apr 2007 - Puzzle:How to return a value when an ajax request finished in a function??

Puzzle:How to return a value when an ajax request finished in a function??

Re: Puzzle:How to return a value when an ajax request finished in a function??

Re: Puzzle:How to return a value when an ajax request finished in a function??

Re: Puzzle:How to return a value when an ajax request finished in a function??

Re: Puzzle:How to return a value when an ajax request finished in a function??

Re: Puzzle:How to return a value when an ajax request finished in a function??

Re: Puzzle:How to return a value when an ajax request finished in a function??

Re: Puzzle:How to return a value when an ajax request finished in a function??