I would like to use 'slideToggle()' to show/hide a set of controls. I found this code on the web and am trying to get it to work in a test application. When I put the script within the Content control and click the button, the web site seem to run the script because the application is busy for a couple of seconds. However, when I try to debug the javascript, I can't view it in the debugger. When I put the script in the section of the Site.Master page, I can see the code in the debugger but it does not run when I click the button.
This is my code in the Site.Master page:
In the section it is as follows:
<head runat="server">
<meta charset="utf-8" />
<title><%: Page.Title %> - My ASP.NET Application</title>
<asp:PlaceHolder runat="server">
<%: Scripts.Render("~/bundles/modernizr") %>
</asp:PlaceHolder>
<webopt:BundleReference runat="server" Path="~/Content/css" />
<link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
<meta name="viewport" content="width=device-width" />
<script src="Scripts/jquery-1.11.1.min.js" type="text/javascript"></script>
<asp:ContentPlaceHolder runat="server" ID="HeadContent" />
This is the script within the Content control:
<div id="body">
<asp:ContentPlaceHolder runat="server" ID="FeaturedContent" />
<section class="content-wrapper main-content clear-fix">
<asp:ContentPlaceHolder runat="server" ID="MainContent">
<script type="text/javascript">
$(document).ready(function () {
var Button1 = $("[id$='_Button1']");
var Button2 = $("[id$='_Button2']");
var Panel1 = $("[id$='_Panel1']");
Button1.click(function (e) {
Panel1.slideDown();
e.preventDefault();
});
Button2.click(function (e) {
Panel1.slideUp();
e.preventDefault();
});
});
</script>
</asp:ContentPlaceHolder>
</section>
</div>
This is the markup on the site page:
<asp:Content runat="server" ID="BodyContent" ContentPlaceHolderID="MainContent">
<asp:Button ID="Button1" runat="server" Text="Show Panel" />
<asp:Button ID="Button2" runat="server" Text="Hide Panel" />
<br /><br />
<asp:Panel runat="server" ID="Panel1" Height="185px" Width="320px" style="display:none;" BackColor="#FFFF99" BorderColor="Black" BorderStyle="Solid" BorderWidth="2px">
Hello World!
</asp:Panel>
</asp:Content>
Using this code, the button at least looks like it is calling the script.
Can anybody see what I am doing wrong?
Thanks!
Updated Code
This script will toggle the panel although it is showing initially and I would like it to be hidden intially and also I would like the script to be run from the Site.Master page, if possible.
This is in the Default.aspx file:
<asp:Content runat="server" ID="BodyContent" ContentPlaceHolderID="MainContent">
<script type="text/javascript">
$(function () {
$("#<%=Button1.ClientID %>").click(function (evt) {
evt.preventDefault();
$("#<%=Panel1.ClientID %>").slideToggle('slow');
});
});
</script>
<asp:Button ID="Button1" runat="server" Width="200px" Text="Show Panel" OnClick="Button1_Click" />
<asp:Panel ID="Panel1" runat="server">
This is within the Panel.
</asp:Panel>
I add the jquery path in the Site.Master page within the section:
<script src="Scripts/jquery-1.11.1.min.js" type="text/javascript"></script>
How can I get the script to run from Site.Master page?
Thanks.
Try the following code:
<script type="text/javascript">
$(document).ready(function () {
$("[id$=Button1]").on("click",function (e) {
$("[id$=Panel1]").slideDown();
return false;
});
$("[id$=Button2]").on("click",function (e) {
$("[id$=Panel1]").slideUp();
return false;
});
});
</script>
Related
i have added jquery library to my gridview and it was really helpfull. when on page load this datatable show perfectly, but when I change value of dropdown list jquery datatable disapper. in this case, gridview just showing data based on dropdown list parameters value. I follow this tutorial.
link jquery reference:
<link type="text/css" rel="stylesheet" href="https://cdn.datatables.net/1.10.9/css/dataTables.bootstrap.min.css" />
<link type="text/css" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />
<link type="text/css" rel="stylesheet" href="https://cdn.datatables.net/responsive/1.0.7/css/responsive.bootstrap.min.css" />
<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.9/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/responsive/1.0.7/js/dataTables.responsive.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.9/js/dataTables.bootstrap.min.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
set javascript sintax to gridview:
<script type="text/javascript">
//on page load
$(function () {
$('[id*=GridView1]').prepend($("<thead></thead>").append($(this).find("tr:first"))).DataTable({
"responsive": true,
"sPaginationType": "full_numbers"
});
});
</script>
here is my gridview asp.net:
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server" RenderMode="Inline">
<ContentTemplate>
<asp:DropDownList ID="DropDownList1" runat="server" AutoPostBack="true" DataTextField="Name" DataValueField="Name"
OnSelectedIndexChanged="DropDownList1_SelectedIndexChanged" Width="30%" placeholder="select">
</asp:DropDownList>
<br />
<br />
<asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
<br />
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false" class="table table-striped"
Width="100%" OnRowCommand="GridView1_RowCommand">
<Columns>
<asp:BoundField DataField="Name" HeaderText="Name" />
<asp:BoundField DataField="Address" HeaderText="Address" />
<asp:ButtonField CommandName="editRecord" ControlStyle-CssClass="btn btn-info"
ButtonType="Button" Text="Edit" HeaderText="Edit Record" HeaderStyle-Width="10%">
<ControlStyle CssClass="btn btn-info"></ControlStyle>
</asp:ButtonField>
</Columns>
</asp:GridView>
</ContentTemplate>
</asp:UpdatePanel>
</div>
</form>
when I run this page,it worked:
BUT after i tried select one of value of dropdown list, datatable jquery didn't appear any more.
need suggest for this issue and fix this. Thanks
You have to rebind your datatable after postback. It happens now only during load. After every postback rebind the table
This is probably what you are searching for
pageLoad() will be triggered after every postback
function pageLoad() {
bindGrid();
};
function bindGrid(){
$('[id*=GridView1]').prepend($("<thead></thead>").append($(this).find("tr:first"))).DataTable({
"responsive": true,
"sPaginationType": "full_numbers"
});
};
it does require to be on page.
<asp:ScriptManager runat="server" />
A other option instead of pageload is
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(bindGrid);
In a simple web form Pikaday works nice but when I'm using this in a content page it doesn't work, for better understanding I'm giving the code......Thanks in advance
<%# Master Language="C#" AutoEventWireup="true" CodeBehind="Site1.master.cs" Inherits="Test2.Site1" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<link href="css/pikaday.css" rel="stylesheet" />
<link href="css/theme.css" rel="stylesheet" />
<script src="js/pikaday.js"></script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</div>
</form>
</body>
</html>
and content page code
<%# Page Title="" Language="C#" MasterPageFile="~/Site1.Master" AutoEventWireup="true" CodeBehind="ContentPage.aspx.cs" Inherits="Test2.WebForm2" %>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<h4>This is from content page</h4>
<asp:TextBox ID="tbxFromDate" runat="server"></asp:TextBox>
<asp:TextBox ID="tbxToDate" runat="server"></asp:TextBox>
<script type="text/javascript">
var picker1 = new Pikaday({
field: document.getElementById('tbxFromDate'),
theme: 'dark-theme'
});
var picker2 = new Pikaday({
field: document.getElementById('tbxToDate'),
theme: 'dark-theme'
});
</script>
</ContentTemplate>
</asp:UpdatePanel>
</asp:Content>
I don't understand what I'm missing
The problem is that tbxFromDate and tbxToDate do not exist in the HTML. Because the Controls are in a Content Control, their ID's are changed to ensure there are no duplicates.
Their ID probably looks something like this: ContentPlaceHolder1_tbxFromDate.
So you need to reference them by their ClientID. So use
<script type="text/javascript">
var picker1 = new Pikaday({
field: document.getElementById('<%= tbxFromDate.ClientID %>'),
theme: 'dark-theme'
});
var picker2 = new Pikaday({
field: document.getElementById('<%= tbxToDate.ClientID %>'),
theme: 'dark-theme'
});
</script>
Im using the jquery dialog box and i am trying to stop the postback from happening when calling the dialog, so its basically handled on client side.
I am calling the dialog open from my Treeview's SelectedNodeChanged
protected void tvTreeList_SelectedNodeChanged(object sender, EventArgs e)
{
Page.ClientScript.RegisterStartupScript(this.GetType(), "CallMyFunction", string.Format("ParentNodeClick('{0}','{1}')", lblDescText, lblTitleText), true);
}
this is my javascript function
<script type="text/javascript">
function ParentNodeClick(Message, Title)
{
document.getElementById("dialog").innerHTML = Message;
document.getElementById("dialog").title = Title;
$("#dialog").dialog({
width: 600,
modal:true
});
};
</script>
Is there any way i can do this? Already tried to use this but it doesnt seem to work.
$("#dialog").parent().appendTo(jQuery("form:first"));
Full html on masterpage
<%# Master Language="C#" AutoEventWireup="true" CodeBehind="Master.master.cs" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Web Data Source</title>
<link href="Style/Style.css" rel="stylesheet" type="text/css" />
<link href="Style/jquery.css" rel="stylesheet" type="text/css" />
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script type="text/javascript">
function ParentNodeClick(Message, Title)
{
document.getElementById("dialog").innerHTML = Message;
document.getElementById("dialog").title = Title;
$("#dialog").dialog({
width: 600,
modal:true
});
};
</script>
</head>
<body>
<form id="form1" runat="server" style="align-content:center; height:100%;">
<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
<div id="dialog" title="">
<p></p>
</div>
<div runat="server" style="text-align:center;">
<h1 style="color:#505050;">Datastatus from Data servers</h1>
</div>
<asp:ContentPlaceHolder ID="cphContent" runat="server">
</asp:ContentPlaceHolder>
</form>
</body>
</html>
and my treeview
<div id="TreeList">
<asp:TreeView ID="tvTreeList" runat="server" OnSelectedNodeChanged="tvTreeList_SelectedNodeChanged" >
<NodeStyle CssClass="NodeStyle"/>
<HoverNodeStyle CssClass="HoverNodeStyle"/>
<SelectedNodeStyle CssClass="SelectedNodeStyle" />
</asp:TreeView>
</div>
In master page
<%# Master Language="C#" AutoEventWireup="true" CodeFile="MasterPage.master.cs" Inherits="MasterPage" %>
<!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 id="Head1" runat="server">
<title></title>
<link type="text/css" href="css/ui-lightness/jquery-ui-1.8.19.custom.css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.19.custom.min.js"></script>
<style type="text/css">
.ui-datepicker { font-size:8pt !important}
</style>
<asp:ContentPlaceHolder ID="head" runat="server">
</asp:ContentPlaceHolder>
</head>
In content place holder i have tried
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="Server">
<script type="text/javascript">
$(function () {
$("input[id$='TextBox1']").datepicker();
});
</script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">
<table id="tblgv" runat="server">
<td>
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
</td>
</table>
</asp:Content>
I have tried in asp page working fine. i don't know why its not working in master page.
This will Work for you...
<script type="text/javascript">
$(document).ready(function() {
$("input[id$='TextBox1']").datepicker();
});
</script>
You could also give it a class of something like CssClass="datePicker" and use that to grab it with jQuery:
$(".datePicker").datepicker();
Use Like, In Your Page where Datepicker is Located
Place it at bottom of Page where you Datpicker is located,
Put This Jquery
<script src="js/jquery-ui-1.8.16.custom.min.js" type="text/javascript"></script>
<script src="DATEPICKER.JS" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$("input[id$='TextBox']").datepicker();
});
</script>
change ur content page code to this, remove datepicker style from master page
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="Server">
<style type="text/css">
.ui-datepicker { font-size:8pt !important}
</style>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">
<table id="tblgv" runat="server">
<td>
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
</td>
</table>
<script type="text/javascript">
`$(function () {
$("input[id$='TextBox1']").datepicker();
});
</script>
</asp:Content>
if not working!!! please write ur html result from this content in ur browser here
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="jQueryValidation.Default" %>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<script src="Scripts/jquery-1.6.1.js" type="text/javascript"></script>
<script language="javascript" type="text/javascript">
function checkValidity() {
var container = document.getElementById("toggle");
alert("uspeh!");
var inputArray = container.getElementsByTagName("input");
}
</script>
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div id="toggle">
<asp:Label ID="lblName" runat="server" Text="Vnesi ime: "></asp:Label>
<span><asp:TextBox ID="txtName" runat="server" data-errormessage="Внесете име" data-class="required"></asp:TextBox></span>
<br />
<asp:Label ID="lblSurname" runat="server" Text="Vnesi prezime: "></asp:Label>
<span><asp:TextBox ID="txtSurname" runat="server" data-errormessage="Внесете презиме" data-class="required"></asp:TextBox></span>
<br />
<asp:Label ID="lblNickname" runat="server" Text="Vnesi nadimak: "></asp:Label>
<span><asp:TextBox ID="txtNickname" runat="server" data-errormessage="Внесете надимак" data-class="required"></asp:TextBox></span>
<br /><br />
<asp:Button ID="btnSend" runat="server" Text="Send"
OnClientClick="checkValidity(); return false;" onclick="btnSend_Click" />
</div>
</form>
</body>
</html>
Updated.
I have no idea why no pop-up shows up. Any idea? Thanks in advance!
Try
<asp:button text="Click me" onclientclick="window.checkValidity();" />
By doing
<script language="javascript" type="text/javascript">
function checkValidity() { }
</script>
You declare a function to the global scope. In the context of a browser it is the same as doing:
window.checkValidity = function() { };