I'm using jQuery Bootstrap validation plug-in, but it doesn't show any message:
My javascript name is validator.js
<script type="text/javascript">
$(document).ready(function () {
$('#forget').bootstrapValidator({
feedbackIcons: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
fields: {
txtemailids: {
validators: {
notEmpty: {
message: 'The email id is required and cannot be empty'
},
regexp: {
regexp: /^([a-zA-Z0-9_\.\-])+\#(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/,
message: 'Enter valid email id'
}
}
}
}
});
});
</script>
I'm using masterpage,it html is below
<head runat="server">
<title>Car Insurance</title>
<link href="../css/style.css" rel="stylesheet" type="text/" media="all" />
<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css' />
<link href="../css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<link href="../css/bootstrapValidator.min.css" rel="stylesheet" type="text/css" />
<link href="../font-awesome-4.3.0/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
<link href="../css/acc.css" rel="stylesheet" type="text/css" />
<link href="../css/animate.css" rel="stylesheet" type="text/css" />
<!-- jQuery -->
<script type="text/javascript" src="../js/jquery.min.js"></script>
<!-- Add fancyBox main JS and CSS files -->
<script src="../js/jssor.js" type="text/javascript"></script>
<script src="../js/jssor.slider.js" type="text/javascript"></script>
<script src="../js/bootstrap.min.js" type="text/javascript"></script>
<script src="../js/bootstrapValidator.min.js" type="text/javascript"></script>
<script src="../js/validator.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$(' #da-thumbs > li ').each(function () {
$(this).hoverdir({
hoverDelay: 50,
inverse: true
});
});
});
</script>
<asp:ContentPlaceHolder ID="head" runat="server">
</asp:ContentPlaceHolder>
</head>
<body>
<form id="form1" runat="server">
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</form>
</body>
</html>
i'm using webpage linked with master page,it's html is below.This page is aboutus.aspx and master page is Visitors.Master
<%# Page Title="" Language="C#" MasterPageFile="~/Visitors/Visitor.Master" AutoEventWireup="true"
CodeBehind="aboutus.aspx.cs" Inherits="Car_Insurance_System.Visitors.AboutUs" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
<link href="../css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<link href="../css/bootstrapValidator.min.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="../js/jquery.min.js"></script>
<script src="../js/bootstrapValidator.min.js" type="text/javascript"></script>
<script src="../js/validator.js" type="text/javascript"></script>
<script type="text/javascript">
</script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
<!-- Start Modal 3-->
<!-- Modal -->
<div class="modal
fade" id="myModal3" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header
modal-header-success">
<div class="three-login">
<div class="three-login-head">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
×</button>
<img src="../images/top-key.png" alt="" />
<h3>
account reset</h3>
</div>
</div>
</div>
<div class="modal-body">
<h5>
Forgot Password or Username?</h5>
<p>
To reset your account password or username, enter the email address and we will
send your instruction.</p>
<br />
<br />
<div class="row">
<div class="col-md-8" id="forget">
<div class="form-group">
<div class="input-group">
<span class="input-group-addon" style="background-color: #f26122; border-color: #f26122">
<i class="fa fa-envelope" style="color: #fff"></i></span>
<asp:TextBox ID="txtemailids" runat="server" CssClass="form-control" placeholder="Email Id"></asp:TextBox>
</div>
</div>
</div>
<div class="col-md-4">
<asp:RequiredFieldValidator ID="RequiredFieldValidator7" runat="server" ErrorMessage="RequiredFieldValidator"
ControlToValidate="txtemailids" ValidationGroup="forgot"></asp:RequiredFieldValidator>
<asp:RegularExpressionValidator ID="RegularExpressionValidator4" runat="server" ErrorMessage="RegularExpressionValidator"
ControlToValidate="txtemailids" ValidationExpression="\w+([-+.']\w+)*#\w+([-.]\w+)*\.\w+([-.]\w+)*"
ValidationGroup="forgot"></asp:RegularExpressionValidator>
</div>
</div>
</div>
<div class="modal-footer">
<asp:Button ID="Button1" runat="server" Text="Button" CssClass="btn btn-block org3"
ValidationGroup="forgot" />
</div>
</div>
<!-- /.modal-content
-->
</div>
<!-- /.modal-dialog -->
</div>
<!-- /.modal -->
<!-- Modal -->
<!-- End
Modal 3 -->
please help as i have already wasted 2 days over this issue
Bootstrap js is removing modal popup from the form element.
Please use the js code below in content page. It should work.
$(window).load(function () {
$("#myModal3").appendTo($("form:first"));
});
Related
Hi I've added a bootstrap datetimepicker to my website but it seems like it's not working.
I Am I missing something? or doing something wrong? Please help.The control is in a bootstrap modal but as far as I know it doesn't restrict your accessibility which is the only reason I can think of for it not working...
This is the referances I have:
<link rel="stylesheet" href="css/bootstrap.css" />
<link rel="stylesheet" href="css/bootstrap.min.css" />
<link rel="stylesheet" href="css/bootstrap-select.min.css" />
<link rel="stylesheet" href="css/jquery.bootstrap-touchspin.min.css" />
<link rel="stylesheet" href="css/jquery.contextmenu.min.css" />
<link rel="stylesheet" href="css/style.css" />
<link rel="stylesheet" href="css/mycss.css" />
<link rel="stylesheet" href="css/bootstrap-datetimepicker.min.css" />
<script src="js/bootstrap.js"></script>
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/bootstrap-select.min.js"></script>
<script src="js/jquery.backstretch.min.js"></script>
<script src="js/jquery.bootstrap-touchspin.min.js"></script>
<script src="js/jquery.contextmenu.min.js"></script>
<script src="Scripts/bootstrap-datetimepicker.min.js"></script>
this is my control:
<div class="row" id="div9" runat="server">
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-6" style="margin-top: 5px">
<asp:Label ID="Label14" runat="server" Text="Start Date" CssClass="form-control" Font-Bold="true" ForeColor="Black" Font-Size="14px"></asp:Label>
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
<asp:TextBox ID="txt_start_date" runat="server" CssClass="form-control" TextMode="SingleLine" Width="100%" ForeColor="Black" Font-Bold="True"></asp:TextBox>
</div>
</div>
and this is my script:
<script type="text/javascript">
$(function () {
$('#txt_start_date').datetimepicker({ format: 'YYYY-MM-DD', useCurrent: true });
});
});
</script>
Boostrap 4 not support datetimepicker.
Change file bootstrap-datetimepicker.min.js
'collapse in'
expanded = $parent.find('.in'),
closed = $parent.find('.collapse:not(.in)'),
expanded.removeClass('in');
closed.addClass('in');
to
'collapse show'
expanded = $parent.find('.show'),
closed = $parent.find('.collapse:not(.show)'),
expanded.removeClass('show');
closed.addClass('show');
Try this code, no need to use Jquery. Use input type date instead of text.
<input type="date" class="form-control"/>
Working Fiddle with & without Jquery
I've just started using React and started a new project by integrating a demo html admin template all over internet.
I tried to do similar but ended up showing the default react page. One thing I observed is that the page shows the login page with inputs button on load but as soon as the full page is loaded the default React page is displayed. I however feel there's something wrong I'm doing in App.js file.
Below is my index.html code in public/index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<meta name="description" content="">
<meta name="keywords" content="some">
<meta name="author" content="example">
<link rel="shortcut icon" type="image/x-icon" href="%PUBLIC_URL%/assets/images/favicon.png">
<link rel="stylesheet" type="text/css" href="%PUBLIC_URL%/css/vendors.min.css">
<link rel="stylesheet" type="text/css" href="%PUBLIC_URL%/vendors/css/extensions/toastr.css">
<link rel="stylesheet" type="text/css" href="/bypasser/assets/vendors/css/forms/icheck/icheck.css">
<link rel="stylesheet" type="text/css" href="%PUBLIC_URL%/vendors/css/extensions/sweetalert.css">
<style>
.swal-button { border-radius: 1.5rem !important; }
</style>
<link rel="stylesheet" type="text/css" href="%PUBLIC_URL%/vendors/css/forms/toggle/switchery.min.css" />
<link rel="stylesheet" type="text/css" href="%PUBLIC_URL%/vendors/css/tables/datatable/datatables.min.css" />
<link rel="stylesheet" type="text/css" href="%PUBLIC_URL%/vendors/css/extensions/unslider.css" />
<link rel="stylesheet" type="text/css" href="%PUBLIC_URL%/vendors/css/weather-icons/climacons.min.css" />
<link rel="stylesheet" type="text/css" href="%PUBLIC_URL%/fonts/meteocons/style.min.css" />
<link rel="stylesheet" type="text/css" href="%PUBLIC_URL%/vendors/css/charts/morris.css" />
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/select2#4.0.12/dist/css/select2.min.css" />
<!-- END VENDOR CSS-->
<!-- BEGIN STACK CSS-->
<link rel="stylesheet" type="text/css" href="%PUBLIC_URL%/css/app.min.css">
<!-- END STACK CSS-->
<!-- BEGIN Page Level CSS-->
<link rel="stylesheet" type="text/css" href="%PUBLIC_URL%/css/core/menu/menu-types/vertical-menu-modern.css">
<link rel="stylesheet" type="text/css" href="%PUBLIC_URL%/css/core/colors/palette-gradient.min.css">
<link rel="stylesheet" type="text/css" href="%PUBLIC_URL%/fonts/simple-line-icons/style.min.css">
<link rel="stylesheet" type="text/css" href="%PUBLIC_URL%/css/core/colors/palette-gradient.min.css">
<link rel="stylesheet" type="text/css" href="%PUBLIC_URL%/css/pages/users.min.css">
<link rel="stylesheet" type="text/css" href="%PUBLIC_URL%/css/pages/timeline.min.css">
<!-- END Page Level CSS-->
<link rel="stylesheet" type="text/css" href="%PUBLIC_URL%/css/plugins/forms/switch.min.css">
<!-- BEGIN Custom CSS-->
<link rel="stylesheet" type="text/css" href="%PUBLIC_URL%/css/style.css">
<!-- END Custom CSS-->
<!-- manifest.json provides metadata used when your web app is installed on a user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/ -->
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<title>MS - Finance | Login Page</title>
</head>
<body class="blank-page">
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root">
<div class="app-content content">
<div class="content-wrapper">
<div class="content-header row">
</div>
<div class="content-body">
<section class="flexbox-container">
<div class="col-12 d-flex align-items-center justify-content-center">
<div class="col-md-4 col-10 box-shadow-2 p-0">
<div id="login-section" class="card border-grey border-lighten-3 m-0">
<div class="card-header border-0">
<div class="card-title text-center">
<!-- <div class="p-1"><i class="ft-layers"> StackMantle</i> -->
<img img="img-responsive" height="30px" width="200px" src="/assets/images/logo.png" alt="">
<!-- </div> -->
</div>
<!-- <h6 class="card-subtitle line-on-side text-muted text-center font-small-3 pt-2"><span>Enter Credentials</span></h6> -->
</div>
<div class="card-content">
<div class="card-body">
<form class="form-horizontal form-simple">
<fieldset class="form-group position-relative has-icon-left mb-0">
<input required type="text" autofocus class="round form-control" id="login-username" placeholder="Username / Email-ID / Contact Number" required>
<div class="form-control-position">
<i class="ft-user"></i>
</div>
</fieldset>
<fieldset class="form-group position-relative has-icon-left">
<input required type="password" class="round form-control" id="login-password" placeholder="Login Password" required>
<div class="form-control-position">
<i class="fa fa-key"></i>
</div>
</fieldset>
<div class="form-group row">
<!-- <div class="col-xs-6 col-sm-6 col-md-6 col-12 text-center text-md-left">
<fieldset>
<input type="checkbox" id="remember-me" class="chk-remember">
<label for="remember-me"> Remember Me</label>
</fieldset>
</div> -->
<div style="margin-top: -15px;" class="col-xs-12 col-sm-12 col-md-12 col-12 text-right text-md-right">
<a id="swap-forgot" href="javascript:" class="card-link">Forgot Password?</a>
</div>
</div>
<button type="submit" id="login-button" class="round btn btn-outline-primary btn-block"><i class="ft-unlock"></i> Unlock My Panel</button>
</form>
</div>
<div class="card-footer">
<div class="text-center">
<a href="/" class="btn btn-md btn-outline-secondary round">
<i class="ft-eye"></i> Let's have a look
</a>
</div>
</div>
</div>
</div>
<div id="pass-section" class="card border-grey border-lighten-3 m-0">
<div class="card-header border-0">
<div class="card-title text-center">
<!-- <div class="p-1"><i class="ft-layers"> </i> -->
<img img="img-responsive" height="30px" width="200px" src="/assets/images/logo.png" alt="">
<!-- </div> -->
</div>
<!-- <h6 class="card-subtitle line-on-side text-muted text-center font-small-3 pt-2"><span>Enter Credentials</span></h6> -->
</div>
<div class="card-content">
<div class="card-body">
<form class="form-horizontal form-simple">
<fieldset class="form-group position-relative has-icon-left">
<input type="email" class="round form-control" id="reset-email" placeholder="Registered Email-ID" required>
<div class="form-control-position">
<i class="ft-mail"></i>
</div>
</fieldset>
<div style="margin-top: 10px; margin-bottom: 20px;" class="col-xs-12 col-sm-12 col-md-12 col-12 text-right text-md-right">
<a id="swap-login" href="javascript:" class="card-link">I know My Password!</a>
</div>
<button type="submit" id="reset-button" class="round btn btn-outline-primary btn-block"><i class="ft-rotate-ccw"></i> Recover Password</button>
</form>
</div>
<div class="card-footer">
<div class="text-center">
<a href="/" class="btn btn-md btn-outline-secondary round">
<i class="ft-eye"></i> Let's have a Look at Blog
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</div>
</div>
</div>
</div>
<!--
This HTML file is a template.
If you open it directly in the browser, you will see an empty page.
You can add webfonts, meta tags, or analytics to this file.
The build step will place the bundled scripts into the <body> tag.
To begin the development, run `npm start` or `yarn start`.
To create a production bundle, use `npm run build` or `yarn build`.
-->
<!-- BEGIN VENDOR JS-->
<script src="https://code.jquery.com/jquery-3.3.1.min.js" type="text/javascript"></script>
<script src="%PUBLIC_URL%/assets/vendors/js/vendors.min.js" type="text/javascript"></script>
<script src="%PUBLIC_URL%/assets/vendors/js/extensions/toastr.min.js" type="text/javascript"></script>
<script src="%PUBLIC_URL%/assets/vendors/js/forms/icheck/icheck.min.js" type="text/javascript"></script>
<script src="%PUBLIC_URL%/assets/vendors/js/extensions/sweetalert.min.js" type="text/javascript"></script>
<!-- BEGIN VENDOR JS-->
<script src="%PUBLIC_URL%/assets/vendors/js/tables/datatable/datatables.min.js" type="text/javascript"></script>
<script src="%PUBLIC_URL%/assets/vendors/js/tables/datatable/dataTables.buttons.min.js" type="text/javascript"></script>
<script src="%PUBLIC_URL%/assets/vendors/js/tables/buttons.flash.min.js" type="text/javascript"></script>
<script src="%PUBLIC_URL%/assets/vendors/js/tables/jszip.min.js" type="text/javascript"></script>
<script src="%PUBLIC_URL%/assets/vendors/js/tables/pdfmake.min.js" type="text/javascript"></script>
<script src="%PUBLIC_URL%/assets/vendors/js/tables/vfs_fonts.js" type="text/javascript"></script>
<script src="%PUBLIC_URL%/assets/vendors/js/tables/buttons.html5.min.js" type="text/javascript"></script>
<script src="%PUBLIC_URL%/assets/vendors/js/tables/buttons.print.min.js" type="text/javascript"></script>
<script src="%PUBLIC_URL%/assets/js/scripts/tables/datatables/datatable-advanced.min.js" type="text/javascript"></script>
<!-- BEGIN PAGE VENDOR JS-->
<script src="%PUBLIC_URL%/assets/vendors/js/extensions/unslider-min.js" type="text/javascript"></script>
<script src="%PUBLIC_URL%/assets/vendors/js/timeline/horizontal-timeline.js" type="text/javascript"></script>
<!-- END PAGE VENDOR JS-->
<script src="%PUBLIC_URL%/assets/vendors/js/forms/toggle/bootstrap-checkbox.min.js" type="text/javascript"></script>
<script src="%PUBLIC_URL%/assets/vendors/js/forms/toggle/switchery.min.js" type="text/javascript"></script>
<script src="https://cdn.jsdelivr.net/npm/select2#4.0.12/dist/js/select2.min.js"></script>
<!-- BEGIN PAGE LEVEL JS-->
<script src="%PUBLIC_URL%/assets/js/scripts/forms/switch.min.js" type="text/javascript"></script>
<!-- END PAGE LEVEL JS -->
<!-- BEGIN STACK JS-->
<script src="%PUBLIC_URL%/assets/js/core/app-menu.min.js" type="text/javascript"></script>
<script src="%PUBLIC_URL%/assets/js/core/app.min.js" type="text/javascript"></script>
<!-- END STACK JS-->
<script src="%PUBLIC_URL%/assets/custom/login.js" type="text/javascript"></script>
</body>
</html>
Below is my code of App.js in src/App.js
import React from 'react';
import logo from './logo.svg';
import './App.css';
function App() {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p>
Edit <code>src/App.js</code> and save to reload.
</p>
<a
className="App-link"
href="https://reactjs.org"
target="_blank"
rel="noopener noreferrer"
>
Learn React
</a>
</header>
</div>
);
}
export default App;
Below is my code of index.js in src/index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
ReactDOM.render(<App />, document.getElementById('root'));
// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
serviceWorker.unregister();
What should I modify to make it work?
The app component is being rendered on this line in your index.js file:
ReactDOM.render(<App />, document.getElementById('root'));
try commenting or removing the above line and see if it helps.
better yet, modify the App() component to your desired content and not directly modify the html file on your public folder.
You are rendering the App in the node with id root. While the page is loading, you see the login form but as soon as the javascript is loaded the content inside root is replaced with the react content. I am not sure what you are trying to achieve with this.
I am not entirely certain if i understood your problem correctly, but as far as i can see you have not imported the public/index.html file at all.
Your index.js file imports the App.js and the result is simply the contents of the App.js file.
If this indeed is the question you are asking, you can require the HTML file into a variable, stringify it (for example using this stringify package) and the use the dangerouslySetInnerHTML prop in div to show the strigified content.
I was wondering if there may be a conflict between JQuery's and Boostrap 4's popover. When try to add a popover and load the page nothing is displayed when I click on the button element. See code example below:
<link href='https://use.fontawesome.com/releases/v5.0.10/css/all.css' rel='stylesheet'>
<link href='/css/fullcalendar.min.css' rel='stylesheet' />
<link href='/css/fullcalendar.print.min.css' rel='stylesheet' media='print' />
<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css' />
<script src='/js/lib/moment.min.js'></script>
<script src='/js/lib/jquery.min.js'></script>
<script src='/js/fullcalendar.min.js'></script>
<script src='/js/gcal.min.js'></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src='https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js'></script>
$(document).ready(function(){
$('[data-toggle="popover"]').popover();
});
<div class="fc-right">
<div class="btn-group">
<button class="btn btn-primary" title="My Popover" data-toggle="popover" data-trigger="focus" data-placement="top" data-content="My popover content">?</button>
</div>
</div>
Adding the following noConflict code above the popover script does not appear to work either:
var bootstrapButton = $.fn.button.noConflict() // return $.fn.button to previously assigned value
$.fn.bootstrapBtn = bootstrapButton // give $().bootstrapBtn the Bootstrap functionality
$(document).ready(function(){
$('[data-toggle="popover"]').popover();
});
Any assistant would be appreciated.
With the assistance of Smit I managed to resolve the issue by simplifying and using the following fiddle:
https://jsfiddle.net/ridgedale/xpbynn9w/#&togetherjs=80xVyj4TRc
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<link href='https://use.fontawesome.com/releases/v5.0.10/css/all.css' rel='stylesheet'>
<link href='https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.9.0/fullcalendar.min.css' rel='stylesheet' />
<link href='https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.9.0/fullcalendar.print.min.css
' rel='stylesheet' media='print' />
<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css' />
<script src='https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.0/locale/en-gb.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.9.0/fullcalendar.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.9.0/gcal.min.js'></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src='https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js'></script>
<script>
$(document).ready(function(){
$('[data-toggle="popover"]').popover();
});
</script>
</head>
<body>
<div id='cal-filters' class="fc-toolbar fc-header-toolbar">
<div class="fc-left">
<div class="btn-group">
<button class="btn btn-primary asl-events">Btn1</button>
<button type="button" class="btn btn-primary hnu-events">Btn2</button>
<button type="button" class="btn btn-primary hps-events">Btn3</button>
</div>
</div>
<div class="fc-right">
<div class="btn-group">
<button class="btn btn-primary" id="btnPopover"
title="Help List"
data-content="Help information"
data-trigger="click"
data-toggle="popover">Help</button>
</div>
</div>
<div class="fc-clear"></div>
<hr />
</div>
</body>
</html>
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>