We Keep Coding

Appending option tags to select tag from array using JQuery

I am trying to create an options drop down list in html using JQuery to append from an Array.
Everything appears to be working correctly apart from the text between the opening & closing tags is not appearing. Am I so tired i'm missing a simple typo or doing something wrong?!?
The JS and JQuery code is:
var displayMenuSelections = function(){
var menuSelection = menu[0].prices[0];
var menuItems = Object.keys(menuSelection);
menuItems.forEach(menuFunction);
}
function menuFunction(item){
$('#menu').append($('<option value="' + item + '">' + item + '</option'));
}
The result of a typical option tag looks like this (with the 'item' missing between the opening and closing tags):
<option value="Cafe Latte"></option>

You forgot the > for the closing option tag. JQuery tries to close it for you, and in the process the inner item text doesn't get set.
Jquery takes a philosophy where it sort of tries to work with whatever you give it - this can be both good and bad, but in this case it makes it harder to debug since there's no error/exception that is raised.
var displayMenuSelections = function(){
var menuSelection = menu[0].prices[0];
var menuItems = Object.keys(menuSelection);
menuItems.forEach(menuFunction);
}
function menuFunction(item){
$('#menu').append($('<option value="' + item + '">' + item + '</option>'));
}

It looks to me like you are not passing your parameter
item
to your function
menuFunction(item)
I'm just assuming you are trying to send
var menuSelection
so you can try changing your function call to
menuItems.forEach(menuFunction(menuSelection));
I have not tested this however!

jQuery append with variable as src

Just learning jQuery and cannot get my variable into src when I use append. It either doesn't work at all, or I just get the string representation of my variable name when I look in the console.
This is my offending code:
var $googleURL = "http://maps.googleapis.com/maps/api/streetview?size=600x300&location="+$googleStreet+","+$googleCity;
$($body).append('<img src='$googleURL'></img>');
I don't want to use attr because there is no img tag on the page, just a body tag. Where did I go astray?

please try
$($body).append("<img src='"+ $googleURL + "'></img>");

With Javascript, you can put variables inside strings using +
Like this: "string, " + variable + ", more string"
Try this code, it may work depending on what you're trying to accomplish.
var googleURL = 'http://maps.googleapis.com/maps/api/streetview?size=600x300&location='+googleStreet+','+googleCity;
$($body).append('<img src="' + googleURL + '"></img>');

Add onclick event for tr element dynamically from JavaScript

I am creating a table dynamically, I need to add an onclick event for each element as it is added, but this needs a dynamic parameter add, I have tried the following
trElements[i + 1].onclick = function () {
navigateToController('/Home/Client', "'" + machine.DeviceID + "'");
};
but this shows the onclick event as navigateToController('/Home/Client', "'" + machine.DeviceID + "'")
and not navigateToController('/Home/Client', 'DeviceName'); as I thought it would, I have also tried to have the onclick event in the html, and replace the DEVICEID with the actual deviceid.
var element = trElements[i + 1].outerHTML.replace('DEVICEID', machine.DeviceID);
trElements[i + 1].outerHTML = element;
this shows up as been correct, but when the page is loaded, it still has deviceid in there ?
I am sure it is something really simple... but any pointers would be appreciated.

I'm not entirely sure I understand the question, but it might be a scope issue. You might need to use bind to create the handler with the current value of DeviceID:
var machineId = 0;
function navigateToController(machineId) {
alert(machineId);
}
function addRow() {
var t = document.getElementById('thetable');
var tr = t.insertRow();
var td = tr.insertCell();
td.appendChild(document.createTextNode("machine " + machineId));
tr.addEventListener('click', navigateToController.bind(null, machineId));
machineId++;
}
<button onclick="addRow()">Add Row</button>
<table id="thetable"></table>
but this shows the onclick event as navigateToController('/Home/Client', "'" + machine.DeviceID + "'")
You're not going to see the value of the variable in the markup, if that's what you mean.
Why not just navigateToController('/Home/Client', machine.DeviceID )? It's already a string. No need to try to add quotes around it. You'd end up with a parameter that includes the quotes.
var deviceId = 'theDeviceId';
// This is not what you want. Notice this alert includes the single quotes as part of the string: "'theDeviceId'"
alert( "'" + deviceId + "'");
// This is what you want. This alert has just the (unquoted) value.
alert( deviceId );

