Solved

Javascript Count Child Nodes

Posted on 2006-07-03
10
5,364 Views
Last Modified: 2011-10-03
Im stuck modifying an old template system and am having a problem.  The database only allows the description to be input in all capital letters and I need to change it to its proper capitalization after the page is loaded.  Here is how the .html template looks:

<table width="100%" border="0" cellpadding="0">
 <tr><th class="intrevrow">~~ITP.ItemNumberTitle$?a~~</th>
      <th class="intrevrow">~~ITP.ItemDescriptionTitle$?a~~</th>
      <th class="intrevrow">~~ITP.QtyAvailableTitle$?a~~</th>
      <th class="intrevrow">~~ITP.BasePriceTitle$?a~~</th>
        <th class="intrevrow">~~ITP.ShoppingCartTitle$?a~~</th></tr>
 <tr><td>~~iwwidb;products_dtl_form2_table?T~~</td></tr>
 <tr><td class="~~rowstyle$~~" valign="top"><nobr>~~item_detail_link$?a~~</nobr></td>
      <td class="~~rowstyle$~~" valign="top">~~item_description$~~</td>
      <td class="~~rowstyle$~~" align="right" valign="top">~~qty_avail$?a~~</td>
      <td class="~~rowstyle$~~" align="right" valign="top">~~base_price$~~</td>
      <td class="~~rowstyle$~~" align="center" valign="top" width="~~sc_width$~~">
         <font size=+1 color="red">~~error_flag$?a~~</font>
         <input type="hidden" name="~~row_item_name$~~" value="~~item$~~">
         <input type="~~mi_qty_fld$~~" name="~~row_quantity_name$~~" value="~~quantity$~~" size="4" maxlength="10"></td>
 </tr>
</table>

Here is the output (assuming on two products):

<table width="100%" border="0" cellpadding="0">
 <tr><th class="intrevrow">Item Number</th>
        <th class="intrevrow">Item Number/Description</th>
      <th class="intrevrow">Quantity Available</th>
      <th class="intrevrow">Base Price</th>
        <th class="intrevrow">Shopping Cart</th></tr>
 <tr><td></td></tr>
 <tr><td class="datacells" valign="top"><nobr><a class=datacells href="javascript:selectItem('CAM123X      1','CAMARMOR  CAM123X      ')">CAM123X</a></nobr></td>
        <td class="datacells" valign="top">CAM123X - INFRARED VARIFOCAL CAMERA<br />  </td>
      <td class="datacells" align="right" valign="top">18</td>
      <td class="datacells" align="right" valign="top">    129.00</td>
      <td class="datacells" align="center" valign="top" width="80">
            <font size=+1 color="red">&nbsp;&nbsp;</font>
            <input type="hidden" name="itm_000" value="CAM123X      1">
                <input type="text" name="qty_000" value="0" size="4" maxlength="10">
        </td>
 </tr>
 <tr><td class="datacells" valign="top"><nobr><a class=datacells href="javascript:selectItem('CAM321Z     1','CAMARMOR  CAM321Z      ')">CAM321Z</a></nobr></td>
      <td class="datacells" valign="top">CAM321Z - SONY POWER ZOOM CAMERA<br /></td>
      <td class="datacells" align="right" valign="top">123</td>
      <td class="datacells" align="right" valign="top">    895.00</td>
      <td class="datacells" align="center" valign="top" width="80">
           <font size=+1 color="red">&nbsp;&nbsp;</font>
         <input type="hidden" name="itm_001" value="CAM321Z     1">
         <input type="text" name="qty_001" value="0" size="4" maxlength="10">
        </td>
 </tr>
</table>

I need to capitalize every word of ~~item_description$~~ .  I don't have access to modify anything except this template, so I guess I need to modify it with a javascript function that I call on page load.  I can use ~~row_item_name$~~ to assign a unique ID to either the <td> tag or an added <span> tag wrapped around the description.  This will assign an id="itm_000", id="itm_001", etc.

The problem is that I dont have a way to get the count of items for this page once its loaded.  Is there a way, in javascript, to either get a count of all nodes with an id that begins with 'itm_' so I can execute a loop x amount of times.  OR is there another way to execute the function on all the nodes that contain ~~item_description$~~ ?

Thanks
0
Comment
Question by:gwkg
  • 4
  • 3
  • 3
10 Comments
 
LVL 10

Expert Comment

by:0h4crying0utloud
ID: 17031673


Can you add some inline css? here Added some inline style:

<td class="~~rowstyle$~~" style="text-transform:uppercase;"valign="top">~~item_description$~~</td>
0
 
LVL 10

Expert Comment

by:0h4crying0utloud
ID: 17031682
fixed spacing:

<td class="~~rowstyle$~~" style="text-transform:uppercase;" valign="top">~~item_description$~~</td>
0
 
LVL 31

Author Comment

