• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 531
  • Last Modified:

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

0
AnnemarieValladares
Asked:
AnnemarieValladares
  • 7
  • 6
  • 3
2 Solutions
 
aibusinesssolutionsCommented:
You need to format the OnClientClick correctly, the javascript function must have quotes around the variable since it is passing a string.  You can use a double quote around the string like so:

OnClientClick='<%# XPath("product/image", "Large(""{0}"");") %>'
0
 
AnnemarieValladaresAuthor Commented:
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:                                     &nbsp;      
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">

 
0
 
aibusinesssolutionsCommented:
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.
0
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
aibusinesssolutionsCommented:
Sorry that should have said "Can you paste the code for your DataList?"
0
 
AnnemarieValladaresAuthor Commented:
<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;      
                             <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>
0
 
AnnemarieValladaresAuthor Commented:
Let me know if you see something as I am at wits end with this...Thanks!! :)
0
 
aibusinesssolutionsCommented:
I really don't see anything wrong there, I don't know why it's saying you need an extra ) on that line, try this instead.

OnClientClick='<%# "Large(""" & XPath("product/image") & """)" %>'
0
 
AnnemarieValladaresAuthor Commented:
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:                                     &nbsp;      
Line 70:                                     
Line 71:                                       <asp:ImageButton runat="server" ImageUrl="images/back3.gif" AlternateText="Details" OnClientClick='<%# "Large(""" & XPath("product/image") & """)" %>' ></asp:ImageButton>
Line 72:
 
0
 
aibusinesssolutionsCommented:
Yes that worked for me.. do you have any unusual characters  in product/image?
0
 
AnnemarieValladaresAuthor Commented:
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

0
 
aibusinesssolutionsCommented:
Can you post some of the XML so I can test it out using your source and XML file?
0
 
urvinayanCommented:
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
0
 
urvinayanCommented:
sorry change to  var imgbox=document.getElementById('<%=imgbox.ClientID%>');
0
 
urvinayanCommented:
Oops sorry .... i thought i ve seen the "runat=server" attribute in your div tag..
so the answer i posted is wrong...
0
 
AnnemarieValladaresAuthor Commented:
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

0
 
aibusinesssolutionsCommented:
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.
0

Featured Post

Vote for the Most Valuable Expert

It’s time to recognize experts that go above and beyond with helpful solutions and engagement on site. Choose from the top experts in the Hall of Fame or on the right rail of your favorite topic page. Look for the blue “Nominate” button on their profile to vote.

  • 7
  • 6
  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now