jQuery get all divs with specific id - asp.net

i Stackoverflow,
I'm trying to get my head around make tooltips to show a description for each item in my asp:Repeater control. The problem is my jquery have to loop through all the divs and make a .tooltip(). I have tried to use the each() function in jQuery, but there's no tooltip showing up :-/
My current code:
<script type="text/javascript">
$(document).ready(function () {
$('.tooltip').each(function (index, domEle) {
domEle.tooltip();
});
});
</script>
And my repeater:
<asp:Repeater ID="rptListPartners" runat="server">
<HeaderTemplate>
<table border="0" cellpadding="7" cellspacing="0">
</HeaderTemplate>
<ItemTemplate>
<tr>
<td style="font-family:Verdana; font-size:11px; height: 18px; width:400px;">
<div id="data_tooltip_from_div" style="display:none;"> <%#Eval("profile") %></div>
<a id="tooltip_from_div" href="#" class="tooltip"> <%#Eval("name") %>, <%#Eval("address") %>, <%#Eval("zip") %> <%#Eval("city") %> <img src='/kort/www.png' /></a>
</td>
<td style="font-family:Verdana; font-size:11px; height: 18px;"><%#Eval("phone") %></td>
</tr>
</ItemTemplate>
<FooterTemplate>
</table>
</FooterTemplate>
</asp:Repeater>
Is this approach totally off, or? :-)
Any hint will be greatly appreciated!
Thanks in advance!

Inside your .each() domEle refers to the DOM element directly, not a jQuery object that has the .tooltip() plugin method...so it should look like this:
$(document).ready(function () {
$('.tooltip').each(function (index, domEle) {
$(domEle).tooltip();
});
});
But...it's a plugin, so there's no need to loop at all:
$(document).ready(function () {
$('.tooltip').tooltip();
});
IDs have to be unique...it's not causing the error here but remove it if it's repeated to be valid and avoid other issues later. You already have the class you need to select the elements you're after here.
Also, you should be seeing a JavaScript error in your console with your current approach, this will tell you exactly what's going on. If you're in a browser without a console I'd recommend grabbing Firefox and FireBug to go with it, or Chrome and it's included developer tools.

Related

Standard header page across all internal sites

We have lots of internal websites that could use a little standardization. I am looking to add a common banner page to all websites for a couple of reasons -
Consistent look
Easily update Banner logo
Display announcements like server maintenance ones
We have IIS and ASP.net. I did do work around where I have the banner page as a free standing html page that sits on top of the existing site, but I'm sure there is a better way around. I don't want to go the way of master pages mainly because it changes the control ID's of pages and we have several sites that use JQuery and Javascript that would break when the control ID's change.
You can create a javascript function as below and update body tag of all pages to call that function like onload="onAllPageLoad()"
function onAllPageLoad() {
$('body').prepend('My common banner HTML elements');
}
This shall put your banner html elements as the first elements in the body tag.
I was able to hack up a solution by using Jquery get function to splice the Banner page with the site page. The caveat being, each of the internal website pages must carry the get function for a uniform look. Since most of our sites are single page apps, this works for now. I have some site specific info that I want to add to the banner and any updates to the banner page are reflected on the site page.
Here is the code I came up with -
Banner.htm page:
<table width="100%" border="0">
<tr>
<td style="width: 30%" align="left">
<a href="http://SiteHomePage">
<img alt="Site Home" border="0" src="http://SiteHomePage/img/SiteHomePagelogo.png"
width="119px" height="67px" /></a>
</td>
<td style="width: 70%">
<table width="100%">
<tr>
<td style="text-align:left;">
<div id="SiteName" style="font-weight: bold; font-size: 30px;">
</div>
</td>
<td>
<div id="ExtraInfo" style="float: right; font-weight: bold; font-size: 15px;">
</div>
</td>
</tr>
</table>
</td>
</tr>
</table>
Default.aspx Page:
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<%--Script to add banner page starts here--%>
<script runat="server">
<%--Fetch site specific info from the site web.config --%>
string SiteInfo =
ConfigurationManager.AppSettings["SiteInfo"];
string PageTitle =
ConfigurationManager.AppSettings["PageTitle"];
<%--BannerURL value is Banner.htm--%>
string BannerURL =
ConfigurationManager.AppSettings["BannerURL"];
</script>
<script src="//code.jquery.com/jquery-1.11.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
var extraInfo = '<%= SiteInfo %>';
var title = '<%= PageTitle %>';
var BannerURL = '<%= BannerURL %>';
$(document).ready(function() {
$.get(BannerURL, function(data) {
$("#Banner").html(data);
$("#SiteName").html(title);
document.title = ":: " + title + " ::";
$("#ExtraInfo").html(extraInfo);
});
});
</script>
<%--Script to add banner page ends here--%>
</head>
<body>
<form id="form1" runat="server">
<div id="Banner">
</div>
< %--Add site code here--%>
</form>
</body>
</html>

