asked on

How Call Javascript Functions with Variables

I am building a webpage which has a Datalist that is being populated from and XML file.
I have a hidden div called imgbox which will display a larger image for the product and will position itself in the middle of the screen. I need to call this Javascript from a button passing the image path returned by Xpath from the XML file. I have not been able to call the Javascript function without getting Errors on the page, either missing ")" or tag not constructed properly. Any help or input is appreciated. The code that I have been playing with is below
Thanks
Annemarie

BUTTON:
 
<img id='img1' src='images/back3.gif' alt="details" onclick='Large(<%# XPath ("product/image") %>)' />
 
OR
 
<asp:ImageButton runat="server" ImageUrl="images/back3.gif" AlternateText="Details" OnClientClick='<%# "Large(" + XPath ("product/image") + ")" %>' ></asp:ImageButton>
 
 
JAVASCRIPT FUNCTION:
 
		function Large(picpath)
		{
		    var imgbox=document.getElementById("imgbox");
		    imgbox.style.visibility='visible';
		    var img = document.createElement("img");
		    img.src="images_collections_large/" + picpath;
		    
		    img.style.width='334px';
		    img.style.height='500px';
		    imgbox.appendChild(img);
		    
		    var w = 334;
		    var h = 500;
		    var winl = (screen.width-w)/2;
			var wint = (screen.height-h)/2;
			imgbox.style.left=winl;
			imgbox.style.top=wint;		
		}

Open in new window

ASKER CERTIFIED SOLUTION

aibusinesssolutions

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

AnnemarieValladares

ASKER

I tried the above and it give me a compilation errror, below. Any other ideas?
Thanks! Annemarie

Compilation Error
Description: An error occurred during the compilation of a resource required to service this request. Please review the following specific error details and modify your source code appropriately.

Compiler Error Message: CS1026: ) expected

Source Error:

Line 70:               <asp:LinkButton ID="OrderLinkButton" Text="Add To Basket" runat="server"/>
Line 71:                      
Line 72:               <asp:ImageButton runat="server" ImageUrl="images/back3.gif" AlternateText="Details" OnClientClick='<%# XPath("product/image", "Large(""{0}"");") %>' ></asp:ImageButton>
Line 73:                                       <div id="imgbox">

aibusinesssolutions

You have your DataList bound to an XMLDataSource correct? I justed tested that out and it is working fine, I see nothing wrong with the code. Can you page the code for your DataList? There may be an error somewhere else.

aibusinesssolutions

Sorry that should have said "Can you paste the code for your DataList?"

AnnemarieValladares

ASKER

<asp:Content ContentPlaceHolderID="ContentPlaceHolderCenter" ID="CenterContent" runat="server" >
      <div>
            <asp:XmlDataSource runat="server" ID="ProductsXML" DataFile="products.xml" XPath="catalog/category[@name='babilonico']"></asp:XmlDataSource>

            <asp:DataList ID="ProductList" runat="server" DataSourceID="ProductsXML" RepeatColumns="3">
              <ItemTemplate>
              <table>
              <tr>
              <td colspan="2" style="font-size: 10px"></td>
              </tr>
              <tr>
              <td style="width: 5px; background-color: #996600">
              <asp:Panel ID="SidePanel" Width="5px" runat="server" />
              </td>
              <td>
              <asp:Panel ID="ProductsPanel" runat="server" CssClass="ProductsPanel">
              <table>
              <tr>
              <td style="width: 50px"></td>
              <td style="width: 5px"></td>
              <td style="width: 150px"></td>
              </tr>
              <tr>
              <td align="center" colspan="3">
              <asp:Image runat="server" ID="productimage" ImageUrl='<%#"~/images_collections_small/" + XPath ("product/image") %>'></asp:Image>
              
              </td>
              </tr>
              <tr>
              <th align="right">Item:</th>
              <td></td>
              <td>
              <asp:Label ID="itemnumber" Text='<%# XPath ("product/itemnumber") %>' runat="server" />
              </td>
              </tr>
              <tr>
              <th align="right">Name:</th>
              <td></td>
              <td>
              <asp:Label ID="image" Text='<%# XPath ("product/name") %>' runat="server" />
              </td>
              </tr>
              <tr>
              <th align="right">Price:</th>
              <td></td>
              <td>
              <asp:Label ID="price" Text='<%# XPath ("product/price/tier" + 1) %>' runat="server" />
              </td>
              </tr>
              <tr>
              <td></td>
              <td></td>
              <td>
              <asp:LinkButton ID="DetailLinkButton" CommandName="select" Text="Detail" runat="server" />
                                           
              <asp:LinkButton ID="OrderLinkButton" Text="Add To Basket" runat="server"/>
                     
              <asp:ImageButton runat="server" ImageUrl="images/back3.gif" AlternateText="Details" OnClientClick='<%# XPath("product/image", "Large(""{0}"");") %>' ></asp:ImageButton>
                                      <div id="imgbox">
                                            <asp:ImageButton ID="DetailViewClose" ImageAlign="Right" ImageUrl="images/Button_Close_32.png" runat="server" AlternateText="Close" OnClientClick="Out()"></asp:ImageButton>
                                      </div>
              </td>
              </tr>
              </table>
              </asp:Panel>
              </td>
              </tr>
              <tr>
              <td colspan="2" style="font-size: 10px">
                        </td>
              </tr>
              </table>
              </ItemTemplate>
            </asp:DataList>
      </div>

