Develop Reference

Reading argument via vanilla Javascript

Looking for a little advice with the following - i'm passing an onclick event with an argument into JS as follows:
<div class="artistthumb" id="jamesPaterson1" onclick="artistModalOpen('jamesPaterson1')"></div>
This enters the following JS function:
function artistModalOpen(x1) {
var imagePath = document.getElementById(x1).style.backgroundImage;
console.log(x1);
console.log(imagePath);
}
The CSS for the id is:
background-image: url(../img/james_paterson_1.jpg);
So far i'm just logging the 2 console outputs - the first is fine, console displays argument x1 as expected: jamesPaterson1
The second console log doesn't show anything.
I would have expected to see url(../img/james_paterson_1.jpg)
Anyone know why this isn't happening?
Many thanks in advance!

Try getComputedStyle
var imagePath = getComputedStyle(document.getElementById(x1))
.getPropertyValue('background-image');
https://developer.mozilla.org/en-US/docs/Web/API/Window/getComputedStyle
The window.getComputedStyle() method returns an object that reports
the values of all CSS properties of an element after applying active
stylesheets and resolving any basic computation those values may
contain. Individual CSS property values are accessed through APIs
provided by the object or by simply indexing with CSS property names.

Dynamically Loading and Removing Javascript Functions

I'm trying to find a way to inject a new JavaScript functions dynamically without having to do a page reload. I have a form for putting in inventory items and I would like to load or remove functions based on which manufacturer is selected. Trying to research this I thought I could accomplish this with:
document.getElementsByTagName("head")[0].appendChild
The document I was using for examples was taken from http://www.javascriptkit.com/javatutors/loadjavascriptcss.shtml. At first I was not sure if it was calling the file and so as a final test I appended the small snippet:
var petname="Spotty"
alert("Pet Name: " + petname)
and to the end of the .js file and received the alert. I was hoping to make this input page modular and dynamic. The reason I need to replace the functions is because each manufacturer uses what is called a "BOM" number which based on the values gives the unit model, condenser, electrical, etc. The scripting as it stands right now uses the onChange feature so on each drop down selection the BOM number is updated with its correct value. Conversely entering in a BOM number will select the values from the drop down menus. The JavaScript functions work as intended with the onChange's if I place it in the 'head' but when using the .appendChild none of the functions work. Should I be using something else for this?

The best approach to your problem is call a single function which accepts BOM number and manufacture type. Then fetch your unit model, condenser, electrical based upon the manufacture type
Javascript:
function GetDetails(bom, manufactureType){
switch(manufactureType){
case 'blah blah' : <do something>
break;
default:break;
}
}
HTML:
<select onchange="javascript:GetDetails(<pass selected BOM here>, <pass selected MANUFACTURER here>);"></select>

Maybe this library will help you http://yepnopejs.com
Using it you are able to load and execute JS files after some conditions.

js-ctypes from javascript objects

I'm working on a Firefox extension that receives binary images as ArrayBuffers of uint8_t.
In my extension I load a .dll file that has a function that I need to use on that received image. The function takes a ctype.uint8_t.ptr parameter and returns a ctype.uint8_t.ptr value.
I can't seem to find a way of converting the ArrayBuffer to this particular ctype so that I can pass it along to the function. Is there a correct way to do this?
Using ImplicitConvert() gives an Error: argument must be a nonnegative integer.

You should be able to do just:
var a = new Uint8Array(1<<10);
var ptr = new ctypes.uint8_t.ptr(a.buffer);
The stuff is not documented it seems, but there are some tests that demonstrate this.

live function with out arguments in jQuery

I wanna select some item by jQuery which has been added after loading page,so I wanna use live() function.I used it before for clicking like following code:
$("selector").live('click')
but now when I wanna use it in another function.
but It will not work with out argument,like it live()
for e.g followin code will alert test (work)
var pos_eq=Math.abs($('.myList').css("left").replace("px","")/$('.myList').children('li').eq(0).css('width').replace("px","")) + 1;
alert("test");
but this will not.
var pos_eq=Math.abs($('.myList').live().css("left").replace("px","")/$('.myList').live().children('li').eq(0).css('width').replace("px","")) + 1;
alert("test");
how can I solve it?

