My chrome extension to inject css wont work - javascript

I am busy developing a chrome extension.
What it will do:
Get data from a PHP page (XMLHttpRequest)
Split the result variable using .split
And when someone clicks on a div, it will call a function to insert a css file with that name I got in number 1.
My problem:
Well nothing happens when I click that button. It works when I used the variable, "newvar", instead of the variable, "currenttheme" from the XMLHttpRequest. I tried converting it to a string as well using .toString. Oh, alerting the variable does work and gives exactly the same response as newvar.
My code: (Sigh!)
//My XMLHttpRequest
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
user_data = xmlhttp.responseText;
window.user_data = user_data;
processdata();
}
}
xmlhttp.open("GET","http://localhost:8888/myphppage.php",true);
xmlhttp.send();
function processdata() {
//split result variable from PHP
var downdata = user_data.split('|||||');
var installedthemes = downdata[0];
currenttheme = downdata[1].toString();
window.currenttheme = currenttheme.toString();
}
function click(e) {
newvar = "001";
//insert css - works with variable newvar but not with this one
chrome.tabs.insertCSS(null,
{file:currenttheme + ".css"});
//alerting the variable works, exactly the same as newvar
alert (currenttheme);
}
document.addEventListener('DOMContentLoaded', function () {
var divs = document.querySelectorAll('div');
for (var i = 0; i < divs.length; i++) {
divs[i].addEventListener('click', click);
}
});

window.user_data = user_data;// <- not required. user_data = xmlhttp.responseText implies user_data is global to this window.
window.currenttheme = currenttheme.toString(); <<- not required too
also downdata[1] IS a string so replace
currenttheme = downdata[1].toString();
with
currenttheme = downdata[1];
If this doesn't help, try alert(currenttheme); and see if you are getting the required theme name, because sometimes PHP can throw errors and die which may not produce a "|||||". Check the php output and alert the xmlhttp.responseText too to see if everything is OK.

Related

Giving an attribute to an xmlhttprequest object

I have the following code :
<head>
<script>
function startChanging() {
var elems = document.getElementsByTagName("img");
for(var i=0; i < elems.length; i++)
{
var xmlhttp;
if (window.XMLHttpRequest)
{
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{
// code for IE6, IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp["elem"] = elems[i];
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
this["elem"].src = xmlhttp.responseText;
}
}
xmlhttp.open("GET", "http://myurl.com/somescript.php", true);
xmlhttp.send();
}
};
</script>
</head>
<body onload="startChanging()">
<img src="https://www.google.com/images/srpr/logo11w.png">
<br/>
<img src="https://www.google.com/images/srpr/logo11w.png">
<br/>
<img src="https://www.google.com/images/srpr/logo11w.png">
</body>
Even though I create a new instance of XMLHttpRequest for each iteration and add the current element to an attribute, when the request returns a response only the last img element is changed.
I am looking for a simple solution to change the src of the img element without iterating through all the elements again when the response comes. I would like a pure Javascript solution (read: no JQuery).
I am certainly doing something wrong here I just don't understand what. Any help would be appreciated.
In your for loop, you are overwriting the xmlhttp variable so when you get into the onreadystatechage function and you check the value of xmlhttp.readyState, it will not be checking the right object.
I'd suggest this fix which changes two things:
It puts each ajax call into it's own IIFE which keeps the xmlhttp variable separate for each ajax call.
It passes elems[i] into the closure so you don't have to do the property saving hack.
Code:
function startChanging() {
var elems = document.getElementsByTagName("img");
for(var i=0; i < elems.length; i++)
{
(function(obj) {
var xmlhttp;
if (window.XMLHttpRequest)
{
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{
// code for IE6, IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
obj.src = xmlhttp.responseText;
}
}
xmlhttp.open("GET", "http://myurl.com/somescript.php", true);
xmlhttp.send();
})(elems[i]);
}
};
One possible approach:
xmlhttp.onreadystatechange = function() {
if (this.readyState === 4 && this.status === 200) {
this.elem.src = this.responseText;
}
}
As you see, I've replaced all the references to xmlhttp within that handler function to this.
The problem is even though you've created a new AJAX-serving object at each step of the loop, each newly-created 'readystatechange' handler function referred to the same object known under xmlhttp variable.
In general, this is quite a common problem when someone works with a variable declared within a loop yet referred by functions created in the same loop. Stumble upon this once or twice, and you'll begin to see the pattern. )
xmlhttp.send();
Put data into the send method:
xmlhttp.send(data);
Source: https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest
void send();
void send(ArrayBuffer data);
void send(ArrayBufferView data);
void send(Blob data);
void send(Document data);
void send(DOMString? data);
void send(FormData data);
Where data is a JavaScript variable, you can put anything into. If you want multipart message, you'd use var data = new FormData(); and put data into it using data.append('image', file); for file upload via ajax for example.
If no multipart, simply put anything in like:
data = { images: document.getElementsByTagName("img") }

