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.
Related
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.
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);
});
I am a newbie on AJAX, I have a link that loads table.php. Then it writes the code to the index.php. In that code, I have another link to
show the info.php. Is it possible to do this?
<!--This is index.php-->
<div id="link">my Info</div><!--it works here-->
<div id="link">My Table</div>
<div id="table"></div>
<div id="info"></div>
<!--My javascript-->
<script type="text/javascript">
$(document).ready(function() {
$('#link a').click(function(){
var page = $(this).attr('href');
if(page =='table')
$('#table').load('table.php');
else if(page =='info')
$('#info').load('info.php');
return false;
})
});
</script>
<!--This is table.php-->
<div id="link">my Info</div><!--it doesn't works here-->
<!--This is info.php-->
<h1>My info</h1>
Your three <div> (as pointed out by #scragar) have the same id link, most probably causing the issue. Make it a class like that :
<div class="link">
And in your JS :
$('.link a')
EDIT : As noted by dbf, you must as well declare your handler with live() or on() instead of click() :
$('.link a').live('click', function(){ ... });
in order for it to be binded after table.php is loaded in the page. ( http://api.jquery.com/live/ )
I would like to know if there is a way to be able to click a Link on the navigational Div tag and have it display on the content Div like if i had
<div id="nav">
a link </div>
<div id="content>show the stuff</div>
From the comments below - the OP stated the following :
I am trying to redo a website but my imagagination is getting the better of me. If I have three links like home, about author, and about our mission. I would like to be able to click about author and in the main_content div tag show the html file aboutauthor.html
Alt 1: Use jquery tabs:
See demo and code here: http://jqueryui.com/demos/tabs/
Alt 2: Hide/show div in same html file:
HTML:
<div id="nav">
Show content 1
Show content 2
Show content 3
</div>
<div id="content1" class="toggle" style="display:none">show the stuff1</div>
<div id="content2" class="toggle" style="display:none">show the stuff2</div>
<div id="content3" class="toggle" style="display:none">show the stuff3</div>
jQuery:
$("#nav a").click(function(e){
e.preventDefault();
$(".toggle").hide();
var toShow = $(this).attr('href');
$(toShow).show();
});
Demo: http://jsfiddle.net/5NEu3/3/
Alt 3: Load from server ondemand:
To load html into your main div you should use: http://api.jquery.com/load/
Follow examples on that site. And be aware that the html side you are loading must be in same domain as you are hosting the new page.
Html
Show content 1
Show content 2
jQuery
$("#nav a").click(function(e){
e.preventDefault();
$('#maindiv').load($(this).attr("href"));
});
Using jQuery, you could do something like this.
This will open the site <a href="example.html"> and put it inside of the <div id="content"> when you click it, and then disable changing the whole site.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js" type="text/javascript"></script>
<script>
$(document).ready(function() {
$('#nav a').click(function(e) {
e.preventDefault();
$('#content').load($(this).attr('href'));
});
});
</script>
<div id="nav">
Some page
Some other page
My page
</div>
<div id="content">
show the stuff
</div>
Something like this:
function setContent(div, content)
{
getElementById(div).innerHtml = content;
return false; // return false to ignore the click
}
a link
to show a hidden div (i think this is what you wanted)
the javascript (using jQuery)
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#showdiv").click(function () {
$("#hiddendiv").show();
});
});
<script>
the html
Show the Div
<div id="hiddendiv" style="display:none;">Content here</div>
you can see it in action here
I'm loading content, forms mainly, dynamically using ajax in a Code Igniter app I'm working on. However I need get the URI segments for my DB insert and to autofill the date box on the form. Usually one would do something along the lines of:
$date = $this->uri->segment(3)."/".$this->uri->segment(4)."/".$this->uri->segment(5);
But obviously it just tries to read the address of the document being called through the ajax request, not the parent.
Any ideas how I get the parent details?
Thanks!
<meta charset="UTF-8" />
<script type="text/javascript">
$(function() {
$("#tabs").tabs({
ajaxOptions: {
error: function(xhr, status, index, anchor) {
$(anchor.hash).html("Unable to load this tab. We'll try to fix this as soon as possible.");
}
}
});
});
</script>
<div id="diary-input">
<div id="tabs">
<ul>
<li>Appointment</li>
<li>Event</li>
<li>New Client</li>
<li>New Contact</li>
<div id="input-cell-close" class="input-cell"><?php echo "<img src=\"".base_url()."images/cc_close.png\" id=\"input-cell-close\" border=\"0\" alt=\"close\" />" ?></div>
</ul>
</div>
</div>
With jquery and jquery ui included in my document header. I'm using the jquery ui ajax tabs if you need further info: http://jqueryui.com/demos/tabs/#ajax
When doing the Ajax request, you should send along the segments from the parent page. Like this:
In your controller:
$data['segments'] = $this->uri->segment(3)."/".$this->uri->segment(4)."/".$this->uri->segment(5);
In your view:
<li>Appointment</li>
<li>Event</li>
<li>New Client</li>
<li>New Contact</li>