I have a Page that is associated with a master page. In the master page, I put the css links in the head section and I put the jquery script tag and the script that contains the function to toggle the grid, but when it is not working. Looks like it is not even calling showhide when I click on an item.
Here is a snippet of the master page:
<head runat="server">
<title></title>
<link href="MainLayout.css" rel="stylesheet" type="text/css" />
<link href="ajaxtab.css" rel="stylesheet" type="text/css" />
<link href="dialog.css" rel="stylesheet" type="text/css" />
<link href="grid.css" rel="stylesheet" type="text/css" />
<link href="pager.css" rel="stylesheet" type="text/css" />
<link href="subgrid.css" rel="stylesheet" type="text/css" />
<script src="jquery-1.3.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
//master: id of div element that contains the information about master data
//details: id of div element wrapping the details grid
function showhide(master, detail) {
//First child of master div is the image
var src = $(master).children()[0].src;
//Switch image from (+) to (-) or vice versa.
if (src.endsWith("plus.png"))
src = src.replace('plus.png', 'minus.png');
else
src = src.replace('minus.png', 'plus.png');
//Set new image
$(master).children()[0].src = src;
//Toggle expand/collapse
$(detail).slideToggle("normal");
}
</script>
<asp:ContentPlaceHolder ID="head" runat="server">
</asp:ContentPlaceHolder>
</head>
Here is the div that contains the showhide function in the onclick event in the aspx page:
<div class="searchgroup"
id='<%#String.Format("master{0}",Container.DataItemIndex)%>'
onclick='showhide(<%#String.Format("\"#master{0}\"",Container.DataItemIndex)%>
,
<%#String.Format("\"#detail{0}\"",Container.DataItemIndex) %>)'>
<asp:Image ID="imgCollapsible"
CssClass="first"
ImageUrl="plus.png"
Style="margin-right: 5px;"
runat="server" />
<span class="searchheader"><%#Eval("Business")%></span>
</div>
Here is html it generates for the master and detail div:
//master div
<div class="searchgroup"
id='master0'
onclick='showhide("#master0","#detail0")'>
<img id="ctl00_ContentPanel_gvMaster_ctl02_imgCollapsible"
class="first" src="plus.png"
style="border-width:0px;margin-right: 5px;" />
<span class="searchheader">ABC</span>
</div>
//details div
<div id='detail0' class="searchdetail">
<div>
<table class="searchgrid"
id="ctl00_ContentPanel_gvMaster_ctl02_gvDtails">
<tr>
<th>Status</th>
<tr class="searchrow">
<td>2</td>
</tr>
</table>
</div>
</div>
I could not get the JQuery working and I was running out of time, so for now I decided to use the collapsible panel externder from the ajax control toolkit. When I get time, I will investigate the JQuery Issue, Thanks for all your suggestions so far. If anyone has any more, please let me know.
Your javascript is throwing an error at src.endsWith("plus.png") because there is no built in endsWith function in js. replace that with src.substr(-8) == "plus.png" instead and it works:
<script type="text/javascript">
//master: id of div element that contains the information about master data
//details: id of div element wrapping the details grid
function showhide(master, detail) {
//First child of master div is the image
var src = $(master).children()[0].src;
//Switch image from (+) to (-) or vice versa.
if (src.substr(-8) == "plus.png")
src = src.replace('plus.png', 'minus.png');
else
src = src.replace('minus.png', 'plus.png');
//Set new image
$(master).children()[0].src = src;
//Toggle expand/collapse
$(detail).slideToggle("normal");
}
</script>
EDIT - Working example:
MasterPage.master
<%# Master Language="C#" AutoEventWireup="true" %>
<!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>Untitled Page</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
//master: id of div element that contains the information about master data
//details: id of div element wrapping the details grid
function showhide(master, detail) {
//First child of master div is the image
var src = $(master).children()[0].src;
//Switch image from (+) to (-) or vice versa.
if (src.substr(-8) == "plus.png")
src = src.replace('plus.png', 'minus.png');
else
src = src.replace('minus.png', 'plus.png');
//Set new image
$(master).children()[0].src = src;
//Toggle expand/collapse
$(detail).slideToggle("normal");
}
</script>
<asp:ContentPlaceHolder id="head" runat="server">
</asp:ContentPlaceHolder>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</div>
</form>
</body>
</html>
Default2.aspx
<%# Page Language="C#" MasterPageFile="~/MasterPage.master" AutoEventWireup="true" Title="Untitled Page" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
<div class="searchgroup" id='master0' onclick='showhide("#master0","#detail0")'>
<img id="ctl00_ContentPanel_gvMaster_ctl02_imgCollapsible" class="first" src="plus.png" style="border-width:0px;margin-right: 5px;" />
<span class="searchheader">ABC</span>
</div>
<div id='detail0' class="searchdetail">
<div>
<table class="searchgrid"
id="ctl00_ContentPanel_gvMaster_ctl02_gvDtails">
<tr>
<th>Status</th>
</tr>
<tr class="searchrow">
<td>2</td>
</tr>
</table>
</div>
</div>
</asp:Content>
" Looks like it is not even calling showhide when I click on an item." If you simplify the function with just an alert() function, does it work.
The code looks fine to me. Maybe there is some id mismatch.
You may check if jquery's path is correct in your page (that which uses this master page).
To be sure if its calling showhide() you can use Firebug in Firefox with a breakpoint in the function.
Also, it will give you more clues to debug and guess what is going wrong.
The code seems to be ok to me, too.
just a thought, if you right click view source on the browser, do you see the jquery path correctly? my experience tells me you need to resolve javascript urls on master pages (it works fine for css, but not js files)
<script src="<%= ResolveUrl("~") %>jquery-1.3.2.min.js" type="text/javascript"></script>
Related
I want some radio buttons styled the way JQuery does it. I've now got demo code working that shows that in a minimal HTML page, but I need to do that now in an ASP.NET C# page. The following code works fine, where REDACTED points to a local-network server:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Button - Radios</title>
<!-- CSS -->
<link rel="stylesheet" href="http://REDACTED/_Kris_Sandbox/css/jquery/jquery-ui.min.css" />
<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"/>
<!-- JQuery -->
<script type="text/javascript" src="http://REDACTED/_Kris_Sandbox/js/jquery/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="http://REDACTED/_Kris_Sandbox/js/jquery/jquery-ui.min.js"></script>
<script>
$(function() {
$( "#radio" ).buttonset();
});
</script>
</head>
<body>
<form>
<div id="radio">
<input type="radio" id="radio1" name="radio"><label for="radio1">Choice 1</label>
<input type="radio" id="radio2" name="radio" checked="checked"><label for="radio2">Choice 2</label>
<input type="radio" id="radio3" name="radio"><label for="radio3">Choice 3</label>
</div>
</form>
</body>
</html>
But the following shows me ordinary, non-JQuery-styled radio buttons. The date picker does work (showing that JQuery is running) and messages show up as a pop-up and in the console, showing that the function is running, but the buttons aren't being styled.
<%# Page Language="C#" AutoEventWireup="true" CodeFile="travel_temp.aspx.cs" Inherits="_idx" %>
<!DOCTYPE html>
<html>
<head id="hgs_head" runat="server">
<meta charset="utf-8">
<title>JQuery Test</title>
<!-- The following links have been commented out. The internal links point to copies of JQueryUI files that exist and are freshly downloaded from the makers' site. -->
<!-- CSS -->
<link rel="stylesheet" href="http://REDACTED/_Kris_Sandbox/css/jquery/jquery-ui.min.css" />
<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"/>
<!-- JQuery -->
<script type="text/javascript" src="http://REDACTED/_Kris_Sandbox/js/jquery/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="http://REDACTED/_Kris_Sandbox/js/jquery/jquery-ui.min.js"></script>
<!-- Radio button styling -->
<script>
$(function () {
console.log("ready!");
alert("Hi!");
$("radio").buttonset();
});
</script>
</head>
<body id="hgs_body" runat="server">
<p>Date Picker using JQuery:</p>
<input type="text" name="date" id="date"><script>$("#date").datepicker();</script>
<!-- MAIN CONTENT -->
<div id="main">
<p>Radio Buttons using JQuery:</p>
<form class="messages" id="messages" runat="server">
<asp:ScriptManager ID="ScriptManager" runat="server"/>
<div id="radio">
<input type="radio" id="radio1" name="radio"><label for="radio1">Twilight</label>
<input type="radio" id="radio2" name="radio" checked="checked"><label for="radio2">Dash</label>
<input type="radio" id="radio3" name="radio"><label for="radio3">Rarity</label>
</div>
</form>
</div>
</body>
</html>
I figure the problem has to do with this page being ASP.NET with the buttons being created through an .aspx page (the .aspx.cs page is blanked out for demo purposes by the way). But the point of using "$(function" is that it only runs once the page is fully assembled, so the radio buttons should already be there.
What do I need to do, to make the styling work?
(Follow-up note: I didn't do it in this example, but the actual buttons are ASP.NET code. That wasn't the problem though; see answer. If you're having the same problem note that you apparently need to call the JQuery function to style them again if the page updates.)
During page load, you are assigning the buttonset property to element which is of type tag : radio. No such element exists in your DOM. You need to target the div where you want to apply the buttonset. In short, you are missing '#' in your selector.
$(function () {
console.log("ready!");
alert("Hi!");
$("#radio").buttonset();
});
Jquery is not wrking when I am using form tag in asp.net controls.so whats the solution .I am trying multiple techniques but it does not work.
<%# Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#bt1").click(function () {
$("#p1").hide(2000);
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<p runat="server" id="p1">this is asp.net</p>
<asp:Button ID="bt1" Text="click" runat="server"/>
</div>
</form>
</body>
</html>
As you are using ASP.NET and bt1 is a button server control you need to use Control.ClientID.
<%= bt1.ClientID %> will Gets the control ID for HTML markup that is generated by ASP.NET.
Use
$("#<%= bt1.ClientID %>").click(function () {
$("#<%= p1.ClientID %>").hide(2000);
});
OR
You can use ClientIDMode.Static mode then you can continue with your existing code. However I will not recommend it.
I have a ASP.NET Application with a master site and content sites. in one of this content sites I have a Div with Controls and I want to try it make draggable with jQuery but I don't know how I can to this in ASP.NET because of the Control Id in asp.
here is my code:
master site:
...
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<link href="Styles/jquery-ui.css" rel="stylesheet" type="text/css" />
<script src="Script/jquery-1.8.2.js" type="text/javascript"></script>
<script src="Script/jquery-ui.js" type="text/javascript"></script>
<script>
$(function () {
$("#create_box").draggable();
});
</script>
</head>
<body>
<form id="mainform" runat="server">
<div class="gastzugang">
<asp:ContentPlaceHolder ID="lw_header" runat="server">
<!--Header-->
</asp:ContentPlaceHolder>
<asp:ContentPlaceHolder ID="lw_content" runat="server">
<!--Content-->
</asp:ContentPlaceHolder>
<asp:ContentPlaceHolder ID="lw_footer" runat="server">
<!--Footer-->
</asp:ContentPlaceHolder>
</div>
</form>
</body>
</html>
My Content Site:
<%# Page Title="" Language="C#" MasterPageFile="~/master.Master" AutoEventWireup="true" CodeBehind="CreateUser.aspx.cs" Inherits="lw_gastzugang.CreateUser" %>
<asp:Content ID="Content2" ContentPlaceHolderID="lw_content" runat="server">
<div class="createuser">
<div class="create_box">
<div class="newUser">
Benutzer Anlegen <br/>
<br/>
//Here are my Controls
<br/>
<asp:Button ID="btnAnlegen" runat="server" Text="Benutzer anlegen"
onclick="btnAnlegen_Click" />
</div>
</div>
</div>
</asp:Content>
I want to this:
http://jqueryui.com/droppable/
Just use jQuery UI draggable.
Make
ClientIDMode="static" in the asp.net Tag
Or Use
<script type="text/javascript">
$('#'+'<%=lw_content.ClientID%>').draggable();
</script>
You could take a look at hammer.js which covers a 'drag' style event:
https://github.com/EightMedia/hammer.js
The drag example there is at:
http://eightmedia.github.com/hammer.js/drag/
Now I don't know too much about ASP.NET but what I would try is applying the drag behaviour to anything with a .draggable class.
Hope that helps a little!
I have a Jquery SooperFish Menu in my master page.Onclick on any SubMenu option it is reloading the Menu. Is there any way to restict reloading Menu every time in Child Page?
To decrease the Database lookups.
EDIT:
<%# Master Language="C#" AutoEventWireup="true" CodeBehind="elogis.master.cs" Inherits="elogis.elogis" %>
<!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></title>
<link rel="stylesheet" type="text/css" href="Styles/sooperfish.css" media="screen"/>
<link rel="stylesheet" type="text/css" href="Styles/sooperfish-theme-large.css"
media="screen"/>
<script src="Jquery/jquery-1.4.2.min.js" type="text/javascript"></script>
<script src="Jquery/jquery.easing-sooper.js" type="text/javascript"></script>
<script src="Jquery/jquery.sooperfish.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$('ul.sf-menu').sooperfish();
});
</script>
</head>
<body>
<form id="form1" runat="server">
<asp:Literal ID="Literal1" runat="server"></asp:Literal>
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</form>
</body>
</html>
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
SooperFish spoorfishMenu = new SooperFish();
Literal1.Text = spoorfishMenu.ExecuteXSLTransformation();
}
}
It looks as if the onClick postback, if you're writing it yourself (JS) add:
return false;
at the end-
onClick="doSomething();return false;"
Unless you are using UpatePanel's or another AJAX framework, each post-back is a new HTTP request, meaning the menu has to reload because the page is reloaded.
You have several options for caching, search SO or take a look at the link below to get started:
ASP.NET Caching
I'm trying to access User.Identity from my master page so I can figure out which user is logged in, however I can't get it to work. If I import System.Security.Principal in my master page it makes no difference:
<%# Import Namespace="System.Security.Principal" %>
I can access it fine if I try within a Controller.
Any idea what I need to do?
What about through HttpContext.Current.User.Identity?
<%=HttpContext.Current.User.Identity.Name %> Will display the current users name
HttpContext.Current.User will get the IPrincipal object.
Here is a master page that only displays the Username in the title:
<%# Master Language="C#" Inherits="System.Web.Mvc.ViewMasterPage" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>
<asp:ContentPlaceHolder ID="TitleContent" runat="server" />
</title>
<link href="../../Content/Style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="page">
<div id="header">
<div id="title">
<h1 id="maintitle">
<%=HttpContext.Current.User.Identity.Name %>
</h1>
</div>
</div>
<div id="main">
<asp:ContentPlaceHolder ID="MainContent" runat="server" />
</div>
</div>
</body>
</html>
I think Its Work
HttpContext.Current.User.Identity.Name.ToString()
or
Page.User.Identity.Name.ToString()
You can use HttpContext.Current.User.Name but you need to remember that the Master Page code is executed only after the slave page code. So you can use this variable as long as you are not performing any security logic in the master page.
You can get this from:
Context.User.Identity.Name