Javascript with ASP:TextBox inside Repeater - javascript

Okay so I've got a little problem with combining my own Javascript with the ASP server controls.
The picture: I've got a couple of ASP:TextBoxes on my page who are created by a repeater. My goal is to sum all the values the user types into these textboxes. This must happen whenever the user changes something to the content of the textboxes. (On the bottom of the page I got a little price calculator, which works with server side code but I want to make it more dynamic, I'm talking about txtTeam and txtPart)
<asp:Content ID="Content3" ContentPlaceHolderID="contentPlaceHolder" runat="Server">
<script type="text/javascript">
</script>
<div id='inputDiv'>
<h1>
Students per team</h1>
<table>
<tr>
<td>
Team
</td>
<td>
Actual
</td>
<td>
Maximum
</td>
</tr>
<asp:Repeater ID="Repeater2" runat="server" DataSourceID="odsTeams">
<ItemTemplate>
<tr>
<td id='td<%# Eval("team_id") %>'>
<%# Eval("name") %>
</td>
<td id='txtTeam<%# Eval("team_id") %>'>
<asp:TextBox ID="txtTeam" runat="server"></asp:TextBox>
<asp:RangeValidator EnableClientScript="true" ID="rgvTeams" runat="server" ErrorMessage="*"
MinimumValue="0" MaximumValue='<%# Eval("st_max") %>' ControlToValidate="txtTeam"></asp:RangeValidator>
</td>
<td id='lblTeam<%# Eval("team_id") %>'>
<asp:Label runat="server">
<%# Eval("st_max") %>
</asp:Label>
</td>
</tr>
</ItemTemplate>
</asp:Repeater>
</table>
<asp:ObjectDataSource ID="odsTeams" runat="server" OldValuesParameterFormatString="original_{0}"
SelectMethod="GetTeamsByDelegationID" TypeName="ERASTableAdapters.tbl_teamTableAdapter"
OnSelecting="odsTeams_Selecting">
<SelectParameters>
<asp:Parameter Name="delegation_id" Type="Int32" />
</SelectParameters>
</asp:ObjectDataSource>
<h1>
Additional Participants</h1>
<table>
<tr>
<td>
Category
</td>
<td>
Actual
</td>
<td>
Maximum
</td>
</tr>
<asp:Repeater ID="Repeater1" runat="server" DataSourceID="odsParticipantsCat">
<ItemTemplate>
<tr>
<td id='<%# Eval("participant_category_id") %>'>
<%# Eval("name") %>
</td>
<td id='txtPart<%# Eval("participant_category_id") %>'>
<asp:TextBox ID="txtPart" runat="server" Enabled='<%# getMax(Eval("key").ToString()) > 0 %>'></asp:TextBox>
<asp:RangeValidator EnableClientScript="true" ID="rgvPart" runat="server" ErrorMessage="*"
MinimumValue="0" MaximumValue='<%# getMax(Eval("key").ToString())%>' ControlToValidate="txtPart"></asp:RangeValidator>
</td>
<td id='lblPart<%# Eval("participant_category_id") %>'>
<asp:Label runat="server">
<%# getMax(Eval("key").ToString())%>
</asp:Label>
</td>
</tr>
</ItemTemplate>
</asp:Repeater>
<asp:ObjectDataSource ID="odsParticipantsCat" runat="server" OldValuesParameterFormatString="original_{0}"
SelectMethod="GetAdditionalParticipantCategories" TypeName="ERASTableAdapters.tbl_participant_categoryTableAdapter">
</asp:ObjectDataSource>
</table>
</div>
<h1>
Advance to be paid</h1>
<table>
<tr>
<td>
Number of participants
</td>
<td>
Days
</td>
<td>
Price
</td>
<td>
Total
</td>
</tr>
<tr>
<td runat="server" id="tdNumberPart1">
0
</td>
<td runat="server" id="tdDays1">
0
</td>
<td runat="server" id="tdPrice1">
0
</td>
<td runat="server" id="tdTotal1">
0
</td>
</tr>
<tr>
<td runat="server" id="tdNumberPart2">
0
</td>
<td>
N/A
</td>
<td runat="server" id="tdPrice2">
0
</td>
<td runat="server" id="tdTotal2">
0
</td>
</tr>
<tr>
<td>
</td>
<td>
</td>
<td>
</td>
<td runat="server" id="tdGrandTotal" style="font-weight: bold">
0
</td>
</tr>
</table>
<asp:Button runat="server" ID="btnConfirm" Text="Confirm" OnClick="btnConfirm_Click"
Style="height: 29px" />
<asp:Label runat="server" ID="lblInfo"></asp:Label>

