Develop Reference

Chrome App: Cannot retrieve file load status

My Chrome app has a function that asks for a file to be loaded by another function, checks that the function has set a flag signifying success (External.curFile.lodd), then attempts to process it. My problem is that the flags are not set the first time I call the function, but when I call it a second time the flags are already set.
I had a feeling this has to do with Chrome file functions being asynchronous, so I had the first function idle for a bit while the file loads. The first load never succeeds, no matter how long I wait, but the second load always does!
Calling Function:
function load_by_lines_from_cur_dir( fileName, context ){ // determine the 'meaning' of a file line by line, return last 'meaning', otherwise 'null'
var curLineMeaning = null;
var lastLineValid = true;
External.read_file_in_load_path(fileName); // 'External' load 'fileName' and reads lines, REPLacement does not see this file
// This is a dirty workaround that accounts for the fact that 'DirectoryEntry.getFile' is asynchronous, thus pre-parsing checks fail intil loaded
var counter = 0, maxLoops = 10;
nuClock();
do{
sleep(500);
counter++;
preDebug.innerText += '\r\nLoop:' + counter + " , " + time_since_last();
}while( !External.curFile.lodd && (counter < maxLoops) ); //idle and check if file loaded, 5000ms max
preDebug.innerText += '\r\nLoaded?:' + External.curFile.lodd;
preDebug.innerText += '\r\nLines?:' + External.curFile.lins;
if( External.curFile.lodd ){ // The last load operating was successful, attempt to parse and interpret each line
// parse and interpret lines, storing each meaning in 'curLineMeaning', until last line is reached
while(!External.curFile.rEOF){
curLineMeaning = meaning( s( External.readln_from_current_file() ), context);
preDebug.innerText += '\r\nNext Line?: ' + External.curFile.lnnm;
preDebug.innerText += '\r\nEOF?: ' + External.curFile.rEOF;
}
} // else, return 'null'
return curLineMeaning; // return the result of the last form
}
which calls the following:
External.read_file_in_load_path = function(nameStr){ // Read the lines of 'nameStr' into 'External.curFile.lins'
External.curPath.objt.getFile( // call 'DirectoryEntry.getFile' to fetch a file in that directory
nameStr,
{create: false},
function(fileEntry){ // action to perform on the fetched file, success
External.curFile.name = nameStr; // store the file name for later use
External.curFile.objt = fileEntry; // store the 'FileEntry' for later use
External.curFile.objt.file( function(file){ // Returns 'File' object associated with selected file. Use this to read the file's content.
var reader = new FileReader();
reader.onload = function(e){
External.curFile.lodd = true; // File load success
};
reader.onloadend = function(e){
//var contents = e.target.result;
// URL, split string into lines: http://stackoverflow.com/questions/12371970/read-text-file-using-filereader
External.curFile.lins = e.target.result.split('\n'); // split the string result into individual lines
};
reader.readAsText(file);
External.curFile.lnnm = 0; // Set current line to 0 for the newly-loaded file
External.curFile.rEOF = false; // Reset EOF flag
// let's try a message instead of a flag ...
/*chrome.runtime.sendMessage({greeting: "hello"}, function(response) {
console.log(response.farewell);
});*/
} );
},
function(e){ External.curFile.lodd = false; } // There was an error
);
};
This app is a dialect of Scheme. It's important that the app knows that the source file has been loaded or not.

I didn't read through all of your code, but you can't kick off an asynchronous activity and then busy-wait for it to complete, because JavaScript is single threaded. No matter what's happened, the asynchronous function won't be executed until the script completes its current processing. In other words, asynchronous does not imply concurrent.
Generally speaking, if task A is to be performed after asynchronous task B completes, you should execute A from the completion callback for B. That's the straightforward, safe way to do it. Any shortcut, to achieve better responsiveness or to simplify the code, is going to have dependency or race-condition problems, and will require lots of horsing around to get right. Even then, it will be hard to prove that the code operates correctly on all platforms in all circumstances.

selectSingleNode overwrite/override crossbrowser

