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
Related
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>
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>
To summarize what I'm trying to do, I've created two forms in my website that when the user clicked the next or prev button, it should supposedly transition from one form to the other without post back. But the problem is when I click next, it doesn't do anything. I have already targeted the respective id's and url in my ajax code but its still not working. As of now, I'm using ajax for those non-post backs and my website is built in asp.net. Hope you guys can help me with this one.
Here is the code below for ajax(loader.js):
$(document).ready(function () {
$.ajaxSetup({
cache: false,
dataType: "aspx",
error: function (xhr, status, error) {
alert('An error occured:' + error);
},
timeout: 30000,
type: "GET",
beforeSend: function () {
console.log('In Ajax complete function');
}
});
$("#btnNext").click(function (e) {
e.preventDefault();
$.ajax({
url: "Pages/CreateNewItems2.aspx",
success: function (data) {
$("#ContentPlaceHolder1").aspx("").append(data);
}
});
});
});
Here is the masterpage for my website:
<%# Master Language="C#" AutoEventWireup="true" CodeFile="MasterPage.master.cs" Inherits="MasterPage" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<script src="../Javascript/jquery-1.11.2.min.js"></script>
<script src="../Javascript/loader.js"></script>
<link rel="stylesheet" href="~/Styles/jquery.bxslider.css"/>
<link rel="stylesheet" href="~/Styles/StyleSheet.css"/>
<link rel="stylesheet" href="~/Styles/font-awesome.min.css"/>
<link rel="shortcut icon" type="image/png" href="~/Images/rockSign.png"/>
<style type="text/css">
.auto-style2 {
height: 298px;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div id="wrapper">
<header id="main_header">
<div id="callout">
<h2>☎ 111222333</h2>
<p>Michigan State Kawasaki Iceland</p>
</div>
<h1>MUSIC STORE</h1>
</header>
<div class="clearfix"></div>
<nav id="nav_menu">
<ul id="nav">
<li>HOME</li>
<li>INSTRUMENTS
<ul class="sub-menu">
<li>ELECTRIC GUITARS</li>
<li>BASS GUITARS</li>
<li>DRUMS</li>
</ul>
</li>
<li>AMPLIFIERS</li>
<li>ACCESSORIES</li>
<li>FEATURED ARTISTS</li>
<li><img src="../Images/cog.png" />
<ul class="cog_submenu">
<li>CREATE NEW BRAND</li>
<li>USE EXISTING BRAND</li>
<li>DATA OVERVIEW</li>
</ul>
</li>
</ul>
</nav>
<div id="content_area">
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</div>
<div class="clearfix"></div>
<footer>
<p>©All Rights Reserved</p>
</footer>
</div>
</form>
</body>
</html>
And here is the code for the 1st form which has the next button:
<%# Page Title="" Language="C#" MasterPageFile="~/MasterPageCMS.master" AutoEventWireup="true" CodeFile="NewBrands.aspx.cs" Inherits="Pages_NewBrands" %>
<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
<h3>Create New Brand(Step 1 of 2):</h3>
<table cellspacing="15" class="brandsTable">
<tr>
<td style="width: 160px; height: 37px;">
<strong>Brand Type:</strong></td>
<td style="height: 37px">
<asp:TextBox ID="brandType" runat="server" BackColor="#FFFF66" BorderColor="Black" BorderWidth="1px" Height="20px" Width="300px"></asp:TextBox>
</td>
</tr>
<tr>
<td style="width: 160px; height: 37px;">
<strong>Brand Name:</strong></td>
<td style="height: 37px">
<asp:TextBox ID="brandName" runat="server" BackColor="#FFFF66" BorderColor="Black" BorderWidth="1px" Height="20px" Width="300px"></asp:TextBox>
</td>
</tr>
<tr>
<td style="width: 160px">
<strong>Brand Image:</strong></td>
<td>
<asp:DropDownList ID="brandImage" runat="server" Width="300px">
</asp:DropDownList>
<br />
<asp:FileUpload ID="brandFileUpload" runat="server" />
<asp:Button ID="brandUploadImage" runat="server" Text="Upload Image" OnClick="brandUploadImage_Click" />
</td>
</tr>
</table>
<asp:Label ID="lblResult" runat="server" Text=""></asp:Label>
<br />
<asp:Button ID="btnNext" runat="server" Text="Next" />
<asp:Button ID="btnSave" runat="server" Text="Save" OnClick="btnSave_Click" />
</asp:Content>
And for the 2nd form, I will not include the code here since it is not necessary. The name for the 2nd form is CreateNewItems2.aspx which is located in my Pages folder.
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"));
});