I am working on a pagination script and all is well apart from one small problem. I need to fire an action when the page number (li) is clicked.
The pagination is returned via ajax to a div called "result". However this div is burried amound several other divs deep - i think this may be the problem. How can fix?
Thanks
$('#result .pagination li').live('click', function () {
var page = $(this).attr('p');
loadData(page);
return false;
});
The full output is below with the full pagination
<body>
<div id="wrapper">
<nav class="navbar navbar-default navbar-static-top" style="margin-bottom: 0">
<div class="navbar-header">
<button class="navbar-toggle" type="button"><span class="sr-only">Toggle navigation</span>
</button> <a class="navbar-brand" href="index.php">Title</a>
</div>
</nav>
<nav class="navbar-default navbar-static-side">
<div class="sidebar-collapse">
<ul class="nav" id="side-menu">
<li class="sidebar-search">
<div class="input-group custom-search-form">
<input class="form-control" placeholder="Search..." type="text">
</div>
<!-- /input-group -->
</li>
<li class="active">Dashboard
</li>
<li>Claims
</li>
</ul>
</div>
</nav>
<div id="page-wrapper">
<div class="row">
<div class="col-lg-12">
<h1 class="page-header">Claims</h1>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<div class="panel panel-default">
<div class="panel-heading">
DataTables Advanced Tables
<div id="loading" style="float: right; display: none;">
<img src="images/loading.gif">
</div>
</div>
<div class="panel-body">
<div id="result">
<!-- DATABASE RESULTS GO HERE -->
<ul class="pagination" id="pg">
<li class="disabled">First
</li>
<li class="disabled">«
</li>
<li class="disabled"><a>1</a>
</li>
<li>2
</li>
<li>3
</li>
<li>4
</li>
<li>5
</li>
<li>6
</li>
<li>7
</li>
<li>»
</li>
<li>Last
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
I am using jQuery v1.10.2
You are using jQuery >= 1.9, so there is no .live() method
$(document).on('click', '#result .pagination li', function () {
var page = $(this).attr('p');
loadData(page);
return false;
});
Related
I want that when someone opens it then menu must be opened, no need to click the button for opening it. When someone clicks the button then closes it instead of opening it.
Can anyone please help me? How can I achieve the result?
<link href="http://vsss.co.in/assets/css/main.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/js/bootstrap.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="header-nav animate-dropdown">
<div class="container">
<div class="yamm navbar navbar-default" role="navigation">
<div class="navbar-header">
<button data-target="#mc-horizontal-menu-collapse" data-toggle="collapse" class="navbar-toggle collapsed" type="button" style="background-color: rgb(0, 108, 180);width: 100%;">
<span class="sr-only">Toggle navigation</span>
<span style="font-size: 22px;color: #fff;text-align: center;width: 100%;">Menu</span>
</button>
</div>
<div class="nav-bg-class">
<div class="navbar-collapse collapse" id="mc-horizontal-menu-collapse" style="height: 0px;">
<div class="nav-outer">
<ul class="nav navbar-nav">
<li class="active dropdown yamm-fw"> Home </li>
<li class="dropdown mega-menu">
Category
<ul class="dropdown-menu container">
<li>
<div class="yamm-content">
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-3 col-menu">
<ul class="links">
<li>Premium pens</li>
<li>Pens & refills</li>
</ul>
</div>
</div>
</div>
</li>
</ul>
</li>
</ul>
<div class="clearfix"></div>
</div>
</div>
</div>
</div>
</div>
</div>
Yes by putting show class with collapse it will work for you see in example code:
<link href="http://vsss.co.in/assets/css/main.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/js/bootstrap.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="header-nav animate-dropdown">
<div class="container">
<div class="yamm navbar navbar-default" role="navigation">
<div class="navbar-header">
<button data-target="#mc-horizontal-menu-collapse" data-toggle="collapse" class="navbar-toggle collapsed" type="button" style="background-color: rgb(0, 108, 180);width: 100%;">
<span class="sr-only">Toggle navigation</span>
<span style="font-size: 22px;color: #fff;text-align: center;width: 100%;">Menu</span>
</button>
</div>
<div class="nav-bg-class">
<div class="navbar-collapse collapse show" id="mc-horizontal-menu-collapse" style="height: 0px;">
<div class="nav-outer">
<ul class="nav navbar-nav">
<li class="active dropdown yamm-fw"> Home </li>
<li class="dropdown mega-menu">
Category
<ul class="dropdown-menu container">
<li>
<div class="yamm-content">
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-3 col-menu">
<ul class="links">
<li>Premium pens</li>
<li>Pens & refills</li>
</ul>
</div>
</div>
</div>
</li>
</ul>
</li>
</ul>
<div class="clearfix"></div>
</div>
</div>
</div>
</div>
</div>
</div>
I've built a nav menu using expand and collapse in and not using a dropdown. My problem is that I can't get the div to toggle when I click a menu link. I've tried using js to toggle it closed when a link is clicked, but then I can't re-open the menu again.
Here's my html:
<header style="padding:0px 0%;">
<nav class="navbar navbar-inverse navbar-static-top" style="margin:0px 0px;">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header hidden-md hidden-lg">
<button type="button" class="navbar-toggle collapsed hidden-sm hidden-xs" data-toggle="collapse" data-target="#myNavmenu" aria-expanded="true" style="color:#fff;display:inline-block;">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right inverse hidden-xs hidden-sm" style="margin:0px 0px; font-size:0.8em;">
<li style="float:left !important"><img src="/products/greg2/images/avatierwatermark.png" style="height:34px; width:auto;"></li>
<li>Customers</li>
<li>Solutions</li>
<li>Products</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
</header>
<div class="collapse" id="expandmenu">
<div class="well">
<div class="container">
<button type="button" class="navbar-toggle2 pull-right" data-toggle="collapse" href="#expandmenu" aria-expanded="false" aria-controls="collapseExample" style="float:right; padding:16px 5px 17px 0px; color:#333;"><p class="explore" style="font-size:0.8em; color:#333;">Close </p>
<span class="glyphicon glyphicon-remove" aria-hidden="true" style="font-size:1.1em;"></span>
</button>
<div class="row">
<div class="col-sm-12">
</div>
</div>
<div class="row">
<ul class="expand txt-ctr" style="padding-left:0px;">
<li class="blue"><div style="background-position:0px 0px;"></div><span>Benefits</span></li>
<li class="blue"><div style="background-position:-165px 0px;"></div><span>Overview</span></li>
<li class="blue"><div style="background-position:-330px 0px;"></div><span>Features</span></li>
<li class="blue"><div style="background-position:-495px 0px;"></div><span>Reports</span></li>
<li class="blue"><div style="background-position:-660px 0px;"></div><span>Security</span></li>
<li class="blue"><div style="background-position:-825px 0px;"></div><span>Help Desk</span></li>
<li class="blue"><div style="background-position:-990px 0px;"></div><span>App Support</span></li>
<li class="blue"><div style="background-position:-1155px 0px;"></div><span>Architecture</span></li>
<li class="blue"><div style="background-position:-1315px 0px;"></div><span>Languages</span></li>
<li class="blue"><div style="background-position:-1490px 0px;"></div><span>Ticketing</span></li>
<li class="blue"><div style="background-position:-1665px 0px;"></div><span>Testimonials</span></li>
<li class="blue"><div style="background-position:-1825px 0px;"></div><span>Demo</span></li>
<li class="blue"><div style="background-position:-1998px 0px;"></div><span>Resources</span></li>
<li class="blue"><div style="background-position:-2165px 0px;"></div><span>True Cost</span></li>
</ul>
</div>
</div>
</div>
</div>
And here's the js I've tried:
$('.collapse a').click(function(){
$("#expandmenu").toggle();
});
Thank you for your help!
Try this, it worked for me:
$('#expandmenu a').click(function(){
$("#expandmenu button").click();
});
I just tried to use underscore.js for loading the template, but when i click on login button and fire a request to server then after retrieval of response when i try to remove one template and show other, after that document.ready() is called again resulting in re-rendering of login page.
I am confused what is causing this to happen, any help is appreciated.
Here is javscript code:
$(document).ready(function(){
/* Login-Workflow-start*/
var loginTemplate = _.template($("#login-template").html());
$("#main-content").html(loginTemplate);
$("#btn_login").on('click', function(){
// when login is clicked.
var formData = $("#form_login").serialize()
console.log(formData);
var req= $.ajax({
type: "POST",
url: "http://localhost:3002/login",
data: {
"username": $('[name="username"]').val(),
"password": $('[name="password"]').val()
},
success: function(responseData,textStatus,jqXhr){
console.log("Response: " + responseData);
// show welcome page now
var welcomeTemplate = _.template($("#welcome-template").html());
$("#main-content").html(welcomeTemplate);
},
error: function(){
console.log("Error!!!");
}
});
});
/* Login-Workflow-end*/
});
update:
welcome-template looks like following:
<script type="text/template" id="welcome-template">
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container-fluid">
<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="#">Project name</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li>Dashboard</li>
<li>Settings</li>
<li>Profile</li>
<li>Help</li>
</ul>
<form class="navbar-form navbar-right">
<input type="text" class="form-control" placeholder="Search...">
</form>
</div>
</div>
</div>
<div class="container-fluid">
<div class="row">
<div class="col-sm-3 col-md-2 sidebar">
<ul class="nav nav-sidebar">
<li class="active">Overview</li>
<li>Reports</li>
<li>Analytics</li>
<li>Export</li>
</ul>
<ul class="nav nav-sidebar">
<li>Nav item</li>
<li>Nav item again</li>
<li>One more nav</li>
<li>Another nav item</li>
<li>More navigation</li>
</ul>
<ul class="nav nav-sidebar">
<li>Nav item again</li>
<li>One more nav</li>
<li>Another nav item</li>
</ul>
</div>
<div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
<h1 class="page-header">Dashboard</h1>
</div>
</div>
</div>
</script>
Login template looks like following:
<script type="text/template" id="login-template">
<ul class="nav nav-tabs" role="tablist">
<li class="active">Login</li>
<li>Register</li>
<li>Reset Password</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div class="tab-pane active" id="login">
<form role="form" id="form_login">
<div class="form-group">
<div class="input-group">
<span class="input-group-addon">Username</span>
<input type="text" class="form-control" name="username" placeholder="Enter Username here" />
</div>
</div>
<div class="form-group">
<div class="input-group">
<span class="input-group-addon">Password</span>
<input type="text" class="form-control" name="password" placeholder="Enter Password here" />
</div>
</div>
<button class="btn btn-wide btn-primary mrm" id="btn_login">Login</button>
</form>
</div>
<div class="tab-pane" id="register"> Register page loading..</div>
<div class="tab-pane" id="reset-password">Reset Password page Loading</div>
</div>
</div>
</script>
UPDATE2
In case some one want to see the entire/part(s) code for analysis then please visit at this repo on bitbucket
Got the solution,
Culprit was form tag, upon clicking the submit button, form tag was firing a request too of its own, this was leading to document.ready getting re-called.
Solution: convert form tag to div, since we are handling the request creation by ourselves.
I'm trying to build responsive layout for webpage using bootstrap. I would like to render the webpage normally with header, left navigation on large displays[desktop resolutions]. But I would like to show toggle button if the site is resized to that of tablets or mobile device [OffCanvas Bootstrap]. Below is what i have achieved so far..
JsFiddle : http://jsfiddle.net/BqKNV/222/
Now,I'm having issues with slide animation and left navigation visibility[always hidden]. If anyone can spot where I'm going wrong will be appreciated.. thanks
<section class="offcanvas-layout">
<aside id="aside-menu" class="offcanvas-left nav-collapse collapse">
<div id="leftcontent">
<div class="inner">
<div></div>
</div>
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<!-- Collect the nav links, forms, and other content for toggling -->
<ul class="nav nav-pills nav-stacked">
<li> <span class="glyphicon glyphicon-play"></span>United States
</li>
<li> <span class="glyphicon glyphicon-play"></span>Canada
</li>
</ul>
</div>
<!-- /.container-fluid -->
</div>
</aside>
<article class="offcanvas-content">
<div id="header">
<div class="container">
<button class="btn navbar-btn" data-toggle="collapse" data-target="#aside-menu">Click Me</button> <a id="logo">Logo here</a>
<div class="dropdown pull-right"> Dropdown <b class="caret"></b>
<ul class="dropdown-menu">
<li>Action
</li>
<li>Another action
</li>
<li>Something else here
</li>
<li class="divider"></li>
<li>Separated link
</li>
</ul>
</div>
<div class="searchBox">
<div class="input-group input-group-sm">
<input id="header-search" type="text" class="form-control" placeholder="search..." /> <span class="input-group-btn">
<button class="btn btn-default" type="button" id="search_Button"><span class="glyphicon glyphicon-search"></span>
</button>
</span>
</div>
</div>
</div>
</div>
<div id="maincontent">
<div id="maincontentnav">
<p>Main Content Here</p>
</div>
</div>
</article>
</section>
You can use the visible-xs responsive utility class like this...
<button class="btn navbar-btn visible-xs" data-toggle="collapse" data-target="#aside-menu">Click Me</button> <a id="logo">Logo here</a>
http://bootply.com/130279
Here's my code:
</html>
<body background="images/top_bannercroppppp.jpg">
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation" id="topbar">
<div class="container-fluid">
<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>
<label id="toplabel" style="color:#FFFFFF"></label>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li>
<a href="#">
<img src="images/btn_logout.jpg">
</a>
</li>
</ul>
</div>
</div>
</div>
<div class="container-fluid">
<div class="row">
<div class="col-sm-3 col-md-2 sidebar" id="menu">
<div id="divRows">
<ul class="nav nav-sidebar" id="ul_list">
<li id="divlist" class="active">
<img src="images/camera_Off.png" width="150" id="liveVideo" style="margin-left:10%" onclick="playon1()" alt="Camera" />
</li>
<br/>
<li>
<img src="images/users_Off.png" id="users" width="150" style="margin-left:10%" alt="Users" onclick="playon2()" />
</li>
<br/>
<li>
<img src="images/settings_Off.png" id="settings" width="150" style="margin-left:10%" alt="Settings" onClick="playon3()" />
</li>
<div id="ulsettings">
<ul id="list">
<li> Video
</li>
<li> Advanced Features
</li>
<li> Camera
</li>
<li> Audio
</li>
<li> Date/Time
</li>
<li> Network and Port
</li>
<li> Alarm
</li>
<li> Storage
</li>
</ul>
</div>
<li>
<img src="images/maintanance_off.png" id="maintenance" width="150" style="margin-left:10%" alt="Maintenance" onClick="playon4()" />
</li>
<br/>
<li>
<img src="images/support_off.png" id="support" width="150" style="margin-left:10%" alt="Support" onClick="playon5()" />
</li>
<br/>
</ul>
<img src="images/logo.jpg" id="logo" />
</div>
</div>
<div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main" id="topbanner"></div>
</div>
</div>
</div>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="bootstrap-3.1.0/docs/dist/js/bootstrap.min.js"></script>
<script src="bootstrap-3.1.0/docs/assets/js/docs.min.js"></script>
<script src="js/index.js"></script>
<script src="js/jquery/jquery-1.10.2.js"></script>
<script src="js/jquery/jquery-1.8.3.min.js"></script>
<script src="js/jquery/jquery-ui-1.9.2.custom.min.js"></script>
<script src="js/jquery/jquery.base64.js"></script>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
</body>
</html>
Why does the HTML pages take time while loading and the page hangs away without letting other pages to load? When I click on one button there's no problem loading it but as soon as I click the other one page hangs out or it won't load and takes time in loading.
You are loading the same libraries many times and from diferent locations. For example:
js/jquery/jquery-1.10.2.js
http://code.jquery.com/jquery-1.9.1.js
https://code.jquery.com/jquery-1.10.2.min.js