basically ive been tasked with fixing an none cross browser application. problem is its over use of the .selectSingleNode function. (which ofc is IE only).
i have a replacement being:
function selectOneNode(key, node) {
try {
Response = node.selectSingleNode(key);
}
catch (err) {
var xpe = new XPathEvaluator();
var nsResolver = xpe.createNSResolver(node.ownerDocument == null ? node.documentElement : node.ownerDocument.documentElement);
var results = xpe.evaluate(key, node, nsResolver, XPathResult.FIRST_ORDERED_NODE_TYPE, null);
//Response.ErrorNumber = results.singleNodeValue.text.toString().ToInt();
Response = results.singleNodeValue;
}
return Response;
}
but this .selectSingleNode function is used well over 2000 times in many files, but have no idea how to override the .selectSingleNode function, so i don't need change every instance.
any help?

If u want to override some function you can just write it once again. I've had similar problem but with alert function. I've just done such thing:
function alert(){
//custom code goes here
}

Jquery error in IE

i have been trying to figure this out for the past couple hours and was hoping someone here could help out. I am using JQuery 1.6.4 to make an ajax call when a button is clicked and populate the contents of a table with the results. The code works as it should in all browsers except IE. When i run it in IE, some values are populated and the rest are not, very strange!
When i run the script and use IE's debugging tool i get the following error;
Unexpected call to method or property access (line 3)
Does anyone know what i'm doing wrong? Here is my code that runs the ajax;
$(document).ready(function(){
$("#find").click(function () {
//Set kinase
var kinaseEntry = $("#kinaseEntry").val();
var dataString = "kinaseEntry=" + kinaseEntry;
//Fetch list from database
$.ajax({
type : "GET",
url : "http://www.webaddress/php/post.php",
datatype: "json",
data: dataString,
success : function(datas) {
//SET VARIABLES TO BE USED THROUGHOUT PAGE
var kinaseName = (datas.skuName);
var molecularWeight = (datas.molecularWeight);
var kinaseConc = (datas.kinaseConc);
var anti1Name = (datas.antiName);
var anti2Name = (datas.antiName2);
var antiConc = (datas.antiConc);
var antiConc2 = (datas.antiConc2);
var tracerName = (datas.tracerName);
var tracerConc = (datas.tracerConc);
var tracerStockConc = (datas.tracerStockConc);
var tracerSku = (datas.tracerSku);
var kinaseSku = (datas.kinaseSku);
var antiSku = (datas.antiSku);
var antiSku2 = (datas.antiSku2);
var bufferName = (datas.bufferName);
var bufferSku = (datas.bufferSku);
//REAGENT NAMES
$(".kinaseName").html(kinaseName + " (" + molecularWeight + " kDa)");
$(".anti1Name").html(anti1Name);
$(".anti2Name").html(anti2Name);
$(".tracerName").html(tracerName);
$(".bufferName").html(bufferName);
//DEFAULT VALUES
$(".defaultKinaseConc").html(kinaseConc);
$(".defaultAntiConc").html(antiConc);
$(".defaultAnti2Conc").html(antiConc2);
$(".defaultTracerConc").html(tracerConc);
$("#molecularWeight").val(molecularWeight);
$("#tracerStockConc").val(tracerStockConc);
//INSERT DEFAULTS INTO INPUT
$("#userKinaseConc").val(kinaseConc);
$("#userAntibodyConc1").val(antiConc);
$("#userAntibodyConc2").val(antiConc2);
$("#userTracerConc").val(tracerConc);
},
error : function (XMLHttpRequest, textStatus, errorThrown) {
console.log("error :"+XMLHttpRequest.responseText);
}
});
return false;
}); });
The names populate fine and the first default value gets populated, but the rest breaks. Any help would be greatly appreciated.
Here are the results of my console.log();
antiConc
"2"
antiConc2
"2"
antiName
"Biotin-anti-His"
antiName2
"Eu-Streptavidin"
antiSku
"PV6089"
antiSku2
"PV5899"
bufferName
"Kinase Buffer A"
bufferSku
"PV3189"
cleanSKU
null
kinaseConc
"5"
kinaseSku
"P3049"
molecularWeight
"125.4"
skuName
"ABL1"
tracerConc
"100"
tracerName
"Kinase Tracer 1710"
tracerSku
"PV6088"
tracerStockConc
"25"

