Multiple Checkbox Options Using The Button Divide Into Tabs
Solution 1:
If I understood you correctly, you do not need to store anything in session variables or cookies after all.
The tutorial you linked explains how to do the tabs. You create two divs and show/hide them on the go. You can also create one div and two html files (one for each tab) that will contain the contents of the tabs (database and phone detail) and reload it with ajax. Up to you.
You don't need many new things over what you have right now. I get it that you already have working tabs and only want to know how to pass the data between them. To do that, just use the variable with chosen filters in the function that is responsible for showing the details tab and switch the html of table like you did before wtih $('#phones tbody').html(makeTable(records));
EDIT:
Your fiddle is very wrong. Fix your "ul" and "li" tags so they are proper. Close your other opened tags. Put index.php content outside of tag. After you fix your html, look at attribute "class" of the tabs. It has to match properly with the selectors from jquery. Add containers for tab content:
<divclass="tabs"><ulclass="tab-links"><liclass="active"><ahref="#tab1">Tab #1</a></li><li><ahref="#tab2">Tab #2</a></li></ul></div><divclass="tab-content"><divid="tab1"class="tab active"><!-- your filter here --></div><divid="tab2"class="tab"><!-- your table here --></div></div>After that modify your jQuery. Add this (take a look at selectors!!! you have to either follow naming convention from example or change it everywhere):
$('.tabs .tab-links a').on('click', function (e) {
var currentAttrValue = $(this).attr('href');
// Show/Hide Tabs
$('.tabs ' + currentAttrValue).show().siblings().hide();
// Change/remove current tab to active
$(this).parent('li').addClass('active').siblings().removeClass('active');
e.preventDefault();
});
It'll for example prevent your site from reloading on clicking of a tab. Have in mind it will open you new tab when you click on it. If you want to open it on button click, add following code:
$("#submitFilter").on("click", function () {
var opts = getPhoneFilterOptions();
("#tab2").show().siblings().hide();
updatePhones(opts);
});
It will open second tab and update the table like last time. Make sure the table is inside tab content container(#tab2).
You can put it all in one file:
<html><body>
(...)
<divclass="tabs"><ulclass="tab-links"><liclass="active"><ahref="#tab1">Tab #1</a></li><li><ahref="#tab2">Tab #2</a></li></ul></div><divclass="tab-content"><divid="tab1"class="tab active"><!-- your filter here --></div><divid="tab2"class="tab"><!-- your table here --></div></div>
(...)
<script>// your script here
(...)
$('.tabs .tab-links a').on('click', function (e) {
var currentAttrValue = $(this).attr('href');
// Show/Hide Tabs
$('.tabs ' + currentAttrValue).show().siblings().hide();
// Change/remove current tab to active
$(this).parent('li').addClass('active').siblings().removeClass('active');
e.preventDefault();
});
$("#submitFilter").on("click", function () {
var opts = getPhoneFilterOptions();
("#tab2").show().siblings().hide();
updatePhones(opts);
});
(...)
</script></body></html>
Post a Comment for "Multiple Checkbox Options Using The Button Divide Into Tabs"