</asp:Content>

AnnemarieValladares

ASKER

Let me know if you see something as I am at wits end with this...Thanks!! :)

SOLUTION

aibusinesssolutions

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

AnnemarieValladares

ASKER

It is driving me crazy. It keeps saying the same thing about the ) expected.
Did you try the above code and it worked for you?
Any other ideas?

Compilation Error
Description: An error occurred during the compilation of a resource required to service this request. Please review the following specific error details and modify your source code appropriately.

Compiler Error Message: CS1026: ) expected

Source Error:

Line 69:                      
Line 70:
Line 71:                                       <asp:ImageButton runat="server" ImageUrl="images/back3.gif" AlternateText="Details" OnClientClick='<%# "Large(""" & XPath("product/image") & """)" %>' ></asp:ImageButton>
Line 72:

aibusinesssolutions

Yes that worked for me.. do you have any unusual characters in product/image?

AnnemarieValladares

ASKER

The only thing would be underscore but that is not unusual.
I found a way to do it, see below, but am not sure if this is optimal as I would be pre-loading all the images before they are even requested. What do you think?

MODIFIED CODE:
 
<asp:Content ContentPlaceHolderID="ContentPlaceHolderCenter" ID="CenterContent" runat="server" >
	<div>
		<asp:XmlDataSource runat="server" ID="ProductsXML" DataFile="products.xml" XPath="catalog/category[@name='babilonico']"></asp:XmlDataSource>
		
		<asp:DataList ID="ProductList" runat="server" DataSourceID="ProductsXML" RepeatColumns="3">
		  <ItemTemplate>
		    <table>
		      <tr>
		        <td colspan="2" style="font-size: 10px"></td>
		      </tr>
		      <tr>
		        <td style="width: 5px; background-color: #996600">
		          <asp:Panel ID="SidePanel" Width="5px" runat="server" />
		        </td>
		        <td>
		          <asp:Panel ID="ProductsPanel" runat="server" CssClass="ProductsPanel">
		            <table>
		              <tr>
		                <td style="width: 50px"></td>
		                <td style="width: 5px"></td>
		                <td style="width: 150px"></td>
		              </tr>
		              <tr>
		                <td align="center" colspan="3">
		                  <asp:Image runat="server" ID="productimage" ImageUrl='<%#"~/images_collections_small/" + XPath ("product/image") %>'></asp:Image>
		                  <!--<asp:Label ID="title" Text='<%#"/images_collections_small/" + XPath ("book/title") %>' runat="server" BackColor="DarkGray" ForeColor="White" Width="290px" Font-Bold="true" Style="vertical-align: middle; padding: 2px 4px 4px 2px" />-->
		                </td>
		              </tr>
		              <tr>
		                <th align="right">Item:</th>
		                <td></td>
		                <td>
		                  <asp:Label ID="itemnumber" Text='<%# XPath ("product/itemnumber") %>' runat="server" />
		                </td>
		              </tr>
		              <tr>
		                <th align="right">Name:</th>
		                <td></td>
		                <td>
		                  <asp:Label ID="image" Text='<%# XPath ("product/name") %>' runat="server" />
		                </td>
		              </tr>
		              <tr>
		                <th align="right">Price:</th>
		                <td></td>
		                <td>
		                  <asp:Label ID="price" Text='<%# XPath ("product/price/tier" + 1) %>' runat="server" />
		                </td>
		              </tr>
		              <tr>
		                <td></td>
		                <td></td>
		                <td>
		                  <asp:LinkButton ID="DetailLinkButton" CommandName="select" Text="Detail" runat="server" />
							&nbsp;
		                  <asp:LinkButton ID="OrderLinkButton" Text="Add To Basket" runat="server"/>
		                  	&nbsp;		
		                  <img id='img1' src='images/back3.gif' alt="details" onclick='In()' />			
										  				                 	
						  <div id="imgbox">
						  	<div id="DetailViewClose">
						  		<img id='DetailViewCloseBtn' src='images/Button_Close_32.png' alt="close" onclick='Out()' />
						  		<br />
						  	</div>
						  	<asp:Image runat="server" ID="DetailViewImage" ImageUrl='<%#"~/images_collections_large/" + XPath ("product/image") %>'></asp:Image>
						  	<table>
						  		<tr>
						  			<td>Length:</td>
						  			<td><asp:Label ID="length" Text='<%# XPath ("product/length") %>' runat="server" /></td>
						  		</tr>
						  		<tr>
						  			<td>Width:</td>
						  			<td><asp:Label ID="width" Text='<%# XPath ("product/width") %>' runat="server" /></td>
						  		</tr>
						  		<tr>
						  			<td>Height:</td>
						  			<td><asp:Label ID="height" Text='<%# XPath ("product/height") %>' runat="server" /></td>
						  		</tr>
						  		<tr>
						  			<td>Weight:</td>
						  			<td><asp:Label ID="weight" Text='<%# XPath ("product/weight") %>' runat="server" /></td>
						  		</tr>
						  		<tr>
						  			<td colspan="2"><asp:Label ID="description" Text='<%# XPath ("product/description") %>' runat="server" /></td>
						  		</tr>
						  	</table>
						  </div>
		                </td>
		              </tr>
		            </table>
		          </asp:Panel>
		        </td>
		      </tr>
		      <tr>
		        <td colspan="2" style="font-size: 10px">
				</td>
		      </tr>
		    </table>
		  </ItemTemplate>
		</asp:DataList>
	</div>
	