by:gwkg
ID: 17031976
The inline CSS doesnt work.  It turns all the text lowercase with text-transform:lowercase, but text-transform:capitalize doesnt work as expected.  The letters remain all uppercase. (text-transform:uppercase uppercases all of the letters, which is how the output is to begin with)

Maybe if I wrap a span tag around the description and add link this style to the page

td.datacells span {text-transform:lowercase}

so the page loads in all lowercase and then dynamically change the style to

td.datacells span {text-transform:capitalize} on the page

will work.  It would definitely be easier than creating a function to uppercase the first letter of each word.  Although I will lose the flexibility of being able to split the description string and only change the capitalization of the words after 'MODEL123X - '

Is there an easy way to add a new style to the page after it loads?
0
 
LVL 10

Expert Comment

by:0h4crying0utloud
ID: 17032041


you can add another class name like "itemDesc" to the span:

<span id="itemDesc" class="itemDesc_low">~~item_description$~~</span>

Then after the page loads , call a function that changes the class:

<body onload="capit()">...</body>

<script>
function capit() {
  getElementById("itemDesc").className = "itemDesc_cap";
}
</script>
0
 
LVL 63

Accepted Solution

by:
Zvonko earned 500 total points
ID: 17032085
Here my proposal:

<html>
<head>
<title>Zvonko &#42;</title>
<script>
function changeLabels(){
  var theForm = document.forms[0];
  for(var i=0;iE=theForm["itm_"+((i>99)?"":(i>9)?"0":"00")+i];i++){
    var theCell = iE.parentNode.parentNode.cells[1];
    theCell.innerHTML=properCase(theCell.innerHTML);
  }
}
function properCase(theLabel){
  var theLabel = theLabel.toLowerCase().replace(/\b\w/g,function(p){return p.toUpperCase()});
  return theLabel;
}
</script>
</head>
<body>
<form>
<table width="100%" border="0" cellpadding="0">
 <tr><th class="intrevrow">Item Number</th>
        <th class="intrevrow">Item Number/Description</th>
     <th class="intrevrow">Quantity Available</th>
     <th class="intrevrow">Base Price</th>
        <th class="intrevrow">Shopping Cart</th></tr>
 <tr><td></td></tr>
 <tr><td class="datacells" valign="top"><nobr><a class=datacells href="javascript:selectItem('CAM123X      1','CAMARMOR  CAM123X      ')">CAM123X</a></nobr></td>
        <td class="datacells" valign="top">CAM123X - INFRARED VARIFOCAL CAMERA<br />  </td>
     <td class="datacells" align="right" valign="top">18</td>
     <td class="datacells" align="right" valign="top">    129.00</td>
     <td class="datacells" align="center" valign="top" width="80">
          <font size=+1 color="red">&nbsp;&nbsp;</font>
          <input type="hidden" name="itm_000" value="CAM123X      1">
                <input type="text" name="qty_000" value="0" size="4" maxlength="10">
        </td>
 </tr>
 <tr><td class="datacells" valign="top"><nobr><a class=datacells href="javascript:selectItem('CAM321Z     1','CAMARMOR  CAM321Z      ')">CAM321Z</a></nobr></td>
     <td class="datacells" valign="top">CAM321Z - SONY POWER ZOOM CAMERA<br /></td>
     <td class="datacells" align="right" valign="top">123</td>
     <td class="datacells" align="right" valign="top">    895.00</td>
     <td class="datacells" align="center" valign="top" width="80">
           <font size=+1 color="red">&nbsp;&nbsp;</font>
        <input type="hidden" name="itm_001" value="CAM321Z     1">
        <input type="text" name="qty_001" value="0" size="4" maxlength="10">
        </td>
 </tr>
</table>
</form>
<script>changeLabels()</script>
</body>
</html>




0
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 
LVL 63

Expert Comment

by:Zvonko
ID: 17032101
Sorry, properCase() can be reduced to this:

function properCase(theLabel){
  return theLabel.toLowerCase().replace(/\b\w/g,function(p){return p.toUpperCase()});
}

0
 
LVL 10

Expert Comment

by:0h4crying0utloud
ID: 17032163


That style trick will not work. The new styles always use the original literals...
0
 
LVL 31

Author Comment

by:gwkg
ID: 17032698
Wow Zvonko, works perfect and exactly what I was looking for!

I'll open another question pertaining to only capitalizing the words after the delimiter ' - ' and leaving the model number capitalized if you are interested in some more points.

Thanks again to everyone who took the time to answer!
0
 
LVL 31

Author Comment

by:gwkg
ID: 17032735
0
 
LVL 63

Expert Comment

by:Zvonko
ID: 17033463
You are welcome.
And it looks like Zyloch did it right in the new question.
0

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

In Part 1 (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/A_7849-Hex-Maze.html) we covered the hexagonal maze basics -- how the cells are represented in a JavaScript array and how the maze is displayed.  In this part, we'…
Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

911 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

26 Experts available now in Live!

Get 1:1 Help Now