We Keep Coding

two delimiters output formatting javascript

I thought this would be easier, but running into a weird issue.
I want to split the following:
theList = 'firstword:subwordone;subwordtwo;subwordthree;secondword:subwordone;thirdword:subwordone;subwordtwo;';
and have the output be
firstword
subwordone
subwordtwo
subwordthree
secondword
subwordone
thirdword
subwordone
subwordtwo
The caveat is sometimes the list can be
theList = 'subwordone;subwordtwo;subwordthree;subwordfour;'
ie no ':' substrings to print out, and that would look like just
subwordone
subwordtwo
subwordthree
subwordfour
I have tried variations of the following base function, trying recursion, but either get into infinite loops, or undefined output.
function getUl(theList, splitOn){
var r = '<ul>';
var items = theList.split(splitOn);
for(var li in items){
r += ('<li>'+items[li]+'</li>');
}
r += '</ul>';
return r;
}
The above function is just my starting point and obviously doesnt work, just wanted to show what path I am going down, and to be shown the correct path, if this is totally off base.

It seems you need two cases, and the difference between the two is whether there is a : in your string.
if(theList.indexOf(':') == -1){
//Handle the no sublist case
} else {
//Handle the sublist case
}
Starting with the no sublist case, we develop the simple pattern:
var elements = theList.split(';');
for(var i = 0; i < elements.length; i++){
var element = elements[i];
//Add your element to your list
}
Finally, we apply that same pattern to come up with the implementation for the sublist case:
var elements = theList.split(';');
for(var i = 0; i < elements.length; i++){
var element = elements[i];
if(element.indexOf(':') == -1){
//Add your simple element to your list
} else {
var innerElements = element.split(':');
//Add innerElements[0] as your parent element
//Add innerElements[1] as your child element
//Increment i until you hit another element with ':', adding the single elements each increment as child elements.
//Decrement i so it considers the element with the ':' as a parent element.
}
}

Keep track of the current list to add items to, and create a new list when you find a colon in an item:
var baseParent = $('ul'), parent = baseParent;
$.each(theList.split(';'), function(i, e) {
if (e.length) {
var p = e.split(':');
if (p.length > 1) {
baseParent.append($('<li>').append($('<span>').text(p[0])).append(parent = $('<ul>')));
}
parent.append($('<li>').text(p[p.length - 1]));
}
});
Demo: http://jsfiddle.net/Guffa/eWQpR/
Demo for "1;2;3;4;": http://jsfiddle.net/Guffa/eWQpR/2/

There's probably a more elegant solution but this does the trick. (See edit below)
function showLists(text) {
// Build the lists
var lists = {'': []};
for(var i = 0, listKey = ''; i < text.length; i += 2) {
if(text[i + 1] == ':') {
listKey = text[i];
lists[listKey] = [];
} else {
lists[listKey].push(text[i]);
}
}
// Show the lists
for(var listName in lists) {
if(listName) console.log(listName);
for(var j in lists[listName]) {
console.log((listName ? ' ' : '') + lists[listName][j]);
}
}
}
EDIT
Another interesting approach you could take would be to start by breaking it up into sections (assuming text equals one of the examples you gave):
var lists = text.match(/([\w]:)?([\w];)+/g);
Then you have broken down the problem into simpler segments
for(var i = 0; i < lists.length; i++) {
var listParts = lists[i].split(':');
if(listParts.length == 1) {
console.log(listParts[0].split(';').join("\n"));
} else {
console.log(listParts[0]);
console.log(' ' + listParts[1].split(';').join("\n "));
}
}

The following snippet displays the list depending on your requirements
var str = 'subwordone;subwordtwo;subwordthree;';
var a = []; var arr = [];
a = str;
var final = [];
function split_string(a){
var no_colon = true;
for(var i = 0; i < a.length; i++){
if(a[i] == ':'){
no_colon = false;
var temp;
var index = a[i-1];
var rest = a.substring(i+1);
final[index] = split_string(rest);
return a.substring(0, i-2);
}
}
if(no_colon) return a;
}
function display_list(element, index, array) {
$('#results ul').append('<li>'+element+'</li>');
}
var no_colon_string = split_string(a).split(';');
if(no_colon_string){
$('#results').append('<ul><ul>');
}
no_colon_string.forEach(display_list);
console.log(final);
working fiddle here

