I would like to show to two different repeaters in same div but once at a time.
<div id="tab1" class="tab_content">
<div class="comment1">
<div class="comments_header">Our Previous Comments</div>
<div class="prev_comments">
<asp:Panel ID="Panel2" runat="server">
<asp:Repeater ID="rptcomment" runat="server" >
<HeaderTemplate>
<table style="background-color:antiquewhite; width:600px; cellpadding="0" >
<tr >
<td colspan="2"></td>
</tr>
</HeaderTemplate>
<ItemTemplate>
<tr>
<td style="width:5px; border-bottom:dotted" >
<img src="../images/prople.jpg" style="height: 77px; width: 72px" />
</td>
<td style=" border-bottom:dotted">
<asp:Label ID="lblname" runat="server" Text='<%#Eval("fullname") %>' />
on
<asp:Label ID="Label2" runat="server" Text='<%#Eval("datetime") %>' Font-Bold="true"/>
<br />
<asp:Label ID="lblcomment" runat="server" Text='<%#Eval("comment") %>'/>
</td>
</tr>
</ItemTemplate>
<FooterTemplate>
</table>
</FooterTemplate>
</asp:Repeater>
</asp:Panel>
<asp:Panel ID="Panel1" runat="server" ScrollBars="Vertical" Height="457px" Width="607px">
<asp:Repeater ID="RepterDetails" runat="server" >
<HeaderTemplate>
<table style="background-color:darkturquoise; width:600px; cellpadding="0">
<tr >
<td colspan="2">
<center> <b>Our Previous Comments</b></center>
</td>
</tr>
</HeaderTemplate>
<ItemTemplate>
<tr>
<td style="width:5px; border-bottom:dotted" >
<img src="http://localhost:1411/images/prople.jpg" style="height: 77px; width: 72px" />
</td>
<td style=" border-bottom:dotted">
<asp:Label ID="lblname" runat="server" Text='<%#Eval("fullname") %>' />
on
<asp:Label ID="Label2" runat="server" Text='<%#Eval("datetime") %>' Font-Bold="true"/>
<br />
<asp:Label ID="lblcomment" runat="server" Text='<%#Eval("comment") %>'/>
</td>
</tr>
</ItemTemplate>
<FooterTemplate>
</table>
</FooterTemplate>
</asp:Repeater>
</asp:Panel>
<center>
<asp:Label ID="Label1" runat="server" Font-Bold="True" />
<asp:HyperLink ID="linkPrev" runat="server">Previous Page</asp:HyperLink>
<asp:HyperLink ID="linkNext" runat="server">Next Page</asp:HyperLink>
</center>
<div class="clear"></div>
</div>
</div>
</div>
In the above code when first page loads I would like to show repeater which are in panel2 and when user clicks on link previous comment I would like to show repeater of panel1 only but in the same div and same page.How to solve this problem?
Since you have each repeater inside an asp:Panel, this will be as easy as set the Visible attribute of the pertinent panel to false.
You can also archive this by using CSS styles with display: none; or visibility: hidden.
Related
I am trying to use a repeater and use ajax instead of the "EnableEventValidation='true'" but I get the error below on page unload. When I click on the button in the repeater the repeater1_ItemCommand does not get referenced
Error:
System.Collections.ListDictionaryInternal System.ArgumentException:
Invalid postback or callback argument. Event validation is enabled
using in configuration or <%#
Page EnableEventValidation="true" %> in a page
Code:
<asp:ToolkitScriptManager ID="MainSM" EnablePageMethods="true" runat="server" ScriptMode="Release" LoadScriptsBeforeUI="true">
</asp:ToolkitScriptManager>
<asp:Repeater ID="Repeater1" runat="server" OnItemCommand="Repeater1_ItemCommand">
<ItemTemplate>
<table id="myTable" width="700" border="1" class = "mMMGrid" frame="box">
<th align=left>Page Image</th><th align=left>Page #</th><th align=left >Page Sequnce</th><tbody>
<tr>
<td width="15%">
<div id = "dPage" runat="server" >
<asp:ImageButton ID="imbtnCourseLink" runat="server" ImageUrl='<%#imPath(DataBinder.Eval(Container, "DataItem.ChunkFilePath"))%>' OnClick="imlink2" Width="75px" Height="75px" />
</div>
</td>
<td width="15%">
<strong>Pages</strong> : <asp:label ID="lblPage" Text='<%# Eval("Page")%>' runat="server"></asp:label> <br/>
</td>
<td width="65%">
<asp:ImageButton ID="imbtUp" runat="server" ImageUrl="~/SiteImages/go-up.png" Width="40" height="40" CommandName="UP" CommandArgument='<%# Eval("Page")%>'/>
<asp:ImageButton ID="imbtDown" runat="server" ImageUrl="~/SiteImages/go-down.png" Width="40" Height="40" />
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<triggers>
<asp:asyncpostbacktrigger controlid="imbtUp" eventname="Click" />
<asp:asyncpostbacktrigger controlid="Repeater1" eventname="ItemCommand" />
</triggers>
</asp:UpdatePanel>
<br />
</td>
</tr>
</tbody>
</table>
</ItemTemplate>
</asp:Repeater>
What needed to achieve is by clicking the preview button (ASP button, which calls another function), the hidden preview section shows. But it didn't work by the below codes... not sure what I missed.
In the .aspx
<style>
#PreviewSection {display:none;}
</style>
in the script, (edited to point to btPreview, but still not working... )
<script type="text/javascript">
var previewbt = document.getElementById('btPreview');
previewbt.addEventListener('click',function(){
PreviewSection.style.display = "block";
})
</script>
the html:
<div class ="container" id="InputSection">
<table class="table">
<tbody>
<tr>
<td style="width:60%">
<p>The Question</p>
<asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ErrorMessage="Please fill in Question." ControlToValidate="TBQuestion" CssClass="alert-danger"></asp:RequiredFieldValidator>
<asp:TextBox ID="TBQuestion" runat="server" CssClass="form-control" MaxLength="100000" TextMode="MultiLine" Rows="10"></asp:TextBox>
</td>
</tr>
</tbody>
</table>
<asp:Button ID="btPreview" runat="server" Text="Preview" CssClass="btn" OnClick="btPreview_Click"/>
</div>
<hr />
<div class="container" id="PreviewSection">
<h3> The preview of the content.</h3>
<table class="table">
<tbody>
<tr>
<td>
Question: <asp:Label ID="LbPrevQuestion" runat="server" Text="" Font-Bold="True" ForeColor="#0066CC"></asp:Label><br />
</td>
</tr>
</tbody>
</table>
<asp:Button ID="BtSubmit" runat="server" Text="Submit" CssClass="btn" OnClick="BtSubmit_Click" />
</div>
</asp:Content>
Probably this is what you want:
Edited to add your modification after my first post.
var BtPreview = document.getElementById('BtPreview');
BtPreview.addEventListener('click', function() {
PreviewSection.style.display = "block";
})
var BtSubmit = document.getElementById('BtSubmit');
BtSubmit.addEventListener('click', function() {
PreviewSection.style.display = "none";
InputSection.style.display = "none";
})
var btPreview_Click = function() {
console.log('Do something else for Preview.');
};
var btSubmit_Click = function() {
console.log('Do something else for Submit.');
};
#PreviewSection {
display: none;
}
<div class="container" id="InputSection">
<table class="table">
<tbody>
<tr>
<td style="width:60%">
<p>The Question</p>
<asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ErrorMessage="Please fill in Question." ControlToValidate="TBQuestion" CssClass="alert-danger"></asp:RequiredFieldValidator>
<asp:TextBox ID="TBQuestion" runat="server" CssClass="form-control" MaxLength="100000" TextMode="MultiLine" Rows="10"></asp:TextBox>
</td>
</tr>
</tbody>
</table>
<button ID="BtPreview" runat="server" Text="Preview" CssClass="btn" OnClick="btPreview_Click()">Button Preview</button>
</div>
<hr />
<div class="container" id="PreviewSection">
<h3> The preview of the content.</h3>
<table class="table">
<tbody>
<tr>
<td>
Question:
<asp:Label ID="LbPrevQuestion" runat="server" Text="" Font-Bold="True" ForeColor="#0066CC"></asp:Label>
<br />
</td>
</tr>
</tbody>
</table>
<button ID="BtSubmit" runat="server" Text="Submit" CssClass="btn" OnClick="btSubmit_Click()">Button Submit</button>
</div>
This will be the solution for ASP:
<div class="container" id="InputSection">
<table class="table">
<tbody>
<tr>
<td style="width:60%">
<p>The Question</p>
<asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ErrorMessage="Please fill in Question." ControlToValidate="TBQuestion" CssClass="alert-danger"></asp:RequiredFieldValidator>
<asp:TextBox ID="TBQuestion" runat="server" CssClass="form-control" MaxLength="100000" TextMode="MultiLine" Rows="10"></asp:TextBox>
</td>
</tr>
</tbody>
</table>
<asp:Button ID="BtPreview" runat="server" Text="Preview" CssClass="btn" OnClick="btPreview_Click()"/>
</div>
<hr />
<div class="container" id="PreviewSection">
<h3> The preview of the content.</h3>
<table class="table">
<tbody>
<tr>
<td>
Question:
<asp:Label ID="LbPrevQuestion" runat="server" Text="" Font-Bold="True" ForeColor="#0066CC"></asp:Label>
<br />
</td>
</tr>
</tbody>
</table>
<asp:Button ID="BtSubmit" runat="server" Text="Submit" CssClass="btn" OnClick="btSubmit_Click()" />
</div>
Display:none is misleading. Its not just not displayed, its not part of the page. So you cannot click on it. Use opacity:
#previewSection{
opacity:0;
}
Heres the right js:
<script type="text/javascript">
var previewsectionID = document.getElementById('PreviewSection');
previewsectionID.addEventListener('click',function(){
previewsectionID.style.opacity = 1; });
</script>
<asp:UpdatePanel ID="radpnl1" runat="server" UpdateMode="Conditional" ChildrenAsTriggers="true">
<ContentTemplate>
<asp:Repeater ID="rpt_Template" runat="server">
<HeaderTemplate>
<table id="tblusers" width="100%" cellpadding="2" cellspacing="2">
</HeaderTemplate>
<ItemTemplate>
<tr>
<td width="20%" class="table_row2">
Name :
</td>
<td class="table_row2">
<input type="text" id="txt_template" name="txt_template" value='<%# DataBinder.Eval(Container.DataItem, "TemplateName") %>'
maxlength="200" />
<input type="hidden" id="hdnDeletedIds" name="hdnDeletedIds" value="" />
</td>
</tr>
</table>
</ContentTemplate>
</asp:UpdatePanel>
I am new to Jquery. I want to know if i can select all the input fields above with id="txt_template" to compare their name using a Jquery function. As this is is under <asp:repeater> control, I'm not sure how to achieve this.
Inside the repeater, You need to use class instead of id. I'm not really sure but I thing the id you give to a server control with runat=server is not essentially the rendered id.
So use a class as follows
<asp:UpdatePanel ID="radpnl1" runat="server" UpdateMode="Conditional" ChildrenAsTriggers="true">
<ContentTemplate>
<asp:Repeater ID="rpt_Template" runat="server">
<HeaderTemplate>
<table id="tblusers" width="100%" cellpadding="2" cellspacing="2">
</HeaderTemplate>
<ItemTemplate>
<tr>
<td width="20%" class="table_row2">
Name :
</td>
<td class="table_row2">
<input type="text" class='aSuperInput' id="txt_template" name="txt_template" value='<%# DataBinder.Eval(Container.DataItem, "TemplateName") %>'
maxlength="200" />
<input type="hidden" id="hdnDeletedIds" name="hdnDeletedIds" value="" />
</td>
</tr>
</table>
</ContentTemplate>
JQuery
$('.aSuperInput').change(function(){
//----
});
or
$('.aSuperInput').select(function(){
//----.blur(), .focus(), .unblur(), ect.
});
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() {
I have to develop the functionality for the que and rply for that i have create the user contol as per my requirment as fallow and i have add the div with the text box for rely and submit button on user control and keep the div disply style to none and i call the javascript on reply link which shows the that div.
<%# Control Language="C#" AutoEventWireup="true" CodeBehind="SuppReview.ascx.cs" Inherits="LaaFoodWebApp.SuppReview" %>
<div>
<table style="width:100%;">
<tr>
<td rowspan="2" style="width: 15%; vertical-align: top;">
<asp:Label ID="lblMsgType" runat="server"></asp:Label>
<br />
<asp:Label ID="lblMsgId" runat="server"></asp:Label>
</td>
<td style="width: 70%; vertical-align: top;">
<asp:Label ID="lblMsgtBody" runat="server"></asp:Label>
</td>
<td style="width: 15%">
<asp:Label ID="lblVDate" runat="server"></asp:Label>
<br />
By
<asp:Label ID="lblname" runat="server"></asp:Label>
</td>
</tr>
<tr>
<td>
<a id="toggleReply" style="color: #15ADFF" href="#">Reply</a>
</td>
<td>
<asp:Label ID="lblEmail" runat="server"></asp:Label>
<br />
<asp:Label ID="lblPhone" runat="server"></asp:Label>
</td>
</tr>
<tr>
<td>
</td>
<td>
<panel id="pnlreply" >
<div id="DivReply" style="display:none">
<table style="width:100%;">
<tr>
<td style="width: 15%">
Replys</td>
<td>
<asp:TextBox ID="TextBox1" runat="server" Height="50px" TextMode="MultiLine"
Width="100%"></asp:TextBox>
</td>
</tr>
<tr>
<td>
</td>
<td style="text-align: right">
<asp:Button ID="btnSubmit" runat="server" Text="Submit"
onclick="btnSubmit_Click" />
</td>
</tr>
</table></div></panel>
</td>
<td>
</td>
</tr>
</table>
</div>
But when i add those user control multiple time as per the count of replyes.
for (int i = 0; i< dt.Rows.Count; i++)
{
SuppReview SR = (SuppReview)Page.LoadControl("SuppReview.ascx");
SR.settxt(dt.Rows[i]);
reviews.Controls.Add(SR);
}
on the page
<%# Page Title="" Language="C#" MasterPageFile="~/SupplierMasterNew.Master" AutoEventWireup="true" CodeBehind="Supp_Views.aspx.cs" Inherits="LaaFoodWebApp.Supp_Views" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
<script type="text/javascript">
$(function () {
$('#toggleReply').click(function () {
$('#DivReply').toggle('slow');
return false;
});
});
</script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="CPHcontent" runat="server">
<div style="width: 100%; height: 24px; background-color: #D2EEF2; padding-top: 10px;
font-size: large; color: #000000; text-align: left;">
View</div>
<asp:Panel ID="reviews" runat="server">
</asp:Panel>
</asp:Content>
On clicking on reply link int hide show the div (Contain text box for rely and submit button) multiple time and it not work for the other entry
You have multiple duplicate IDs on your page if you are adding this control multiple times!
Consider changing the IDs to classes.
also give your outer div in your control a class! e.g. <div class="wrapper">
Declare a function:
function toggleReply(sender) {
$(sender).parent('.wrapper').children('.DivReply').toggle('slow');
}
your link:
<a class="toggleReply" style="color: #15ADFF" href="javascript:void(0);" onclick="toggleReply(this);">Reply</a>