Give your tables ids, eg <table id="students"> and <table id="additional">. Then, iterate the rows, find the input element in each row, and sum the values as you go:
function sumTable(id)
{
var count = 0;
var studentTable = document.getElementById(id);
for (var i=1; i in studentTable.rows; i++)
{
var r = studentTable.rows[i];
var input = r.getElementsByTagName("input")[0];
var n = parseFloat(input.value);
if (isFinite(n)) count += n;
}
return count;
}
var totalParticipants = sumTable("students") + sumTable("additional");

Using a library like jquery you can easily select all input boxes within a particular div (say your repeater div) or you can add a class specifically to those input boxes and grab them that way.
Attach the function call to the onblur method so that when they move away from the textboxes you can sum them up.

Related

Refresh partial page on user control text change event

I have one Usercontrol Textbox with some radio buttons.
I want to refresh some of these buttons when I change the usercontrol textbox value.
In short, when I select Specific button it displays RM row & for All radio button selection it hides RM row. After selecting RM & checking Client radio button, it again displays two radio button below. By checking any of radio it displays the grid data below. For Prospect & Closed button it displays grid data below after checking it.
For all radio all the functionality is same except RM selection.
My all functionality is working as expected just need to add one more addition in it.
Now I want to refresh 5 radio buttons(Client, Prospect, Closed, Client, Family) which are below RM user control screen when I change the RM name from usercontrol textbox.
I tried using update panel but it couldn't work as it got mess for me so reverted all that changes. My current working code is as below:
<script type="text/javascript">
$110 = $;
$110(document).ready(function () {
//intial setting of panel
rdoBtnShowHidePanels();
$110("#trClient").hide();
$110("#btnSendSms").hide();
$110("#trCommMode").hide();
$110("input[type='radio'][name='First']").attr('checked', false);
$110("input[type='radio'][name='SelectRM']").change(function () {
$110("#trClient").hide();
$110("#jqxContact").hide();
$110("#trCommMode").hide();
if ($110("input[type='radio'][id='RdoSpecific']").is(":checked") == true) {
$110("input[type='radio'][name='First']").attr('checked', false);
$110("input[type='radio'][name='a']").attr('checked', false);
$110("#trRM").show();
$("input[id$=mcscRMSearch_txtSearch]").val('');
$110("input[type='radio'][name='First']").change(function () {
if ($110("input[type='radio'][id='RdoSpecific']").is(":checked") == true) {
if (ValidateRMSelection() == true) {
$110("#trRM").show();
if ($110("input[type='radio'][id='rdoClientAll']").is(":checked") == true) {
$110("#trClient").show();
$110("input[type='radio'][name='a']").change(function () {
$110("#hdnType").val("C");
$110("#jqxContact").show();
var getselectedrowindexes = $110('#jqxContact').jqxGrid('getselectedrowindexes');
$110('#jqxContact').jqxGrid('unselectrow', getselectedrowindexes);
$110('#jqxContact').jqxGrid('clearselection');
if ($110("input[type='radio'][id='RdoSpecific']").is(":checked") == true) {
BindGridBasedOnRadioButtons();
}
$110("#trCommMode").show();
return;
})
}
else {
$110("#hdnType").val("P");
$110("input[type='radio'][id='rdoclient']").prop("checked", false);
$110("input[type='radio'][id='rdofamily']").prop("checked", false);
$110("#trClient").hide();
$110("#jqxContact").show();
var getselectedrowindexes = $110('#jqxContact').jqxGrid('getselectedrowindexes');
$110('#jqxContact').jqxGrid('unselectrow', getselectedrowindexes);
$110('#jqxContact').jqxGrid('clearselection');
if ($110("input[type='radio'][id='RdoSpecific']").is(":checked") == true) {
BindGridBasedOnRadioButtons();
}
$110("#trCommMode").show();
return;
}
}
else {
alert("Select RM");
$110("#trClient").hide();
$110("#trCommMode").hide();
$110("#jqxContact").hide();
return;
}
}
})
}
else {
$110("#trRM").hide();
$110("#trCommMode").hide();
$110("input[type='radio'][name='First']").attr('checked', false);
$110("input[type='radio'][name='a']").attr('checked', false);
$110("input[type='radio'][name='First']").change(function () {
if ($110("input[type='radio'][id='rdoClientAll']").is(":checked") == true) {
$110("#jqxContact").hide()
$110("#trClient").show();
$110("input[type='radio'][name='a']").change(function () {
$110("#hdnType").val("C");
$110("#jqxContact").show();
var getselectedrowindexes = $110('#jqxContact').jqxGrid('getselectedrowindexes');
$110('#jqxContact').jqxGrid('unselectrow', getselectedrowindexes);
$110('#jqxContact').jqxGrid('clearselection');
BindGridBasedOnRadioButtons1();
$110("#trCommMode").show();
return;
})
}
else {
$110("#hdnType").val("P");
$110("input[type='radio'][id='rdoclient']").prop("checked", false);
$110("input[type='radio'][id='rdofamily']").prop("checked", false);
$110("#trClient").hide();
$110("#jqxContact").show();
var getselectedrowindexes = $110('#jqxContact').jqxGrid('getselectedrowindexes');
$110('#jqxContact').jqxGrid('unselectrow', getselectedrowindexes);
$110('#jqxContact').jqxGrid('clearselection');
BindGridBasedOnRadioButtons1();
$110("#trCommMode").show();
return;
}
})
}
})
<form id="Form1" method="post" runat="server">
<asp:ScriptManager ID="scmPhoneBook" runat="server">
</asp:ScriptManager>
<table id="Table1" cellspacing="1" cellpadding="0" width="100%" border="0">
<tr>
<td class="clsTitle" align="center" style="height: 25px">Contacts
</td>
</tr>
<tr>
<td class="clstd" align="left" style="width: 100%" colspan="2">
<table width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td class="clstdnext" align="left" style="width: 100%" colspan="2">
<asp:RadioButton ID="RdoSpecific" runat="server" GroupName="SelectRM" Text="Specific"></asp:RadioButton>
<asp:RadioButton ID="RdoAll" runat="server" GroupName="SelectRM" Text="All"></asp:RadioButton>
</td>
</tr>
<tr id="trRM">
<td class="clstd" width="2%">RM
</td>
<td class="clstd" width="98%">
<mwimcs:MultiColumnSearchControl
runat="server"
ID="mcscRMSearch"
CssClass="clsTextbox"
Width="300"
ControlType="137"
DataTextField="usr_name"
DataValueField="usr_id"
Top="-15px" />
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td class="clstdnext" align="left" style="width: 100%" colspan="2">
<asp:RadioButton ID="rdoClientAll" runat="server" GroupName="First" Text="Client"></asp:RadioButton>
<asp:RadioButton ID="RdoProspect" runat="server" GroupName="First" Text="Prospect"></asp:RadioButton>
<asp:RadioButton ID="RdoClosed" runat="server" GroupName="First" Text="Closed"></asp:RadioButton>
</td>
</tr>
<tr id="trClient">
<td class="clstd" align="left" style="width: 100%" colspan="2">
<asp:RadioButton ID="rdofamily" runat="server" GroupName="a" Text="Family"></asp:RadioButton>
<asp:RadioButton ID="rdoclient" runat="server" GroupName="a" Text="Client"></asp:RadioButton>
</td>
</tr>
<tr>
<td valign="top">
<div id="jqxContact"></div>
<asp:Panel ID="PnlClient" runat="server" Width="100%">
</asp:Panel>
</td>
<asp:DataGrid ID="dgCompany" runat="server" Width="100%" AutoGenerateColumns="False"
AllowSorting="True" AllowPaging="True" PageSize="25">
</asp:DataGrid>
</tr>
</table>
<br />
<table width="100%" cellpadding="0" cellspacing="1" border="0">
<tr height="10px">
<td class="clsLabel_err" colspan="2">
<asp:Label ID="lblErrorMsg" runat="server" CssClass="clsLabel_err"></asp:Label>
</td>
</tr>
<tr style="width: 100%" id="trCommMode">
<td class="clstdnext" style="width: 25%">Communication Mode:</td>
<td class="clstdnext" align="left" valign="middle">
<asp:RadioButtonList ID="rbtnlistSmsMail" runat="server" RepeatDirection="Horizontal"
Font-Names="Verdana" Font-Size="11px">
<asp:ListItem>
SMS
</asp:ListItem>
<asp:ListItem>
E-Mail
</asp:ListItem>
</asp:RadioButtonList>
</td>
</tr>
<tr>
<td colspan="2" id="pnlEmailDtls" runat="server">
<asp:Panel ID="pnlpnlEmailDtls" runat="server" Width="100%">
<table id="Table3" cellspacing="1" cellpadding="0" width="100%" border="0">
<tr>
<td class="clstd" style="width: 25%">Email From</td>
<td class="clsTd" style="width: 80%">
<cc1:MultiColumnComboBox ID="mmcEmail" runat="server" CssClass="clstd" HeaderCSS="clsReportTitle"
ItemsCSS="clstdnext" VerticalScrolling="True" DownArrowButtonCSS="clsButton"
DownArrowImageURL="url(Images/downarrow.gif)" DownArrowButtonHeight="12" DownArrowButtonWidth="20"
TextBoxCSS="clsTextbox">
<Columns>
<cc1:Column ColumnWidth="" DataField="email" KeyColumn="True" HeaderText="Email"></cc1:Column>
<cc1:Column ColumnWidth="" DataField="smtp" KeyColumn="False" HeaderText="SMTP"></cc1:Column>
</Columns>
</cc1:MultiColumnComboBox>
</td>
</tr>
<tr>
<td class="clstdnext" style="width: 20px">Subject</td>
<td class="clstdnext" style="width: 80px">
<asp:TextBox ID="txtSubject" runat="server" CssClass="clsTextbox" Width="327px">
</asp:TextBox>
</td>
</tr>
<tr>
<td class="clstd">Attachment 1)
</td>
<td class="clstd">
<input class="clsTextbox" id="fileupload1" style="width: 250px" type="file" size="48" runat="server"
name="fileupload1" />
</td>
</tr>
<tr>
<td class="clstdnext">Attachment 2)
</td>
<td class="clstdnext">
<input class="clsTextbox" id="fileupload2" style="width: 250px" type="file" size="48" runat="server"
name="fileupload2" />
</td>
</tr>
<tr>
<td class="clstd">Attachment 3)
</td>
<td class="clstd">
<input class="clsTextbox" id="fileupload3" style="width: 250px" type="file" size="48" runat="server"
name="fileupload3" />
</td>
</tr>
<tr>
<td class="clsReportTitle" align="center" style="width: 100%" colspan="2">Message
</td>
</tr>
<tr>
<%--<TD width="100%" colSpan=2>
<asp:TextBox id=txtMessage runat="server" CssClass="clsTextbox" Width="100%" TextMode="MultiLine" Height="250px"></asp:TextBox></TD>--%>
<td align="left" class="clstd" colspan="2">
<ftb:FreeTextBox ID="FreeTextBox1" EnableHtmlMode="false" ToolbarLayout="ParagraphMenu, FontFacesMenu, FontSizesMenu, FontForeColorsMenu,FontForeColorPicker, FontBackColorsMenu, FontBackColorPicker, Bold, Italic, Underline,Strikethrough, Superscript, Subscript|InsertImageFromGallery, CreateLink, Unlink, JustifyLeft, JustifyRight, JustifyCenter, JustifyFull,BulletedList, NumberedList, Indent, Outdent,Cut, Copy, Paste, Delete, Undo, Redo,Save,InsertRule, InsertDate,InsertTime,Preview"
Height="300px" runat="server" Width="100%">
</ftb:FreeTextBox>
</td>
</tr>
<tr>
<td style="width: 100%" class="clstd_btn" colspan="2">
<%--<input id="BtnSendEmail" type="button" class="clsButton" value="Send"/>--%>
<asp:Button ID="BtnSendEmail" runat="server" OnClientClick="return ValidationBeforeEmailSendClick();" CssClass="clsButton" Text="Send"></asp:Button>
</td>
</tr>
</table>
</asp:Panel>
</td>
</tr>
<tr>
<td colspan="2" id="pnlSmsDtls" runat="server">
<asp:Panel ID="pnlpnlSmsDtls" runat="server" Width="100%">
<table cellspacing="1" cellpadding="0" width="100%" border="0">
<tr>
<td class="clstd" style="width: 25%">SMS Type
</td>
<td class="clstd">
<asp:DropDownList ID="ddlSmsType" CssClass="clsCombobox" runat="server">
<asp:ListItem Value="0">---Select---</asp:ListItem>
<asp:ListItem Value="1">Upcoming maturity/due date</asp:ListItem>
<asp:ListItem Value="2">New product offerings</asp:ListItem>
<asp:ListItem Value="3">Pick of the day</asp:ListItem>
</asp:DropDownList>
</td>
</tr>
<tr>
<td colspan="2" class="clstdnext">SMS Text
</td>
</tr>
<tr>
<td colspan="2" class="clstdnext" style="height: 40px">
<asp:TextBox ID="txtSmsText" runat="server" CssClass="clsTextbox" TextMode="MultiLine"
Width="100%" Height="100px">
</asp:TextBox>
</td>
</tr>
<tr>
<td colspan="2" class="clstd_btn">
<input type="button" id="btnGo" value="Save" class="clsButton" />
<%--<asp:Button ID="btnGo" runat="server" CssClass="clsButton" Text="Save" />--%>
<asp:Button ID="btnSendSms" runat="server" CssClass="clsButton" Text="Send SMS"
Width="72px"></asp:Button>
</td>
</tr>
</table>
</asp:Panel>
</td>
</tr>
</table>
<input type="hidden" id="hdnType" />
</form>
Its argent... kindly please help.
Thanks in advance.