Slow highlighting in Firefox

We need to add anchors and highlights for some keywords/sentences in the html page. It turns out the highlighting is really slow in Firefox.
In the following code, all ranges which need to be highlighted are stored in array hiliteRanges:
for (var i = 0; i < hiliteRanges.length; i++){
document.designMode = "on";
var selHilites = window.getSelection();
if (selHilites.rangeCount > 0)
selHilites.removeAllRanges();
selHilites.addRange(hiliteRanges[i]);
var anchorId = 'index'+i;
var insertedHTML = '<span id="' + anchorId + '" style="background-color: #FF8C00;" >'+hiliteRanges[i].toString()+'</span>';
document.execCommand('inserthtml', false, insertedHTML);
document.designMode = "off";
}
Is there any way to speed up the processing? We could have hundreds of ranges in the array hiliteRanges. We once tried moving the designMode setting outside of the loop, but we can see some sections are editable in the html page when the loop is running.

This is my default highlighting snippet and works fine in every browser. Try it out.
Demo: http://jsbin.com/adeneh/1/edit
function highlight(text, words, tag) {
// Default tag if no tag is provided
tag = tag || 'span';
var i, len = words.length, re;
for (i = 0; i < len; i++) {
// Global regex to highlight all matches
re = new RegExp(words[i], 'g');
if (re.test(text)) {
text = text.replace(re, '<'+ tag +' class="highlight">$&</'+ tag +'>');
}
}
return text;
}
// Usage:
var el = document.getElementById('element');
el.innerHTML = highlight(
el.innerHTML,
['word1', 'word2', 'phrase one', 'phrase two', ...]
);
And to unhighlight:
function unhighlight(text, tag) {
// Default tag if no tag is provided
tag = tag || 'span';
var re = new RegExp('(<'+ tag +'.+?>|<\/'+ tag +'>)', 'g');
return text.replace(re, '');
}

There's no need to use document.execCommand() for this. Just use range methods instead, and then there's no need for designMode.
var anchorId, hiliteTextNode, hiliteSpan;
for (var i = 0; i < hiliteRanges.length; i++){
// Create the highlight element
hiliteSpan = document.createElement("span");
hiliteSpan.id = anchorId;
hiliteSpan.style.backgroundColor = "#FF8C00";
hiliteTextNode = document.createTextNode(hiliteRanges[i].toString());
hiliteSpan.appendChild(hiliteTextNode);
// Replace the range content
hiliteRanges[i].deleteContents();
hiliteRanges[i].insertNode(hiliteSpan);
}
Also, since ranges are affected by DOM mutation, I would suggest doing this part at the same time as you collect the ranges with window.find(). Here's an example:
http://jsfiddle.net/YgFjT/

sending infinity number of checkbox values to text

I have a table with n number of rows with checkboxes and a what i want to do is if i select a checkbox the value should go to the text area, so i stored all elements in an array first, but it isnt happening, as you can see i added alerts as well to check it out. please help.
window.onload = function () {
var oRows = document.getElementById('rnatable').getElementsByTagName('tr');
var iRowCount = oRows.length;
alert('Your table has ' + iRowCount + ' rows.');
var i = 0;
cb = new Array(iRowCount);
while (i <= iRowCount) {
var id = 'check'+ i;
cb[i] = document.getElementById(id);
i++;
}
//alert('Your table has ' + cb[i].value + ' rows.');
for(var a=0; a < iRowCount; a++) {
var fasta = document.getElementById('fasta');
if(cb[a].checked) {
fasta.value = cb.value + ",";
};
};
}

Are you seeing an error in the console? I suspect that when while (i <= iRowCount) runs when i === iRowCount that document.getElementById(id) isn't yielding a result, and that then when you use that value, bad things happen.
Also, each lap through the fasta loop overwrites the previous value. You probably want something like fasta.value += cb.value + ","; instead.

