Solved

Javascript Count Child Nodes

Posted on 2006-07-03
10
5,362 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
How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

 
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

Maximize Your Threat Intelligence Reporting

Reporting is one of the most important and least talked about aspects of a world-class threat intelligence program. Here’s how to do it right.

Join & Write a Comment

Introduction HTML checkboxes provide the perfect way for a web developer to receive client input when the client's options might be none, one or many.  But the PHP code for processing the checkboxes can be confusing at first.  What if a checkbox is…
This article will give core knowledge of JavaScript and will head in to your first JavaScript program. I am Durvesh Naik and I am here to deal with this series of JavaScript. I will teach you JavaScript in part wise , as its quite boring to read big…
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…

744 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

12 Experts available now in Live!

Get 1:1 Help Now