Develop Reference

How to create a clickable list of divs with sub items using JavaScript

I want to create a list of clickable divs from arrays using Javascript, where the list structure has to be something like this:-
<div id="outerContainer">
<div id="listContainer">
<div id="listElement">
<div id="itemId"> </div>
<div id="itemTitle"> </div>
<div id="itemStatus"> </div>
</div>
<div id="listElement">
<div id="itemId"> </div>
<div id="itemTitle"> </div>
<div id="itemStatus"> </div>
</div>
</div>
</div>
I want to extract the values of itemId, itemTitle and itemStatus from three arrays itemIdData[ ], itemTitleData[ ] and itemStatusData[ ] respectively, to create the whole list.
Also, when I click on any of the listElements, I want an alert showing the itemId. Can anyone help me with this problem.

If you're using jQuery, then try something like this:
$("#listContainer").on("click", "div", function () {
console.log("jQuery Event Delegation");
alert($(this).find(">:first-child").attr("id"));
});
It's possible to write the same thing without jQuery, but will take further lines of code - I'm conveying the idea of delegation here (there are extensive existing docs and examples on the JQuery site, and here on this site).
NB: the code you're submitted in the question can't(shouldn't) have multiple DOM elements with same IDs (that's what classes are for - for semantically similar elements). Also, trying to emulate a list using divs instead of li elements is perhaps not best practice.

After a bit of experimentation, understood what I was doing wrong and how to get it done.
Here's the code:-
var listContainer = document.createElement("div");
document.getElementById("outerContainer").appendChild(listContainer);
for (var i = 0; i < json.length; i++) {
//create the element container and attach it to listContainer.
var listElement = document.createElement("div");
listElement.id = i;
listElement.className = "listItemContainer";
listElement.addEventListener("click", function(e){
var itemId = e.target.children[1].innerHTML;
alert(itemId);
});
listContainer.appendChild(listElement);
//create and attach the subchilds for listElement.
var itemTitle = document.createElement("span");
itemTitle.innerHTML = postTitleData[i];
itemTitle.id = 'title'+i;
itemTitle.className = "itemTitle";
listElement.appendChild(itemTitle);
var itemId = document.createElement("div");
itemId.innerHTML = postIdData[i];
itemId.id = 'id'+i;
itemId.className = "itemId";
listElement.appendChild(itemId);
var itemStatus = document.createElement("span");
itemStatus.innerHTML = postStatusData[i];
itemStatus.id = 'status'+i;
itemStatus.className = "itemStatus";
listElement.appendChild(itemStatus);
}

Tried something like this which isn't quite working!
var listContainer = document.createElement("div");
document.getElementById("outerContainer").appendChild(listContainer);
var listElement = document.createElement("div");
listContainer.appendChild(listElement);
listElement.className = "listItemContainer";
for (var i = 0; i < json.length; i++) {
var itemId = document.createElement("div");
itemId.innerHTML = idData[i];
listElement.appendChild(itemId);
itemId.className = "itemId";
var itemTitle = document.createElement("div");
itemTitle.innerHTML = titleData[i];
listElement.appendChild(itemTitle);
itemTitle.className = "itemTitle";
var itemStatus = document.createElement("div");
itemStatus.innerHTML = statusData[i];
listElement.appendChild(itemStatus);
itemStatus.className = "itemStatus";
listElement.appendChild(document.createElement("hr"));
var elementId = 'ListElement'+i;
listElement.id = elementId;
listElement.addEventListener("click", function(){
alert(document.getElementById(elementId).innerHTML);
});
}

Removing divs dynamically

i have to add multiple thumbnail images(501.jpg,502.jpg etc. added in the gengrid function) in a page each of which opens another image(port.jpg) on click and on clicking another thumbnail image the port.jpg has to be removed. The problem is that the removeChild is not working in this case. Can anyone please help...
here is the code
<script type="text/javascript">
var lastper=null;
function gengrid()
{
var i=0;
var num_stud=8;
var newdiv;
var divIdName;
var maindiv;
for(i=1;i<=num_stud;i++)
{
newdiv = document.createElement('div');
divIdName = '50'+i;
newdiv.setAttribute('id',divIdName);
newdiv.setAttribute('onclick','addit('+i+')');
newdiv.innerHTML = '<img src=50'+i+'.jpg alt="a"></img>';
maindiv=document.getElementById('main');
maindiv.appendChild(newdiv);
}
}
gengrid();
function addit(picno)
{
var person = document.getElementById('50'+picno);
if(lastper)
lastper.removeChild('portfolio');
var newdiv = document.createElement('div');
var divIdName = 'portfolio';
newdiv.setAttribute('id',divIdName);
newdiv.innerHTML ='<img src="port.jpg" alt="a"></img>';
person.appendChild(newdiv);
alert(picno+''+lastper.id+person.id);
lastper = document.getElementById('50'+picno);
}
</script>