Check if All check box in Panel1 are checked to show a Panel2

I have 2 panels, of checkbox: In Panel1, if all checkbox are checked I need to show Panel2.
I have a HTML and a script but it's not working, I think that I'm missing somthing.
here is my code :
<body>
<asp:Panel ID="Panel1" runat="server">
<table>
<tr>
<td>
<asp:Label ID="Title" runat="server" Text="Enter the Title"></asp:Label>
</td>
<td>
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td>
<asp:Label ID="Question1" runat="server" Text="Question1"></asp:Label>
</td>
<td>
<asp:CheckBox ID="CheckBox1" name="cb" runat="server" Checked="false" />
</td>
</tr>
<tr>
<td>
<asp:Label ID="Question2" runat="server" Text="Question2"></asp:Label>
</td>
<td>
<asp:CheckBox ID="CheckBox2" name="cb" runat="server" Checked="false" />
</td>
</tr>
<tr>
<td>
<asp:Label ID="Question3" runat="server" Text="Question3"></asp:Label>
</td>
<td>
<asp:CheckBox ID="CheckBox3" name="cb" runat="server" Checked="false" />
</td>
</tr>
</table>
</asp:Panel>
<asp:Panel ID="Panel2" runat="server">
<table>
<tr>
<td>
<asp:Label ID="Question4" runat="server" Text="Question4"></asp:Label>
</td>
<td>
<asp:CheckBox ID="CheckBox4" runat="server" Checked="false" />
</td>
</tr>
</table>
</asp:Panel>
<table>
<tr>
<td>
<asp:Button ID="Button1" runat="server" Text="Submit" OnClick="Button1_Click" />
</td>
</tr>
</table>
And this is my script but it's not working
$(document).ready(function () {
$('#CheckBox1').removeAttr('checked');
$('#CheckBox2').removeAttr('checked');
$('#CheckBox3').removeAttr('checked');
$('#CheckBox4').removeAttr('checked');
$('#Panel2').hide();
$('#Panel1').change(function () {
if (this.checked) {
$('#Panel2').show();
}
else {
$('#Panel2').hide();
}
});
});
Help please
Using jQuery you can compare the checked checkboxes vs all checkboxes inside Panel1 like this:
if($("#Panel1 input[type=checkbox]:checked").length === $("#Panel1 input[type=checkbox]").length){
$('#Panel2').show();
}else{
$('#Panel2').hide();
}