The better way to do this is not to do it at all.
Better attach the event handler to existing container (the table in this case seems good) and check for bubbling events.
With jQuery is quite simple:
var myTable = $("table#theTable");
myTable.on("click", "tr", function(){ // Click event handler.
var clickedRow = $(this);
...
});
If you need some data related to each row, simply attach to it in "data-" attributes (i.e. «data-myId="someId"») of the tag. Then you could read them simply by clickedRow.data("myId") from event handler function.
This way you have single function to handle all events for all rows. Simpler and wasting too less mamory.

trElements[i + 1].onclick = (function () {
var deviceId = machine.DeviceID;
return function(){
navigateToController('/Home/Client', "'" + deviceId + "'");
}
})();

ok, so I couldn't get to the bottom of adding an onClick function dynamically, so, I changed my code around, and pass a viewModel array containing all the data I needed to create the table, so when I open the clients view, I send a list of all the relevant clients, and when I select the row I need, I just pass a single viewmodel of the client, I then update the html with the c# code #model.variable. I can easily update these from my signalr code once its created.
thanks for everyones input.
Just to update, I have found a solution I think, I could create the element, add the data to the innerHtml, and use:
setAttribute("onclick", "navigateToController('/Home/Client', '" + deviceId + "')");
I have used this in another part of my solution, and it works...

Trying to covert a variable into its value within a URL

I'm trying to insert a variable's value into a url, but it's not working; I'm just getting the variable not the value
'myid' and 'verif' are the variables and their values are integers.
This code inserts the url into a hidden field in a form
$('#return').val(http://pegdown.com/index.php?option=com_joom_creditspack&controller=paypal&view=paypal&layout=return&task=checkout&myid=myid&packid=1&verif=verif&jcode=xxx111xxx);
How do I write the following url so the variables 'myid' and 'verif' are converted to their values?

Well you are missing quotes so your code would not work at all.
$('#return').val("http://pegdown.com/index.php?option=com_joom_creditspack&controller=paypal&view=paypal&layout=return&task=checkout&myid=" + myid + "&packid=1&verif=" + verif + "&jcode=xxx111xxx");
You should probably use encodeURIComponent()

You need to quotes " " the strings and concat the variables +
Try
$('#return').val("http://pegdown.com/index.php?option=com_joom_creditspack&controller=paypal&view=paypal&layout=return&task=checkout&myid="+myid+"&packid=1&verif="+verif+"&jcode=xxx111xxx");

JavaScript does not support string interpolation. Try something like this.
myIdVal = encodeURIComponent(myId);
verifVal = encodeURIComponent(verif);
var url = "http://pegdown.com/index.php?option=com_joom_creditspack&controller=paypal&view=paypal&layout=return&task=checkout&myid=" + myidVal + "&packid=1&verif=" + verifVal + "&jcode=xxx111xxx";
$('#return').val(url);

A simple string works for me:
given index = 2,
`a.setAttribute("href", "myDirectory/" + index + ".jpg");` links the anchor to
"myDirectory/2.jpg", ie. the file number is taken from variable index.
Not sure if the setAttribute tolerates multiple tokens in its second parameter, but generally, this works.

jQuery selector after dynamically created element

I am trying to get an dynamically created element using a jQuery selector but it is returning an empty array.
The first thing I am doing is grabbing an empty div:
var packDiv = document.getElementById('templates');
packDiv.innerHTML = "";
then adding items to it in a loop:
packDiv.innerHTML = packDiv.innerHTML + "<img id='" + thumbName + "' src='thumbs/" + thumbName + "'/>";
after the loop finishes I try to select an item using:
console.log($("#"+thumbName));
and it returns the empty array. All the things I search on show to use .on but all the examples show that is to set event handlers.
My question is how do I format a selector for dynamically created elements?

Assuming thumbName is a file name, for example foo.jpg, it would not be parsed by jQuery as you would expect. .jpg part of the name is treated as a class name, and since you are not providing this class name for that element, jQuery returns an empty array - it does not find anything matching your selector. You are actually searching for an element with id foo and class name jpg.
The way I would go with this is something along these lines:
var packDiv = $('#templates');
packDiv.empty();
//inside a loop
packDiv.append("<img class='" + thumbName.replace(/\./g,'') + "' src='thumbs/" + thumbName + "'/>");
console.log($("."+thumbName.replace(/\./g,'')));