The main issue is that you're passing a string to the removeChild call. Using
lastper.removeChild(document.getElementById('portfolio'));
instead will fix that problem.
The alert you have is a secondary issue. It'll fail the first time through because "lastper" is null and so doesn't have an id property.

if(lastper){
lastper.removeChild('portfolio');return;}

I don't believe this is a valid ID for an element. An ID must begin with a letter.
lastper = document.getElementById('50'+picno);
What are valid values for the id attribute in HTML?

Try this
function addit(picno)
{
var person = document.getElementById('50'+picno);
lastper = document.getElementById('50'+picno);
if(lastper)
lastper.removeChild('portfolio');
var newdiv = document.createElement('div');
var divIdName = 'portfolio';
newdiv.setAttribute('id',divIdName);
newdiv.innerHTML ='<img src="port.jpg" alt="a"></img>';
person.appendChild(newdiv);
alert(picno+''+lastper.id+person.id);
}

Hover over data using title attribute in javascript

I have a javascript code that displays data in a table format and when hovered over the first column it displays additional details. The hover over code is using jquery tooltip and the title attribute of html. The code works fine in most cases but if one of the fields I am displaying in the hover has " symbol it screws up everything that record onwards and the hover and main data display together and the hover doesnt work on those rows.
below is a snapshot of my code
var medicationName = medJSON.MED_DETAILS[medIdx1].ORDER_NAME;
var orderdetails = medJSON.MED_DETAILS[medIdx1].ORD_DETAILS;
var comments = medJSON.MED_DETAILS[medIdx1].ORD_COMMENTS;
var reqStart = medJSON.MED_DETAILS[medIdx1].REQ_ST_DT;
var originalStart = medJSON.MED_DETAILS[medIdx1].ORIG_ORD_DT;
var lastDose = medJSON.MED_DETAILS[medIdx1].LAST_DOSE;
var nextDose = medJSON.MED_DETAILS[medIdx1].NEXT_DOSE;
var stopDt = medJSON.MED_DETAILS[medIdx1].STOP_DT_TM;
var stopReason = medJSON.MED_DETAILS[medIdx1].STOP_REASON;
var enteredBy = medJSON.MED_DETAILS[medIdx1].ORDER_ENTERED_BY;
var status = medJSON.MED_DETAILS[medIdx1].ORD_STATUS;
var simpleDetails = medJSON.MED_DETAILS[medIdx1].CLIN_DISP_LN;
if(nextDose.length == 0)
{
nextDose = "Not Defined";
}
var medHover = ["<table><tr><td><b>Medication:</b></td><td>",medicationName,"</td></tr>"
,"<tr><td><b>Details:</b></td><td>",simpleDetails,"</td></tr>"
//,"<tr><td><b>Order Comments:</b></td><td>",comments,"</td></tr>"
,"<tr><td><b>Request Start:</b></td><td>",reqStart,"</td></tr>"
,"<tr><td width = 200px><b>Original Order Date/Time:</b></td><td>",originalStart,"</td></tr>"
,"<tr><td><b>Last Documented Dose:</b></td><td>",lastDose,"</td></tr>"
,"<tr><td><b>Next Scheduled Dose:</b></td><td>",nextDose,"</td></tr>"
,"<tr><td><b>Stop Date/Time:</b></td><td>",stopDt,"</td></tr>"
,"<tr><td><b>Stop Reason:</b></td><td>",stopReason,"</td></tr>"
,"<tr><td><b>Order Entered By:</b></td><td>",enteredBy,"</td></tr>"
,"<tr><td><b>Status:</b></td><td>",status,"</td></tr>"
,"</table>"]
tempStr1.push("<tr class = 'evenrow' ><td class = 'cmedname custhvr' title=\"",medHover.join(""),"\">",medicationName,"</td><td> ",simpleDetails,"</td></tr>")
thanks,
Sid