Are you sure it's working properly in other browsers, or are they just not breaking as significantly.
I'm guessing you have mixed updates happening here (a distinction presumed from val() and html() use). I notice a pattern whereby elements retrieved by id (e.g., #userKinaseConc) and those retrieved by class (e.g., .kinaseName) are using val() and html() respectively. However, #defAntiCon breaks that pattern. You're using html() for this element. Is this element an input or other form field? Should this be val()?
The experience you describe can be re-created by attempting to apply a value to an input field via html() setter rather than val(), with the exception that it still doesn't work for that specific field in all values... browsers other than IE just fail differently and the error becomes non-breaking. In IE, it will break execution. Is #defAntiCon actually being populated based on data returned in other browsers?

IE8 Is strict about HTML insertion. If your markup is invalid, or either have HTML5 specific tags, it will throw an error.
I have no real solution, but I'd follow this steps to make it works.
Make sure your datas contains valid HTML, make sure you have no extra closing tags or syntax error (you can use a validator if needed)
If you are using HTML5 tags, you could try to use html5shiv to make sure the browser will understand all the tags
Make sur you don't use .val() instead of .html() in some cases
You should replace .html(datas.foo) by .text(datas.foo) since you are passing string to the method.
In case you don't find any solutions, you could add a catch block in jQuery resolveWith method (referring to your comment) by doing the following changes :
replace this :
resolveWith: function ( context, args ) {
if ( !cancelled && !fired && !firing ) {
// make sure args are available (#8421)
args = args || []; firing = 1;
try {
while ( callbacks[ 0 ] ) { callbacks.shift().apply( context, args ); }
} finally {
fired = [ context, args ];
firing = 0;
}
}
return this ;
},
with this :
resolveWith: function ( context, args ) {
if ( !cancelled && !fired && !firing ) {
// make sure args are available (#8421)
args = args || []; firing = 1;
try {
while ( callbacks[ 0 ] ) { callbacks.shift().apply( context, args ); }
} catch (err) {
} finally {
fired = [ context, args ];
firing = 0;
}
}
return this ;
},
Bug on the try-finally in IE is reported here
Hope this helps.
Edit : As #Josh mentionned in the comment, the bug has been reported and resolved in this commit for jQuery 1.7.x. A simple update of your jQuery should works.

External interface and Internet Explorer 9 issue

