I'm trying to get an ajax function to run when I change the choice in the group.
but I don't know to which attribute will fire the Ajax.
I tried to do all kinds of things but everything I do produces an error in the browser.
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Checkout page</title>
<script type="text/javascript">
var request;
function NIS2USD() {
var from = document.getElementById("NIS").value;
var to = document.getElementById("USD").value;
var amount = document.getElementById("totalAmountLabel").value;
request = new XMLHttpRequest();
request.onreadystatechange = ProcessResponse;
request.open("GET", "Convert.aspx?from=" + num1 + "&to=" + num2 + "&amount=" + amount, true);
request.send();
}
function USD2NIS() {
var from = document.getElementById("USD").value;
var to = document.getElementById("NIS").value;
var amount = document.getElementById("totalAmountLabel").value;
request = new XMLHttpRequest();
request.onreadystatechange = ProcessResponse;
request.open("GET", "Convert.aspx?from=" + num1 + "&to=" + num2 + "&amount=" + amount, true);
request.send();
}
function ProcessResponse() {
if (request.readyState == 4 && request.status == 200) {
document.getElementById("totalAmountLabel").innerHTML = request.responseText;
}
}
</script>
<link href="style.css" rel="stylesheet" type="text/css" media="screen" />
</head>
<body>
<form id="form1" runat="server">
<div class="content">
<div id="top">
<div class="topright">
<img src="images/sitemap.png" alt="Sitemap"
<img src="images/rss.png" alt="RSS" />
</div>
</div>
<div id="header">
<div class="headings">
<h1>WebBookStore</h1>
<h2>pay less read more</h2>
</div>
</div>
<div id="menu">
<ul>
<li>Login</li>
<li>About Us</li>
<li>The Books Collection</li>
<li>Search Books</li>
<li>Your Cart</li>
<li>Checkout</li>
</ul>
</div>
<div id="main">
<div class="left">
<asp:Label ID="Label1" runat="server" Font-Size="X-Large" Text="Checkout"</asp:Label>
<br />
<br />
<asp:Label ID="Label2" runat="server" Text="Client ID:"></asp:Label>
<asp:Label ID="clientIDLabel" runat="server" Text="Label"></asp:Label>
<br />
<br />
<asp:Label ID="Label3" runat="server" Text="Delivery Date:"></asp:Label>
<asp:Label ID="orderDateLabel" runat="server" Text="Label"></asp:Label>
<br />
<br />
<asp:Label ID="Label4" runat="server" Text="Total:"></asp:Label>
<asp:Label ID="totalAmountLabel" runat="server" Text="Label"></asp:Label>
<br />
<br />
<asp:Label ID="Label7" runat="server" Text="Currency:"></asp:Label>
<asp:RadioButton ID="NIS" runat="server" Checked="True"
GroupName='group1' Text="NIS" />
<asp:RadioButton ID="USD" runat="server" GroupName='group1' Text="USD" />
<br />
<br />
<asp:Label ID="Label6" runat="server"
Text="Pick a delivery date"></asp:Label>
<br />
<br />
<asp:Calendar ID="Calendar1" runat="server" BackColor="White"
BorderColor="Black" BorderStyle="Solid" CellSpacing="1" Font-Names="Verdana"
Font-Size="9pt" ForeColor="Black" Height="64px" NextPrevFormat="ShortMonth"
Width="218px" onselectionchanged="Calendar1_SelectionChanged">
<DayHeaderStyle Font-Bold="True" Font-Size="8pt" ForeColor="#333333"
Height="8pt" />
<DayStyle BackColor="#CCCCCC" />
<NextPrevStyle Font-Bold="True" Font-Size="8pt" ForeColor="White" />
<OtherMonthDayStyle ForeColor="#999999" />
<SelectedDayStyle BackColor="#333399" ForeColor="White" />
<TodayDayStyle BackColor="#999999" ForeColor="White" />
</asp:Calendar>
<br />
<asp:Button ID="Button1" runat="server" onclick="Button1_Click"
Text="Submit Order" />
<br />
<asp:TextBox ID="TextBox1" runat="server" ForeColor="Red" Height="67px"
ReadOnly="True" TextMode="MultiLine" Visible="False" Width="451px"></asp:TextBox>
<br />
</div>
</div>
<div id="footer">
<div class="info">
© 2012 WebBookStore<br />
Site Design - WebBookStore
</div>
</div>
</div>
</form>
This code for c# and you can add in page_load()
NIS.Attributes.Add("onclick", "USD2NIS();");
USD.Attributes.Add("onclick", "NIS2USD();");
I'd wrap your radiobuttons in a div and access them like so.
<script type="text/javascript">
$(function () {
$("#rbs input").on("click", function() {
DoSomthing($(this).attr("value"));
});
});
function DoSomthing(val) {
$("#<%=totalAmountLabel.ClientID%>").html(val);
}
</script>
<div id="rbs">
<p>
<asp:RadioButton ID="NIS" runat="server" Checked="True" GroupName="rbGroup" Text="NIS"/>
<asp:RadioButton ID="USD" runat="server" GroupName="rbGroup" Text="USD"/>
</div>
<asp:Label ID="totalAmountLabel" runat="server" Text="Label"></asp:Label>
Hope this helps
EDIT : Added how to get an ASP.NET control using jquery Selector.
Related
<ItemTemplate>
<div class="span3">
<div class="row">
<asp:ImageButton ID="ImageButton1" runat="server" ImageUrl='<%# Eval("product_img") %>' BorderStyle="Outset" ImageAlign="Top" Width="250px" />
</div>
<div class="row" >
<b>product_name:</b>
<asp:Label ID="product_nameLabel" runat="server" Text='<%# Eval("product_name") %>' />
</div>
<div class="row">
<b>product_description:</b>
<asp:Label ID="product_descriptionLabel" runat="server" Text='<%# Eval("product_description") %>' />
</div>
<div class="row">
<b>product_price:</b>
<asp:Label ID="product_priceLabel" runat="server" Text='<%# Eval("product_price")%>' />
</div>
<br /><br /><br /><br />
</div>
</ItemTemplate>
<SelectedItemStyle BackColor="#669999" Font-Bold="True" ForeColor="White" />
</asp:DataList>
how i can give hover effect to the items
i have used jquery but it is taking effect to the first item only
is there any way to give hover mouseover effects to individual items
You can use the :hover selector in CSS to the row class like so:
.row:hover {
/* styling */
}
With Jquery:
$(document).ready(function(){
$('.row').hover(function(){
$(this).css('background-color','yellow');
},function(){
$(this).css('background-color','transparent');
})
})
$(document).ready(function(){
$('.row').hover(function(){
$(this).css('background-color','yellow');
},function(){
$(this).css('background-color','transparent');
})
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<ItemTemplate>
<div class="span3">
<div class="row">
<asp:ImageButton ID="ImageButton1" runat="server" ImageUrl='<%# Eval("product_img") %>' BorderStyle="Outset" ImageAlign="Top" Width="250px" />
</div>
<div class="row" >
<b>product_name:</b>
<asp:Label ID="product_nameLabel" runat="server" Text='<%# Eval("product_name") %>' />
</div>
<div class="row">
<b>product_description:</b>
<asp:Label ID="product_descriptionLabel" runat="server" Text='<%# Eval("product_description") %>' />
</div>
<div class="row">
<b>product_price:</b>
<asp:Label ID="product_priceLabel" runat="server" Text='<%# Eval("product_price")%>' />
</div>
<br /><br /><br /><br />
</div>
</ItemTemplate>
<SelectedItemStyle BackColor="#669999" Font-Bold="True" ForeColor="White" />
</asp:DataList>
With Css:
.row:hover {
background-color:yellow;
}
.row:hover {
background-color:yellow;
}
<ItemTemplate>
<div class="span3">
<div class="row">
<asp:ImageButton ID="ImageButton1" runat="server" ImageUrl='<%# Eval("product_img") %>' BorderStyle="Outset" ImageAlign="Top" Width="250px" />
</div>
<div class="row" >
<b>product_name:</b>
<asp:Label ID="product_nameLabel" runat="server" Text='<%# Eval("product_name") %>' />
</div>
<div class="row">
<b>product_description:</b>
<asp:Label ID="product_descriptionLabel" runat="server" Text='<%# Eval("product_description") %>' />
</div>
<div class="row">
<b>product_price:</b>
<asp:Label ID="product_priceLabel" runat="server" Text='<%# Eval("product_price")%>' />
</div>
<br /><br /><br /><br />
</div>
</ItemTemplate>
<SelectedItemStyle BackColor="#669999" Font-Bold="True" ForeColor="White" />
</asp:DataList>
I have an aspx web page contains jquery mobile, I don't know why, whenever I call UpdatePanel.Update() in my code a white page appears as a result! of course the page is not empty because when I view source code (ctrl+u) all content are available. The strange point is for one call in a page, 2 ajax requests submit so two different responses received either two different post parameters. Post in first request is like this:
ScriptManager: UpdatePanel1|grdRequests$ctl03$btnCancel
__ASYNCPOST: true
__EVENTARGUMENT: nothing
__EVENTTARGET: nothing
__EVENTVALIDATION: value here
__LASTFOCUS: nothing
__VIEWSTATE value here
and response is like this:
1|#| |4|5451|updatePanel|UpdatePanel1|
but in second request there is no ScriptManager and ASYNCPOST parameteres, also in response only old content could see no more data. any idea?
CLIENT SIDE:
<%# Page Language="C#" AutoEventWireup="true" CodeFile="ConfOne.aspx.cs" Inherits="ConfDC"%>
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="jquery.mobile-1.1.1.min.css" />
<script src="jquery-1.7.1.min.js" type="text/javascript"></script>
<script src="jquery.mobile-1.1.1.min.js" type="text/javascript"></script>
</head>
<body>
<form id="form1" runat="server" dir="rtl" defaultbutton="btnpage" name="form1">
<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode = "Conditional">
<ContentTemplate>
<table>
<tr>
<td>
<asp:Button runat="server" ID="btnpage" Width="1px" Height="1px" Visible="false"/>
<asp:ScriptManager ID="ScriptManager" runat="server"></asp:ScriptManager>
</td>
</tr>
</table>
<div id="mcnt">
<div data-role="page">
<div data-role="content" style="padding: 10px; text-align: center;">
<asp:GridView ID="tbls runat="server" AutoGenerateColumns="False" Width="100%"
CssClass="mGrid" PagerStyle-CssClass="pgr" AlternatingRowStyle-CssClass="alt"
CellPadding="1" CellSpacing="1" AllowPaging="True" DataKeyNames="Id" OnRowCommand="tbls_RowCommand"
OnPageIndexChanging="tbls_PageIndexChanging">
<Columns>
<asp:TemplateField HeaderText="Amount">
<ItemTemplate>
<asp:Label ID="lblAmount" runat="server" Text='<%# Bind("Amount") %>'></asp:Label>
</ItemTemplate>
<ItemStyle/>
</asp:TemplateField>
<asp:TemplateField>
<ItemTemplate>
<asp:Button Text="Decline" ID="btnCancel" CommandName="CancelRequest" runat="server"
CommandArgument='<%# DataBinder.Eval(Container, "DataItem.id") %>' />
</ItemTemplate>
<HeaderStyle HorizontalAlign="Center" />
<ItemStyle HorizontalAlign="Center" />
</asp:TemplateField>
<asp:TemplateField>
<ItemTemplate>
<asp:Button Text="Accept" ID="btnConfirm" CommandName="ConfirmRequest" runat="server"
OnClientClick="return confirm('Are you sure?');"
CommandArgument='<%# DataBinder.Eval(Container, "DataItem.id") %>' />
</ItemTemplate>
<HeaderStyle HorizontalAlign="Center" />
<ItemStyle HorizontalAlign="Center" />
</asp:TemplateField>
</Columns>
<PagerStyle CssClass="pgr"></PagerStyle>
<AlternatingRowStyle CssClass="alt"></AlternatingRowStyle>
</asp:GridView>
</div>
<div id="rsnCnt">
<asp:Panel ID="pnlReasons" Width="100%" runat="server" Visible="false">
<fieldset>
<asp:TextBox runat="server" ID="txtReasons" CssClass="TextArea" Height="70px" Width="100%"
TextMode="MultiLine"></asp:TextBox>
<asp:Label ID="lblError" runat="server" ForeColor="Red"></asp:Label>
<div id="btnActionCnt">
<div style="float:right;">
<asp:Button type="button" runat="server" ID="btnCancelRequest" Width="100px" class="groovybutton2"
Text="OK " OnClientClick="return confirm('are you sure?');" />
</div>
<div style="float:left;">
<asp:Button type="button" runat="server" ID="btnCancel" class="groovybutton2" Text="NOT OK"
onmouseover="" onmouseout=""
OnClick="btnCancel_Click" Height="25px" Width="100px" />
</div>
</div>
</fieldset>
</asp:Panel>
</div>
</div>
</div>
</ContentTemplate>
</asp:UpdatePanel>
</form>
</body>
</html>
SERVER SIDE:
protected void tbls_RowCommand(object sender, GridViewCommandEventArgs e)
{
if (e.CommandName == "CancelRequest")
{
pnlReasons.Visible = true;
UpdatePanel1.Update();
}
}
Where are you binding your gridview..
You need to bind that in
private void Page_Load()
{
if (!IsPostBack)
{
// Need to Bind your grid here
}
}
I dont know why but when I removed updatepanel works ok.
how do i use a photo slide show inside listview??i am using jquery....the first row works fine..the pictures keep on looping...but in the next rows the pictures do not change..i mean its static...i am binding the image path from the columns"Image1" "Image2" "Image3".
<%# Page Language="VB" AutoEventWireup="false" CodeFile="Restaurant.aspx.vb" Inherits="Restaurant" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<link href="CSS_Styles/twoColFixLtHdr.css" rel="stylesheet" type="text/css" />
<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
<link href="CSS_Styles/Restaurant.css" rel="stylesheet" type="text/css" />
<script src="SpryAssets/jquery-1.4.4.min.js" type="text/javascript"></script>
<script type="text/javascript">
/***
Simple jQuery Slideshow Script
Released by Jon Raasch (jonraasch.com) under FreeBSD license: free to use or modify, not responsible for anything, etc. Please link out to me if you like it :)
***/
function slideSwitch() {
var $active = $('#slideshow IMG.active');
if ($active.length == 0) $active = $('#slideshow IMG:last');
// use this to pull the images in the order they appear in the markup
var $next = $active.next().length ? $active.next()
: $('#slideshow IMG:first');
// uncomment the 3 lines below to pull the images in random order
// var $sibs = $active.siblings();
// var rndNum = Math.floor(Math.random() * $sibs.length );
// var $next = $( $sibs[ rndNum ] );
$active.addClass('last-active');
$next.css({ opacity: 0.0 })
.addClass('active')
.animate({ opacity: 1.0 }, 1000, function() {
$active.removeClass('active last-active');
});
}
$(function() {
setInterval("slideSwitch()", 5000);
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div class="container">
<div class="header">
<asp:LoginStatus ID="LoginStatus1" runat="server"
ForeColor="White"
CssClass="signin" />
<asp:LoginView ID="LoginView1" runat="server">
<AnonymousTemplate>
<asp:HyperLink ID="HyperLink1" runat="server"
CssClass="register"
ForeColor="White"
NavigateUrl="~/login.aspx">Register</asp:HyperLink>
<asp:Label ID="Label2" runat="server"
ForeColor="White"
CssClass="welcome">Welcome!Guest.
</asp:Label>
</AnonymousTemplate>
<LoggedInTemplate>
<asp:HyperLink ID="HyperLink2" runat="server"
NavigateUrl="~/account.aspx"
ForeColor="White"
CssClass="myaccount"
ToolTip="Click here to go to your account page.">My Account</asp:HyperLink>
<asp:Label ID="Label2" runat="server"
ForeColor="White"
CssClass="welcome">Welcome!<asp:LoginName ID="LoginName2" runat="server" />
</asp:Label>
</LoggedInTemplate>
</asp:LoginView>
<!-- end .header --></div>
<div id="navPos">
<ul id="MenuBar1" class="MenuBarHorizontal">
<li>
<asp:HyperLink ID="Home" runat="server" NavigateUrl="~/homepage_aspx/homepage.aspx">Home</asp:HyperLink>
</li>
<li>
<asp:HyperLink ID="Products" runat="server" CssClass="MenuBarItemSubmenu">Products</asp:HyperLink>
<ul>
<li><asp:HyperLink ID="Groceries" runat="server">Groceries</asp:HyperLink></li>
<li><asp:HyperLink ID="DepartmentalItems" runat="server">Departmental Items</asp:HyperLink></li>
<li><asp:HyperLink ID="Electronics" runat="server">Electronics</asp:HyperLink>
<ul>
<li><asp:HyperLink ID="Mobiles" runat="server" NavigateUrl="~/itemsDisplayPage_aspx/itemsDisplayPage.aspx?typeOfItem=mobiles">Mobiles</asp:HyperLink></li>
<li><asp:HyperLink ID="Laptops" runat="server" NavigateUrl="~/itemsDisplayPage_aspx/itemsDisplayPage.aspx?typeOfItem=computers">Laptops & Computers</asp:HyperLink></li>
<li><asp:HyperLink ID="Accessories" runat="server">Accessories</asp:HyperLink></li>
</ul>
</li>
<li><asp:HyperLink ID="Kitchen" runat="server">Kitchen Items</asp:HyperLink></li>
<li><asp:HyperLink ID="HyperLink5" runat="server">HyperLink</asp:HyperLink></li>
<li><asp:HyperLink ID="HyperLink6" runat="server">HyperLink</asp:HyperLink></li>
</ul>
</li>
<li><asp:HyperLink ID="WhyUS" runat="server">Why Us</asp:HyperLink></li>
<li><asp:HyperLink ID="Payment" runat="server">Payment</asp:HyperLink></li>
<li><asp:HyperLink ID="Contact_Us" runat="server" NavigateUrl="ContactUs.aspx">Contact Us</asp:HyperLink></li>
<li><asp:HyperLink ID="AboutUs" runat="server">About Us</asp:HyperLink></li>
</ul>
</div><br /><br />
<div class="content1">
<div>
<asp:SiteMapPath ID="SiteMapPath1" runat="server">
</asp:SiteMapPath>
</div>
<br />
<!-- <div id="wrapper">
<div id="ResImage">
</div>
<div id="ResDesc">
<asp:Label ID="lblDesc" runat="server" Width="290px" Height="190px" BackColor="White">
Pay Rs 499 for MAKEOVER PACKAGE:
Revival Facial, Haircut, Hair Wash, Blow Dry,
Upper Lip & Eyebrows Threading worth
Rs 1480 # LAKME STUDIOS & SALONS, DELHI & NCR
(Valid at 16 outlets)</asp:Label>
</div>
<div id="ResPrice1">
<asp:Label ID="lblValue" runat="server" Text="Value" CssClass="ResValue"></asp:Label>
<asp:Label ID="lblDiscount" runat="server" Text="Discount" CssClass="ResDiscount"></asp:Label>
<asp:Label ID="lblYouPay" runat="server" Text="You Pay" CssClass="ResYouPay"></asp:Label>
<div id="ResPrice2">
<asp:Label ID="lblValueAmt" runat="server" Text="Rs.2000" CssClass="ResValueAmt"></asp:Label>
<asp:Label ID="lblDiscountAmt" runat="server" Text="Rs.6000" CssClass="ResDiscountAmt"></asp:Label>
<asp:Label ID="lblYouPayAmt" runat="server" Text="Rs.1400" CssClass="ResYouPayAmt"></asp:Label>
</div>
<asp:LinkButton ID="lnkGetCoupon" runat="server">Get Discount Coupon</asp:LinkButton>
</div>
<div id="HowItWorks">
<asp:Label ID="lblHowItWorks" runat="server" Text="How It Works?" Font-Bold="True" Font-Size="Small" ForeColor="Red"></asp:Label>
<ul>
<li><asp:Label ID="Label3" runat="server" Text="1.Click on the 'Get Discount Coupon' button" Font-Size="10px"></asp:Label></li>
<li><asp:Label ID="Label4" runat="server" Text="2.Get a print of your Voucher and carry it during your visit to the outlet." Font-Size="10px"></asp:Label></li>
<li><asp:Label ID="Label5" runat="server" Text="3.Show your Voucher and pay the amount directly to the merchant. " Font-Size="10px"></asp:Label></li>
</ul>
</div>
</div> -->
<asp:ListView ID="ListView1" runat="server" DataSourceID="SqlDataSource1"
DataKeyNames="OfferID" GroupItemCount="2" >
<EmptyDataTemplate>
<table runat="server" style="">
<tr>
<td>
No data was returned.</td>
</tr>
</table>
</EmptyDataTemplate>
<InsertItemTemplate>
<td runat="server" style="">
OfferID:
<asp:TextBox ID="OfferIDTextBox" runat="server" Text='<%# Bind("OfferID") %>' />
<br />
RestaurantID:
<asp:TextBox ID="RestaurantIDTextBox" runat="server"
Text='<%# Bind("RestaurantID") %>' />
<br />
Offer:
<asp:TextBox ID="OfferTextBox" runat="server" Text='<%# Bind("Offer") %>' />
<br />
Value:
<asp:TextBox ID="ValueTextBox" runat="server" Text='<%# Bind("Value") %>' />
<br />
Discount:
<asp:TextBox ID="DiscountTextBox" runat="server"
Text='<%# Bind("Discount") %>' />
<br />
YouPay:
<asp:TextBox ID="YouPayTextBox" runat="server" Text='<%# Bind("YouPay") %>' />
<br />
<asp:Button ID="InsertButton" runat="server" CommandName="Insert"
Text="Insert" />
<br />
<asp:Button ID="CancelButton" runat="server" CommandName="Cancel"
Text="Clear" />
<br />
</td>
</InsertItemTemplate>
<LayoutTemplate>
<table runat="server">
<tr runat="server">
<td runat="server">
<table ID="groupPlaceholderContainer" runat="server" border="0" style="">
<tr ID="groupPlaceholder" runat="server">
</tr>
</table>
</td>
</tr>
<tr runat="server">
<td runat="server" style="">
</td>
</tr>
</table>
</LayoutTemplate>
<EmptyItemTemplate>
<td runat="server" />
</EmptyItemTemplate>
<ItemTemplate>
<td runat="server" style="">
<div id="wrapper">
<div id="ResImage">
<div id="slideshow">
<asp:Image ID="Image1" runat="server" ImageUrl='<%# Eval ("Image1") %>' Width="250px" Height="190px" CssClass="active" />
<asp:Image ID="Image5" runat="server" ImageUrl='<%# Eval ("Image2") %>' Width="250px" Height="190px" />
<asp:Image ID="Image4" runat="server" ImageUrl='<%# Eval ("Image3") %>' Width="250px" Height="190px" />
</div>
</div>
<div id="ResDesc">
<asp:Label ID="lblDesc" runat="server" Width="290px" Height="190px" BackColor="White" Text='<%# Eval("Offer") %>'></asp:Label>
</div>
<div id="ResPrice1">
<asp:Label ID="lblValue" runat="server" Text="Value" CssClass="ResValue"></asp:Label>
<asp:Label ID="lblDiscount" runat="server" Text="Discount" CssClass="ResDiscount"></asp:Label>
<asp:Label ID="lblYouPay" runat="server" Text="You Pay" CssClass="ResYouPay"></asp:Label>
<div id="ResPrice2">
<asp:Label ID="lblValueAmt" runat="server" Text='<%# Eval("Value") %>' CssClass="ResValueAmt"></asp:Label>
<asp:Label ID="lblDiscountAmt" runat="server" Text='<%# Eval("Discount") %>' CssClass="ResDiscountAmt"></asp:Label>
<asp:Label ID="lblYouPayAmt" runat="server" Text='<%# Eval("YouPay") %>' CssClass="ResYouPayAmt"></asp:Label>
</div>
<asp:Label ID="lblRestaurantName" runat="server" Text='<%# Eval("RestaurantName") %>'></asp:Label><br />
<asp:LinkButton ID="lnkGetCoupon" runat="server">Get Discount Coupon</asp:LinkButton>
</div>
<div id="HowItWorks">
<asp:Label ID="lblHowItWorks" runat="server" Text="How It Works?" Font-Bold="True" Font-Size="Small" ForeColor="Red"></asp:Label>
<ul>
<li><asp:Label ID="Label3" runat="server" Text="1.Click on the 'Get Discount Coupon' button" Font-Size="10px"></asp:Label></li>
<li><asp:Label ID="Label4" runat="server" Text="2.Get a print of your Voucher and carry it during your visit to the outlet." Font-Size="10px"></asp:Label></li>
<li><asp:Label ID="Label5" runat="server" Text="3.Show your Voucher and pay the amount directly to the merchant. " Font-Size="10px"></asp:Label></li>
</ul>
</div>
</div>
</td>
</ItemTemplate>
<AlternatingItemTemplate>
<td runat="server" style="">
<div id="wrapper">
<div id="ResImage">
<div id="slideshow">
<asp:Image ID="Image1" runat="server" ImageUrl='<%# Eval ("Image1") %>' Width="250px" Height="190px" CssClass="active" />
<asp:Image ID="Image5" runat="server" ImageUrl='<%# Eval ("Image2") %>' Width="250px" Height="190px" />
<asp:Image ID="Image4" runat="server" ImageUrl='<%# Eval ("Image3") %>' Width="250px" Height="190px" />
</div>
</div>
<div id="ResDesc">
<asp:Label ID="lblDesc" runat="server" Width="290px" Height="190px" BackColor="White" Text='<%# Eval("Offer") %>'></asp:Label>
</div>
<div id="ResPrice1">
<asp:Label ID="lblValue" runat="server" Text="Value" CssClass="ResValue"></asp:Label>
<asp:Label ID="lblDiscount" runat="server" Text="Discount" CssClass="ResDiscount"></asp:Label>
<asp:Label ID="lblYouPay" runat="server" Text="You Pay" CssClass="ResYouPay"></asp:Label>
<div id="ResPrice2">
<asp:Label ID="lblValueAmt" runat="server" Text='<%# Eval("Value") %>' CssClass="ResValueAmt"></asp:Label>
<asp:Label ID="lblDiscountAmt" runat="server" Text='<%# Eval("Discount") %>' CssClass="ResDiscountAmt"></asp:Label>
<asp:Label ID="lblYouPayAmt" runat="server" Text='<%# Eval("YouPay") %>' CssClass="ResYouPayAmt"></asp:Label>
</div>
<asp:Label ID="lblRestaurantName" runat="server" Text='<%# Eval("RestaurantName") %>'></asp:Label><br />
<asp:LinkButton ID="lnkGetCoupon" runat="server">Get Discount Coupon</asp:LinkButton>
</div>
<div id="HowItWorks">
<asp:Label ID="lblHowItWorks" runat="server" Text="How It Works?" Font-Bold="True" Font-Size="Small" ForeColor="Red"></asp:Label>
<ul>
<li><asp:Label ID="Label3" runat="server" Text="1.Click on the 'Get Discount Coupon' button" Font-Size="10px"></asp:Label></li>
<li><asp:Label ID="Label4" runat="server" Text="2.Get a print of your Voucher and carry it during your visit to the outlet." Font-Size="10px"></asp:Label></li>
<li><asp:Label ID="Label5" runat="server" Text="3.Show your Voucher and pay the amount directly to the merchant. " Font-Size="10px"></asp:Label></li>
</ul>
</div>
</div>
</td>
</AlternatingItemTemplate>
<EditItemTemplate>
<td runat="server" style="">
OfferID:
<asp:Label ID="OfferIDLabel1" runat="server" Text='<%# Eval("OfferID") %>' />
<br />
RestaurantID:
<asp:TextBox ID="RestaurantIDTextBox" runat="server"
Text='<%# Bind("RestaurantID") %>' />
<br />
Offer:
<asp:TextBox ID="OfferTextBox" runat="server" Text='<%# Bind("Offer") %>' />
<br />
Value:
<asp:TextBox ID="ValueTextBox" runat="server" Text='<%# Bind("Value") %>' />
<br />
Discount:
<asp:TextBox ID="DiscountTextBox" runat="server"
Text='<%# Bind("Discount") %>' />
<br />
YouPay:
<asp:TextBox ID="YouPayTextBox" runat="server" Text='<%# Bind("YouPay") %>' />
<br />
<asp:Button ID="UpdateButton" runat="server" CommandName="Update"
Text="Update" />
<br />
<asp:Button ID="CancelButton" runat="server" CommandName="Cancel"
Text="Cancel" />
<br />
</td>
</EditItemTemplate>
<GroupTemplate>
<tr ID="itemPlaceholderContainer" runat="server">
<td ID="itemPlaceholder" runat="server">
</td>
</tr>
</GroupTemplate>
<SelectedItemTemplate>
<td runat="server" style="">
OfferID:
<asp:Label ID="OfferIDLabel" runat="server" Text='<%# Eval("OfferID") %>' />
<br />
RestaurantID:
<asp:Label ID="RestaurantIDLabel" runat="server"
Text='<%# Eval("RestaurantID") %>' />
<br />
Offer:
<asp:Label ID="OfferLabel" runat="server" Text='<%# Eval("Offer") %>' />
<br />
Value:
<asp:Label ID="ValueLabel" runat="server" Text='<%# Eval("Value") %>' />
<br />
Discount:
<asp:Label ID="DiscountLabel" runat="server" Text='<%# Eval("Discount") %>' />
<br />
YouPay:
<asp:Label ID="YouPayLabel" runat="server" Text='<%# Eval("YouPay") %>' />
<br />
</td>
</SelectedItemTemplate>
</asp:ListView>
<asp:SqlDataSource ID="SqlDataSource1" runat="server"
ConnectionString="<%$ ConnectionStrings:databaseConnectionString %>"
SelectCommand="SELECT RestaurantOffers.RestaurantID, RestaurantOffers.Offer, RestaurantOffers.Value, RestaurantOffers.Discount, RestaurantOffers.YouPay, RestaurantName.RestaurantName, RestaurantName.Address, RestaurantName.PhoneNumber, RestaurantName.Image1, RestaurantName.Image2, RestaurantName.Image3, RestaurantOffers.OfferID FROM RestaurantName INNER JOIN RestaurantOffers ON RestaurantName.RestaurantID = RestaurantOffers.RestaurantID ORDER BY NEWID() "
ConflictDetection="CompareAllValues"
DeleteCommand="DELETE FROM [RestaurantOffers] WHERE [OfferID] = #original_OfferID AND [RestaurantID] = #original_RestaurantID AND (([Offer] = #original_Offer) OR ([Offer] IS NULL AND #original_Offer IS NULL)) AND (([Value] = #original_Value) OR ([Value] IS NULL AND #original_Value IS NULL)) AND (([Discount] = #original_Discount) OR ([Discount] IS NULL AND #original_Discount IS NULL)) AND (([YouPay] = #original_YouPay) OR ([YouPay] IS NULL AND #original_YouPay IS NULL))"
InsertCommand="INSERT INTO [RestaurantOffers] ([OfferID], [RestaurantID], [Offer], [Value], [Discount], [YouPay]) VALUES (#OfferID, #RestaurantID, #Offer, #Value, #Discount, #YouPay)"
OldValuesParameterFormatString="original_{0}"
UpdateCommand="UPDATE [RestaurantOffers] SET [RestaurantID] = #RestaurantID, [Offer] = #Offer, [Value] = #Value, [Discount] = #Discount, [YouPay] = #YouPay WHERE [OfferID] = #original_OfferID AND [RestaurantID] = #original_RestaurantID AND (([Offer] = #original_Offer) OR ([Offer] IS NULL AND #original_Offer IS NULL)) AND (([Value] = #original_Value) OR ([Value] IS NULL AND #original_Value IS NULL)) AND (([Discount] = #original_Discount) OR ([Discount] IS NULL AND #original_Discount IS NULL)) AND (([YouPay] = #original_YouPay) OR ([YouPay] IS NULL AND #original_YouPay IS NULL))">
<DeleteParameters>
<asp:Parameter Name="original_OfferID" Type="String" />
<asp:Parameter Name="original_RestaurantID" Type="String" />
<asp:Parameter Name="original_Offer" Type="String" />
<asp:Parameter Name="original_Value" Type="String" />
<asp:Parameter Name="original_Discount" Type="String" />
<asp:Parameter Name="original_YouPay" Type="String" />
</DeleteParameters>
<UpdateParameters>
<asp:Parameter Name="RestaurantID" Type="String" />
<asp:Parameter Name="Offer" Type="String" />
<asp:Parameter Name="Value" Type="String" />
<asp:Parameter Name="Discount" Type="String" />
<asp:Parameter Name="YouPay" Type="String" />
<asp:Parameter Name="original_OfferID" Type="String" />
<asp:Parameter Name="original_RestaurantID" Type="String" />
<asp:Parameter Name="original_Offer" Type="String" />
<asp:Parameter Name="original_Value" Type="String" />
<asp:Parameter Name="original_Discount" Type="String" />
<asp:Parameter Name="original_YouPay" Type="String" />
</UpdateParameters>
<InsertParameters>
<asp:Parameter Name="OfferID" Type="String" />
<asp:Parameter Name="RestaurantID" Type="String" />
<asp:Parameter Name="Offer" Type="String" />
<asp:Parameter Name="Value" Type="String" />
<asp:Parameter Name="Discount" Type="String" />
<asp:Parameter Name="YouPay" Type="String" />
</InsertParameters>
</asp:SqlDataSource>
<!-- end .content --></div>
<div class="footer">
<!-- end .footer --></div>
<!-- end .container --></div>
<script type="text/javascript">
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", { imgDown: "SpryAssets/SpryMenuBarDownHover.gif", imgRight: "SpryAssets/SpryMenuBarRightHover.gif" });
</script>
</form>
</body>
</html>
jQuery is only finding the first row in the list view marked with an id of slideshow. From http://api.jquery.com/id-selector/:
For id selectors, jQuery uses the
JavaScript function
document.getElementById(), which is
extremely efficient.
Each id value must be used only once
within a document. If more than one
element has been assigned the same ID,
queries that use that ID will only
select the first matched element in
the DOM. This behavior should not be
relied on, however; a document with
more than one element using the same
ID is invalid.
Try using a class instead to select your elements.
I didn't try this, but just trying to get you in the right direction... change:
<div id="slideshow">
<asp:Image ID="Image1" runat="server" ImageUrl='<%# Eval ("Image1") %>' Width="250px" Height="190px" CssClass="active" />
<asp:Image ID="Image5" runat="server" ImageUrl='<%# Eval ("Image2") %>' Width="250px" Height="190px" />
<asp:Image ID="Image4" runat="server" ImageUrl='<%# Eval ("Image3") %>' Width="250px" Height="190px" />
</div>
to
<div class="slideshow">
<asp:Image ID="Image1" runat="server" ImageUrl='<%# Eval ("Image1") %>' Width="250px" Height="190px" CssClass="active" />
<asp:Image ID="Image5" runat="server" ImageUrl='<%# Eval ("Image2") %>' Width="250px" Height="190px" />
<asp:Image ID="Image4" runat="server" ImageUrl='<%# Eval ("Image3") %>' Width="250px" Height="190px" />
</div>
and anywhere your jquery has #slideshow to .slideshow
They all appear left aligned. I've tried setting the body tag to text-align:center, making divs around and in the main panel, but I can't get it to work. Any ideas?
Here is my CSS code:
.MainPanel {
background-color:#ccccff;
margin-bottom:10px;
margin-top:10px;
}
.MainPanel div {
margin-bottom:10px;
margin-top:10px;
}
.panelSpace {
margin-bottom:25px;
margin-top:25px;
}
.buttonWidth { clear: both; }
.buttonWidth div {
width:17%;
float:left;
margin-left:20px;
}
.centerDiv {
width:100%;
text-align:center;
}
And here's my html:
<body>
<form id="form1" runat="server">
<div style="height:100px; text-align:center;"><uc1:Header ID="Header1" runat="server" /></div><br /><br />
<div>
<div><asp:Label runat="server" ID="lblErrorMessage" CssClass="lblErrorMessage" /></div>
<asp:Panel ID="Panel0" runat="server" BackColor="#9999CC" BorderColor="DarkBlue" BorderWidth="2px">
<div class="centerDiv">
<div>
<asp:Panel ID="Panel1" runat="server" CssClass="MainPanel" Width="550" BorderColor="DarkBlue" BorderWidth="2px" >
<div>Customer: <asp:DropDownList ID="ddlCustomerList" runat="server" AutoPostBack="true" OnSelectedIndexChanged="ddlCustomerList_SelectedIndexChanged" /></div>
</asp:Panel>
</div>
<span class="panelSpace" />
<asp:Panel ID="Panel2" runat="server" CssClass="MainPanel" Width="700" BorderColor="DarkBlue" BorderWidth="2px" style="overflow:auto;" >
<div>
<div class="buttonWidth">
<div>
<asp:Label ID="lblDataSync" runat="server" Text="Data Sync" /><br />
<asp:ImageButton ID="imgDataSync" ImageUrl=".\images\data_sync.bmp" runat="server"
Width="50px" Height="50px" OnClick="imgDataSync_Click" />
</div>
<div>
<asp:Label ID="lblEDI" runat="server" Text="EDI" /><br />
<asp:ImageButton ID="imgEDI" ImageUrl=".\images\edi.jpg" runat="server" Width="50px"
Height="50px" OnClick="imgEDI_Click" />
</div>
<div>
<asp:Label ID="lblShipping" runat="server" Text="Shipping/Routing" /><br />
<asp:ImageButton ID="imgShipping" ImageUrl=".\images\shipping_routing.jpg" runat="server"
Width="50px" Height="50px" OnClick="imgShipping_Click" />
</div>
<div>
<asp:Label ID="lblCompliance" runat="server" Text="Compliance/non-Compliant" /><br />
<asp:ImageButton ID="imgCompliance" ImageUrl=".\images\compliance_nc.jpg" runat="server"
Width="50px" Height="50px" OnClick="imgCompliance_Click" />
</div>
<div>
<asp:Label ID="lblLabels" runat="server" Text="Labels"></asp:Label><br />
<asp:ImageButton ID="imgLabels" ImageUrl=".\images\shipping_label.jpg" runat="server"
Width="50px" Height="50px" OnClick="imgLabels_Click" />
</div>
</div>
<div class="buttonWidth">
<div>
<asp:Label ID="lblManuals" runat="server" Text="Manuals/CustomerLinks" /><br />
<asp:ImageButton ID="imgManuals" ImageUrl=".\images\manuals.bmp" runat="server" Width="50px"
Height="50px" OnClick="imgManuals_Click" />
</div>
<div>
<asp:Label ID="lblPackaging" runat="server" Text="Packaging" /><br />
<asp:ImageButton ID="imgPackaging" ImageUrl=".\images\packaging.gif" runat="server"
Width="50px" Height="50px" OnClick="imgPackaging_Click" />
</div>
<div>
<asp:Label ID="lblTesting" runat="server" Text="Testing"></asp:Label><br />
<asp:ImageButton ID="imgTesting" ImageUrl=".\images\testing.jpg" runat="server" Width="50px"
Height="50px" OnClick="imgTesting_Click" />
</div>
<div>
<asp:Label ID="lblShippingQuickReference" runat="server" Text="Shipping Quick Reference"></asp:Label><br />
<asp:ImageButton ID="imgShippingQuickReference" ImageUrl=".\images\ShippingQuickReference.jpg" runat="server" Width="50px"
Height="50px" OnClick="imgShippingQuickReference_Click" />
</div>
</div>
</div>
</asp:Panel>
<span class="panelSpace" />
<asp:Panel ID="Panel3" runat="server" CssClass="MainPanel" Width="800" BorderColor="DarkBlue" BorderWidth="2px" >
<div>
<h2>Recent Updates:</h2>
<asp:GridView ID="grdHistory" runat="server">...</asp:GridView>
<asp:LinqDataSource ID="ldsHistory" runat="server" ContextTypeName="ComplianceDataContext"
TableName="Histories" OrderBy="CreatedDate desc" />
</div>
</asp:Panel>
<span class="panelSpace" />
</div>
</asp:Panel>
</div>
</form>
</body>
Set the width of the panels not in the ASP.NET code, but in the CSS declaration, e.g.
.MainPanel {
background-color:#ccccff;
margin-bottom:10px;
margin-top:10px;
width: 700px;
}
If you do not want to set the style for all panels, but for each panel, then do something like:
<asp:Panel ID="Panel1" runat="server" CssClass="MainPanel" style="width:550px" BorderColor="DarkBlue" BorderWidth="2px" >
I have 2 panels and using ajax modalpopup control
<asp:Panel ID="pnlHead" runat="server" CssClass="modalPopup">
<asp:Panel ID="pnlBody" runat="server">
<div id="popupHead">
<div id="popup_left">
<asp:Label ID="lblProduct" runat="server"></asp:Label></div>
<!-- end banner_left -->
<div id="popup_right">
</div>
<!-- end banner_right -->
</div>
</asp:Panel>
<p>
<asp:PlaceHolder ID="phcontrol" runat="server"></asp:PlaceHolder>
</p>
<div>
<center>
<asp:ImageButton ID="imgbtnOk" runat="server" OnClick="imgbtnOk_Click" />
</center>
</div>
</asp:Panel>
<asp:Panel ID="pnlHeadWD" runat="server" CssClass="modalPopupWD"
BackImageUrl="~/WebSiteContent/Images/Cloud.JPG">
<asp:Panel ID="pnlBodyWD" runat="server">
<div id="Div1" style="position: absolute; left: 15%; top: 15%; vertical-align: middle;">
<br />
<br />
<br />
<br />
<br />
<p>
<asp:PlaceHolder ID="phcontrolWD" runat="server"></asp:PlaceHolder>
</p>
<div>
<center>
<asp:ImageButton ID="imgbtnOkWD" runat="server" Visible="false" OnClientClick="$find('pnlHeadWD').hide(); return false;" />
</center>
</div>
</div>
</asp:Panel>
</asp:Panel>
<asp:TextBox ID="txtHidden" Visible="false" runat="server"></asp:TextBox>
<cc1:ModalPopupExtender ID="ModalPopupExtender1" runat="server" TargetControlID="lblCopyright"
PopupControlID="pnlHead" BackgroundCssClass="modalBackground" DropShadow="true"
PopupDragHandleControlID="pnlBody">
</cc1:ModalPopupExtender>
<cc1:ModalPopupExtender ID="ModalPopupExtender2" runat="server" TargetControlID="lblCopyright"
BehaviorID="pnlHeadWD" PopupControlID="pnlHeadWD" BackgroundCssClass="modalBackground"
DropShadow="true" PopupDragHandleControlID="pnlBodyWD">
</cc1:ModalPopupExtender>
when I tried to call the first ModalPopupExtender1 then even the second ModalPopupExtender2 is getting executed and 2 modal popup extenders are shown.
public void Populate_Popup(String URL,String Message_Identifier)
{
this.ModalPopupExtender1.Show();
}
public void Populate_Popup2(string Message)
{
this.ModalPopupExtender2.Show();
}
Your TargetControlID="lblCopyright" is the same for both ModalPopupExtenders.