one of the cascading Dropdownlists does not retain value on Checkbox checked event

Below is my checkbox and corresponding cascading dropdownlists. Now my requirements are:
<table cellpadding="2" border="0" style="margin-left: 2px">
<tr>
<td>
<asp:Label ID="lblChk" runat="server" Text="checkbox"> </asp:Label>
</td>
<td>
<asp:CheckBox ID="chk1" runat="server" AutoPostBack="true" OnCheckedChanged="chk1_CheckedChanged" />
</td>
</tr>
</table>
<table cellpadding="2" border="0" style="margin-left: 2px">
<tr>
<td style="width: 130px" class="Label">DDL1
</td>
<td>
<asp:DropDownList ID="DDL1" runat="server" Width="200px" OnSelectedIndexChanged="DDL1_OnSelectedIndexChanged" AutoPostBack="true">
</asp:DropDownList>
</td>
</tr>
<tr>
<td class="Label">DDL2
</td>
<td>
<asp:DropDownList ID="DDL2" runat="server" Width="200px" OnSelectedIndexChanged="DDL2_OnSelectedIndexChanged" AutoPostBack="true">
</asp:DropDownList>
</td>
</tr>
<tr>
<td class="Label">DDL3
</td>
<td>
<asp:DropDownList ID="DDL3" runat="server" Width="200px">
</asp:DropDownList>
</td>
</tr>
</table>
On unchecking the checkbox, the dropdowns would get enabled and get populated with default values from database
Upon checking these dropdowns should simply get disabled
The issue here is the last dropdown resets to 0th index on checking the checkbox.
Upon analysis, I got a workaround wherein I added empty server side OnSelectedIndexChanged event and it worked. But however, I do not wish to go ahead with this and would like to know the cause and resolution for this issue