You want a function, not a variable. It looks like you are trying to keep pos_eq up to date after elements have been added to the page. Having a variable auto-update when the DOM changes in the way you are trying to do is not possible with JavaScript. What you can do is use a function instead of a variable. This way whenever the value is accessed you are getting the latest value because it is computed on demand:
function pos_eq() {
var list = $('.myList');
var left = parseInt(list.css("left"));
var width = parseInt(list.children('li').eq(0).css('width'));
return Math.abs(left / width) + 1;
}
I broke your code up into multiple statements to make it more readable. You would use this function the same as you used the variable, but instead add parens to the end to invoke the function:
alert(pos_eq);
alert(pos_eq());

To get a set of objects at the time you need them, just do $("selector"). That will do a query at that time and get the set of objects. There is no need to use .live() in order to query objects on the page. It does not matter whether the objects were part of the original page or were added dynamically later. When you do $("selector"), it will search the contents of the current page and get you the objects that are currently in the page that match the selector.
There is no way to do a live selector query and save it and have it automatically update in jQuery or any other library I know of. The way you solve that issue with a dynamic page is that you just do a new query when you need current results.

The description of live() is: Attach a handler to the event for all elements which match the current selector, now and in the future. It does not give you a live node list despite its name. jQuery does not have any method that returns a live node list(such as those returned by getElementsByTagName etc.) as far as I know.

onchange attribute won't call function

I have an HTML document (here), which creates an iframe-based media player for a collection of songs within albums (I just used letters to define these albums and songs in the mymusic array, for simplicity).
Focusing on the top 3 iframes, the way I have set out the user interaction is to generate the HTML for forms of available albums and songs using Javascript, and write them to the iframes in the body. If you run it and make a selection in the Albums menu, you will see that the options in the Songs menu correspond with the mymusic array, so this works.
However, when I choose a song, the function nowplaying(trackindex,albumindex) should be called using an onchange event in the Songs form, the same way as in the form generated using showinitial() ... but the function does not get called.
I have ruled out the coding of nowplaying itself as a cause, because even when I change nowplaying to alert("hello"), it does not get called. So this leads me to think the problem is with the onchange attribute in "anything", but I can't see the problem. The way I coded it is no different to before, and that worked fine, so why won't this work?
Any help would be much appreciated!

Firebug is your friend....
i is not defined
function
onchange(event) {
parent.nowplaying(this.SelectedIndex,
i); }(change )
onchange is getting called, but i is not defined when calling nowplaying.
This is the result of this line:
p+="<html><head></head><body><form><select onchange='parent.nowplaying(this.SelectedIndex,i);' size='";
which is using "i" in the string, when it should append it as a variable:
p+="<html><head></head><body><form><select onchange='parent.nowplaying(this.SelectedIndex," + i + ");' size='";
To clarify, i is defined when anything(i) is called, but you aren't writing i into the code, just the letter "i". When nowplaying(this.SelectedIndex,i) is called, i is no longer defined, because you aren't inside of the anything() function anymore. You need to expand i when you append the html to p, so that the value is there and not the variable i.

function anything(i){
p+="...<select onchange='parent.nowplaying(this.SelectedIndex,i);'...";
Your onchange event handler is set from a string. When run, it will not have access to i, which is a local variable from the anything function that has long since gone away.
The simple fix would be:
p+="...<select onchange='parent.nowplaying(this.SelectedIndex,'+i+');'...";
which turns the current value of i at string-making time into an integer literal inside the string.
However, it's not generally a good idea to be creating code from strings. It's normally better to write the event handler as a normal function object:
// You will need the below workaround to get the iframe document in IE too
//
var iframe= document.getElementById('songs');
var idoc= 'contentDocument' in iframe? iframe.contentDocument : iframe.contentWindow.document;
idoc.open();
idoc.write(s);
idoc.close();
idoc.getElementsByTagName('select')[0].onchange= function() {
// This is a closure. The 'i' variable from the parent 'anything' function is
// still visible in here
//
parent.nowplaying(this.selectedIndex, i);
};
However you would generally want to avoid setting handlers from one frame on a different one. I'm not really sure what the iframes are gaining you here other than headaches. Why not just simply use positioned divs with overflow? You can still rewrite their content through innerHTML if you need to... though I would prefer to populate them using DOM methods, to avoid all the HTML-injection problems your current script has.