Solved

Javascript Count Child Nodes

Posted on 2006-07-03
10
5,367 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
Courses: Start Training Online With Pros, Today

Brush up on the basics or master the advanced techniques required to earn essential industry certifications, with Courses. Enroll in a course and start learning today. Training topics range from Android App Dev to the Xen Virtualization Platform.

 
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
 
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

Live: Real-Time Solutions, Start Here

Receive instant 1:1 support from technology experts, using our real-time conversation and whiteboard interface. Your first 5 minutes are always free.

Question has a verified solution.

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

I've been trying to accomplish this for a while and it just struck me yesterday how to accomplish this task. I have done searches all over the internet looking for ways to email pages from my applications and finally I have done it!!! Every single s…
International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
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…

813 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

14 Experts available now in Live!

Get 1:1 Help Now