Grouping images to display in LightBox

I have an ASP.Net web page and have created a custom control that's soul purpose is to be a list "item" displayed in the main page's panel (asp:Panel), here is that list control:
<%# Control Language="C#" AutoEventWireup="true" CodeBehind="cListItem.ascx.cs" Inherits="CatPro.Presentation.UserControls.CatalyticItem" %>
<script src="../Scripts/jquery-1.10.2.min.js"></script>
<script src="../Scripts/lightbox-2.6.min.js"></script>
<link href="../Css/lightbox.css" rel="stylesheet" />
</style>
<table class="MainFrame" border="1" runat="server">
<tr>
<td runat="server">
<table class="MainFrame">
<tr>
<td class="CatImageColumn" rowspan="5">
<asp:DataList ID="DataList1" runat="server"
RepeatColumns="5"
RepeatDirection="Horizontal"
RepeatLayout="Flow">
<ItemTemplate>
<a id="ImageLink" href='<%# Eval((string)Container.DataItem) %>' data-lightbox="image-1">
<img id="Img1" src="<%# (string)Container.DataItem %>" width="150" height="150">
</a>
</ItemTemplate>
</asp:DataList>
</td>
<td class="LinkHeader" colspan="5">
<asp:LinkButton ID="hyperlinkDescription" runat="server" Font-Bold="True" Font-Size="X-Large">Item Description Link</asp:LinkButton>
</td>
<td class="LinkHeader">
</td>
</tr>
<tr>
<td class="FirstRowLabel">
<asp:Label ID="lblYear" runat="server" Text="Year"></asp:Label>
</td>
<td class="FirstRowText">
<asp:Label ID="txtYear" runat="server"></asp:Label>
</td>
<td class="SecondRowLabel">
<asp:Label ID="lblRasCategory" runat="server" Text="RAS Category:"></asp:Label>
</td>
<td class="SecondRowText">
<asp:Label ID="txtRASCategory" runat="server"></asp:Label>
</td>
<td class="ThirdRowLabel">
<asp:Label ID="lblValue89" runat="server" Text="Value:" ForeColor="Green"></asp:Label>
</td>
<td class="ThirdRowText">
<asp:Label ID="txtValue89" runat="server" ForeColor="Green">$0</asp:Label>
</td>
</tr>
<tr>
<td class="FirstRowLabel">
<asp:Label ID="lblMake" runat="server" Text="Make:"></asp:Label>
</td>
<td class="FirstRowText">
<asp:Label ID="txtMake" runat="server"></asp:Label>
</td>
<td class="SecondRowLabel">
<asp:Label ID="lblPMCategory" runat="server" Text="PowerMount Category:"></asp:Label>
</td>
<td class="SecondRowText">
<asp:Label ID="txtPMCategory" runat="server"></asp:Label>
</td>
<td class="ThirdRowLabel">
<asp:Label ID="lblValue100" runat="server" Text="Value:" ForeColor="Green"></asp:Label>
</td>
<td class="ThirdRowText">
<asp:Label ID="txtValue100" runat="server" ForeColor="Green">$0</asp:Label>
</td>
</tr>
<tr>
<td class="FirstRowLabel">
<asp:Label ID="lblModel" runat="server" Text="Model:"></asp:Label>
</td>
<td class="FirstRowText">
<asp:Label ID="txtModel" runat="server"></asp:Label>
</td>
<td class="SecondRowLabel">
<asp:Label ID="lblOENumber" runat="server" Text="OE Number:"></asp:Label>
</td>
<td class="SecondRowText">
<asp:Label ID="txtOENumber" runat="server"></asp:Label>
</td>
<td class="ThirdRowLabel"></td>
<td class="ThirdRowText"></td>
</tr>
<tr>
<td class="FirstRowLabel">
<asp:Label ID="lblSubModel" runat="server" Text="Sub Model:"></asp:Label>
</td>
<td class="FirstRowText">
<asp:Label ID="txtSubModel" runat="server"></asp:Label>
</td>
<td class="SecondRowLabel">
</td>
<td class="SecondRowText">
</td>
<td class="ThirdRowLabel"> </td>
<td class="ThirdRowText"> </td>
</tr>
</table>
</td>
For every record returned from a database call, one of these controls is added to the main page's Panel control. Each item may have more than 1 image, so i store them in a asp:DataList in the code behind:
string[] images = listCImages.Select(c => c.ImagePath).ToArray();
DataList1.DataSource = images;
DataList1.DataBind();
Ideally, i would like to display the first image in the data set on the control, then when clicked have the LightBox control display the related image collection (by clicking through the set in the LightBox window).
This is the section that uses the LightBox control i'm having issues setting up
<asp:DataList ID="DataList1" runat="server"
RepeatColumns="5"
RepeatDirection="Horizontal"
RepeatLayout="Flow">
<ItemTemplate>
<a id="ImageLink" href='<%# Eval((string)Container.DataItem) %>' data-lightbox="image-1">
<img id="Img1" src="<%# (string)Container.DataItem %>" width="150" height="150">
</a>
</ItemTemplate>
</asp:DataList>
I can load and display a single image with no issue, but my attempts to perform the above mentioned has not been so simple. Is this the right approach? What alterations should i make to get the desired outcome?
I've temporarily solved this by doing somewhat of a hack (a sloppy method in my opinion)...
I first dynamically created my display image:
//Create a HyperLink control
HyperLink linkWrapper = new HyperLink();
linkWrapper.ID = catId.ToString();
//assign a lightbox attribute
linkWrapper.Attributes.Add("rel", string.Format("lightbox[{0}]", catId.ToString()));
linkWrapper.Attributes.Add("title", string.Format("Image(s) for {0}", catId.ToString()));
//The path to my local image
linkWrapper.NavigateUrl = imagePath;
//next, create a display image
Image mainImage = new Image();
mainImage.Height = 128;
mainImage.Width = 128;
mainImage.ID = "img_" + catId.ToString();
mainImage.ImageUrl = imagePath;
//wrap the link around the image
linkWrapper.Controls.Add(mainImage);
//dynamically add display control to td cell
CatImages.Controls.Add(linkWrapper);
Then, if there were any other associated images, i added them like:
foreach (catImage cat in listCatImages) //custom generic list iteration
{
//create a HyperLink control
HyperLink hl = new HyperLink();
hl.Attributes.Add("rel", string.Format("lightbox[{0}]", catalyticConverterId.ToString()));
hl.Attributes.Add("title", "My Cats");
hl.NavigateUrl = cat.ImagePath;
//add just the link to the td cell
CatImages.Controls.Add(hl);
}
Now, when i click on the "Display Image", LightBox picks up the image group and allows me to navigate through them (and the links are not visible).

