weird Ajax.Request error. responseText returning [object Object]
223 views
Skip to first unread message
revivedk
Aug 5, 2008, 9:22:48 AM8/5/08
to Prototype & script.aculo.us
so. as title says, when I try and run this Ajax.Request. all the
responseText returns is [object Object]
new Ajax.Request(element.href, {
method: 'get',
onSuccess: function(responseText) {
$('lbContent').update(responseText);
},
evalJS: true
});
lbcontent ends up with [object Object] as its content.
responseText returns is [object Object]
new Ajax.Request(element.href, {
method: 'get',
onSuccess: function(responseText) {
$('lbContent').update(responseText);
},
evalJS: true
});
lbcontent ends up with [object Object] as its content.
T.J. Crowder
Aug 5, 2008, 9:27:51 AM8/5/08
to Prototype & script.aculo.us
Hi,
The onSuccess handler doesn't receive responseText, it receives an
object:
http://www.prototypejs.org/api/ajax/options
http://www.prototypejs.org/api/ajax/request
(And that object has a responseText property, which is probably what
you're looking for.)
Hope this helps,
--
T.J. Crowder
tj / crowder software / com
The onSuccess handler doesn't receive responseText, it receives an
object:
http://www.prototypejs.org/api/ajax/options
http://www.prototypejs.org/api/ajax/request
(And that object has a responseText property, which is probably what
you're looking for.)
Hope this helps,
--
T.J. Crowder
tj / crowder software / com
Alex Hernandez
Aug 5, 2008, 10:06:26 AM8/5/08
to Prototype & script.aculo.us
Hi
change this:
onSuccess: function(responseText) {
$('lbContent').update(responseText);
},
for this:
onSuccess: function(transport) {
$
('lbContent').update(transport.responseText);
},
HTH
Alex
change this:
onSuccess: function(responseText) {
$('lbContent').update(responseText);
},
onSuccess: function(transport) {
$
('lbContent').update(transport.responseText);
},
HTH
Alex
revivedk
Aug 5, 2008, 10:15:18 AM8/5/08
to Prototype & script.aculo.us
Thank you guys, that did it.
But it doesn't seem to work in IE 7, nothing really happens.
But it doesn't seem to work in IE 7, nothing really happens.
T.J. Crowder
Aug 5, 2008, 11:58:22 AM8/5/08
to Prototype & script.aculo.us
> But it doesn't seem to work in IE 7, nothing really happens.
Make sure you DON'T have a trailing comma in your options object
(e.g., a comma after the last one). IE hates those (silently), at
least IE6 does.
If that's not it, post the HTML that declares lbContent and the code
that hooks up the event handler and we'll see if we can spot
anything. Also, following through (in FF) with Firebug might reveal
something that FF is allowing but IE doesn't like.
--
T.J. Crowder
tj / crowder software / com
T.J. Crowder
tj / crowder software / com
revivedk
Aug 5, 2008, 12:40:39 PM8/5/08
to Prototype & script.aculo.us, timso...@gmail.com
Well, yeah if I knew how to use firebug. oh well.
This is the code I'm using.
the ajax call that is giving me trouble is found in the showLightbox
"function".
// Make sure that Scriptaculous is loaded, since its required for this
to work!
if (typeof Scriptaculous == 'undefined') {
alert("Scriptaculous could not be found!\n Please make sure it is
installed,\n or this script won't work");
} else {
//General settings.
lbSettings = {
Opacity: '0.6',
fadeTime: '0.6'
}
/*these values will be added to the end of the url called via ajax.
ex.
urlArray = {
value: '1',
otherparam: '2'
};
will be added as
?value=1&otherparam=2
*/
var urlArray = Object.toQueryString(
url = {
//values go here... remember commas the right places!
raw: '1',
lightboxClose: '1'
});
//Class creation, this will contain all functions used for this
script.
var Lightbox = Class.create ({
// Initializes the Lightbox, and inserts the Lightbox html to the
DOM.
initialize: function() {
//listen for key presses, so we can check if KEY_ESC is pressed
document.observe('keydown', this.escapeHandler.bind(this));
//prevent double insertion of our DIV elements.
if($('lightbox')) {
} else {
if (!document.getElementsByTagName){ return; }
var anchor = document.getElementsByTagName("a");
var anchorArray = $A(anchor);
//make sure its properly bound
var boundShowLightbox = this.showLightbox.bind(this);
// loop through all anchor tags
anchorArray.each(function(element) {
if (element.getAttribute("href") && (element.getAttribute("rel")
== "lightbox")){
var lBox = this;
$(element).observe('click', boundShowLightbox);
}
});
//Fetch ALL <body> tags, ( there should be only one, so we select
the first entry just in case theres more)
var objBody = $$('body')[0];
/*create and insert our Lightbox html, it should look like this:
<div id="overlay"></div>
<div id="lightbox">
<div id="lbHeader"></div>
<div id="lbContent">Loading...</div>
</div>
*/
objBody.appendChild(Builder.node('div', {id:'overlay'}));
var objLightbox = Builder.node('div', {id:'lightbox'}, [
Builder.node('div', {id:'lbHeader'}, ' '),
Builder.node('div', {id:'lbContent'}, 'Loading...')
]);
objBody.appendChild(objLightbox);
}
//Hide the Div elements immediatly.
$('overlay').hide();
$('lightbox').hide();
},
//display the lightbox
showLightbox: function(event) {
var element = event.findElement('a');
event.stop();
//add parameters after the original URL.
if(element.href.indexOf("?") >= 0){
element.href += '&' + urlArray;
} else {
element.href += '?' + urlArray;
}
//make a Ajax call, and retrieve the content
$('lbContent').update(transport.responseText);
},
evalJS: true
});
//make the lightbox fade in
new Effect.Appear($('overlay'), {duration: lbSettings.fadeTime,
from: 0.0, to: lbSettings.Opacity});
new Effect.Appear($('lightbox'), {duration: lbSettings.fadeTime});
//resize NOT WORKING.
var dimensions = $('lbContent').getDimensions();
alert(dimensions.width + ', ' + dimensions.height);
$('lightbox').setStyle({
width: dimensions.width,
height: dimensions.height
});
},
//We're checking if the key pressed is KEY_ESC, if so, we trigger
hideLightbox();
escapeHandler: function(e) {
if (Event.KEY_ESC != e.keyCode) return;
this.hideLightbox();
},
hideLightbox: function() {
new Effect.Fade($('overlay'), {duration: lbSettings.fadeTime});
new Effect.Fade($('lightbox'), {duration: lbSettings.fadeTime});
}
});
//make it all work by initializing the Lightbox class when the DOM has
loaded.
document.observe('dom:loaded', function () { new Lightbox(); });
}
This is the code I'm using.
the ajax call that is giving me trouble is found in the showLightbox
"function".
// Make sure that Scriptaculous is loaded, since its required for this
to work!
if (typeof Scriptaculous == 'undefined') {
alert("Scriptaculous could not be found!\n Please make sure it is
installed,\n or this script won't work");
} else {
//General settings.
lbSettings = {
Opacity: '0.6',
fadeTime: '0.6'
}
/*these values will be added to the end of the url called via ajax.
ex.
urlArray = {
value: '1',
otherparam: '2'
};
will be added as
?value=1&otherparam=2
*/
var urlArray = Object.toQueryString(
url = {
//values go here... remember commas the right places!
raw: '1',
lightboxClose: '1'
});
//Class creation, this will contain all functions used for this
script.
var Lightbox = Class.create ({
// Initializes the Lightbox, and inserts the Lightbox html to the
DOM.
initialize: function() {
//listen for key presses, so we can check if KEY_ESC is pressed
document.observe('keydown', this.escapeHandler.bind(this));
//prevent double insertion of our DIV elements.
if($('lightbox')) {
} else {
if (!document.getElementsByTagName){ return; }
var anchor = document.getElementsByTagName("a");
var anchorArray = $A(anchor);
//make sure its properly bound
var boundShowLightbox = this.showLightbox.bind(this);
// loop through all anchor tags
anchorArray.each(function(element) {
if (element.getAttribute("href") && (element.getAttribute("rel")
== "lightbox")){
var lBox = this;
$(element).observe('click', boundShowLightbox);
}
});
//Fetch ALL <body> tags, ( there should be only one, so we select
the first entry just in case theres more)
var objBody = $$('body')[0];
/*create and insert our Lightbox html, it should look like this:
<div id="overlay"></div>
<div id="lightbox">
<div id="lbHeader"></div>
<div id="lbContent">Loading...</div>
</div>
*/
objBody.appendChild(Builder.node('div', {id:'overlay'}));
var objLightbox = Builder.node('div', {id:'lightbox'}, [
Builder.node('div', {id:'lbHeader'}, ' '),
Builder.node('div', {id:'lbContent'}, 'Loading...')
]);
objBody.appendChild(objLightbox);
}
//Hide the Div elements immediatly.
$('overlay').hide();
$('lightbox').hide();
},
//display the lightbox
showLightbox: function(event) {
var element = event.findElement('a');
event.stop();
//add parameters after the original URL.
if(element.href.indexOf("?") >= 0){
element.href += '&' + urlArray;
} else {
element.href += '?' + urlArray;
}
//make a Ajax call, and retrieve the content
new Ajax.Request(element.href, {
method: 'get',
onSuccess: function(transport) {
method: 'get',
$('lbContent').update(transport.responseText);
},
evalJS: true
});
//make the lightbox fade in
new Effect.Appear($('overlay'), {duration: lbSettings.fadeTime,
from: 0.0, to: lbSettings.Opacity});
new Effect.Appear($('lightbox'), {duration: lbSettings.fadeTime});
//resize NOT WORKING.
var dimensions = $('lbContent').getDimensions();
alert(dimensions.width + ', ' + dimensions.height);
$('lightbox').setStyle({
width: dimensions.width,
height: dimensions.height
});
},
//We're checking if the key pressed is KEY_ESC, if so, we trigger
hideLightbox();
escapeHandler: function(e) {
if (Event.KEY_ESC != e.keyCode) return;
this.hideLightbox();
},
hideLightbox: function() {
new Effect.Fade($('overlay'), {duration: lbSettings.fadeTime});
new Effect.Fade($('lightbox'), {duration: lbSettings.fadeTime});
}
});
//make it all work by initializing the Lightbox class when the DOM has
loaded.
document.observe('dom:loaded', function () { new Lightbox(); });
}
revivedk
Aug 6, 2008, 3:36:36 AM8/6/08
to Prototype & script.aculo.us
I forgot to add.
the function, in where the ajax call resides, Is called just fine, and
it does recieve the URL in IE7. it just doesn't seem to actually do
the ajax call
the function, in where the ajax call resides, Is called just fine, and
it does recieve the URL in IE7. it just doesn't seem to actually do
the ajax call
T.J. Crowder
Aug 6, 2008, 4:38:45 AM8/6/08
to Prototype & script.aculo.us
Hi,
It looks like you're expecting the Ajax.Request to complete
synchronously, but you haven't supplied the "asynchronous: false"
option. Normally it's best to allow the request to be asynchronous,
then handle whatever you want to do afterward in the success handler.
It looks like you're expecting the Ajax.Request to complete
synchronously, but you haven't supplied the "asynchronous: false"
option. Normally it's best to allow the request to be asynchronous,
then handle whatever you want to do afterward in the success handler.
--
T.J. Crowder
tj / crowder software / com
T.J. Crowder
tj / crowder software / com
revivedk
Aug 6, 2008, 7:51:36 AM8/6/08
to Prototype & script.aculo.us
Thank you, I added it.
though, it still doesnt work in IE.
though, it still doesnt work in IE.
Reply all
Reply to author
Forward
0 new messages