Ajax/Prototype: OnComplete Fires Before Response Returned In Firefox
Feb 14, 2007
Simple ajax call seems to have some issues in Firefox. The "onComplete:" is
called BEFORE the response is returned by the call. Is there a coding issue
or a work around?
var ajax = new Ajax.Request( url, {method: 'post', parameters: params,
onComplete: evalInfo });
function evalInfo( request )
{
// do stuff with request
}
Should I have a timer that checks the request state before exec the
evalInfo?
I am doing a few tests with javascript and oop. but one failed so i falled back to the way i usually do this but it still isnt working properly. i am using $.post() but instead of returning whatever is echoed in the php file like it does with all my other scripts it returns the content of the file:
Isnt returned in var data but the whole file is returned as a string.
We have the following situation - when Ajax request is sent what's being returned by the server is usually an XML (which is used for DOM updates) but sometimes it's HTML which is a whole new page that should replace an existing one. I.e when we issue an Ajax request we don't know what will be returned and analyze the response to act accordingly.
Now, the way to replace the current document with a new one used to be easy and portable for both browsers (we're only supporting IE6 and Firefox 1.5):
document.open(); document.write( head ); document.write( body ); document.close();
where "head" and "body" are two parts of the result HTML. We had to cut it to two (rather than going simply with document.write( NewHTML )) because of IE - our head section contains references to external JavaScript files (<script type="text/javascript" src="sth.js"></script>) and IE only loads them when document.write() call ends. So if body contains any script block (<script type="text/javascript".. </script>) using any of JS referenced by head - IE would fail with something like "Resource undefined" if we push the whole new HTMl in one go by using document.write( NewHTML ). But it worked perfectly fine in Firefox, meaning
did the job just fine. What's even more important - it also evaluated all JavaScripts correctly - both in external files referenced by the head and in the JS blocks embedded in the body.
Until Firefox 1.5.0.6/7 where things stopped working completely - our lovely and used-to-be portable code
document.open(); document.write( head ); document.write( body ); document.close();
caused Firefox to loose all CSS/JS and display an HTML only page (as if CSS/JS were disabled). Removing document.close(); improved the situation a bit by displaying the page with CSS this time but still - *no* JavaScript was evaluated (meaning, JavaScript blocks embedded in the document's body were not evaluated).
I took a different path from this point by pushing the new content to document's head and body "innerHTML". It worked but not for JS evaluation - I had to do that manually. To evaluate the JS referenced in the head section of the document - I've traversed the head's DOM tree while looking for the "script" nodes, then downloaded all of them one by one using a synchronous Ajax calls (don't laugh!) and eval()-ed the response. To evaluate JS blocks embedded in the body of the document - I've traversed the body's DOM tree while looking for the "script" nodes and eval()-ed them.
The problem is following: eval()-ing external JS files after downloading them with Ajax doesn't work in 100% of cases - some statements using Prototype functions fail to execute ("prototype.js" is one of external JS files referenced in the head). Anyway, I'm almost sure that what I'm doing is plain wrong, i.e it's sounds silly to download all JS files referenced in the head and eval() them !
So how do I fix it ? Simply put - how do I replce the content of the document to the completely new one received as a response to asynchronous Ajax call ? The new content conatins doctype, head, body - it's a completely new page. And all JS referenced in the head and embedded in the body should be evaluated as well.
I really wish
document.open(); document.write( head ); document.write( body ); document.close();
was working in Firefox as before. Is it simply a Firefox bug, should I submit it ? Btw, document.open.write.write.close() works just fine in IE6.
I wrote a .repeat(n) function for strings which seemed to work fine:
String.prototype.repeat = function(n) { // repeats the string n times if (n<1) return ""; if (n<2) return this; for (var aStr = [this];--n>0;) aStr.push(aStr[0]); return aStr.join(""); }
Only I was a little surprised to get "object" (instead of "string") when I tried: alert (typeof ("x".repeat(1)));
I fixed this by modifying ... if (n<2) return this+"";
I have an ajax post which returns a large html response. It is getting truncated at 98784 characters everytime. Is there a limit to a response size or a way around this?
I am doing some showing and hiding of unordered lists for menus. I like CSS and so I swap the id of the unordered list to either show or hide the <ul>. The code works fine in Firefox but not in IE6. I start with the <ul> hidden using <ul id="SubMenu1Hide">. I attach the evens to the onmouseover and onmousout events. The bug happens in IE when I rollover the element with the event attached it does not show or disappear.
The <ul> seems to stay hidden like it is the default, it will never appear. Here is the weird thing. If I start with the id="SubMenu1Show" the menu shows as it is supposed to, stays visible when I mouseover and then disappears when I mouseout. It then continues to work as it is supposed to, appearing on rollover and disapearing on mouseout.
I want the submenus to all stack on top of each other on the page and be hidden by default then only show when you mouseover it's main menu heading. Here is the code:
I am using the following code to hide one <div> and make another visible. It fires just fine in IE and Chrome. Also, the same page has other javascript links which do fire in Firefox as well.
[Code]...
ship_details and ship_update are the names of the DIV. Spelling is correct (and even MS Visual Studio suggests those names and I select from the drop down.)
I have a problem where the page doesn't expand when more results get loaded via jquery on a facebook style wall. Once more results get loaded the footer stays static instead of moving down.
What I noticed is that my error callback is fired every time. MyService.asmx: [WebMethod] public FileInfo[] GetFileInfo(int Id){ Proxies.ServiceRef.ServiceClient c = new Proxies.ServiceRef.ServiceClient(); return c.GetFileInfo(Id).ToArray(); }
The Jquery code where I am getting error: $.ajax({ url: url, data: jsonData, type: "POST", contentType: _I.contentType, timeout: _I.timeout, dataType: "serviceproxy", // custom type to avoid double parse dataFilter: function (jsonString, type) { .....
When I debug using firebug the response is as follows. {"d":[{"__type":"Proxies.AFARServiceRef.AssignmentInfo","ExtensionData": {},"AssignDate":"/Date(1317748587667) /","AssignFileName":null,"ClaimId":"PA026195","ClaimantName":"Rachel Weiss","FirstContactDate":"/Date(1302678000000)/","FirstContactTime":{"Ticks":433800000000,"Days":0,"Hours":12, "Milliseconds":0,"Minutes":3,"Seconds":0, "TotalDays":0.50208333333333333, "TotalHours":12.049999999999999, "TotalMilliseconds":43380000, "TotalMinutes":723,"TotalSeconds":43380},"Id":5257, "InspectionDate":"/Date(1302246000000)/","StatusId":1,"SubmittedCount":5, "UploadedCount":9}]}
There is a problem with XMLHttpRequest and Firefox when the function that makes the asynchrounous request is called from another window. The URL of the window does not change to the next page in which i am displaying the response.
I'm using a fork of osC for an ecommerce system. It has an integrated smarty template. In the admin section, when adding products there's a section with three tabs: Main Image, Extra Images, and Media
This section acts like AJAX, but I'm not sure if it is. The media pulls actions from two .js files: prototype.js and media.js So, I'm guessing it's Prototype? The problem is adding media works fine in firefox, but only shows a "Please Wait..." when used in IE, Google Chrome, and Safari The odd thing is when it's loading in Firefox, it says "Initializing.." (Instead of Please Wait..) then loads the media functions allowing me to add sound to my products. If it's php I can do fine, but I don't know much about JS.
The reason that it works well in firefox, makes me suspect the code is right, but missing something.
when I use Firefox to run my application (this involves sending an IFRAME request to the servlet and handling the response), there is no delay in displaying the data after each response. But when I use IE, there seems to be a 1-2 second delay. The script sends a request using IFrame, goes through a loop to return script tags containing data to the browser, and then data is displayed by the browser and a new request is sent. For IE, when a new request is sent, the delay in receiving the response is quite noticeable.
I have a table (tables are for tabular data) with patient information. The user can click the row to select it and when they do the right part of the interface loads some additional information on the patient - quick lookup info if you will, but also provides links to tasks involving that information - edit, view case history, etc.I'd like to replace the default right click behavior on the rows to create a pop up menu next to the point of click that links to the same list of options for the convenience of the more savvy users.The project is being built with prototype so no jQuery please. The site is a corporate intranet where Firefox is the only browser it is *required* to work in. It would be nice to have it work in webkit.
I have a <div> tag that contains a table of results returned using AJAX. I have an onmouseover on the div so that when the user is viewing the results the div stays visible. An onmouseout is also declared so that when the user goes off of the div, it will disappear after a few seconds. When the user clicks on an entry I perform some logic and close the div.
However the problem occurs when my AJAX returns too many results to display in the set size of my div. When this occurs my div becomes scrollable. When the user is interacting with the scrollable, it seems to fire the onmouseout event because the div disappears.
So I'm loading the div#my_events by prepend(data) where "data" is another well styled div. Is there anyway to animate this returned data. Unfortunately I can't just specify a unique ID on the incoming data. So I was wondering how else I might be able to address this data I'm returning.
It is basically a topic list, with a modal that sends jquery to add a topic to the database, and returns the topic from the database, hides the modal, and displays the last added topic at the top of the topic list. Now I'd like it to do something slightly fancy like animate the color of the background to bring the user's attention to it.
I define a "click" event on "a" tags in the ready part of a page. It fires just fine when I click on any "a" tag on the page. I then have a button which sets the content of a div using ajax. This content contains a couple of "a" tags. The issue now is that the "click" event does NOT fire when clicking on these tags. I suspect it is because they did not exist when the page was initially rendered. What is the "JQuery way" of dealing with an issue like this? Of course I cannot be the only one in the world who needs to return HTML with events from my ajax calls :-)
In this dumb example, I'm unable to match the 'data' returned variable with the value I assigned to it in php (I can't manage to enter my 'do stuff'), yet its value is 'ok' if I display it. I have no problem to retrieve html code from php and inject it in my pages, but I can't test it as a regular javascript string.
What's wrong in this ? What have I missed about the 'data' format ? Do I have to 'cast' data to a javascript string (and if so, how ?)
but this has not worked. the latter showed that jquery is inserted in the index. the main page that calls the button. jquery in a home can act on an ID loaded from another file with ajax?
I am currently using $.ajax to post to a Perl file that queries a webservice and returns XML. Running the Perl via command line confirms that XML is being returned with Content-Type: application/xml. However, regardless if I set the dataType parameter to "xml", "XML" or just use jQuery's intelligent guess, it appears that I am not getting any data returned to my function at all.
I've tried using the full $.ajax notation and the simplified $.get notation as follows:
and:
I have also tried using JQuery to perform a "GET" directly to the webservice which returns XML by default and still I get no data returned to my function.
Although I doubt it's browser-related, I have confirmed this in both Chrome (5.0.375) and Firefox (3.6.3).
Through an AJAX implementation, I am receiving a SQL Query result that has:An object's attribute delimited by a comma.An entire object (database row) delimited by a colon.This is an example response to make it more clear for you.
What I am trying to achieve is placing all of this data into an array. I've set up a little test bed to try and get this to work; this is all I have so far:
var testString = "1,Jeremy,130,80;2,Lauren,370,300;3,Jeancarlos,200,200;4,Luke,330,70;5,Bloom,392,108"; var testArray = new Array(); testArray = testString.split(";");[code]....
get a multi-dimensional array that has information for each person. Example:
FinalArray[0][0] = 1 FinalArray[0][1] = Jeremy FinalArray[0][2] = 130
I want to update an element in my DOM that contains Javascript code when an action X is performed and an AJAX response generated with new Javascript code that is one of the AJAX response variables.
The AJAX request is successfully returned, as is the Javascript JSON response variable. However, I'm having no luck updating the DOM element containing the old JS code with the new JS code. I'm performing these operations using JQuery.
I was wondering if it was possible to execute javascript returned by ajax (XMLHttpRequest)? I can see that the script is returned by it doesn't execute. Here is what it returns. I can see the output but when I click on it nothing happens.
Code: <script type="text/javascript"> function hi(name){ var latBox = document.getElementById("myinfo"); latBox.innerHTML = "<div>Greetings: " + name + "</div>"; } </script> <p onClick="hi('hi');">Math.random = " + Math.random() + "</p>
I'm using Prototype's AJAX to get the "alert" the response of a simple PHP script (a script that echoes a single line), but it doesn't seem to work. Here's the code:
function init() { var url = "http://localhost/script.php"; var myAjax = new Ajax.Request( url, { onSuccess: showResponse }); }
function showResponse(response) { alert(response.responseText); }
window.onload = init; The code has no errors, but still doesn't show the response even if i add an onFailure event handler. What could be wrong?
I have a problem I have in my controller a function which poperly returns the value (i've checked by var_dump). When I try to access this data from $.ajax it returns nothing...