Boy-oh-boy do I hate external interface. I have a video player that utilizes external interface to control the flash object and to allow the flash object to pass messages to the same javascript. For a time it worked well in all browsers. Then a few days ago i went to go test it in all browsers before i moved the project out of development, and found that the application broke in internet explorer 9. The following error appeared in the console:
SCRIPT16389: Could not complete the operation due to error 8070000c.
jquery.min.js, line 16 character 29366
My javascript file is really long but here are the important parts. All my actions are contained in an object that i created. Inside one of my methods i have the following lines:
var that = this;
that.stop();
here are all the methods that get called as a result of that method:
this.stop = function(){
var that = this;
console.log('stop called');
that.pause();
that.seek(0);
that.isPlaying = false;
console.log('stop finished');
};
this.pause = function(){
var that = this;
console.log('pause called');
if(that.player == 'undefined' || that.player == null){
that.player = that.GetMediaObject(that.playerID);
}
that.player.pauseMedia(); //external interface call
that.isPlaying = false;
console.log('pause finished');
};
this.seek = function(seek){
var that = this;
console.log('seek called');
if(that.player == 'undefined' || that.player ==null){
console.log("player="+that.player+". resetting player object");
that.player = that.GetMediaObject(that.playerID);
console.log("player="+that.player);
}
that.player.scrubMedia(seek); //external interface call
console.log('seek finished');
};
//this method returns a reference to my player. This method is call once when the page loads and then again as necessary by all methods that make external interface calls
this.GetMediaObject = function(playerID){
var mediaObj = swfobject.getObjectById(playerID);
console.log('fetching media object: ' +mediaObj );
//if swfobject.getObjectById fails
if(typeof mediaObj == 'undefined' || mediaObj == null){
console.log('secondary fetch required');
var isIE = navigator.userAgent.match(/MSIE/i);
mediaObj = isIE ? window[playerID] : document[playerID];
}
return mediaObj;
};
Here's the output from my console.log statments:
LOG: fetching media object: [object HTMLObjectElement]
LOG: video-obj-1: ready
LOG: stop called
LOG: pause called
LOG: pause finished
LOG: seek called
LOG: player=[object HTMLObjectElement]
SCRIPT16389: Could not complete the operation due to error 8070000c.
jquery.min.js, line 16 character 29366
The interesting thing is that it appears that the first external interface call 'that.player.pauseMedia()' doesn't have any issue, but the subsequent call to 'that.player.scrubMedia(0)' fails. Another odd thing is that it points to jquery as the source of the error, but there's no call to jquery in those functions.
Here's what i know it's not. It is not an issue where my timing is off. The last line of my actionscript sends a message to the javascript when the flash object has completely loaded. Also i set the parameter 'allowScriptAccess' to 'always' so it's not that either. The actionscript file we use has been used in previous projects so i am 90% certain that that is not the issue.
here's my actionscript anyways. I didn't write actionscript and i'm not too familiar with the language but I tried to put in the parts that seemed most pertinent to my application:
flash.system.Security.allowDomain("*.mydomain.com");
import flash.external.ExternalInterface;
// variables to store local information about the current media
var mediaEmbedServer:String = "www";
var mediaPlayerID:String;
var mediaFile:String;
var mediaDuration:Number;
// variables to be watched by actionscript and message javascript on changes
var mediaPositions:String = "0,0"; // buffer position, scrub position
var mediaStatus:String;
var netStreamClient:Object = new Object();
netStreamClient.onMetaData = metaDataHandler;
netStreamClient.onCuePoint = cuePointHandler;
var connection:NetConnection;
var stream:NetStream;
var media:Video = new Video();
// grab the media's duration when it becomes available
function metaDataHandler(info:Object):void {
mediaDuration = info.duration;
}
function cuePointHandler(info:Object):void {
}
connection = new NetConnection();
connection.addEventListener(NetStatusEvent.NET_STATUS, netStatusHandler);
connection.addEventListener(SecurityErrorEvent.SECURITY_ERROR, securityErrorHandler);
try {
var paramName:String;
var paramValue:String;
var paramObject:Object = LoaderInfo(this.root.loaderInfo).parameters;
for (paramName in paramObject) {
paramValue = String(paramObject[paramName]);
switch (paramName){
case "server":
mediaEmbedServer = paramValue;
break
case "playerID":
mediaPlayerID = paramValue;
break
}
}
} catch (error:Error) {
}
if (mediaEmbedServer == "dev" || mediaEmbedServer == "dev2"){
connection.connect("rtmp://media.developmentMediaServer.com/myApp");
} else {
connection.connect("rtmp://media.myMediaServer.com/myApp");
}
function securityErrorHandler(event:SecurityErrorEvent):void {
trace("securityErrorHandler: " + event);
}
function connectStream():void {
stream = new NetStream(connection);
stream.soundTransform = new SoundTransform(1);
stream.addEventListener(NetStatusEvent.NET_STATUS, netStatusHandler);
stream.client = netStreamClient;
media.attachNetStream(stream);
media.width = 720;
media.height = 405;
addChild(media);
}
function netStatusHandler(stats:NetStatusEvent){
switch (stats.info.code){
case "NetConnection.Connect.Success":
connectStream();
break;
case "NetConnection.Call.BadVersion":
case "NetConnection.Call.Failed":
case "NetConnection.Call.Prohibited":
case "NetConnection.Connect.AppShutdown":
case "NetConnection.Connect.Failed":
case "NetConnection.Connect.InvalidApp":
case "NetConnection.Connect.Rejected":
case "NetGroup.Connect.Failed":
case "NetGroup.Connect.Rejected":
case "NetStream.Connect.Failed":
case "NetStream.Connect.Rejected":
case "NetStream.Failed":
case "NetStream.Play.Failed":
case "NetStream.Play.FileStructureInvalid":
case "NetStream.Play.NoSupportedTrackFound":
case "NetStream.Play.StreamNotFound":
case "NetStream.Seek.Failed":
case "NetStream.Seek.InvalidTime":
// report error status and reset javascriptPlay
clearInterval(progressInterval);
messageStatus("error");
break;
default:
// check time through file to determine if media is over
if (stream.time > 0 && stream.time >= (mediaDuration - .25)){
// reset media if it has ended
clearInterval(progressInterval);
stream.play(mediaFile, 0, 0);
messageStatus("finished");
}
}
};
var progressInterval:Number;
// respond to a play/pause request by playing/pausing the current stream
function pauseMedia(){
clearInterval(progressInterval);
if (mediaStatus == 'playing'){
stream.pause();
messageStatus("paused");
}
};
ExternalInterface.addCallback( "pauseMedia", pauseMedia );
// respond to a scrub request by seeking to a position in the media
function scrubMedia(newPosition){
clearInterval(progressInterval);
if (mediaStatus == "playing"){
stream.pause();
messageStatus("paused");
}
stream.seek(newPosition * mediaDuration);
var positionSeconds = newPosition * mediaDuration;
messagePositions(positionSeconds+","+positionSeconds);
};
ExternalInterface.addCallback( "scrubMedia", scrubMedia );
ExternalInterface.call("MediaPlayerReady", mediaPlayerID);

