Following is client-side javascript code, part of fine-uploader initialization:
key: function (fileId) {
var keyRetrieval = new qq.Promise(),
filename = encodeURIComponent(uploader.getName(fileId)),
xhr = new XMLHttpRequest();
xhr.onreadystatechange = function () {
if (xhr.readyState === 4) {
var status = xhr.status,
key = xhr.responseText;
if (status !== 200) {
keyRetrieval.failure();
}
else {
keyRetrieval.success(eval('(' + key + ')').key);
}
}
}
xhr.open("POST", "/getkey.ashx?name=" + filename + "&filesize=" + encodeURIComponent(uploader.getSize(fileId)));
xhr.send();
return keyRetrieval;
Firefox and chrome works.
In IE 9, getName(fileId) method returns the filename, but getSize(fileId) returns 'undefined'
Any suggestions ? Thnks
Due to lack of File API support, file size reporting in IE9 and older is not possible, so this return type is expected.
Related
everything was working flawlessly like 3 days ago when I finished writing some code and testing. Today when I wanted to do some more changes it stopped working.. Like without a reason. Code didn't change a bit. I'm getting this error:
Uncaught RangeError: Maximum call stack size exceeded
Debugger tells me that error has been thrown somewhere during this call:
return open.apply(this, arguments);
Because of that anything that should be loaded via AJAX on the site is not working.
This is the code for intercepting the AJAX calls:
var XHR = XMLHttpRequest.prototype;
var open = XHR.open;
var send = XHR.send;
var setRequestHeader = XHR.setRequestHeader;
XHR.open = function (method, url) {
this._url = url;
this._requestHeaders = {};
return open.apply(this, arguments);
};
XHR.setRequestHeader = function (header, value) {
this._requestHeaders[header] = value;
return setRequestHeader.apply(this, arguments);
};
XHR.send = function (postData) {
this.addEventListener('load', function () {
var myUrl = this._url ? this._url.toLowerCase() : this._url;
if (myUrl) {
if (this.responseType != 'blob' && this.responseText) {
try {
var allowedUrls = ['shoutbox.json', 'comments/latest.json'];
if (new RegExp(allowedUrls.join("|")).test(this._url)) {
var extensionID = 'exampleExtensionID';
chrome.runtime.sendMessage(extensionID, { interception: true });
}
} catch (err) {
}
}
}
});
return send.apply(this, arguments);
};
Has anyone idea why it might stopped working?
I had to put my injected.js (XHR) into self invoking function.
When is XMLHttpRequest destroyed?
I just wrote the simple function below, and xmlhttp has been sent successfully, but responseText isn't sent to the function SetStringinDiv(). The variable str is empty and the variable location has value.
I have no idea how to fix it, and I don't know what the keyword for this problem is, either. If this kind of question already exists, please tell me how to find it or what the keyword is.
<script>
function foo(){
xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
var str = xmlhttp.responseText;
SetStringinDiv("div1", str);
}
}
xmlhttp.open("GET", "uri", true);
xmlhttp.send();
}
</script>
<script>
function SetStringinDiv(location, str) {
document.getElementById("location").innerHTML = location;
document.getElementById("str").innerHTML = str;
if (document.getElementByID(location) == null) {
document.getElementById("error").innerHTML += ">> error, can not find the div, "
+ location + "\n";
}
document.getElementByID(location).innerHTML = str;
}
</script>
Check for xmlhttp.status != 200 and print out an error. Print out the readystate and status on each call to onreadystatechange. I think you will see an error message in statusText.
These days it is recommended to not use the onreadystatechange callback. I use the code below. Note that if the server does not respond and does not close the connection that your request won't timeout for quite some time (2-5 minutes) - either in your code or that below. If it is sitting there, shut down the server. You will get an immediate error response then.
var req = new XMLHttpRequest(),
done = function(response) {
callback(cache[uri.split('/').pop()] = cache[uri] = response);
};
req.open("GET", uri + ".lispz", true);
req.onerror = function(err) {
done({
uri: uri,
error: err
});
}
req.onload = function() {
return (req.status != 200) ? req.onerror(req.statusText) : done(run(req.responseText));
};
req.send();
Can someone tell me why this will not work in Joomla 2.5 but does in 1.5?
The error I'm receiving is - Uncaught TypeError: Cannot read property 'childNodes' of null ajax.php:33
If I enter in the url: index.php?option=com_mmg&controller=ajax&task=listModels&make_id=3
It outputs the ajxGetModels function like it's suppose to.
I know Joomla 2.5 Ajax Calls got changed or something like that but, I can't find a solution online to convert what I have below to the 2.5 version way of doing so.
Any help or direction would be very useful. Thank you.
function ajxGetModels(reload)
{
if (reload) {
var use_make = 'sel_make_id';
} else {
var use_make = 'make_id';
}
var make_id = document.getElementById(use_make).value;
var xhr = createXHR();
xhr.onreadystatechange = function() {
if (xhr.readyState == 4) {
if (xhr.status == 200) {
var model=document.getElementById("model_id");
try //Internet Explorer
{
xmlDoc=new ActiveXObject("Microsoft.XMLDOM");
xmlDoc.async="false";
xmlDoc.loadXML(xhr.responseText);
}
catch(e)
{
try //Firefox, Mozilla, Opera, etc.
{
parser=new DOMParser();
xmlDoc=parser.parseFromString(xhr.responseText,"text/xml");
}
catch(e) {alert(e.message)}
}
var options =xmlDoc.getElementsByTagName("options").item(0);
model.innerHTML='';
for (i=0; i < options.childNodes.length; i++){
var newoption=document.createElement("option");
var myoption=options.childNodes[i];
var newtext=document.createTextNode(myoption.childNodes[0].nodeValue);
newoption.setAttribute("value",myoption.getAttributeNode("id").value)
newoption.appendChild(newtext);
model.appendChild(newoption);
}
document.getElementById('model_id').disabled=false;
document.getElementById('year_id').innerHTML='';
document.getElementById('year_id').disabled=true;
if (reload) {
var preVal = document.getElementById('sel_model_id').value;
setMmgVal('model_id',preVal);
ajxGetYears(true);
}
} else {
alert('Error code ' + xhr.status);
}
}
}
xhr.open("GET","index.php?option=com_mmg&controller=ajax&task=listModels&make_id="+make_id,true);
xhr.send(null);
}
function createXHR() {
var xhr = null;
if (window.XMLHttpRequest) {
xhr = new XMLHttpRequest();
} else if (window.ActiveXObject) {
try {
xhr = new ActiveXObject('Microsoft.XMLHTTP');
} catch (e) {}
}
return xhr;
}
It was not working because $error_reporting was set to "maximum" in configuration.php.
Still though - there has to be a better way.
I'm performing AJAX using the following code:
function main() {
// get the name fields
var name1 = document.getElementById("name1").value;
var name2 = document.getElementById("name2").value;
// Encode the user's input as query parameters in a URL
var url = "response.php" +
"?name1=" + encodeURIComponent(name1) +
"&name2=" + encodeURIComponent(name2);
// Fetch the contents of that URL using the XMLHttpRequest object
var req = createXMLHttpRequestObject();
req.open("GET", url);
req.onreadystatechange = function () {
if (req.readyState == 4 && req.status == 200) {
try {
// If we get here, we got a complete valid HTTP response
var response = req.responseText; // HTTP response as a string
var text = JSON.parse(response); // Parse it to a JS array
// Convert the array of text objects to a string of HTML
var list = "";
for (var i = 0; i < text.length; i++) {
list += "<li><p>" + text[i].reply + " " + text[i].name + "</p>";
}
// Display the HTML in the element from above.
var ad = document.getElementById("responseText");
ad.innerHTML = "<ul>" + list + "</ul>";
} catch (e) {
// display error message
alert("Error reading the response: " + e.toString());
}
} else {
// display status message
alert("There was a problem retrieving the data:\n" + req.statusText);
}
}
req.send(null);
}
// creates an XMLHttpRequest instance
function createXMLHttpRequestObject() {
// xmlHttp will store the reference to the XMLHttpRequest object
var xmlHttp;
// try to instantiate the native XMLHttpRequest object
try {
// create an XMLHttpRequest object
xmlHttp = new XMLHttpRequest();
} catch (e) {
// assume IE6 or older
try {
xmlHttp = new ActiveXObject("Microsoft.XMLHttp");
} catch (e) {}
}
// return the created object or display an error message
if (!xmlHttp) alert("Error creating the XMLHttpRequest object.");
else return xmlHttp;
}
This works exactly as planned, the code within the try block is executed perfectly. But the alert "There was a problem retrieving the data: is also activated, with req.statusText displaying "OK".
How can this be possible? How can the code within the if statement activate perfectly but at the same time the else block is activated?
I'm stumped, any ideas?
The servor code is simply:
<?php
if( $_GET["name1"] || $_GET["name2"] ) {
$data = array(
array('name' => $_GET["name1"], 'reply' => 'hello'),
array('name' => $_GET["name2"], 'reply' => 'bye'),
);
echo json_encode($data);
}
?>
And the HTML:
<input id="name1">
<input id="name2">
<div id="responseText"></div>
<button onclick="main();">Do Ajax!</button>
Your conditional is probably being activated when req.readyState == 3 (content has begun to load). The onreadystatechange method may be triggered multiple times on the same request. You only care about what happens when it's 4, so refactor your method to only test when that is true:
var req = createXMLHttpRequestObject();
req.open("GET", url);
req.onreadystatechange = function() {
if (req.readyState == 4) {
if (req.status == 200) {
try {
// If we get here, we got a complete valid HTTP response
var response = req.responseText; // HTTP response as a string
var text = JSON.parse(response); // Parse it to a JS array
// Convert the array of text objects to a string of HTML
var list = "";
for (var i = 0; i < text.length; i++) {
list += "<li><p>" + text[i].reply + " " + text[i].name + "</p>";
}
// Display the HTML in the element from above.
var ad = document.getElementById("responseText");
ad.innerHTML = "<ul>" + list + "</ul>";
} catch(e) {
// display error message
alert("Error reading the response: " + e.toString());
}
} else {
// display status message
alert("There was a problem retrieving the data:\n" + req.statusText);
}
}
};
req.send(null);
In the following piece of JavaScript code, i'm executing GetData.php using AJAX. However, when i remove the comments to see the request object's state property, it turns up as undefined, although the PHP script is getting executed properly and my page is changing as i want it to. But i still need the state property. Any clue on what's going on here ?
function refreshPage()
{
var curr = document.getElementById('list').value;
var opts = document.getElementById('list').options;
for(var i=0;i<opts.length;i++)
document.getElementById('list').remove(opts[i]);
var request = new XMLHttpRequest();
request.onreadystatechange=
function()
{
if(request.readyState == 4)
{
//alert(request.state);
//if(request.state == 200)
{
fillOptions();
var exists = checkOption(curr);
var opts = document.getElementById('list').options;
if(exists == true)
{
for(var i=0;i<opts.length;i++)
if(curr == opts[i])
{
opts[i].selected = true;
break;
}
}
else
{
opts[0].selected = true;
}
refreshData();
}
/*else
{
alert(request.responseText);
//document.close();
}*/
}
}
request.open("GET","GetData.php?Address=" + address + "&Port=" + port,true);
request.send();
}
Do you mean request.status not request.state?
Try changing it to the .status and it should work just fine :)