how to animate grid view rows to display one row after another in a same page. And all should be on the page?

how to animate grid view rows to display one row after another in a same page. And all should be on the page?
any body please help me out.thanks in advance
Animating an ASP.NET GridView is not what you're after. You'll want to animate the HTML generated from the ASP.NET GridView, and for that you'll need javascript and/or jQuery. These scripting languages were built for the web and facilitate DOM manipulation.
In this case, a possible approach is to render the rows invisible on document ready, then display (and animate) them one at a time.
You should now have sufficient information to continue your search.
after 2 days of my work i had done the following :
<head runat="server">
<title></title>
<script src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("span[id$='label']").animate({marginLeft: "0.05in"},100).first().show("fast", function showNext() {
$(this).next().show(200, showNext);
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:Repeater runat="server" ID="repeater1">
<ItemTemplate>
<asp:Label runat="server" ID="label" style="display:none" Text='<%#Eval("ename") %>'>
</asp:Label>
<br />
</ItemTemplate>
</asp:Repeater>
</div>
</form>
</body>
</html>

ASP.NET Listview jquery double click

Here's the top end of my list view
<asp:ListView ID="ui_lvJobList" runat="server" OnPagePropertiesChanging="ui_lvJobList_PagePropertiesChanging"
OnItemDataBound="ui_lvJobList_ItemDataBound" OnItemCommand="ui_lvJobList_ItemCommand"
OnDataBound="ui_lvJobList_DataBound" OnPagePropertiesChanged="ui_lvJobList_PagePropertiesChanged">
<LayoutTemplate>
<div>
<table class="jobs-table jobs-table-body">
<tbody>
<tr runat="server" id="itemPlaceholder" />
</tbody>
</table>
</div>
</LayoutTemplate>
<ItemTemplate>
<tr id="ui_jobId<%# DataBinder.Eval(Container.DataItem,"JobID") %>" class="<%# DataBinder.Eval(Container.DataItem, "StatusID").ToString() == "1" ? "jobs-row" : "jobs-row-started"%>"
onmouseover="this.style.backgroundColor='#b8e4f7';" onmouseout="this.style.backgroundColor='#efefef';">
<td class="jobs-table-JobId">
<span class="no-decoration cursor-pointer">
<%# DataBinder.Eval(Container.DataItem,"JobID") %>
</span>
</td>
<td class="hidden-ui-control click-me-to-edit">
<asp:LinkButton runat="server" CommandName="EditJob" CommandArgument='<%# DataBinder.Eval(Container.DataItem,"JobID") %>'
ID="ui_btnListViewEditJob" CssClass="no-decoration cursor-pointer">
<%# DataBinder.Eval(Container.DataItem,"JobID") %>
</asp:LinkButton>
</td>
...and here's my jQuery to handle double-click on any cell
$("tr[class^='jobs-row'] td").dblclick(function (e) {
e.preventDefault();
$(this).parent().find("td.click-me-to-edit a").click();
});
... I'm using jquery-1.8.3
The problem: the OnItemCommand is not firing when I double-click the row; there are more cells than I've included but I left them out for brevity.
I've tried with & without the preventDefault.
The dblclick function is being hit, I've run it with the chrome dev tools.
Thanks in advance for having a look. Let me know if I've not included enough of anything.
N
Cracked It!
I changed the LinkButton for a Button (& made the appropriate change to the jQuery selector) & it works OK, now.

How to open an aspx page like a dialog in ASP.NET

I need to open a page like a modal dialog .I find an exemple on net but it doesn't work.
In the main page I have this code:
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
<asp:Button Text ="Add New Course" runat="server" ID="btnAddCourse" OnClientClick="showPanel('dialog');return false;"/>
<script type="text/javascript">
function showPanel(panelID) {
$panel = $('#' + panelID);
$.ajax({
url: "/AddNew.aspx",
type: "GET",
dataType: "html",
async: false,
data: { "param": "abcd"
},
success: function (obj) {
// obj will contain the complete contents of the page requested
// use jquery to extract just the html inside the body tag
$content = $(obj).find('body').html();
// then update the dialog contents with this and show it
$panel.html($content);
$panel.dialog();
}
});
}
</script>
<div id="dialog">
</div>
</asp:Content>
When I click the button I need to open the page below .I receive an error that tell that element $ is not recognized.I don't know exactly who is element panel .Must I add a panel control ,but where ?
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="AddNew.aspx.cs" Inherits="WebApplicationDialog.AddNew" %>
<!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>Add New Course </title>
</head>
<body>
<form >
<div id="div1">
<table>
<tr><td colspan="3"> <asp:Label ID="lblCourse" runat="server" Text="Add New Course"></asp:Label></td></tr>
<tr><td colspan="3"> </td></tr>
<tr>
<td style="width:40%"> <asp:Label ID="lblName" runat="server" Text="Course Name" ></asp:Label></td>
<td style="width:20%"> </td>
<td style="width:40%">
<input id="txtName" type="text" />
</td>
</tr>
<tr>
<td style="width:40%"> <asp:Label ID="lblDescription" runat="server" Text="Description" ></asp:Label></td>
<td style="width:20%"> </td>
<td style="width:40%">
<input id="txtDescription" type="text" />
</td>
</tr>
<tr><td colspan="3" style="float:right">
<input value ="Save" id="btnSave" type="submit" /> </td></tr>
</table>
</div>
</form>
</body>
</html>
Can somebody help me with this code ,to make it works ?
Thanks
It looks like you are trying to use JQuery to load a page content into a panel but if I'm reading your code right you may not have included the JQuery library, you need to include this line of code in the <head> of your html code. You are also using JQueryUI dialog and will need to reference the JQueryUI library
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>
For Example
<head>
<title>Page Title</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>
<head>
EDIT: I also notice you are using the dialog, which is in JQuery UI, pleasse make sure you reference JQuery UI toolkit as well
EDIT: Have stripped your code into jsFiddle: http://jsfiddle.net/EhPk7/1/
this seems to work for me
You need to add jquery lib reference.
At the top of a page:
<script src="http://code.jquery.com/jquery-1.8.2.min.js"/>
Include jQuery.
Change this line -> $panel = $('#' + panelID); to -> $panel = $('#div1'); and see if it works.
Consider adding jQuery script references on your page, above the jQuery Code that you are using.
Also, add reference jQuery UI
Download jQuery
There is a boolean property/setting called modal on the jQueryUI dialog, this will create a modal-type dialog.
I myself use this:
d.dialog({
autoOpen: true,
closeOnEscape: false,
closeText: '',
modal: true,
draggable: false,
resizable: false,
width: (window.document.width * 0.75),
dialogClass: 'popup loading',
title: 'title'),
});
when you wrap this sort of function in the
$(document).ready(function() {
})
it should popup the moment the DOM is ready..

asp.NET: How to access repeater generated elements?

i have a repeater than creates a table:
<itemtemplate>
<tr id="theTableRow" runat="server">
<td>
<asp:LinkButton runat="server"
OnClientClick="todo"
Text="Do Something" />
</td>
</tr>
</itemtemplate>
Note: the OnClientClick="todo" line.
In the final rendered code, i want the todo to contain a call to a javascript function, passing:
the ID of the generated table row, and
the Eval of a property of the currently bound object
And now for some pseudo-code:
Pseudocode 1:
OnClientClick="DoSomething(theTableRow, CromulentGuid); return false;"
Pseudocode 2
OnClientClick="javascript:DoSomething(theTableRow, CromulentGuid); return false;"
Pseudocode 3
OnClientClick="javascript:DoSomething(theTableRow, <%# Eval("CromulentGuid") %>); return false;"
Pseudocode 4
OnClientClick="javascript:DoSomething(<%= theTableRow %>, <%# Eval("CromulentGuid") %>); return false;"
Pseudocode 5
OnClientClick='javascript:DoSomething(<%= Eval(theTableRow) %>, <%# Eval("CromulentGuid") %>); return false;'
Whatever the ASP.NET code used, i want the rendered HTML to be:
<tr id="ctl00__itemRepeater_ctl01_theTableRow">
<td>
<a
onclick="DoSomething('ctl00__itemRepeater_ctl01_theTableRow', '19a149db-5675-4eee-835d-3d78372ca6f9'); return false;"
href="javascript:__doPostBack('ctl00$itemRepeater$ctl01$ctl04','')">
Do Something
</a>
</td>
</tr>
i would also be okay with:
<tr id="ctl00__itemRepeater_ctl01_theTableRow">
<td>
<a
onclick='DoSomething("ctl00__itemRepeater_ctl01_theTableRow", "19a149db-5675-4eee-835d-3d78372ca6f9"); return false;'
href="javascript:__doPostBack('ctl00$itemRepeater$ctl01$ctl04','')">
Do Something
</a>
</td>
</tr>
Note: i'm okay with the 2nd form since i know it is functionally identical, and ASP.NET code cannot generate the former, even if the latter is less readable.
Related questions:
ASP.NET: How to access repeater generated elements from javascript?
The better solution is to put the presentation logic in the business layer:
Presentation:
<asp:LinkButton runat="server"
OnClientClick="<%# GetItemClientClick((MySomething)Container.DataItem) %>"
Text="Do stuff" />
Business Logic
protected string GetItemClientClick(MySomething item)
{
...
String szOnClientClick =
"return DeleteItem(this, "+
Toolkit.QuotedStr(item.NodeGUID.ToString()) + ", "+
Toolkit.QuotedStr(GetItemText(item))+");";
return szOnClientClick;
}
Much cleaner. Much more readable. Much more maintainable.
You can use the OnItemDataBound event to alter each element in your code. Since you're particular about the HTML I might also recommend using hybrid controls rather than asp controls. For example:
<itemtemplate>
<tr id="theTableRow" runat="server">
<td>
<a runat="server"
onclick="todo(this.parent.parent, '<%# Eval("Property") %>');return false;" >
Do Something
</a>
</td>
</tr>
</itemtemplate>
This probably isn't 100% perfect, as I just typed it directly in the reply window and I always screw up the Eval() syntax on my first go, but it should help some.
Why not put the JS on the table row?
<tr onClick="DoSomething(this, '<%# Eval("GUIDColumn") %>')"; ><td>
<%# Eval("ColumnText") %>
</td></tr>
This gets you a reference to the table row, and the data that you're needing. It does break downlevel support, so browsers under IE6 won't really work as expected, but that's pretty much par for the course these days.
Two other possibilities are to utilize the Datagrid/Gridview object and the OnItemDatabound aspects or to build the table in code utilizing the ASP.NET TABLE control, and iterating through your datasource manually.

Resources