I need to pass div client id to JavaScript of a repeater
I have 3 divs inside a repeater i have onmouseover event i want to grab client id of div element Is there any way i can pass exact client of div element
Can u guys help me out Thanks
If you would like to do it in markup, you can use
the following to get the ClientId:
<%# Container.FindControl("_RepeaterEL").ClientID %>
Something like this (if I understood you correctly):
Markup:
<asp:Repeater id="myRepeater" OnItemDataBound="myRepeater_ItemDataBound" runat="server">
<ItemTemplate>
<div id="myDiv" runat="server">......</div>
</ItemTemplate>
</asp:Repeater>
Code-behind:
protected void myRepeater_ItemDataBound(object sender, RepeaterItemEventArgs e)
{
if(e.Item.ItemType == ListItemType.Item || e.Item.ItemType == ListItemType.AlternatingItem)
{
HtmlGenericControl myDiv = e.Item.FindControl("myDiv") as HtmlGenericControl;
// you can just pass "this" instead of "myDiv.ClientID" and get the ID from the DOM element
myDiv.Attributes.Add("onmouseover", "doStuff('" + myDiv.ClientID + "');");
}
}
<asp:Panel CssClass="modal hide fade" ID="myModal" runat="server">
<div class="modal-header">
<a class="close" data-dismiss="modal">×</a>
<h3>Add to cart</h3>
</div>
<div class="modal-body">
<nav>
<iframe seamless src="/ToCart/<%# DataBinder.Eval(Container.DataItem, "code")%>"
style="border-style: none;"> </iframe>
</nav>
</div>
</asp:Panel>
<a data-toggle="modal" href="#<%#Container.FindControl("myModal").ClientID%>">
<div class="add-to-cart-one">+</div>
</a>
If the repeater renders to the browser, you can get the repeater element with:
var rep = $get("<%= rpt.ClientID %>");
Otherwise, wrap a
<DIV id="RepeaterEL"></div>
around the repeater, and access its children either through pure JavaScript (and the childNodes collection), or using JQuery like
$("#RepeaterEL").children("DIV").each(function(i) {
var id = $(this).attr("id"); //<- pointer to DIV });
Related
I want to take the text in the text box from the particular item in the repeater that was clicked, and use it on the page ViewRecipe2.aspx.
Currently, when you click a button on one of the items, it returns back to the repeater's page, but the repeater does not appear, instead of moving to the page ViewRecipe2.aspx.
This is my repeater in aspx:
<asp:Repeater ID="RepeaterR" runat="server">
<ItemTemplate>
<div class="wrapper">
<table>
<div class="box">
<div class="property-card">
<div class="property-image">
<div class="property-image-title">
</div>
</div>
<div class="property-description">
<asp:Button CssClass="h5" runat="server" ID="Button1" OnClick="Button1_Click" Text=<%# Eval("recipeName")%> BackColor="Transparent" BorderColor="Transparent"/>
<p><%#Eval("avgRating") %> stars</p>
<asp:Image class="img" runat="server" src=<%#Eval("recipePic") %> />
<asp:TextBox ID="hiddenTB" runat="server" Text=<%# Eval("recipeName")%> Visible="false"></asp:TextBox>
</div>
</div>
</div>
</table>
</div>
</ItemTemplate>
</asp:Repeater>
This is the code behind on c#:
protected void Button1_Click(object sender, EventArgs e)
{
RepeaterItem item = (sender as Button).NamingContainer as RepeaterItem;
string VR = (item.FindControl("hiddenTB") as TextBox).Text;
if (VR!=null)
{
Session["selectedRecipe"] = VR;
Response.Redirect("ViewRecipe2.aspx");
}
}
This is ViewRecipe2.aspx:
<asp:TextBox ID="TextBoxP" runat="server"></asp:TextBox>
And the code behind:
protected void Page_Load(object sender, EventArgs e)
{
if (!Page.IsPostBack)
{
string theRecipeName = (Session["selectedRecipe"]).ToString();
TextBoxP.Text = theRecipeName;
}
}
Well, text box or hidden field is "never" null.
but, you need quotes around that "text" setting of the hidden field.
<asp:TextBox ID="hiddenTB" runat="server"
Text='<%# Eval("recipeName")%>' Visible="false">
</asp:TextBox>
Also, keep in mind, that with visible=false, then the markup is NOT sent nor rendered client side. This means that client side js code can't use that text box, but server side code can just fine grab the textbox, and then the value as you have.
However, while you "should" have those single quotes?
it should still have worked.
I would for testing, remove the Visible="false", and then you can actually see + verify that the value is correct.
I got a problem where when the button is clicked, the panel would not change. In the sense of error. I can change the panel using the following hyperlink.
Test
But I want to use an asp:LinkButton and it did not work like this.
<asp:LinkButton ID="btngantipassword" runat="server" CssClass="btn btn-lg btn-primary btn-block" href="#" OnClick="$('#panel1').hide(); $('#panel2').show()">Change Password</asp:LinkButton>
I am still a beginner in using asp.net. Help me to solve this problem.
Almost every Control has a Visibility property. This property can be set on the aspx page in the Control itself
<asp:Label ID="Label1" runat="server" Text="Label" Visible="false"></asp:Label>
The property can also be set in code behind
Label1.Visible = false;
The visibility property works different than with JavaScript and CSS. Normally if you define a CSS class with display:none for example, you won't see it in the browser but it DOES exist. If you look at the HTML you can find it.
But in asp.net the hidden control is not rendered to the browser and therefore does not exist in the HTML.
To expand this to your question. The Panel Control can be used like you ask in your question.
<asp:LinkButton ID="LinkButton1" runat="server" OnClick="LinkButton1_Click">LinkButton</asp:LinkButton>
<br />
<asp:Panel ID="Panel1" runat="server">
<p>Normal Content here...</p>
</asp:Panel>
This will render in HTML as
<div id="Panel1">
<p>Normal Content here...</p>
</div>
With the OnClick event of LinkButton1, you can change the Visibility of Panel1
protected void LinkButton1_Click(object sender, EventArgs e)
{
if (Panel1.Visible == false)
{
Panel1.Visible = true;
}
else
{
Panel1.Visible = false;
}
}
Here is my scenario:
I have several deals, each has a category, all are grouped by categories as such:
DealView: Name (the category), Deals (List of Deals objects)
the DealViews (List) is bound to the category list view, the listview on item databound generates the corresponding inner listviews and sets their corresponding data pagers paging size,it also decides whether to show the inner pagers or not. The OnLoad event of the categories listview is used for the postback of the any of the internal pagers. I can debug the code and i can see that the Load event is executed, the inner pagers SetPageProperties are also set correctly however nothing changes on the UI no matter how many times I click. If I remove the updatepanel, everything works as expected. Here is some, or alot of code :)
<div class="tabs-content">
<asp:UpdatePanel ID="upDeals" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:ListView ID="lvCategorisedDeals" runat="server" DataKeyNames="Deals" >
<LayoutTemplate>
<asp:PlaceHolder ID="itemPlaceholder" runat="server"></asp:PlaceHolder>
<div class="clear"></div>
</LayoutTemplate>
<ItemTemplate>
<div class="tab-item">
<asp:ListView runat="server" ID="lvCategoryDeals">
<LayoutTemplate>
<div class="deals">
<asp:PlaceHolder ID="itemPlaceholder" runat="server"></asp:PlaceHolder>
</div>
<div class="clear"></div>
</LayoutTemplate>
<ItemTemplate>
<div class="rc-item">
<h3><%# Eval("Title") %></h3>
<div class="deal-img">
<img src="<%# Eval("ImageUrl") %>" width="168" height="113">
</div>
<div class="deal-data">
<div class="info"><%# Eval("Caption") %></div>
<div class="price"><%# Eval("Currency") %> <%# Eval("DiscountedPrice") %></div>
<div class="deal-booking">Buy Now</div>
</div>
</div>
</ItemTemplate>
</asp:ListView>
<div class="dealsPager">
<asp:DataPager runat="server" ID="pgInner" PagedControlID="lvCategoryDeals" >
<Fields>
<asp:NumericPagerField />
</Fields>
</asp:DataPager>
</div>
</div>
</ItemTemplate>
</asp:ListView>
</ContentTemplate>
</asp:UpdatePanel>
</div>
And in the code behind:
void lvCategorisedDeals_Load(object sender, EventArgs e)
{
if (Page.IsPostBack)
{
foreach (var item in lvCategorisedDeals.Items)
{
if (item.ItemType == ListViewItemType.DataItem)
{
var lvInner = item.FindControl("lvCategoryDeals") as ListView;
if (lvInner == null)
throw new InvalidOperationException("The inner ListView was not found");
var pgInner = item.FindControl("pgInner") as DataPager;
if (pgInner == null)
throw new InvalidOperationException("The inner pager was not found");
if (lvCategorisedDeals.DataKeys == null && lvCategorisedDeals.DataKeys.Count == 0)
throw new InvalidOperationException("The outer ListViews Datakeys do not seem to be set");
var dataItem = lvCategorisedDeals.DataKeys[item.DisplayIndex].Value as List<GRCDeal>;
lvInner.PagePropertiesChanging += new EventHandler<PagePropertiesChangingEventArgs>(
(s, evt) =>
{
pgInner.SetPageProperties(evt.StartRowIndex, evt.MaximumRows, false);
// Get the data for the ListView lvInner
lvInner.DataSource = dataItem;
lvInner.DataBind();
}
);
}
}
}
}
void lvCategorisedDeals_ItemDataBound(object sender, ListViewItemEventArgs e)
{
var listViewDataItem = e.Item as ListViewDataItem;
if (listViewDataItem == null)
return;
if (listViewDataItem.ItemType == ListViewItemType.DataItem)
{
var lvInner = e.Item.FindControl("lvCategoryDeals") as ListView;
if (lvInner == null)
throw new InvalidOperationException("The inner ListView was not found");
var pgInner = e.Item.FindControl("pgInner") as DataPager;
if (pgInner == null)
throw new InvalidOperationException("The inner pager was not found");
var dataItem = listViewDataItem.DataItem as DealView;
pgInner.PageSize = this.PageSize;
pgInner.Visible = dataItem.Deals.Count > this.PageSize;
lvInner.DataSource = dataItem.Deals;
lvInner.DataBind();
}
Additional things to note is that I am passing that List of Deals as DataKeys and I am able to grab it fine. First binding happens on page load. The code is inside a user control part of Visual WebPart (SharePoint 2013).
Appreciate any help since this is killing me.
I have a linkbutton that somehow does not give a postback when clicked. Here is the code
<script type="text/javascript">
$(function () {
$('#divTabs').tabs({
show: function () {
var sel = $('#divTabs').tabs('option', 'selected');
$('#<%= hfLastTab.ClientID %>').val(sel);
},
selected: '<%= hfLastTab.Value %>'
});
});
</script>
<div id="divTabs">
<ul>
<li runat="server" id="TabBar1" ><asp:LinkButton ID="TabLink1" runat="server" OnClick="TabLink1_Click" > Link1 </asp:LinkButton></li>
<li runat="server" id="TabBar2" ><asp:LinkButton ID="TabLink2" runat="server" OnClick="TabLink2_Click"> Link2 </asp:LinkButton></li>
<li runat="server" id="TabBar3" ><asp:LinkButton ID="TabLink3" runat="server" OnClick="TabLink3_Click"> Link3 </asp:LinkButton></li>
</ul>
....
</div>
And the code behind:
protected void TabLink1_Click(object sender, System.EventArgs e)
{
SelectTopBar();
SetSelectTab("TabBar1");
}
protected void TabLink2_Click(object sender, System.EventArgs e)
{
SelectTopBar();
SetSelectTab("TabBar2");
}
protected void TabLink3_Click(object sender, System.EventArgs e)
{
SelectTopBar();
SetSelectTab("TabBar3");
}
I tried putting the breakpoint in the codebehind and it does not hit. The page is not refreshed as well. If I use <asp:Button>, then it will do the submit and everything seems to be fine.
I also tried to see whether there are more than one <form> tags, but there is not.
I also make sure that in the aspx page, those click event are tied.
[EDIT]: The link button is located inside a jquery tab. So instead of using the ordinary <a href... as in the jquery example which does not do any postback, I used asp linkbutton and want the postback.
Any idea?
In case anyone else is looking. I had the same problem with the LinkButton OnClick event not firing, and fixed it by simply using "OnCommand=" instead of "OnClick=".
Found some workaround. I defined another linkbutton outside the <div id="divTabs">, and the linkbutton inside <div id="divTabs"> will call the outer linkbutton. So the code becomes like
<asp:LinkButton ID="LinkButton1" runat="server" OnClick="TabLink1_Click" ></asp:LinkButton>
<asp:LinkButton ID="LinkButton2" runat="server" OnClick="TabLink2_Click" ></asp:LinkButton>
<asp:LinkButton ID="LinkButton3" runat="server" OnClick="TabLink3_Click" ></asp:LinkButton>
<div id="divTabs">
<ul>
<li runat="server" id="TabBar1" ><asp:LinkButton ID="TabLink1" runat="server"> Link1 </asp:LinkButton></li>
<li runat="server" id="TabBar2" ><asp:LinkButton ID="TabLink2" runat="server"> Link2 </asp:LinkButton></li>
<li runat="server" id="TabBar3" ><asp:LinkButton ID="TabLink3" runat="server"> Link3 </asp:LinkButton></li>
</ul>
....
</div>
In the code behind, inside the Page_Load function
TabLink1.OnClientClick = "document.getElementById('" + LinkButton1.ClientID + "').click();";
TabLink2.OnClientClick = "document.getElementById('" + LinkButton2.ClientID + "').click();";
TabLink3.OnClientClick = "document.getElementById('" + LinkButton3.ClientID + "').click();";
I'm guessing the jQuery library might have some impact such that the link does not call a postback, so I'm using the workaround above.
Have you tried including a responseredirect as the last line of each event like in the below example?
protected void TabLink1_Click(object sender, System.EventArgs e)
{
SelectTopBar();
SetSelectTab("TabBar1");
Response.Redirect(Request.Url.AbsoluteUri);
}
<script type="text/javascript">
$(function () {
$('#divTabs').tabs({
show: function () {
var sel = $('#divTabs').tabs('option', 'selected');
$('#<%= hfLastTab.ClientID %>').val(sel);
},
selected: '<%= hfLastTab.Value %>'
});
});
</script>
<div id="divTabs">
<ul>
<li runat="server" id="TabBar1" ><asp:LinkButton ID="TabLink1" CauseValidation="false" runat="server" OnClick="TabLink1_Click" > Link1 </asp:LinkButton></li>
<li runat="server" id="TabBar2" ><asp:LinkButton ID="TabLink2" runat="server" CauseValidation="false" OnClick="TabLink2_Click"> Link2 </asp:LinkButton></li>
<li runat="server" id="TabBar3" ><asp:LinkButton ID="TabLink3" runat="server" CauseValidation="false" OnClick="TabLink3_Click"> Link3 </asp:LinkButton></li>
</ul>
....
</div>
Use CausesValidation="false"
In case anyone's looking for a solution that actually works, it's because you're fiddling with javascript somehow and that's overriding the .NET postback behaviour.
In my case it was simply using Bootstrap and adding the data-toggle="buttons" e.markup to the button group like:
<div class="btn-group btn-group-sm btn-group-justified" data-toggle="buttons">
That was recognized by Bootstrap JavaScript because it needs to watch these buttons in the group to be able to display their toggle status correctly (i.e. adding/removing the "active" class to/from children).
Solution: removed that data-toggle and implemented the toggle status highlighting with some C# inline code.
Maybe it is .NET framework's fault,
for me __doPostBack did not work in all pages because I compiled my project with a newer version of Visual studio. I changed "Target framework" from ".NET framework 4.0" to ".NET framework 3.0", and after that rebuild project and it has worked.
I have a repeater that includes as image. However, there is an image that may not be in all of the Promotions in this repeater
<div class="promo">
<h2><%# ((Promotion)Container.DataItem).Title %></h2>
<p><img src="/Uploads/<%# ((Promotion)Container.DataItem).Image %>" alt="" class="promoImg" /><%# ((Promotion)Container.DataItem).Description %></p>
<p><em><%# ((Promotion)Container.DataItem).Restrictions %></em></p>
</div>
Can someone show me how to make the only show up if that entry does not have a null field?
I prefer do something in server side, so, my sugestion is:
Add a event handler to your repeater
<asp:Repeater ID="myRpt" runat="server" onitemdatabound="myRpt_ItemDataBound" >
<ItemTemplate>
<div class="promo">
<h2>
<%# ((Promotion)Container.DataItem).Title %></h2>
<p>
<asp:Image ID="imgTest" CssClass="promoImg" ImageUrl="" runat="server" />
<%# ((Promotion)Container.DataItem).Description %></p>
<p>
<em>
<%# ((Promotion)Container.DataItem).Restrictions %>
</em>
</p>
</div>
</ItemTemplate>
</asp:Repeater>
i will "bind" the image source in code behind, you could do it for other controls too.
So, the code behind is:
protected void myRpt_ItemDataBound(object sender, RepeaterItemEventArgs e)
{
if (e.Item.ItemType == ListItemType.Item || e.Item.ItemType == ListItemType.AlternatingItem)
{
Image imgTest = (Image)e.Item.FindControl("imgTest");
Promotion pActual = (Promotion)e.Item.DataItem;
bool needToShowImage = !String.IsNullOrEmpty(pActual.Image)
if (needToShowImage)
{
imgTest.ImageUrl = "Uploads/" + pActual.Image;
}
else
{
imgTest.Visible = false;
}
}
}
It will do the trick. If it dont work, please, let me know.
This should do the trick:
For C#.Net:
<div class="promo">
<h2><%# ((Promotion)Container.DataItem).Title %></h2>
<p><img runat="server" visible='<%# Information.IsDBNull(((Promotion)Container.DataItem).Image) %>' src=""/Uploads/<%# ((Promotion)Container.DataItem).Image.ToString %>" alt="no image found" class="promoImg" /><%# ((Promotion)Container.DataItem).Description %></p>
<p><em><%# ((Promotion)Container.DataItem).Restrictions %></em></p>
</div>
I've added some jquery to check each image on the page to make sure there is a image associated with that promotion:
$(document).ready(function () {
$('.promoImg').each(function (index) {
if ($(this).attr('src') == "/Uploads/") {
$(this).hide();
}
});
});
I'm still interested in a server side solution
I think you can use panel to do this.
<div class="promo">
<h2><%# ((Promotion)Container.DataItem).Title %></h2>
<asp:Panel ID="pnlImage" runat="server">
<p><img src="/Uploads/<%# ((Promotion)Container.DataItem).Image %>" alt="" class="promoImg" /><%# ((Promotion)Container.DataItem).Description %></p>
</asp:Panel>
<p><em><%# ((Promotion)Container.DataItem).Restrictions %></em></p>
In ItemDataBound event, do this
if (e.Item.ItemType == ListItemType.Item || e.Item.ItemType == ListItemType.AlternatingItem) {
if (((Promotion)e.Item.DataItem).Image == null) {
((Panel)e.Item.FindControl("pnlImage")).Visible = false;
}
when panel is invisible, it will not be rendered.
why not use the
<% if()%>
to judge either there is a image source? if not ,then didn't response.so we can save more