Process medHover with:
medHover.join("").replace('\"', '"');
This replaces the quote character with a value usable with HTML.

Javascript: Problem regarding creating a dropdown list using javascript?

I'm trying to create a dropdown list from an array on my overlay (div element) using javascript.
In this example,
spcodelist = [u'CA125', u'HCM112', u'HCM147', u'HCM97', u'HKI128', u'HKI158', u'HKS161', u'HKS231', u'TKA230']
Here are related lines of code:
var pcode_form = document.createElement('form');
div.appendChild(pcode_form);
var pcode_select = document.createElement('select');
pcode_form.appendChild(pcode_select);
var i = 0;
var spcodelist = document.getElementById('spcodelist').value;
spcodelist = spcodelist.replace("[","");
spcodelist = spcodelist.replace("]","");
var spcodearr = new Array();
spcodearr = spcodelist.split(', ');
for (i=0;i<=spcodearr.length;i++){
spcodearr[i] = spcodearr[i].replace(/u'/g,"");
spcodearr[i] = spcodearr[i].replace(/'/g,"");
var pcode_option = document.createElement('option');
pcode_option.text = spcodearr[i];
pcode_option.value = spcodearr[i];
pcode_select.appendChild(pcode_option);
}
With this code, the dropdown list works fine but code after it will not work any more. I don't know what's the problem? How can I solve it? Or is there any better solution? Thank you very much.

I don't know what you are doing wrong, but the following works fine and should work in any browser. I've added a remove button so you can add and remove the select as often as you like.
<script type="text/javascript">
function addSelect(id) {
var div = document.getElementById(id);
var pcode_form = document.createElement('form');
pcode_form.id = 'f0';
div.appendChild(pcode_form);
var pcode_select = document.createElement('select');
pcode_form.appendChild(pcode_select);
var spcodelist = document.getElementById('spcodelist').value;
// Do replaces in one go
spcodelist = spcodelist.replace(/[\[\]\'u ]/g,'');
var spcodearr = spcodelist.split(',');
for (var i=0, iLen=spcodearr.length; i<iLen; i++) {
pcode_select.options[i] = new Option(spcodearr[i],spcodearr[i]);
}
}
</script>
<button onclick="addSelect('d0');">Add select</button>
<button onclick="
var el = document.getElementById('f0');
el.parentNode.removeChild(el);
">Remove form</button>
<div id="d0"></div>
<textarea id="spcodelist" style="display:none">[u'CA125', u'HCM112', u'HCM147', u'HCM97', u'HKI128', u'HKI158', u'HKS161', u'HKS231', u'TKA230']</textarea>

javascript button works in ie, not firefox or chrome

I'm writing a simple web page that displays a table. It the right column of the table I want to add a button in every row that says 'View'. I wrote a function that does this in ie by creating a button object and setting value = 'view' but in firefox and chrome the button displays with no text. Does anyone know why? Here is my code:
function addRow(id, sender, message){
var theTable = document.getElementById('messageTable');
var lastRow = theTable.rows.length;
var newRow = theTable.insertRow(lastRow);
newRow.id = id;
var cellLeft = newRow.insertCell(0);
var textNode = document.createTextNode(id);
cellLeft.appendChild(textNode);
var secondCell = newRow.insertCell(1);
var textNode2 = document.createTextNode(sender);
secondCell.appendChild(textNode2);
var messageCell = newRow.insertCell(2);
var messageNode = document.createTextNode(message);
messageCell.appendChild(messageNode);
var viewCell = newRow.insertCell(3);
var viewNode = document.createElement('button');
viewNode.value = 'View';
viewNode.onclick = function(){
alert('clicked: ' + id);
};
viewCell.appendChild(viewNode);
}

You have to do viewNode.innerHTML = 'View' since in FF button displays whatever is wrapped by the tag but not the value attribute

<button>s aren't self-closing like <input>s, and don't have a value attribute. You already have the solution in other parts of your code:
viewNode.appendChild(document.createTextNode('View'));
You also don't need to create variables for nodes that you're only using once. You can consolidate your code in a few places by using the above style.