I have a long dropdown need to be filtered/searchable.
Similar to this dropdown:
Creating a select box with a search option
A project set up with a master page which included ContentPlaceHolder tag and all CSS, jquery plugin(chosen, datepicker,select2... etc).
I've tried to go all questions people ask, go through the jquery chosen documentaries but still don't get it to work.
Is it possible because I'm using .net 4.5? Any thought? Please help.
Here is the code
<%# Master Language="C#" AutoEventWireup="true" CodeFile="V2.master.cs" Inherits="Stroke_V2" %>
<!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" lang="en">
<head runat="server">
<meta charset="utf-8" http-equiv="X-UA-Compatible" content="IE-edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link runat="server" rel="shortcut icon" href="~/favicon.ico" type="image/x-icon" />
<link runat="server" rel="icon" href="~/favicon.ico" type="image/ico" />
//All css and js.min go here
<!-- CSS -->
<!--.js.min-->
<title>AppTitleGohere</title>
<asp:ContentPlaceHolder ID="head" runat="server">
</asp:ContentPlaceHolder>
</head>
<body>
<form id="MastPg3" runat="server">
<div class="container">
//Container here
</div>
<div class="container body-content">
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</div>
<br />
<div class="container footer center">
// Container footer here
</div>
</form>
</body>
</html>
Then call the dropdown list from SQL and stored in PLACEHOLDER.The code is in .aspx.cs file
Student.Procedure.MasterCourses= formcontrols.GetDropdownValue($(record.PLACEHOLDER + 'ddlMasterCourses'));
formcontrols.PopulateDropDown($(record.PLACEHOLDER + 'ddlMasterCourses'), procedure.MasterCourses);
Then, I have a record.aspx file which has all HTML
<%# Page Title="" Language="C#" MasterPageFile="~/V2.master" AutoEventWireup="true" CodeFile="Record.aspx.cs" Inherits="Registry_Record" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="Server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">
<asp:ScriptManager ID="ScriptManager1" runat="server" />
<div id="dvStudentCourses" class="tab-pane fade in active">
<div class="col-md-12 col-sm-12 col-xs-12 text-center section">
Master Courses
</div>
<br />
<br />
<div class="row">
<div class="form-horizontal col-md-6 col-sm-12 col-xs-12 formelement csc">
<div class="form-group">
<div class="field-group">
<label id="lblMasterCourses" class="col-md-4 col-sm-4 col-xs-12 control-label">Master Courses</label>
<div class="col-md-8 col-sm-8 col-xs-12">
<div class="dropdown">
<input id="ddlMasterCourses" runat="server" aria-expanded="true" aria-haspopup="true" class="btn btn-default btn-block dropdown-toggle form-control input-sm" data-defaultvalue="Select Value" data-toggle="dropdown" type="button" />
<ul id="ulMasterCourses" runat="server" aria-labelledby="lblMasterCourses" class="dropdown-menu btn-block scrollable-menu">
</ul>
<input name="ddlMasterCourses" type="hidden" />
</div>
**<script>
$(document).ready(function() {
$('#ddlMasterCourses').select2({
});
});**
</script>
</div>
</div>
</div>
</div>
</div>
</div>
Related
I have a html page as below
`
<HTML lang="EN-US">
<HEAD>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta content="IE=edge" http-equiv="X-UA-Compatible" />
<TITLE>
DUMMY
</TITLE>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" />
<link rel=stylesheet href=styles.css>
</HEAD>
<body class="mild-blue">
<head>
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="expires" content="0" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta content="IE=edge" http-equiv="X-UA-Compatible" />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<metatags id="MetaTags1" selectedtabindex="0" runat="server" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script type="text/javascript" src="css/jquery.dataTables.min.js"></script>
<!-- <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>-->
<script type="text/javascript">
wp.include("menu");
</script>
</head>
<!--Confirm Modal to naviagate to APP-->
<div id="navigateConfirm" class="modal fade" tabindex="-1" role="dialog">
<div class="modal-dialog modal-dialog-centered">
<form>
<div class="modal-content warning-block">
<div class="header">
<h6>Confirmation</h6>
</div>
<div class="content">
<p class="d-inline-block my-md-2 mt-0 medium p-0">You are navigating out of iStore. Any pending changes will be lost. Continue ?</p>
<div class="modal-footer">
<button class="button-secondary" data-dismiss="modal" id="navigateConfirmYes">YES</button>
<button type="submit" class="button-primary" data-dismiss="modal">NO</button>
</div>
</div>
</div>
</form>
</div>
</div>
<head>
<div class="primary-header">
<nav class="row navbar">
<a class="navbar-brand d-flex">
<img src="images/logo.svg" alt="Logo" id="navigateAPP" />
<p class="header p-0" onclick="#">TEST Store</p>
</a>
</div>
</nav>
</div>
<script LANGUAGE="javascript">
$("#navigateAPP").click(function(event) {
$('#navigateConfirm').modal('show');
});
$("#navigateConfirmYes").click(function(event) {
window.location.href = document.getElementById("returnUrl").value;
});
</script>
<div class="row m-0">
<div class="col-lg-6 deliveryOps p-0 pr-lg-1">
<div class="cartCard py-3">
<div class="row">
<div class="formField mb-0 col-12 col-md-6 col-lg-12">
<input type="text" name="ibeforedate" id="ibeforedate" class="datepicker" placeholder="Example: 31-DEC-1999" autocomplete="off" required onChange="this.value = datecheck(this.value,'DD-MON-RRRR');" readonly>
<label class="input_label medium">Request Delivery Date</label>
</div>
</div>
</div>
</div>
</div>
`
When user clicks on logo.svg, navigateAPP modal window should popup
at the same we have one datefield.
Now the issue is, if i use <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
I am able to open date calendar and select the date from the calender. But when i click on logo.svg, navigateAPP modal window is not appearing.
When i uncomment the jquery-ui.js, able to see modal window but datepicker is not working.
How to make both the things work.
Thanks
<%# taglib uri = "http://java.sun.com/jsp/jstl/core" prefix = "c" %>
<%# page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Library Management</title>
<meta content='width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no' name='viewport'>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.0/css/materialize.min.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link href="assets/css/custom.css" rel="stylesheet" type="text/css" />
</head>
<body>
<jsp:include page='menu.jsp'></jsp:include>
<main>
<section class="content">
<div class="page-announce valign-wrapper">
<i class="material-icons">menu</i>
<h1 class="page-announce-text valign">Fiche livre</h1>
</div>
<div class="row">
<div class="container">
<h5>Crèation d'un nouveau livre</h5>
<div class="row">
<form action="livre_add" method="post" class="col s12">
<div class="row">
<div class="input-field col m12 s12">
<input id="titre" type="text" name="titre">
<label for="titre">Titre</label>
</div>
</div>
<div class="row">
<div class="input-field col s6">
<input id="auteur" type="text" name="auteur">
<label for="auteur">Auteur</label>
</div>
<div class="input-field col s6">
<input id="isbn" type="text" name="isbn">
<label for="isbn">ISBN 13</label>
</div>
</div>
<div class="row center">
<button class="btn waves-effect waves-light" type="submit">Enregistrer</button>
<button class="btn waves-effect waves-light orange" type="reset">Annuler</button>
</div>
</form>
</div>
</div>
</div>
</section>
</main>
<jsp:include page='footer.jsp'></jsp:include>
</body>
</html>
That's a file in .jsp that is a class to visualize one function of the program .
I have a problem when I open the browser, the accents are decoded as not found even if I have used a UTF-8 charset and statement to print Crèation d'un nouveau livre .
I am trying to implement a dropdownlist that has chekboxs inside so you can select multiple options in an easy way. This multiselect dropdown list should be implemented using bootstrap multiselect (link for that).
The problem I am experiencing is that the script that I use for this it is not working and I think it is because I am trying to use it in a child page and not in the master page.
MASTER.MASTER
<%# Master Language="C#" AutoEventWireup="true" CodeBehind="Master.master.cs" Inherits="ProyectoPermanencia.Presentacion.Master" %>
<%# Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>
<!DOCTYPE html>
<html>
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="css/MasterStyleSheet.css" rel="stylesheet" type="text/css" />
<link href="Content/bootstrap.min.css" rel="stylesheet" type="text/css" />
<!--HERE IS A REFERENCE-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.15/css/bootstrap-multiselect.css" type="text/css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="Scripts/bootstrap.min.js" type="text/javascript"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!--HERE IS ANOTHER REFERENCE-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.15/js/bootstrap-multiselect.js"></script>
<asp:ContentPlaceHolder ID="head" runat="server">
</asp:ContentPlaceHolder>
<title>Sistema Permanencia</title>
</head>
<body>
<form id="formPrincipal" class="container-fluid body" runat="server">
<asp:ScriptManager ID="scrp1" runat="server"></asp:ScriptManager>
<!-- Header -->
<div class="">
<header>
<img runat="server" src="~/imgs/logo_50años_avaras_blanco_01.png" width="260" />
</header>
</div>
<asp:ContentPlaceHolder runat="server" ID="ContentPlaceHolderTitle">
</asp:ContentPlaceHolder>
<div class="container visible">
<div>
<asp:ContentPlaceHolder ID="ContentPlaceHolderFicha" runat="server">
</asp:ContentPlaceHolder>
</div>
<div>
<asp:ContentPlaceHolder ID="ContentPlaceHolderGlobal" runat="server">
</asp:ContentPlaceHolder>
</div>
</div>
</form>
</body>
</html>
VISIONGLOBAL.ASPX Here I want to use this dropdown list
<%# Page Title="" Language="C#" MasterPageFile="~/Master.Master" AutoEventWireup="true" CodeBehind="VisionGlobal.aspx.cs" Inherits="ProyectoPermanencia.Presentacion.VisionGlobal" %>
<asp:Content ContentPlaceHolderID="ContentPlaceHolderTitle" runat="server">
<asp:Label runat="server">
<h3 style="color:azure"> Visión Global </h3>
</asp:Label>
</asp:Content>
<asp:Content ID="ContentGlobal" ContentPlaceHolderID="ContentPlaceHolderGlobal" runat="server">
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<div class="container" style="font-size: small">
<div class="row">
<div class="jumbotron modal-content col-md-4" style="height: 150px; padding: 5px; padding-right: 0px; box-shadow: none; box-sizing: border-box; margin: 0px; border-radius: 2px; border-left: 5px solid rgb(252,173,24); border-right: 5px solid rgb(252,173,24); box-shadow: none;">
<!--THIS LIST BELOW IS THE ONE THAT SHOULD BECOME A DROPDOWN LIST WITH CHECKBOXES-->
<div id="Carrera pl-1" class="col-md-3" >
<div class="form row align-items-center">
<h5>Carrera: </h5>
<!--<asp:Button ID="Button1" runat="server" Text="Seleccionar" Font-Size="Small" CssClass="btn btn-sm btn-warning ml-4" OnClientClick="ddlEscuelas_SelectedIndexChanged" />-->
<asp:ListBox runat="server" ID="lstBoxTest" SelectionMode="Multiple">
<asp:ListItem Text="Red" Value="0"></asp:ListItem>
<asp:ListItem Text="Green" Value="1"></asp:ListItem>
<asp:ListItem Text="Yellow" Value="2"></asp:ListItem>
<asp:ListItem Text="Blue" Value="3"></asp:ListItem>
<asp:ListItem Text="Black" Value="4"></asp:ListItem>
</asp:ListBox>
</div>
</div>
</div>
<ajaxToolkit:ModalPopupExtender ID="mpe" BehaviorID="mpeID" runat="server" TargetControlID="btnBuscarCarreras"
PopupControlID="Panel1" OkControlID="OKButton" />
</div>
</div>
</div>
<!--BELOW IS THE SCRIPT THAT SHOULD TURN THE LISTBOX INTO A DROPDOWN LIST WITH CHECKBOXES-->
<script type="text/javascript">
$(function () {
$('#lstBoxTest').multiselect({
includeSelectAllOption:true
})
});
</script>
</ContentTemplate>
</asp:UpdatePanel>
</asp:Content>
I've been following a youtube tutorial for this this and I have even tried with other types of lists but the problem seems in how I am implementing the JS, not the "add-in" I am using.
I have reasearched a lot but I have not found a solution for this
EDIT: The List is being displayed but the script is not working so I am seeing just a listbox
I have a data GridView in asp.net that gets populated by way of a dropdown menu (when the menu changes, it changes the gridview with different data populated by a SQL query). I cannot get the search and paging function to work with JavaScript for the life of me. All of the links and references are in the master page as shown below, I need the search feature to work as well as the paging I'm not quite sure where I am going wrong.
<%# Master Language="C#" AutoEventWireup="true" CodeBehind="Site.master.cs"
Inherits="UserManagement.SiteMaster" %>
<!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" xml:lang="en">
<head runat="server">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title>ToolPath Software</title>
<!-- Bootstrap Core CSS -->
<link href="/lib/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="/css/bootstrap-social.css" rel="stylesheet" type="text/css" />
<!-- MetisMenu CSS -->
<link href="/css/metisMenu.min.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="/css/style.css" rel="stylesheet">
<!-- Morris Charts CSS -->
<link href="/css/morris.css" rel="stylesheet">
<!-- Custom Fonts -->
<link href="/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<link href="jquery-ui.min.css" rel="stylesheet">
<link href="jquery.comiseo.daterangepicker.css" rel="stylesheet">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script
src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<!-- jQuery -->
<script src="/js/jquery.min.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="../lib/bootstrap/js/bootstrap.min.js"></script>
<!-- Metis Menu Plugin JavaScript -->
<script src="/js/metisMenu.min.js"></script>
<!-- Morris Charts JavaScript -->
<script src="/js/raphael-min.js"></script>
<script src="/js/morris.min.js"></script>
<!-- Custom Theme JavaScript -->
<script src="/js/custom.js"></script>
<script src="jquery-ui.min.js"></script>
<script src="moment.min.js"></script>
<script src="jquery.comiseo.daterangepicker.js"></script>
<link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
</head>
<body class="theme-blue">
<form id="form1" runat="server">
<asp:HiddenField ID="HiddenSlug" runat="server" />
<asp:HiddenField ID="HiddenRoleID" runat="server" />
<asp:HiddenField ID="HiddenRole" runat="server"
OnValueChanged="HiddenRole_ValueChanged" />
<div id="wrapper">
<!-- Navigation -->
<nav class="navbar navbar-default navbar-static-top" role="navigation"
style="margin-bottom: 0">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-
toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="/">ToolPath Software</a>
</div>
<!-- /.navbar-header -->
<ul class="nav navbar-top-links navbar-right">
<!-- /.dropdown -->
<li>
<table border="0" align="left" cellpadding="7" cellspacing="7"
style="margin-top:20px;" ><tr>
<td>
<div id="noti_Container">
<asp:HyperLink ID="HyperLink1" runat="server"
</div>
</td>
<td>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
<i class="fa fa-user fa-fw"></i> <i class="fa fa-caret-
down"></i>
</a>
<ul class="dropdown-menu dropdown-user">
<li>
<asp:HyperLink ID="HyperLinkProfile" runat="server"><i
class="fa fa-user fa-fw"></i> My Profile</asp:HyperLink>
</li>
<li class="divider"></li>
<li>
<asp:LinkButton ID="LinkLogOut" runat="server"
onclick="LinkLogOut_Click"><i class="fa fa-sign-out fa-fw">
</i>Logout</asp:LinkButton>
</li>
</td>
</tr>
</table>
</ul>
<!-- /.dropdown-user -->
</li>
<!-- /.dropdown -->
</ul>
<!-- /.navbar-top-links -->
<div class="navbar-default sidebar" role="navigation">
<div class="sidebar-nav navbar-collapse">
<ul class="nav" id="side-menu">
<%-- <li id='dashboard'>
<a href='/'><i class='fa fa-home fa-fw'></i>
Dashboard</a>
</li> --%>
<asp:Repeater ID="RepeaterMenu" runat="server"
onitemdatabound="RepeaterMenu_ItemDataBound">
<ItemTemplate>
<li id='<%#Eval("Pageslug") %>'>
<a href='<%#Eval("PageUrl","/{0}") %>'><i
class='<%#Eval("PageIcon","fa {0} fa-fw") %>'></i> <%#Eval("ModuleName") %>
<asp:Literal ID="ltrArrow" runat="server"/></a>
<asp:Literal ID="ltrSubMenu" runat="server"/>
</li>
</ItemTemplate>
</asp:Repeater>
</ul>
</div>
<!-- /.sidebar-collapse -->
</div>
<!-- /.navbar-static-side -->
</nav>
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:ContentPlaceHolder ID="MainContent" runat="server" />
<!-- /#page-wrapper -->
</div>
<!-- /#wrapper -->
<script type="text/javascript">
// tooltip
$('.tooltip-demo').tooltip({
selector: "[data-toggle=tooltip]",
container: "body"
})
</script>
</form>
</body>
</html>
and Here is the content page with a GridView (Listed as Gridview1) I am trying to introduce the java script to:
<%# Page Title="" Language="C#" MasterPageFile="~/Site.master"
AutoEventWireup="true" CodeFile="Chart.aspx.cs" Inherits="Chart" %>
<%# Register assembly="System.Web.DataVisualization, Version=4.0.0.0,
Culture=neutral, PublicKeyToken=31bf3856ad364e35"
namespace="System.Web.UI.DataVisualization.Charting" tagprefix="asp" %>
<asp:Content ID="Content1" ContentPlaceHolderID="MainContent"
Runat="Server">
<div id="page-wrapper">
<br />
<br />
<br />
<div class="subscription" align="center">
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:DropDownList ID="DropDownList1" runat="server"
AutoPostBack="True" Height="47px"
OnSelectedIndexChanged="DropDownList1_SelectedIndexChanged"
OnTextChanged="Refresh_Click">
</asp:DropDownList>
<asp:Button ID="Refresh" runat="server" OnClick="Refresh_Click"
Text="Refresh" Height="47px"/>
<asp:DropDownList ID="DropDownList2" runat="server"
AutoPostBack="True" Height="47px"
OnSelectedIndexChanged="DropDownList2_SelectedIndexChanged">
<asp:ListItem>Tool</asp:ListItem>
</asp:DropDownList>
<br />
<br />
<div class="table-responsive">
<asp:GridView ID="GridView1" runat="server" class="display table"
width="100%" >
</asp:GridView>
</div>
<br />
<style>
.Button
{
margin:10px;
}
</style>
<div>
<asp:Button ID="Btnreset" runat="server"
OnClick="Btnreset_Click" Text="Reset Tool" Visible="False" CssClass="Button"
/>
<asp:Button ID="btnrstkit" runat="server"
OnClick="btnrstkit_Click1" Text="Kit" Visible="False" CssClass="Button"
margin="22px"/>
</div>
<br />
<asp:Label ID="lbltoolrst" runat="server"></asp:Label>
<br />
<asp:Button ID="Button1" runat="server" OnClick="Button1_Click"
Text="Compare " />
<br />
<asp:Chart ID="Tools" runat="server" Height="421px" Width="1200px"
CssClass="chart" Palette="Grayscale">
<Series>
<asp:Series Name="Series1" IsValueShownAsLabel="True" Legend="Legend1"
IsVisibleInLegend="False" LabelAngle="45" MarkerSize="9" Font="Microsoft
Sans
Serif, 14pt">
</asp:Series>
</Series>
<ChartAreas>
<asp:ChartArea Name="ChartArea1">
<AxisY Enabled="False" LabelAutoFitMaxFontSize="12"
MaximumAutoSize="80">
<MajorGrid Enabled="False" />
<MajorTickMark Enabled="False" />
</AxisY>
<AxisX TitleAlignment="Near" IsLabelAutoFit="False">
<MajorGrid Enabled="False" />
<MajorTickMark Enabled="False" />
<LabelStyle Angle="45" Font="Microsoft Sans Serif, 14pt" />
</AxisX>
<AxisX2>
<MajorGrid Enabled="False" />
<MajorTickMark Enabled="False" />
</AxisX2>
</asp:ChartArea>
</ChartAreas>
<Legends>
<asp:Legend Name="Legend1">
</asp:Legend>
</Legends>
</asp:Chart>
<br />
</div>
</ContentTemplate>
</asp:UpdatePanel>
<div style="width: 99%; height: auto; overflow: auto">
<!-- /.row (nested) -->
</div>
<!-- /.panel-body -->
</div>
<!-- /.panel -->
</div>
<!-- DataTables JavaScript -->
<script>
$(document).ready(function() {
$('#Gridview1').DataTable();
} );
</script>
</asp:Content>
Check the HTML that is rendered to the page. I bet the Id for gridview is not: #Gridview1 for the table.
Instead use:
<script>
$(document).ready(function() {
$('#<%=Gridview1.ClientID%>').DataTable();
} );
</script>
This will get the fully resolved ID as rendered by the asp.net engine. See: https://msdn.microsoft.com/en-us/library/system.web.ui.control.clientid(v=vs.110).aspx. Then do some research on asp.net webforms name mangling to see why webforms does this. Particularly with master pages.
To make it run you can provide ClientIDmode=static so that it will give static id to control, here you have used master page so id will be based on master page's content place holder id.
I have a master page. I created side nav bar using w3.css file. It's working in when window is wider that 992px. when I reduce the windows into small window like tab size, Collapsible Responsive Side Navigation is not working. It's reloading the complete page.
Here is my code:
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="js/jquery-3.1.1.min.js"></script>
<link href="css/w3.css" rel="stylesheet" />
<link href="css/jquery-ui.css" rel="stylesheet" />
<asp:ContentPlaceHolder ID="head" runat="server">
</asp:ContentPlaceHolder>
</head>
<body>
<form id="form1" runat="server">
<div class="w3-sidebar w3-bar-block w3-collapse w3-card-2 w3-animate-left" style="width: 200px;" id="mySidebar">
<button class="w3-bar-item w3-button w3-large w3-hide-large" onclick="w3_close()">Close ×</button>
Link 1
Link 2
Link 3
</div>
<div class="w3-main" style="margin-left: 200px">
<div class="w3-teal">
<button class="w3-button w3-teal w3-xlarge w3-hide-large" onclick="w3_open()">☰</button>
<div class="w3-container">
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
<%--<h1>My Page</h1>--%>
</div>
</div>
</div>
<script>
function w3_open() {
document.getElementById("mySidebar").style.display = "block";
}
function w3_close() {
document.getElementById("mySidebar").style.display = "none";
}
</script>
</form>
</body>
Add type="button" to your button elements so they don't submit the form they're in.
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="js/jquery-3.1.1.min.js"></script>
<link href="css/w3.css" rel="stylesheet" />
<link href="css/jquery-ui.css" rel="stylesheet" />
<asp:ContentPlaceHolder ID="head" runat="server">
</asp:ContentPlaceHolder>
</head>
<body>
<form id="form1" runat="server">
<div class="w3-sidebar w3-bar-block w3-collapse w3-card-2 w3-animate-left" style="width: 200px;" id="mySidebar">
<button type="button" class="w3-bar-item w3-button w3-large w3-hide-large" onclick="w3_close()">Close ×</button>
Link 1
Link 2
Link 3
</div>
<div class="w3-main" style="margin-left: 200px">
<div class="w3-teal">
<button type="button" class="w3-button w3-teal w3-xlarge w3-hide-large" onclick="w3_open()">☰</button>
<div class="w3-container">
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
<%--<h1>My Page</h1>--%>
</div>
</div>
</div>
<script>
function w3_open() {
document.getElementById("mySidebar").style.display = "block";
}
function w3_close() {
document.getElementById("mySidebar").style.display = "none";
}
</script>
</form>
</body>