I have a repeater which displays and data bind the source of tab links. Here is the code:
protected void rptTab_ItemBound(Object sender, RepeaterItemEventArgs e)
{
if (e.Item.ItemType == ListItemType.Item || e.Item.ItemType == ListItemType.AlternatingItem)
{
Item i = e.Item.DataItem as Item;
Link hlTabLink = e.Item.FindControl("hlTabLink") as Link;
hlTabLink.Target = Sitecore.Links.LinkManager.GetItemUrl(i);
hlTabLink.DataSource = i.Paths.FullPath;
hlTabLink.Field = "Title";
}
}
Now this is my markup:
<asp:Repeater ID="rptTab" runat="server" OnItemDataBound="rptTab_ItemBound">
<ItemTemplate>
<li id= "liTabTest" runat = "server">
<a>
<sc:Link ID = "hlTabLink" Field = "scTabLink" onclick = "TabClick()" runat ="server"></sc:Link>
</a>
</li>
</ItemTemplate>
</asp:Repeater>
And this is the jQuery which is adding CSS class dynamically based on which item is selected:
$(document).ready(function () {
init();
});
function init() {
$("ul#Tab-labels li").removeClass("tab-label TabbedPanelsTabSelected");
$("ul#Tab-labels li:first").addClass("tab-label TabbedPanelsTabSelected");
};
function TabClick() {
alert('test');
};
Now you can see that I am displaying the CSS file based on the index of the tab. I also have to add the click event in that jQuery. So there are basically two things that I am confused:
My click event in jQuery is not getting called :(
From jQuery I have to know in the click event that which page it has
to go through? So that I have to get from codebehind or what? Like a
hidden field and store the tab pages in that, then fetch out from
jQuery.
How should I resolve this? Please help!
For sc:Link, change the bind method to onClientClick for onclick = "TabClick()". OnClick is for the postback server method.
BTW, what is the sc prefix? Is there a user control you are adding to the page?
Related
I have a list of button names and uri's containing links to other pages in my website. This is stored in my database. I also have a javascript function that can create buttons dynamically preferably when the page loads. Now what I need is on the server side to iterate through the list of button names and create a button for every button in the list?
Is this possible. I was thinking of maybe using the string builder to build some html to create the buttons or the method I like more is to call the javascript everytime I need a new button.
Here is my javascript function:
function createHref(Name, Uri) {
var leftDiv = document.createElement("div"); //Create left div
leftDiv.id = "left"; //Assign div id
leftDiv.setAttribute("style", "float:left; width:66.5%; line-height: 26px; text-align:left; font-size:12pt; padding-left:8px; height:26px;"); //Set div attributes
leftDiv.style.background = "#FF0000";
a = document.createElement('a');
a.href = Uri;
a.innerHTML = Name
leftDiv.appendChild(a);
document.body.appendChild(leftDiv);
}
Since this is ASP.NET I would use a Repeater and set the datasource to the button data you pull from your database.
For examples sake, I will assume you have a custom object MyButton that maps to your data:
public class MyButton
{
public MyButton()
{}
public string Name { get; set; }
public string Href { get; set; }
}
You would then have some markup for the repeater:
<asp:Repeater ID="rptMyButtons" runat="server" OnItemDataBound="rptMyButtons_ItemDataBound">
<HeaderTemplate>
<ul>
</HeaderTemplate>
<ItemTemplate>
<li>
<asp:HyperLink ID="hypUrl" runat="server" />
</li>
</ItemTemplate>
<FooterTemplate>
</ul>
</FooterTemplate>
</asp:Repeater>
You would then bind your data to the repeater and set some properties on the objects:
protected void Page_Load(object sender, EventArgs e)
{
if(!Page.IsPostBack)
{
rptMyButtons.DataSource = //your data from the database
rptMyButtons.DataBind();
}
}
protected void rptMyButtons_ItemDataBound(object sender, RepeaterItemEventArgs e)
{
if ((e.Item.ItemType == ListItemType.Item) || (e.Item.ItemType == ListItemType.AlternatingItem))
{
MyButton button = (MyButton)e.Item.DataItem;
HyperLink hypUrl = (HyperLink)e.Item.FindControl("hypUrl");
hypUrl.Text = button.Name;
hypUrl.NavigateUrl = button.Href;
}
}
It seems like you may be trying to build a sitemap?
I have a list of button names and uri's containing links to other pages in my website
Which is why I have used a <ul> and <li>'s to contain your buttons in a list which makes more sense. It is quite easy to change this back to a <div> however.
I have several linkbuttons in my master page. I need to add css class "Active" after I click each linkbutton and postback URLs.
<asp:LinkButton ID="Linkbutton1" runat="server" PostBackUrl="/News.aspx?lang=1"
Text="News" OnClick="Linkbutton1_Click">
</asp:LinkButton>
Linkbutton 1
Linkbutton 2 - class "active"
Linkbutton 3
I tried to add class using linkbutton onclick event, but after postback css class has been removed.
Put this to the Linkbutton1_Click method:
Linkbutton1.CssClass = "active";
Article on MSDN.
if you want write in code behind you can work with cookies:
in Linkbutton1_Click method:
Response.Cookies["Linkbutton1-cssClass"].Value = "active";
in Page_Load method:
if(Request.Cookies["Linkbutton1-cssClass"] != null)
Linkbutton1.CssClass = Server.HtmlEncode(Request.Cookies["Linkbutton1-cssClass"].Value);
finaly you can use foreach for all LinkButtons
onclick of linkbutton call javascript function changestyle(SenderID)
<script type="javascript">
var strPreviousCahnge=""
function changestyle(SenderID)
{
var LinkButtonActive=document.getelementbyid(senderID);
LinkButtonActive.className="subTabActive";
if (strPreviousCahnge!= "" && strPreviousCahnge!= id)
{
var identity=document.getElementById(strPreviousCahnge);
identity.className="subTabInactive";
}
strPreviousCahnge=SenderID
}
</script>
I have a repeater containing, amongst others, two buttons. One of the buttons is an ASP.NET button whilst the other is of the type "input type="button"".
Now, in my code-behind, I want to retrieve both buttons from the repeater to either hide them or show them. I have successfully hidden the ASP.NET button however I do not know how to retrieve the other button.
Here is some code in ASP.NET:
<input type="button" name="ButtonEditUpdate" runat="server" value="Edit Update" class="ButtonEditUpdate" />
<asp:Button ID="ButtonDeleteUpdate" CssClass="ButtonDeleteUpdate" CommandName="Delete" runat="server" Text="Delete Update" />
Here is the code-behind:
protected void RepeaterUpdates_ItemBinding(object source, RepeaterItemEventArgs e)
{
RepeaterItem item = e.Item;
TextBox Update_ID = (TextBox)item.FindControl("TextBoxUpdateID_Repeater");
//Button Edit_Update = (Button)item.FindControl("ButtonEditUpdate");
Button Delete_Update = (Button)item.FindControl("ButtonDeleteUpdate");
if (Social_ID == String.Empty)
{
//Edit_Update.Visible = false;
Delete_Update.Visible = false;
}
}
How can I retrieve the HTML button and hide it since it is NOT an ASP.NET button?
That button is a HTML control and will be of type System.Web.UI.HtmlControls.HtmlButton
System.Web.UI.HtmlControls.HtmlButton button = item.FindControl("ButtonEditUpdate") as System.Web.UI.HtmlControls.HtmlButton;
if(button!=null)
button.Visible = false;
In general you cannot straightly retrieve a plain-old HTML button because ASP.NET considers that as part of the text markup. Fortunately, you already added runat="server" that makes your button a server control.
The easiest way is to use an HtmlButton control. But in your markup you need the id attribute
<input type="button" name="ButtonEditUpdate" runat="server" value="Edit Update" class="ButtonEditUpdate" id="ButtonEditUpdate" />
Then in the code behind
//Button Edit_Update = (Button)item.FindControl("ButtonEditUpdate");
HtmlButton Delete_Update = (HtmlButton)item.FindControl("ButtonEditUpdate");
If you just want to set the visibility you shouldn't need to cast it.
var myButton = e.Item.FindControl("ButtonEditUpdate");
if(myButton != null)
myButton.Visible = false;
EDIT: you should give your button an ID.
I'm having trouble with using UpdatePanel and changing the 'class' attribute of a control inside a repeater by javascript.
Here some code:
--on the aspx--
<script type="text/javascript">
function changeClass(ctl) {
if (ctl.className == "marked") {
ctl.className = "unmarked";
} else {
ctl.className = "marked";
}
}
</script>
<!-- some html -->
<asp:UpdatePanel ID="upp" runat="server">
<ContentTemplate>
<asp:Repeater ID="rpt1" runat="server" onitemdatabound="rpt1_ItemDataBound">
<ItemTemplate>
<a id="aButton" runat="server" href="javascript:void(0)">
<!-- some other controls -->
</a>
</ItemTemplate>
</asp:Repeater>
</ContentTemplate>
</asp:UpdatePanel>
--Codebehind--
protected void rpt1_ItemDataBound(object sender, RepeaterItemEventArgs e)
{
if (e.Item.ItemType == ListItemType.Item || e.Item.ItemType == ListItemType.AlternatingItem)
{
MyClass obj = (MyClass)e.Item.DataItem;
((HtmlAnchor)e.Item.FindControl("aButton")).Attributes.Add("class", "marked");
//some other code....
}
}
//method called after the bind on 'rpt1'
private void mymethod()
{
foreach (RepeaterItem ri in rpt1.Items)
{
HtmlAnchor aButton = (HtmlAnchor)ri.FindControl("aButton");
if (Must-be-unmarked)
aButton.Attributes.Add("class", "unmarked");
aButton.Attributes.Add("OnClick", "changeClass(this);");
}
}
The problem is, when I click on an "aButton" the class is changed normally, but when I come in codebehind and get de 'class' of control to check if it's marked or unmarked, I only get the controls marked in ItemDataBound of repeater, not the "aButton"s marked by me at execution time.
here is what I do to get the "aButton"s marked:
private void checkMarked()
{
foreach (RepeaterItem ri in rpt1.Items)
{
if (((HtmlAnchor)ri.FindControl("aButton")).Attributes["class"] == "marked")
{
//do something...
}
}
}
When you change class property from client-side code, the server side will not know about it.
You'll need to add a hidden <input> with marked/unmakred so you can check the contents from the server on a post-back.
Another approach would be to sipmly have your javscript postback to the server directly when an item changes from marked/unmakred.
Hi I have a DropDownList bounded from the code behind. How can I use the DataTextField as a ToolTip of the DropDownList?
DropDownList list = this.DropDownList1;
list.DataSource = GetData();
list.DataTextField = "DisplayString";
list.DataValueField = "DataValue";
list.DataBind();
I want the bounded Field DisplayString to bounded also in the ToolTip. Is this possible without using the DataBound event of the DropDownList?
Simply call that function after dropdown list binding: BindTooltip(Name of the dropdownlist);
public void BindTooltip(ListControl lc)
{
for (int i = 0; i < lc.Items.Count; i++)
{
lc.Items[i].Attributes.Add("title", lc.Items[i].Text);
}
}
http://www.codeproject.com/KB/aspnet/List_Box_Tool_Tip.aspx
http://www.dotnetspider.com/resources/5099-Tool-tip-for-DropDownList-ASP-NET.aspx
Below code will work, need to call this method in PageLoad and pass the dropdown list to the method for which you want tooltip
protected void Page_Load(object sender, EventArgs e)
{
BindToolTip(ddlProjects);
}
Below is the actual method:
private void BindToolTip(ListControl list)
{
foreach (ListItem item in list.Items)
{
item.Attributes.Add("title", item.Text);
}
}
Well with some javascript work,it's quite possible.
First you create a div inside your html side with mouse out event
<div id="tooltip" style="display:none;" onmouseout="hidetooltip();"></div>
then some javascript work is required to insure your when you hover you dropdownlist item it shows a tooltip
function showtooltip(element) {
//select focused elements content to show in tooltip content
document.getElementById("tooltip").innerHTML =
element.options[element.selectedIndex].text;
//show tooltip
document.getElementById("tooltip").style.display = "block";
}
function hidetooltip() {
//hide tooltip
document.getElementById("tooltip").style.display = "none";
}
The last part is adding mouse over and out event to your dropdownlist
<asp:DropDownList ... onmouseover="showtooltip(this)"
onmouseout="hidetooltip()" ... >
Then it should work.You may need to add extra style for your tooltip.
Hope this helps Myra
Here are 3 sample examples I am currently using! First using standard Select.
Second using Asp.net Dropdownlist with an external datasource. 3rd simplest, add tooltip (title attribute) dynamically using jQuery on dropdown (select) click event.
1)
<select id="testTitleDrop">
<option value="1">Tea</option>
<option value="2">Coffee</option>
<option value="3">Chocolate</option>
<option value="4">IceTea</option>
</select>
using a bit of jQuery:
$(document).ready(function () {
$('#testTitleDrop').find("option:[title='']").each(function () {
$(this).attr("title",$(this).text());
});
})
2).
/* For Asp DropDown (Dropdownlist) Populating values from database!*/
<asp:DropDownList runat="server"
DataSourceID="SqlDataSource1"
AutoPostBack="true"
ToolTip=""
DataTextField="SectionName"
DataValueField="SectionID"
ID="DropPlaceofInsert"
AppendDataBoundItems="true" onselectedindexchanged="DropPlaceofInsert_SelectedIndexChanged" >
<asp:ListItem Text="" Value="-1" Selected="True" />
</asp:DropDownList>
<%--DataSource --%>
<asp:SqlDataSource ID="SqlDataSource1" runat="server"
ConnectionString="<%$ ConnectionStrings:RegistryConnectionString %>"
SelectCommand="SELECT * FROM [Section] where rtrim(ltrim(sectionname)) <> '' ORDER BY [SectionName]">
</asp:SqlDataSource>
Another method to bind Tooltip from another Js function instead on page load
....just call
addToolTipToDropDown($('#DropPlaceofInsert'));
...
function addToolTipToDropDown(el)
{
$(el).find("option:[title='']").each(function () {
$(this).attr("title",$(this).text());
});
}
3)
Or even easier just add the following code and that's it !:
// Assign Tooltip value on click of dropdown list //
$(document).ready(function () {
try{
$('select').click(function (el) {
$(this).find("option:[title='']").each(function (el) {
$(this).attr("title",$(this).text());
})
});
}
catch(e)
{
alert(e);
}
-- Hope this helps save time to some developers !