Displaying binary code of a file in ajax

I want to display the binary code of a music file. But somehow the code below doesn't seem to work. Any suggestions??
function binary() {
var xmlhttp;
if (window.XMLHttpRequest) { // code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
}
else { // code for IE6, IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.open("GET","1.wav",true);
xmlhttp.overrideMimeType("text/plain; charset=x-user-defined");
xmlhttp.onreadystatechange = function(buffer) {
var binaryCode = "";
if (xmlhttp.readyState==4 && xmlhttp.status==200) {
var binStr = this.responseText;
for (var i=0; i<binStr.length; i++) {
var byte = binStr.charCodeAt(i) & 0xff; // get byte at i
binaryCode += byte;
}
}
document.getElementById("result").innerHTML = binaryCode; // should display binary code
};
xmlhttp.send();
}
Not all byte values are expressible in a string and will not appear or cause the string to cut off short.
XMLHttpResponse.ResponseText/ResponseXML will return the http response content as a string. Any byte values of 0 for example will terminate the string.
Have the server return a Base64 representation of the bytes and decode into byte values on the client side.
Your code seems to be working fine on my chrome browser.
What is exactly the problem your are experimenting ?
You may want to display the binary in an hexadecimal form by doing something like:
binaryCode += '0x' + byte.toString(16) + ' '
edit:
this jsfiddle works on my chrome:
http://jsfiddle.net/e6Kfk/
However, i do not think that this method is crossbrowser, especially if you want to deal with ie (haven't tested it though)

Can't get feed in Windows 8 app

I am creating blog reader app for Windows 8 by using RSS feeds. Part of code:
function downloadBlogFeed() {
WinJS.xhr({ url: "http://feeds.feedburner.com/CssTricks" }).then(function (rss) {
var items = rss.responseXML.querySelectorAll("item");
for (var n = 0; n < items.length; n++) {
var article = {};
article.title = items[n].querySelector("title").textContent;
var thumbs = items[n].querySelectorAll("thumbnail");
if (thumbs.length > 1) {
article.thumbnail = thumbs[1].attributes.getNamedItem("url").textContent;
article.content = items[n].textContent;
articlesList.push(article);
}
}
});
}
So, my app can't read feed from FeedBurner. I get this error
Can't load http://feeds.feedburner.com/~d/styles/itemcontent.css. An app can’t load remote web content in the local context.
I've tried http://feeds.feedburner.com/CssTricks?format=xml and http://feeds.feedburner.com/CssTricks?fmt=xml, but the same error.
EDIT: Full code: http://jsfiddle.net/8n67y/
The error you're encountering isn't because you can't read from Feedburner. It's because somewhere in the content that you're attempting to load into the DOM is a reference to a CSS file on the web (itemcontent.css).
When you're operating in the local context, you cannot dynamically load script or CSS from the web, because that poses security risks in the local context.
See here:
http://msdn.microsoft.com/en-us/library/windows/apps/hh465380.aspx
and here:
http://msdn.microsoft.com/en-us/library/windows/apps/hh465373.aspx
for more information on the differences between local and web context, and the restrictions that apply to each.
For your particular case, I think what you should try is parsing the content further (you can set a breakpoint in the above code to examine the XML content being returned by the feed) to determine where the CSS file reference is being returned and either remove it programmatically, if it's in a consistent place, or find another means of eliminating the CSS reference, which appears to be what's causing the exception (based on the limited information above).
What you are trying to do can be done with the below code, instead of WinJS.xhr use the xmlHTTPRequest.
The code below is part of the code I use um my RSS reader and it works pretty well in all situations, we can donwload pictures, text, links.. whatever you can find in the feed (http://feeds.feedburner.com/CssTricks) getting the thumbnails, and all worked fine.
Also I tested it with the following modification,
function connectToURL() {
var url = "";
xmlHttp = GetXmlHttpObject();
if (xmlHttp == null) {
return;
}
xmlHttp.onreadystatechange = stateChanged;
xmlHttp.open("GET", url,true);
xmlHttp.send(null);
}
// your job will actually start on this one...
function stateChanged() {
if(xmlHttp != null )
if (xmlHttp[item.key].readyState == 4 ) {
try {
var xmlDoc = xmlHttp.responseXML.documentElement.getElementsByTagName("TAGYOUWANTTOGET");
for (var i = 0; i < xmlDoc.length; i++) {
xmlDoc[i].getElementsByTagName("TAG")[0].childNodes[0].nodeValue
}
} catch (e) {
//work on the exception
}
}
}
}
function GetXmlHttpObject() {
var xmlHttp = null;
try {
xmlHttp = new XMLHttpRequest();
}
catch(e) {
try {
xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
}
catch(e) {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
}
return xmlHttp;
}

xmlhttprequest variables undefined ONLY in IE8

I have the following script working in all major browsers except for Internet Explorer. All of my variables are coming back undefined.
{
if (window.XMLHttpRequest)
{
xhttp=new XMLHttpRequest();
}
else
{
xhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xhttp.open("GET",dname,false);
xhttp.send();
return xhttp.responseXML;
}
var xmlDoc = loadXMLDoc("nhl_standings_xml.xml");
var x = xmlDoc.getElementsByTagName("nhlall");
Some other info..
xhttp.readystate = 4
xhttp.status=200
I am using .textContent to get the variables, however, I have read that sometimes IE has problems with that. Can someone maybe give me some ideas about alternatives to .textContent?
here is what the rest of code looks like:
document.getElementById('PensWins').innerHTML = var1;
document.getElementById('PensLoses').innerHTML = var3;
document.getElementById('PensOTWins').innerHTML = var8;
var var1 = x[i+3].textContent;
var var3 = x[i+4].textContent;
var var8 = x[i+5].textContent;
'i' is coming from a loop
im asking is there any part of the above IE8 doesn't like? (obviously there is)

Why wont this JS code work if its all on the same line?

I'm writing HTML code for a Java servlet. I first write the code in html/js so I can debug what I'm working on, and then I'll make it a Java string and put it in my servlet. My problem is that the code is working fine when I view it in Firefox from a local html file, but when I view it on my Java servlet, it doesn't work because the js isn't getting called.
What I did was format the html that my servlet generated so that its not all on a single line and ran the code again. This time it worked. I copied this working code into a browser address bar so that it will all be on a single line, and copied that code back into the script in my html file. Now, when the previously working code is on a single line, it doesn't work.
Here's the formatted JS:
var sMax
var holder;
var preSet;
var rated;
var request;
function rating(num){
sMax = 0;
for(n=0; n<num.parentNode.childNodes.length; n++){
if(num.parentNode.childNodes[n].nodeName == "A"){
sMax++;
}
}
if(!rated){
s = num.id.replace("_", '');
a = 0;
for(i=1; i<=sMax; i++){
if(i<=s){
document.getElementById("_"+i).className = "on";
document.getElementById("rateStatus").innerHTML = num.title;
holder = a+1;
a++;
}else{
document.getElementById("_"+i).className = "";
}
}
}
}
function off(me){
if(!rated){
if(!preSet){
for(i=1; i<=sMax; i++){
document.getElementById("_"+i).className = "";
document.getElementById("rateStatus").innerHTML = me.parentNode.title;
}
}else{
rating(preSet);
document.getElementById("rateStatus").innerHTML = document.getElementById("ratingSaved").innerHTML;
}
}
}
function rateIt(me){
if(!rated){
document.getElementById("rateStatus").innerHTML = document.getElementById("ratingSaved").innerHTML + " "+me.title;
preSet = me;
rated=1;
sendRate(me);
rating(me);
}
}
function sendRate(sel){
alert("Your rating was: "+sel.title);
addRating("rating", "?truck=kogibbq?rating="+ sel.id);
}
function addRating(servletName, servletArguments){
var servlet = servletName;
var arg = servletArguments
var req = servlet + arg;
alert(req);
addrequest(req);
request.onreadystatechange = function(){
alert("response received");
}
}
function addrequest(req) {
try {
request = new XMLHttpRequest();
}catch (e) {
try {
request = new ActiveXObject("Microsoft.XMLHTTP");
}catch (e) {
alert("XMLHttpRequest error: " + e);
}
}
request.open("GET", element, true);
request.send(null);
return request;
}
You are missing semi-colons on:
var sMax
and
var arg = servletArguments
Sarfraz has already pointed out the deal-breakers in this code, but for similar problems in the future, I recommend pasting your code into JSLint, for validation.
It'll find a lot of errors that won't actually break your code (but then neither will the lack of semicolons unless you put the entire script in one line), so you don't need to fix every single remark just to get it working, but of course, if you can follow the exact JSLint recommendations, that's usually just great.
There's a ; missing in the first line of your javascript file.

Categories