Using JavaScript in a Visual Force Page in PE

I am trying to use JavaScript in a Visual Force page to sort OpportunityLine Items in Professional Edition (i.e. can't use a controller to sort the data, so resorting to using JavaScript to sort) but the items don't display in the table. Thanks for any help.

<apex:page standardController="Opportunity" showHeader="false" renderas="pdf">

<table border="0" cellspacing="0" cellpadding="0" width="100%" id="table1">
<tr>
    <td>
        <img src='{!URLFOR($Resource.Logo)}' title="logo" />
    </td>
    <td  align="right"><font face="Arial" >
    <b>Quote  for {!Opportunity.Account.Name}</b></font><br/>
    </td>
    
    
</tr>

<hr/>

</table>
<table border="0" cellspacing="0" cellpadding="0" width="100%" id="table1">
<tr>    <td><font face="Arial" >
        {!$Organization.Name}<br/>
        {!$Organization.Street}<br/>
        {!$Organization.City}, {!$Organization.State} {!$Organization.PostalCode}<br/>
        Phone: {!$Organization.Phone}<br/>
        Fax: {!$Organization.Fax}<br/>
        </font></td> 
        <td width="50%">&nbsp;</td>
   <td ><font face="Arial">Quote number: {!Opportunity.QuoteNumber__c}_
   {!Opportunity.QuoteVersion__c}<br/>
        <br/>
        Offer valid Through:&nbsp;<apex:OutputField value="{!Opportunity.CloseDate}"/><br/>    
        Proposed by: {!Opportunity.Owner.LastName} {!Opportunity.Owner.FirstName}</font>
     </td>
</tr>
</table>
<br/>
<hr/>
<p><b><font face="Arial" color="#000080">Address Information</font></b></p>

<table border="0" width="100%" id="table2">
<tr>
       <td colspan="3">
           <font face="Arial">Account Name: {!Opportunity.Account.Name} <br/><br/></font>
       </td>
</tr>
<tr>
       <td>          
           <font face="Arial">Bill To:<br/>
                             {!Opportunity.Account.BillingStreet}<br/>
                             {!Opportunity.Account.BillingCity}, {!Opportunity.Account.BillingState} {!Opportunity.Account.BillingPostalCode} 
           </font>
        </td>
        <td width="50%"></td>
        <td >
           <font face="Arial">Ship To:<br/>
                              {!Opportunity.Account.ShippingStreet}<br/>
                              {!Opportunity.Account.ShippingCity}, {!Opportunity.Account.ShippingState} {!Opportunity.Account.ShippingPostalCode} 
           </font>
        </td>
</tr>    
</table>
<br/>
<hr/>
<p><b><font color="#000080" face="Arial">Products</font></b></p>
<table border="0" width="100%" id="table4">
<tr>
       <td bgcolor="#C0C0C0"><font face="Arial">Product</font></td>
       <td bgcolor="#C0C0C0"><font face="Arial">Description</font></td>
       <td bgcolor="#C0C0C0"><font face="Arial">Qty/Hours</font></td>
       <td bgcolor="#C0C0C0"><font face="Arial">Unit Price</font></td>
       <td bgcolor="#C0C0C0"><font face="Arial">Total Price</font></td>
</tr>
<tr>
       <script>
               var sortArray = new Array();
               var idxArray = new Array();
               function newItem(idx,Name,Description,Quantity,UnitPrice,TotalPrice){
                   this.idx = idx;
                   this.Name= Name;
                   this.Description= Description;
                   this.Quantity= Quantity;
                   this.UnitPrice= UnitPrice;
                   this.TotalPrice= TotalPrice;
               }
           <apex:repeat value="{!Opportunity.OpportunityLineItems}" var="line">
               sortArray[sortArray.length++] = new newItem({!line.Sort_Order__c}, {!line.PricebookEntry.Name},{!line.Description},{!line.Quantity},{!line.UnitPrice},{!line.TotalPrice});
           </apex:repeat>  
            sortArray.sort();
               
               
       
         for (var i = 0; i < sortArray.length; i++) {
           <tr>
             <td>sortArray[i].idx}</td>
             <td>sortArray[i].Description</td>             
             <td>sortArray[i].Quantity</td>
             <td>sortArray[i].UnitPrice/></td>
             <td>sortArray[i].TotalPrice/></td>
          </tr>
         }
         
       </script>
</tr>
<tr>
       <td bgcolor="#C0C0C0" align="right" colspan="6">
       <font face="Arial"><b>Total:</b>&nbsp;<apex:OutputField value="{!Opportunity.Amount}"/></font></td>