2 jQuery script on same page

I have 2 jQuery script in one page jQuery Dialog and jQuery slideToggle inside the dialog box, jQuery dialog is working but after hitting button to open jQuery Dialog inside the dialog box there will be a button to slideToggle a div but its not working I tried to move slideToggle outside the dialog and it works. I don't know whats going on inside the dialog box if someone can help me to solve my problem
jQuery Dialog
<script type="text/javascript">
$(function () {
$("#dialog").dialog({
appendTo: "form",
autoOpen: false,
width: 630,
height: 700,
draggable: false,
resizable: false,
modal: true
});
$("#btnaddnew").click(function () {
$("#dialog").dialog("open");
return false;
});
});
</script>
jQuery slideToggle
<script type="text/javascript">
$(document).ready(function () {
$("#Div1").hide();
$("#Button1").click(function () {
$("#Div1").slideToggle();
return false;
});
});
</script>
dialog div + slideToggle div inside the jQuery dialog
<div id="dialog" title="Classification">
<asp:UpdatePanel ID="addpanel" runat="server">
<ContentTemplate>
<table>
<tr>
<td><div id="registerform">
<table align="center" style="margin-top:10px" width="600">
<tr>
<td>
<asp:DropDownList ID="DropDownList1" runat="server"
onselectedindexchanged="DropDownList1_SelectedIndexChanged"
AutoPostBack="True">
<asp:ListItem Selected="True">Choose Classification</asp:ListItem>
<asp:ListItem Value="Resident">Resident</asp:ListItem>
<asp:ListItem Value="Business">Business</asp:ListItem>
</asp:DropDownList>
</td>
</tr>
</table>
<table>
<tr>
<td><div id="divresident" runat="server" visible="false">
<table style="margin-top:10px; margin-bottom:10px">
<tr>
<td width="300" style="text-align:left"><asp:Label ID="lbAddress" runat="server" Text="Address"></asp:Label></td>
<td width="300"><asp:TextBox ID="txtAddress" class="basetxt" runat="server" Width="290"></asp:TextBox></td>
</tr>
<tr>
<td style="text-align:left"><asp:Label ID="lbUserEntry" runat="server" Text="Number of House occupant"></asp:Label></td>
<td><asp:TextBox ID="txtUserEntry" class="basetxt" runat="server" Width="290"></asp:TextBox></td>
</tr>
<tr>
<td style="text-align:left"><asp:Button ID="btnAddOccupant" runat="server" Text="+" />
<asp:Label ID="lbres5" runat="server" Text="Add Occupant"></asp:Label></td>
</tr>
<tr>
<td>
<div id="divOccupantProfile" style="display: none">
<asp:Label ID="OPfamilyname" runat="server" Text="Family Name"></asp:Label>
<asp:TextBox ID="textOPfamilyname" runat="server"></asp:TextBox><br />
<asp:Label ID="OPfirstname" runat="server" Text="First Name"></asp:Label>
<asp:TextBox ID="textOPfirstname" runat="server"></asp:TextBox><br />
<asp:Label ID="OPmiddlename" runat="server" Text="Middle Name"></asp:Label>
<asp:TextBox ID="textOPmiddlename" runat="server"></asp:TextBox><br />
<asp:Label ID="OPmaritalstatus" runat="server" Text="Marital Status"></asp:Label>
<asp:DropDownList ID="ddlOPmaritalstatus" runat="server" >
<asp:ListItem></asp:ListItem>
<asp:ListItem>Married</asp:ListItem>
<asp:ListItem>Single</asp:ListItem>
<asp:ListItem>Divorced</asp:ListItem>
</asp:DropDownList><br />
<asp:Label ID="OPoccupation" runat="server" Text="Occupation"></asp:Label>
<asp:TextBox ID="textOPoccupation" runat="server"></asp:TextBox><br />
<asp:Label ID="OPrelationship" runat="server" Text="Relationship"></asp:Label>
<asp:DropDownList ID="ddlOPrelationship" runat="server" >
<asp:ListItem></asp:ListItem>
<asp:ListItem>Wife</asp:ListItem>
<asp:ListItem>Daughter</asp:ListItem>
<asp:ListItem>Son</asp:ListItem>
<asp:ListItem>Father</asp:ListItem>
<asp:ListItem>Mother</asp:ListItem>
<asp:ListItem>House helper</asp:ListItem>
<asp:ListItem>Driver</asp:ListItem>
</asp:DropDownList>
</div>
<div id="holder">
</div>
</td>
</tr>
</table>
</div></td>
</tr>
</table>
<table>
<tr>
<td><div id="divbusiness" runat="server" visible="false">
<table width="600" style="margin-top:10px; margin-bottom:10px">
<tr>
<td width="300" style="text-align:left"><asp:Label ID="lbbus1" runat="server" Text="Registered Business Name" ></asp:Label></td>
<td width="300"><asp:TextBox ID="txtbus2" class="basetxt" runat="server" Width="290"></asp:TextBox></td>
</tr>
<tr>
<td width="300" style="text-align:left"><asp:Label ID="lbbus3" runat="server" Text="Address"></asp:Label></td>
<td width="300"><asp:TextBox ID="txtbus4" class="basetxt" runat="server" Width="290"></asp:TextBox></td>
</tr>
<tr>
<td width="300" style="text-align:left"><asp:Label ID="lbbus5" runat="server" Text="Structure"></asp:Label></td>
<td width="300"> </td>
</tr>
<tr>
<td width="300" style="text-align:left"><asp:Label ID="lbbus6" runat="server" Text="SEC No./DTI number"></asp:Label></td>
<td width="300"><asp:TextBox ID="txtbus7" class="basetxt" runat="server" Width="290"></asp:TextBox></td>
</tr>
<tr>
<td width="300" style="text-align:left"><asp:Label ID="lbbus8" runat="server" Text="Nature of Business"></asp:Label></td>
<td width="300"><asp:TextBox ID="txtbus9" class="basetxt" runat="server" Width="290"></asp:TextBox></td>
</tr>
<tr>
<td colspan="2" style="text-align:left">
<div>
<asp:Button ID="Button1" runat="server" Text="+" />
<asp:Label ID="Label1" runat="server" Text="Add Phone"></asp:Label>
<div id="Div1" style="display: none">
<asp:Label ID="Label2" runat="server" Text="Landline work"></asp:Label>
<asp:TextBox ID="TextBox1" class="basetxt" runat="server" ></asp:TextBox><br />
<asp:Label ID="Label3" runat="server" Text="Handphone personal" ></asp:Label>
<asp:TextBox ID="TextBox2" class="basetxt" runat="server"></asp:TextBox><br />
<asp:Label ID="Label4" runat="server" Text="Handphone work"></asp:Label>
<asp:TextBox ID="TextBox3" class="basetxt" runat="server"></asp:TextBox>
</div>
</div>
</td>
</tr>
</table>
</div></td>
</tr>
</table>
</table>
</ContentTemplate>
</asp:UpdatePanel>
</div>
.click won't work on later loaded elements, try it like this, replace:
$("#Button1").click(function () {
With:
$("body").on('click', '#Button1', function() {

Categories