Sounds like an undefined expando property which may be caused by a jQuery IE9 bug. The best way to debug it is to remove the userAgent test and replace it with a check for the object element, such as:
document.getElementsByTagName("object")[0].outerHTML
to see whether the ID attribute is being changed after the first click by jQuery.

I had this problem using JPEGCam, which also uses flash's external interface. My webcam control was being loaded dynamically within a div, and would then throw this error in IE (not firefox or chrome). After moving the initialization of my flash control to document.ready in the parent page, then hiding/showing/moving the control as needed, i was able to work around this exception.
Hope that helps.

JSON/PrototypeJS - why does this only work SOMETIMES?

This is driving me nuts!
I'm getting some JSON from my server:
{"id262":{"done":null,"status":null,"verfall":null,"id":262,"bid":20044,"art":"owner","uid":"demo02","aktion":null,"termin_datum":null,"docid":null,"gruppenid":null,"news":"newsstring","datum":"11.06.2010","header":"headerstring","for_uid":"demo01"},
"id263":{"done":null,"status":"pending","verfall":null,"bid":20044,"id":263,"uid":"demo02","art":"foo","aktion":"dosomething","termin_datum":"11.06.2010","docid":null,"gruppenid":null,"datum":"11.06.2010","news":"newsstring","for_uid":"demo01","header":"headerstring"},
"id261":{"done":null,"status":null,"verfall":null,"id":261,"bid":20044,"art":"termin","uid":"demo02","aktion":null,"termin_datum":"25.06.2010","docid":null,"gruppenid":null,"news":"newsstring","datum":"11.06.2010","header":"headerstring","for_uid":null}}
This is how my JS looks like:
var user = 'demo02';
new Ajax.Request('myscript.pl?someparameter=value', { method:'get',
onSuccess: function(transport){
var db_json = transport.responseText.evalJSON(),
propCount = 0,
someArray1 = [],
someArray2 = [],
otherArray = [];
//JSON DEBUG
console.log('validated string:');
console.log(transport.responseText.evalJSON(true));
for(var prop in db_json) {
propCount++;
if ( (db_json[prop].art == 'foo') && (db_json[prop].for_uid == user) ) {
someArray1.push(db_json[prop]);
} else if( (db_json[prop].art == 'foo') && (db_json[prop].uid == user) ) {
someArray2.push(db_json[prop]);
} else if( db_json[prop].art == 'log' ) {
otherArray.push(db_json[prop]);
}
}
if(someArray1.length>0) {
someArray1.map(function(el){
$('someArray1target').innerHTML += el.done;
//do more stuff
});
}
if(someArray2.length>0) {
someArray2.map(function(el){
$('someArray2target').innerHTML += el.done;
//do more stuff
});
}
});
Sometimes, it works perfectly.
Sometimes, i get my JSON String (it appears in Firebug's "answer"-tab), but it won't log the JSON in console-log(). I'm not getting any errors and javascript is still working.
Next time after reloading, it might work, but it might not.
I cannot remotely imagine why this only happens sometimes!

You are calling evalJSON twice, actually with different parameters each time.
Normally, I wouldn't expect this to have any side-effects, and indeed the prototype documentations for this method don't mention any. However, I remember that earlier versions of firebug were known to manipulate the XMLHttpRequest in weird ways (in order to capture the data going in and out), so maybe this is still relevant today.
Try changing the log statement to this instead:
console.log(db_json);

I found the answer. It makes me want to slam my head. My $('someArray1target') div sometimes was not loaded yet.
I was so focused in finding something weird in my JSON instead of searching for the more obvious, "standard" errors.