</asp:Content>
 
 
 
JAVASCRIPT:
 
	function In()
		{
		    var imgbox=document.getElementById("imgbox");
		    imgbox.style.visibility='visible';
 
		   	var w = 334;
		    var h = 500;
		    var winl = (screen.width-w)/2;
			var wint = (screen.height-h)/2;
			imgbox.style.left=winl;
			imgbox.style.top=wint;	
		}
 
 
		function Out()
		{
		    document.getElementById("imgbox").style.visibility='hidden';
		}
 
 
CSS (Not perfected yet):
 
 
.ProductsPanel
{
  border: solid 1px black;
  font-family: Verdana;
  font-size:10px;
  width: 275px;
}
 
#DetailViewClose
{
	text-align:right;
}
 
 
#imgbox 
{
    vertical-align : middle;
    position : absolute;
    border: 1px solid #999;
    background : #FFFFFF; 
    /**filter: Alpha(Opacity=100);**/
    visibility : hidden;
    height : 700px;
    width : 400px;
    z-index : 50;
    /**overflow : hidden;**/
    overflow:scroll;
    text-align : center;
}
 
 
#imgbox table {
	font: 11px/24px Verdana, Arial, Helvetica, sans-serif;
	width: 250px;
	border-bottom-style:solid;
	border-width:thin;
	border-color:black;
 
	}
 
#imgbox th {
	padding: 0 0.5em;
	text-align: left;
	}
 
#imgbox tr.yellow td {
	border-top: 1px solid #FB7A31;
	border-bottom: 1px solid #FB7A31;
	background: #FFC;
	}
 
#imgbox td {
	border-bottom: 1px solid #CCC;
	padding: 0 0.5em;
	}
 
#imgbox td:first-child {
	width: 190px;
	}
 
#imgbox td+td {
	border-left: 1px solid #CCC;
	text-align: center;
	}

Open in new window

aibusinesssolutions

Can you post some of the XML so I can test it out using your source and XML file?

urvinayan

I see that u are using content page
then why var imgbox=document.getElementById("imgbox");
remove that and use var imgbox=document.getElementById('<%=imgbox.ClientID');
Eerything else is fine... Hope this helps

urvinayan

sorry change to var imgbox=document.getElementById('<%=imgbox.ClientID%>');

urvinayan

Oops sorry .... i thought i ve seen the "runat=server" attribute in your div tag..
so the answer i posted is wrong...

AnnemarieValladares

ASKER

aibusinesssolutions,

Below is the XML. What do you think about how I got it to work above...do you think that this is not optimal and I should keep trying to get it to load the images when they click the button instead?

Let me know.