</tr>
</table>
<hr/>
<p><b><font face="Arial" color="#000080">Additional Information</font></b></p>
{!Opportunity.Customer_Message__c}
<hr/>
<table width="100%" id="table5">
<tr>
   <td width="50%"><b>{!$Organization.Name}</b></td>
   <td width="50%"><b>{!Opportunity.Account.Name}</b></td>
</tr>
<tr>
   <td width="50%">&nbsp;</td>
   <td width="50%">&nbsp;</td>
</tr>
<tr>
   <td width="50%">Signature<hr color="black" size="1"/></td>
   <td width="50%">Signature<hr color="black" size="1"/></td>
</tr>
<tr>
   <td width="50%">Name<hr color="black" size="1"/></td>
   <td width="50%">Name<hr color="black" size="1"/></td>
</tr>
<tr>
   <td width="50%">Title<hr color="black" size="1"/></td>
   <td width="50%">Title<hr color="black" size="1"/></td>
</tr>
<tr>
   <td width="50%">Date<hr color="black" size="1"/></td>
   <td width="50%">Date<hr color="black" size="1"/></td>
</tr>
</table>
<p>&nbsp;</p>
<hr/>
<p align="center"><font face="Arial"><i>Copyright {!$Organization.Name}.</i></font></p>
</apex:page>

June 11, 2010
·
Like
0
·
Follow
0

Best Answer chosen by Admin (Salesforce Developers)

B2000
I found a solution. It couldn't be rendered as a .PDF so a print button had to be added.

<tr> <script type="text/javascript"> function addCommas(nStr){ nStr += ''; x = nStr.split('.'); x1 = x[0]; x2 = x.length > 1 ? '.' + x[1] : ''; var rgx = /(\d+)(\d{3})/; while (rgx.test(x1)) { x1 = x1.replace(rgx, '$1' + ',' + '$2'); } return x1 + x2; } var sortArray = Array(); <apex:variable var="idx" value="{!0}"/> <apex:repeat value="{!Opportunity.OpportunityLineItems}" var="line"> sortArray[{!idx}] = new Array({!line.Sort_Order__c}, "{!line.PricebookEntry.Name}","{!line.Description}",{!line.Quantity},{!line.UnitPrice},{!line.TotalPrice}); <apex:variable var="idx" value="{!idx+1}"/> </apex:repeat> sortArray.sort(); for (var i = 0; i < sortArray.length; i++) { <tr> <td align="left">sortArray[i][1]</td> <td align="left">sortArray[i][2]</td> <td align="center">sortArray[i][3]</td> <td align="right">addCommas(sortArray[i][4].toFixed(2))</td> <td align="right">addCommas(sortArray[i][5].toFixed(2))</td> </tr> } </script> </tr>

June 12, 2010
·
Like
0
·
Dislike
0

hokusai
if you use firebug, do you see any errors?

June 12, 2010
·
Like
0
·
Dislike
0

B2000
The Firebug console states syntax error. When I click on the statement it displays line 87 listed below (I am not very familiar with Firebug on how to do debugging.

87 sortArray[sortArray.length++] = new newItem(3.0, Layout,,1.0,95.0,95.0);

88 sortArray[sortArray.length++] = new newItem(2.0, CallTrack Session Level 1,,5.0,250.0,1250.0);

89 sortArray[sortArray.length++] = new newItem(1.0, PPC Monthly,,1.0,750.0,750.0);

June 12, 2010
·
Like
0
·
Dislike
0

B2000
I have modified my JavaScript and get no errors and the SortArray is sorted, but the data is not displayed in the table on the

<tr> <script> var sortArray = Array(); <apex:variable var="idx" value="{!0}"/> <apex:repeat value="{!Opportunity.OpportunityLineItems}" var="line"> sortArray[{!idx}] = new Array({!line.Sort_Order__c}, "{!line.PricebookEntry.Name}","{!line.Description}",{!line.Quantity},{!line.UnitPrice},{!line.TotalPrice}); <apex:variable var="idx" value="{!idx+1}"/> </apex:repeat> sortArray.sort(); for (var i = 0; i < sortArray.length; i++) { <tr> <td>sortArray[i][0]</td> <td>sortArray[i][1]</td> <td>sortArray[i][2]</td> <td>sortArray[i][3]</td> <td>sortArray[i][4]</td> <td>sortArray[i][5]</td> </tr> } </script> </tr>

page.