Trying to call two functions on the same input field but only calls one

I have two working functions which I want to assign to two inputs:
<input type="text" id="start0" value="0" name="start[]" onkeyup="displayTotal();"/>
<input type="text" id="end0" value="0" name="end[]" onkeyup="displayTotal();"/>
I would like to be able to use a displayHoras(); onkeyup for those two too. (2 many 2s on this thread already). when I use displayHoras(); instead of displayTotal(); it works, but when I call both of them like this it doesnt:
<input type="text" id="start0" value="0" name="start[]" onkeyup="displayTotal();displayHoras();"/>
<input type="text" id="end0" value="0" name="end[]" onkeyup="displayTotal();displayHoras();"/>
Any help will be welcomed.
I'll share the code of both functions because...who knows? The problem might be there, right?
function displayTotal()
{
var tableRows = document.getElementById('budgetTable').getElementsByTagName('tr');
var totalDays = tableRows.length - 3; //Don't count the header rows and the Total rows
var totalPrice = 0;
var price = filterNum(document.getElementById( 'txtPrice' ).value);
var totalField = document.getElementById( 'txtTotal' );
var tempHours = 0;
var tempTotal = 0;
for(var i = 0; i < totalDays; i++)
{
tempHours = document.getElementById("end" + i).value - document.getElementById("start" + i).value;
tempTotal = tempHours * price;
document.getElementById("total" + i).innerHTML = formatCurrency(tempTotal);
totalPrice += tempTotal;
}
totalField.value = formatCurrency(totalPrice*1.21);
}
function displayHoras()
{
var tableRows = document.getElementById('budgetTable').getElementsByTagName('tr');
var totalDays = tableRows.length - 3;
var tempHours = 0;
var tempTotal = 0;
for(var i = 0; i < totalDays; i++)
{
tempHours = document.getElementById("end" + i).value - document.getElementById("start" + i).value;
document.getElementById("totalHoras" + i).innerHTML = tempHours;
}
}
EDIT: I added the functions that create the table below.
function keyUpCall() {displayHoras(); displayTotal();}
function addRowToTable()
{
var tbl = document.getElementById('budgetTable');
var lastRow = tbl.rows.length - 4;
var iteration = lastRow;
var entry = iteration - 1; //because we started with day0, etc
var row = tbl.insertRow(lastRow);
// day cell
var cellDay = row.insertCell(0);
cellDay.appendChild(createInput('text','dia' + entry, '', keyUpCall, 'dia' + entry));
// start cell
var cellStart = row.insertCell(1);
cellStart.appendChild(createInput('text','start' + entry, 0, keyUpCall, 'start' + entry));
// end cell
var cellEnd = row.insertCell(2);
cellEnd.appendChild(createInput('text','end' + entry, 0, keyUpCall, 'end' + entry));
// precio unitario
var cellPrecioUnitario = row.insertCell(3);
cellPrecioUnitario.appendChild(createInput('text', null, '$36', null, null));
// total HOras
var cellTotalHoras = row.insertCell(4);
cellTotalHoras.id = 'totalHoras' + entry;
// total cell
var cellTotal = row.insertCell(5);
cellTotal.id = 'total' + entry;
}
function createInput(type, id, value, action, name)
{
var el = document.createElement('input');
el.type = type;
el.id = id;
el.value = value;
el.onkeyup = action;
el.name = name;
return el;
}
At this point, the action is not even attached for some reason.
Edit2: I SOLVED THE PROBLEM!!! IUPI!! it was this line:
var totalDays = tableRows.length - 3;
In the previous version of this form I was using 3 extra rows, my client got me to add a couple extra ones for Tax and without Tax result. I changed it to:
var totalDays = tableRows.length - 5;
And that fixed it!

You can create a single function that calls both functions
function function1(){
displayTotal();
displayHoras();}