<?xml version="1.0" encoding="utf-8" ?>
<catalog>
   <category name="amphora">
	<product>
		<itemnumber>0000000000</itemnumber>
		<name>Secrets of Silicon Valley</name>
		<image>Amphora Vase_Brown Saddle.jpg</image>
         <price>
         	<tier1>28.00</tier1>
         	<tier2>26.00</tier2>
         	<tier3>24.00</tier3>
         	<tier4>22.00</tier4>
         	<tier5>20.00</tier5>
         </price>
		<length>10.00</length>
		<width>8.00</width>
		<height>15.00</height>
		<weight>8.00</weight>
		<description>This is the long description of the product so that they can see the details</description>
	</product>
    </category>
   <category name="amphora">
	<product>
		<itemnumber>0000000001</itemnumber>
		<name>Secrets of Silicon Valley</name>
		<image>Amphora Vase_Brown Saddle.jpg</image>
         <price>
         	<tier1>28.00</tier1>
         	<tier2>26.00</tier2>
         	<tier3>24.00</tier3>
         	<tier4>22.00</tier4>
         	<tier5>20.00</tier5>
         </price>
		<length>10.00</length>
		<width>8.00</width>
		<height>15.00</height>
		<weight>8.00</weight>
		<description>This is the long description of the product so that they can see the details</description>
	</product>
    </category>
   <category name="babilonico">
     <product>
       <itemnumber>0000000002</itemnumber>
       <name>Straight Talk About Computers</name>
       <image>Amphora Vase_Brown Saddle.jpg</image>   
	     <price>
	     	<tier1>28.00</tier1>
	     	<tier2>26.00</tier2>
	     	<tier3>24.00</tier3>
	     	<tier4>22.00</tier4>
	     	<tier5>20.00</tier5>
	     </price>
		<length>10.00</length>
		<width>8.00</width>
		<height>15.00</height>
		<weight>8.00</weight>
		<description>This is the long description of the product so that they can see the details</description>
     </product>
   </category>
   <category name="babilonico">
      <product>
     	<itemnumber>0000000003</itemnumber>
      	<name>Computers</name>
      	<image>Amphora Vase_Brown Saddle.jpg</image>   
		<price>
			<tier1>28.00</tier1>
			<tier2>26.00</tier2>
			<tier3>24.00</tier3>
			<tier4>22.00</tier4>
			<tier5>20.00</tier5>
		</price>
		<length>10.00</length>
		<width>8.00</width>
		<height>15.00</height>
		<weight>8.00</weight>
		<description>This is the long description of the product so that they can see the details</description>
     </product>
   </category>
  <category name="babilonico">
      <product>
		<itemnumber>0000000004</itemnumber>
		<name>Computers-101</name>
		<image>Amphora Vase_Brown Saddle.jpg</image>   
		<price>
			<tier1>28.00</tier1>
			<tier2>26.00</tier2>
			<tier3>24.00</tier3>
			<tier4>22.00</tier4>
			<tier5>20.00</tier5>
		</price>
		<length>10.00</length>
		<width>8.00</width>
		<height>15.00</height>
		<weight>8.00</weight>
		<description>This is the long description of the product so that they can see the details</description>
     </product>
   </category>
   <category name="babilonico">
      <product>
	      <itemnumber>0000000005</itemnumber>
	      <name>Computers 123</name>
	      <image>Amphora Vase_Brown Saddle.jpg</image>   
	     <price>
	     	<tier1>28.00</tier1>
	     	<tier2>26.00</tier2>
	     	<tier3>24.00</tier3>
	     	<tier4>22.00</tier4>
	     	<tier5>20.00</tier5>
	     </price>
		<length>10.00</length>
		<width>8.00</width>
		<height>15.00</height>
		<weight>8.00</weight>
		<description>This is the long description of the product so that they can see the details</description>
     </product>
   </category>
   <category name="babilonico">
      <product>
	      <itemnumber>0000000006</itemnumber>
	      <name>Computers For Dummies</name>
	      <image>Amphora Vase_Brown Saddle.jpg</image>   
         <price>
         	<tier1>28.00</tier1>
         	<tier2>26.00</tier2>
         	<tier3>24.00</tier3>
         	<tier4>22.00</tier4>
         	<tier5>20.00</tier5>
         </price>
		<length>10.00</length>
		<width>8.00</width>
		<height>15.00</height>
		<weight>8.00</weight>
		<description>This is the long description of the product so that they can see the details</description>
     </product>
   </category>
</catalog>

Open in new window

aibusinesssolutions

Well it's not optimal, since it would load every large picture on page load, that's wasted bandwidth. I'll take a look at your XML and see if I can figure out what is causing that ) bug on your end, otherwise you may have to do it the way you are doing.