In my code which is using bootstrap, I got a problem.
I am using JS code shown as below.
$( "li:eq(1)" ).click(function() {
$.get("./test.php")
.done(function(data) {
$('#middle').html(data);
});
It is to control the div.
<div class="container" id=header-nav>
<a class="brand" href="index.php"></a>
<div class="nav-collapse collapse" >
<ul class="nav">
<li class="active">Home</li>
<li>test</li>
.......
<div class="container" id="middle"> </div>
When I click the test button, the link will change to test.php# but nothing change. Click again, it can load into the test.php.
The problem is the link is test.php, the code not work. when test.php# , it work. And I would like to know why.
Thanks a lot.
The problem is because you have attached the handler to the li element, but the a element is clicked, and then transfers the page. Try this instead:
$("li:eq(1) a").click(function(e) {
e.preventDefault();
$.get("./test.php")
.done(function(data) {
$('#middle').html(data);
});
});
The preventDefault() stops the default behaviour of the link, meaning your AJAX request gets executed as required.
since you want to use $.get (AJAX), you don't have to give the url to <a> element inside your <li> element,
you have to give the attribute href inside <a> element this value: javascript:void(0) Or #,
your html code would be:
<div class="container" id=header-nav>
<a class="brand" href="index.php"></a>
<div class="nav-collapse collapse" >
<ul class="nav">
<li class="active">Home</li>
<li>test</li>
.......
<div class="container" id="middle"> </div>
or you have to prevent default action for the element to prevent reloading url by adding:
event.preventDefault() in you onclick event and your js code would be:
$( "li:eq(1)" ).click(function(e) {
event.preventDefault();
$.get("./test.php")
.done(function(data) {
$('#middle').html(data);
});
Related
I am kinda new in Ajax and jQuery the problem is that I have a folder pages and in it are php pages with content divs. I want to reload the container div with the content instead of the whole page i tried many things but nothing seems to help. this is a part of how my index.php looks like:
<?php include ('inc/nav.php'); ?>
<div id="container">
<?
$type = $_GET["type"];
switch ($type) {
case "about" :
include "pages/about-us.php";
break;
case "contact":
include "pages/contact.php";
break;
default :
include "pages/homepage.php";
}
?>
</div>
In the navigation the link looks like this:
<ul class="main-menu">
<li class="url">Homepage</li>
<li class="url">About us</li>
<li class="url">Contact</li>
</ul>
I tried to get the content that's in pages/about-us.php into the <div id="container"></div> but it's not working. this is how my ajax script looks like:
//run on page load
$(function(){
//bind a click event to the nav links
$(".url a").on("click", function(e){
//keep the links from going to another page by preventing their default behavior
e.preventDefault();
//this = link; grab the url
var pageLocation = this.href;
console.log(pageLocation);
//fire off an ajax request
$.ajax({
url: pageLocation,
//on success, set the html to the responsetext
success: function(data){
$("#container").html(data.responseText);
}
});
});
});
The .load() method, unlike $.get(), allows us to specify a portion of the remote document to be inserted. This is achieved with a special syntax for the url parameter. If one or more space characters are included in the string, the portion of the string following the first space is assumed to be a jQuery selector that determines the content to be loaded.
Consider the following example.
$(function() {
$(".url a").click(function(e) {
e.preventDefault();
var pageLocation = this.href + " #container";
console.log(pageLocation);
$("#container").load(pageLocation)
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="main-menu">
<li class="url">Homepage</li>
<li class="url">About us</li>
<li class="url">Contact</li>
</ul>
<div id="container">
</div>
This is untested. You will want to test this in your own code.
See More: https://api.jquery.com/load/
I am using the following code snippet from John Morris to investigate how Ajax might work for dynamically updating my menu:
<script>
$(document).ready(function(){
var trigger = $('#bs-example-navbar-collapse-1 ul li a'),
container = $('#navbar_content');
trigger.on('click', function(){
var $this = $(this), target = $this.data('target');
container.load(target + '.php');
return false;
});
});
</script>
I also have this html code:
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav" id='navbar_content'>
<li class="active">object1</li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
which I would like to dynamically replace with this code when object 2 is clicked (to change the class of the selected hyperlink) - there is simlar code in object3.php and object4.php:
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav" id='navbar_content'>
<li>object1</li>
<li class="active"></li>
<li></li>
<li></li>
</ul>
</div>
Everything works well on my first click of object 2, but subsequent clicks of other links will not update the navbar. I think this is related to bindings but I can not figure out what needs to be done to fix this. All suggestions appreciated.
Since you are overwriting the links inside #navbar_content, you need to use event delegation - see https://learn.jquery.com/events/event-delegation/
So instead of binding to
var trigger = $('#bs-example-navbar-collapse-1 ul li a')
you need to bind to your container and use event propagation. Try with something like -
<script>
$(document).ready(function(){
var container = $('#navbar_content');
container.on('click', 'li a', function(){
var $this = $(this), target = $this.data('target');
container.load(target + '.php');
return false;
});
});
</script>
I am working on a single page website, I have following navigation bars:
<ul class="nav navbar-nav navbar-right">
<li><i></i>HOME</li>
<li><i></i>Accommodation</li>
<li><i></i>activities</li>
<li><i></i>>gallery</li>
<li><i></i>>contact</li>
</ul>
its working on the section id in the section tag. like
<section id="home">
<section id="accommadation">
how to give class="active" for navigation?
Try this
<ul class="nav navbar-nav navbar-right">
<li><i></i>HOME</li>
<li><i></i>Accommodation</li>
<li><i></i>activities</li>
<li><i></i>>gallery</li>
<li><i></i>>contact</li>
</ul>
<script type="text/javascript">
$(document).ready(function(){
$('.nav_menu').click(function(){
$('.nav_menu.active').removeClass('active');
$(this).addClass('active');
});
});
</script>
Its not dependent on Codeigniter or PHP as it is Single page website you need some client side javascript code or use jQuery like,
$(function(){
$('.navbar-nav a[href^=#]').on('click',function(e){
$('.navbar-nav a.active').removeClass('active');
$(this).addClass('active');
// if you want some animation for the element to scroll then use animate()
$('html,body').animate({scrollTop:$(this.href).offset().top},900);
});
});
I have the following layout
<div id="tabs">
<ul>
<li>Create Username</li>
<li>View Search Logs</li>
<li>Assign Values Table</li>
<li>Edit Values Table</li>
<li>Create Values Table</li>
</ul>
<div id="tabs-1">
<h2>Create Username</h2>
</div>
<div id="tabs-2">
<h2>View Search Logs</h2>
</div>
<div id="tabs-3">
<h2>Assign Values Table</h2>
</div>
<div id="tabs-4">
<h2>Edit Values Table</h2>
</div>
<div id="tabs-5">
<h2>Create Values Table</h2>
</div>
</div>
Each tab has a form in it, when the form is submitted and the page reloads I want the visible tab to still be the tab the user was last on (instead of it going back to the first).
Each form has a hidden field that contains the index of that tab. I then use the below:
<script type="text/javascript">
$(function() {
$("#tabs").tabs({
selected: <?php echo (isset($_POST['selected_tab']) ? $_POST['selected_tab'] : 1)?>
});
});
</script>
This results in showing the right thing e.g
<script type="text/javascript">
$(function() {
$("#tabs").tabs({
selected: 2
});
});
</script>
However the first tab is still the tab that is shown.
$("#tabs").tabs({
selected: 2
});
Should be:
$("#tabs").tabs({
active: 2
});
Tabs uses active property and not selected property.
Also note that the index is base 0, so if you want to select the 2nd tab, your value needs to be 1.
One option would be to include jquery-cookie.js an use tabs like this:
$( "#tabs" ).tabs({
cookie: {
expires: 1
}
});
And this will automatically manage your last open tabs with cookie.
I use a simple jquery code for tabs, the idea of it: in each tab I have a form when i submit each form the code will give me values from mysql . The problem is when i submit a form in for example tab 3 it will redirect me to the first tab (default tab), before I show any result.
any suggestion to solve this problem.
thanks in advance,
My Code :
<script type="text/javascript">
$(function() {
$( "#tabs" ).tabs();
});
</script>
HTML code :
<div id="tabs">
<ul>
<li>tab 1</li>
<li>tab 2</li>
<li>tab 3</li>
</ul>
<div id="tabs-1">
<p>tab 1 content</p>
</div>
<div id="tabs-2">
<p>tab 2 content</p>
</div>
<div id="tabs-3">
<p>tab 3 content</p>
</div>
</div>
If you use php, you could use for e.g. hidden html-field in form which contains number of the tab. When submitting form you could parse that variable and use it in jQuery-code. If you use php inside jQuery code could look like this:
$("#tabs").tabs({
selected: <?php echo (isset($_POST['selected_tab']) ? $_POST['selected_tab'] : 1)?>
});
You jest use this code
$( ".selector" ).tabs( "load", 2 );
after loading call this one so you can select 2 tab.
Try it!!
You can pass parameters to tabs() function (http://api.jqueryui.com/tabs/)
<script type="text/javascript">
$(function() {
$( "#tabs" ).tabs({active: 2});
});
</script>
you said "forms" if you submit the form, the page will send data and refresh itself. Just use a button and when the button is clicked, send the ajax.