I'd recommend creating a function that then calls your two functions, e.g.:
function handleKeyUp() { // Or `updateDisplay` or some such
displayTotal();
displayHoras();
}
Putting too much text within the onXYZ attributes is problematic (though I'm not immediately seeing why yours isn't working).
Off-topic 1: I'd also suggest hooking up event handlers using DOM2 methods (addEventListener on standards-compliant browsers, attachEvent on IE8 and below) rather than using DOM0 mechanisms like onXYZ attributes.
Off-topic 2: A JavaScript library like jQuery, Prototype, YUI, Closure, or any of several others can help smooth over browser differences (and even bugs) like the event attachment stuff above, as well as providing lots of handy utility functionality. Totally optional, but using one helps you concentrate on what you're actually trying to do, without worrying about slightly different plumbing in various different browsers.

old school javascript ^^
try this instead of the attribute variant, and use bugzilla, or a javascript debugger
var checks_keyup = function() {
displayTotal();
displayHoras();
}
var inputs = document.getElementsByTagName('input');
for(var i=0;i<inputs.length;i++) {
if(/^(start|end)/.test(inputs[i].id))
inputs[i].onkeyup = checks_keyup;
}

Try calling second function withing the first function itself,
function displayTotal()
{
\\.....your code
displayHoras();
}

javascript appenchild

for(var i=0; i<myJSONObject.model.length; i++){
var create_div = document.createElement('div');
create_div.id = 'model_id'+i;
create_div.innerHTML = myJSONObject.model[i].model_name;
var assign_innerHTML = create_div.innerHTML;
var create_anchor = document.createElement('a');
document.getElementById('models').appendChild(create_div);
document.getElementById(create_div.id).appendChild(create_anchor);
}
for ex the myJSONObject.model.length is 2
the output is like this
<div id = 'model_id0'>XXXXX<a> </a></div>
<div id = 'model_id1'>XXXXX<a> </a></div> */
but instead of above the output sholud be like this
<div id = model_id0> <a> xxxxxx</a></div>
<div id = model_id1> <a> xxxxxx</a></div>
how to append it inside of the innerhtml
any one plz reply !!!!

two suggestions:
1.) instead of assigning innerHTML to model_idx div assign the model name to its child a. and 2nd instead of appending it to DOM in every loop do it after completing the loop as to minimize frequent the DOM Update ie by:
objContainer = document.createElement('div');
for(....)
{
var create_div = document.createElement('div');
create_div.id = 'model_id'+i;
var create_anchor = document.createElement('a');
create_anchor.innerHTML = myJSONObject.model[i].model_name;
create_div.appendChild(create_anchor);
objContainer.appendChild(create_div);
}
document.getElementById('models').appendChild(objContainer);

I would go along the lines of:
var i = 0,
m = myJSONObject.model,
l = m.length,
models = document.getElementById("models");
for(; i < j; i++) {
var model = m[i];
var create_div = document.createElement("div");
create_div.id = "model_id" + i;
create_div.innerHTML = "<a>" + model.model_name + "</a>";
models.appendChild(create_div);
}
Unless you specifically need to do something to the anchor itself (other than set its innerHTML), there's no need to create a reference to an element for it. If you do need to do something specific to that anchor, then in that case have this, instead:
EDIT: As per your comment, you DO want to do something to the anchor, so go with this (now updated) option - assuming the anchor will always be a child of the div that has the ID you require. The reason "model_id" + i is being put in as a string is because that is exactly what is being passed into the HTML - the document has no clue what "i" is outside of javascript:
var i = 0,
m = myJSONObject.model,
l = m.length,
models = document.getElementById("models");
for(; i < j; i++) {
var model = m[i];
var create_div = document.createElement("div");
var create_anchor = document.createElement("a");
create_div.id = "model_id" + i;
create_anchor.innerHTML = model.model_name;
if(window.addEventListener) {
create_anchor.addEventListener("click", function() {
getModelData(1, this.parentNode.id);
}, false);
} else {
create_anchor.attachEvent("onclick", function() {
getModelData(1, this.parentNode.id);
});
}
create_div.appendChild(create_anchor);
models.appendChild(create_div);
}