I have a tabbed system on my page. Currently when clicked the opacity is toggled to show that div using:
$('.tabs').tabs({ fx: { opacity: 'toggle', duration: 'slow'} });
which is loaded in a javascript in the head of the page. I am trying to add an on-click event handler so that the div is also reloaded but it is having no effect, how can I get it to do both?
<div class="tabs">
<ul>
<li>Time Sheets</li>
<li>Abscence Request</li>
<li>Abscence Record</li>
</ul>
<div class="clear"></div>
<div class="bordered_box">
<div id="tabs-0"><?php include('timesheets.php'); ?></div>
<div id="tabs-1"><?php include('abscencerequestform.php'); ?></div></div>
<div id="tabs-2"><?php include('abscencerecords.php'); ?></div>
</div>
<script type="text/javascript">
$(function () {
$("a#tabs-0").on("click", function () {
$("#tabs-0").load("timesheets.php");
});
$("a#tabs-1").on("click", function () {
$("#atabs-1").load("abscencerequests.php");
});
$("a#tabs-2").on("click", function () {
$("#atabs-2").load("abscencerecords.php");
});
});
</script>
If I understand correctly, you want to have the tab content reloaded as you select each tab?
Just point your tabs directly to the PHP content, which will force load it each time the tab for a particular page is clicked. JQuery will build the panels for you, so you only need this code below instead of the contents of <div class="bordered_box"> :
<div id="tabs">
<ul>
<li>Time Sheets</li>
<li>Abscence Request</li>
<li>Abscence Record</li>
</ul>
</div>
This is just a simulated example, since I can't load active PHP scripts here:
$(function() {
$( "#tabs" ).tabs({
fx: { opacity: 'toggle', duration: 'slow'},
activate: function(event ,ui){
//console.log(event);
alert("Simulating refreshed PHP content in Tab #" + ui.newTab.index());
}
});
});
<link href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<div id="tabs">
<ul>
<li>Time Sheets</li>
<li>Abscence Request</li>
<li>Abscence Record</li>
</ul>
</div>
I don't know much about PHP, but I do know that jQuery can chain methods, try this:
$('#tabs').tabs(function(event) {
fx: { opacity: 'toggle', duration: 'slow'};
$(this).find('a').bind('click', function(event) {
var link = $(this).attr('href');
$(window).load(link);
});
event.stopPropagation();
});
I'm sure there's something that's not right...
Related
This question already has answers here:
uncaught exception: cannot call methods on tabs prior to initialization
(3 answers)
Closed 5 years ago.
So I have multiple tabs on my homepage..one of them has a button called "refresh" that refreshes only that particular tab. Here's my code:
The external script files:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
The tabs structure:
<ul class="tabs">
<li>SM</li>
<li>RM</li>
</ul>
<div class="tab-content">
<div class="tab" id="rm">
//code
</div>
<div class="tab" id="sm">
<button id="refresh">REFRESH!</button>
//code
</div>
</div>
The jquery(which I have included in an external file that I haven't mentioned above):
$(document).ready(function(){
$('body').on('click', '#refresh', function(){
var x = $(".tabs").tabs("option", "active");
$(".tabs").tabs("load", x);
});
});
Whenever I click on the button, I get an error in my console saying :
Error: cannot call methods on tabs prior to initialization; attempted to call method 'option'
Please help! I'm very new to this and am unable to solve this problem!
#KlaraNewbie,
The error is indicating that the tabs have not been initialized. To initialize add something like the following:
$( ".tabs" ).tabs();
prior to:
$('body').on('click', '#refresh', function(){
In addition, your HTML structure is incorrect. Try:
<div id="tabs">
<ul class="tabs">
<li>SM</li>
<li>RM</li>
</ul>
<div class="tab" id="sm">
a tab
</div>
<div class="tab" id="rm">
<button id="refresh">REFRESH!</button>
</div>
</div>
And change your script to:
$(document).ready(function(){
$( "#tabs" ).tabs();
$('body').on('click', '#refresh', function(){
var x = $("#tabs").tabs("option", "active");
$("#tabs").tabs("load", x);
});
});
So I was basically trying to create a drop-down list with jquery. I was successful in achieving but came across with a slight problem. Here's the code
HTML
<div class="dropdown_heading">
text
</div>
<div class="dropdown_container">
<div class="">
Competition1
</div>
<div class="">
Competition2
</div>
<div class="">
Competition3
</div>
</div>
JQUERY
$(document).ready(function(){
$(".dropdown_heading").mouseenter(function(){
$(".dropdown_container").slideDown();
});
$(".dropdown_container").mouseleave(function(){
$(".dropdown_container").slideUp();
});
});
Once I hover over the dropdown_heading the dropdown shows-up and I'm able to navigate over it but the only way the it slides back up is if i actually have the cursor in the dropdown_container. If I try to slide it up removing the mouse from dropdown_heading, the dropdown is still visible. How would I be able to slide the submenu back up when the mouse leaves both div_container and div_heading?
I've tried to execute this function but therefore I am unable to navigate over the container. Thanks.
$(".dropdown_heading").mouseleave(function(){
$(".dropdown_container").slideUp();
});
You can try a timer based solution like
jQuery(function($) {
var $target = $(".dropdown_container");
$('.dropdown_heading').hover(function() {
clearTimeout($target.data('hoverTimer'));
$target.stop(true, true).slideDown(500);
}, function() {
var timer = setTimeout(function() {
$target.stop(true, true).slideUp();
}, 200);
$target.data('hoverTimer', timer);
});
$target.hover(function() {
clearTimeout($(this).data('hoverTimer'));
}, function() {
$(this).stop(true, true).slideUp();
});
});
.dropdown_container {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="dropdown_heading">
text
</div>
<div class="dropdown_container">
<div class="">
Competition1
</div>
<div class="">
Competition2
</div>
<div class="">
Competition3
</div>
</div>
The toggleClass() method toggles between adding and removing one or more class names from the selected elements.
This method checks each element for the specified class names. The class names are added if missing, and removed if already set - This creates a toggle effect..
Try this,
$(document).ready(function(){
$(".dropdown_heading").mouseenter(function(){
$(".dropdown_container").toggle();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="dropdown_heading">
text
</div>
<div class="dropdown_container">
<div class="">
Competition1
</div>
<div class="">
Competition2
</div>
<div class="">
Competition3
</div>
</div>
Here's a js fiddle to demonstrate the problem.
I have a fixed position floating/popup dialog on my page that contains a series of tabs using the easytabs jQuery plugin. When the dialog appears, any tab selection causes the webpage (behind the floating dialog) to jump/scroll to a different position on the page.
I've read in other places that forcing the click behavior of the anchor tags in the tab structure to prevent the default behavior will correct this issue, but it doesn't seem to be working for me e.g. assigning a class such as .prevent-default to each tab anchor element and doing:
$('.prevent-default').click(function(e) {
e.preventDefault();
return false;
});
Here's some html:
<h1>Top</h1><button onclick="showTabDialog();">Tabs</button>
<p id="spacer"></p>
<h1>Bottom</h1>
<div id="dialog" class="floating-dialog">
<div id="tabs" class="tab-container">
<ul class="tabs">
<li class="tab">
First
</li>
<li class="tab">
Second
</li>
</ul>
<div id="content-container">
<div id="first" class="tab-content">
<div class="tab-no-data">No data yet</div>
</div>
<div id="second" class="tab-content">
<div class="tab-no-data">No data yet</div>
</div>
</div>
</div>
</div>
...and some js:
$(document).ready(function() {
$('#tabs').easytabs({animationSpeed: 'fast'});
$('.prevent-default').click(function(e) {
e.preventDefault();
return false;
});
});
function showTabDialog() {
$('#dialog').fadeIn();
}
$('#tabs').easytabs({animationSpeed: 'fast', updateHash: false});
Demo: http://jsfiddle.net/naa22prw/3/
Another way to do this is to set a minimum height on the tabs container div. `
#tab-container{
min-height: 700px;
}
This means that you can use the updateHash: true so the URL can change each time a tab is clicked.
ref. https://github.com/JangoSteve/jQuery-EasyTabs/issues/40
I am trying to jquery isotope and Balkin Style portfolio to work together (http://codepen.io/MightyShaban/pen/eGaCf) buti cant. I can get them to work perfectly on there own but once together it wont work. I have also tried noConflict() with no luck as well. Any ideas would be much appreciated.
JS Code.
// Balkin
$( document ).ready(function() {
$('.portfolio ul li a').click(function() {
var itemID = $(this).attr('href');
$('.portfolio ul').addClass('item_open');
$(itemID).addClass('item_open');
return false;
});
$('.close').click(function() {
$('.port, .portfolio ul').removeClass('item_open');
return false;
});
$(".portfolio ul li a").click(function() {
$('html, body').animate({
scrollTop: parseInt($("#top").offset().top)
}, 400);
});
});
/*===========================================================*/
/* Isotope Posrtfolio
/*===========================================================*/
if(jQuery.isFunction(jQuery.fn.isotope)){
jQuery('.portfolio_list').isotope({
itemSelector : '.list_item',
layoutMode : 'fitRows',
animationEngine : 'jquery'
});
/* ---- Filtering ----- */
jQuery('#filter li').click(function(){
var $this = jQuery(this);
if ( $this.hasClass('selected') ) {
return false;
} else {
jQuery('#filter .selected').removeClass('selected');
var selector = $this.attr('data-filter');
$this.parent().next().isotope({ filter: selector });
$this.addClass('selected');
return false;
}
});
}
HTML (needs to be made more tidy i know, sorry)
<!--Portfolio-->
<section id="portfolio" class="portfolio">
<div class="container">
<div class="row">
<!--begin isotope -->
<div class="isotope">
<!--begin portfolio filter -->
<ul id="filter" class="option-set clearfix">
<li data-filter="*" class="selected">All</li>
<li data-filter=".responsive">Responsive</li>
<li data-filter=".mobile">Mobile</li>
<li data-filter=".branding">Branding</li>
</ul>
<!--end portfolio filter -->
<!--begin portfolio_list -->
<ul id="list" class="portfolio_list">
<!--begin span4 -->
<li class="list_item col-xs-12 col-sm-4 col-md-4 responsive"><a href="#item02">
<div class="view view-first"> <img src="../overlay/images/photos/project_1.jpg" class="img-responsive" alt="Title Goes Here"> <div class="mask"> <div class="portfolio_details zoom"><h2>Nostrum mnesarchum</h2>
<span>Art / Illustration</span></div> </div> </div></a>
</li>
<!--end span4 -->
Put the second jQuery item in a separate $( document ).ready(function() {});, and you should be fine.
You might even want to put it in a whole different set of <script></script> tags too.
I have a page the makes an AJAX request, and returns some data from the database, once it is retruned I am trying to append it to a div and make an accordion, however all I am getting is the data back and no accordion here is my source code once the AJAX has run.(snippet)
<script type="text/javascript">
$(document).ready(function() {
//accordians for when the AJAX loads the content
// hides the main_menu as soon as the DOM is ready
// (a little sooner than page load)
$('#main_menu').hide();
// shows the slickbox on clicking the noted link
$('h3#show-menu a').click(function() {
$('#main_menu').toggle('slow');
return false;
});
//try and hide the left content when it is null
$("#left-content:empty").hide();
//style up the scroll bar
$('#left-content').jScrollPane();
//do some AJAX to call the method instead of the browser
$("a.navlink").click(function (ev) {
$(this).toggleClass("active");
ev.preventDefault();
var id = $(this).attr("id")
if ($(this).hasClass("active")) {
$("."+id).remove();
} else {
//$(this).toggleClass("active");
var url = $(this).attr("href");
$.ajax ({
url: url,
type: "POST",
success : function (html) {
$("#accordion").append(html);
$('#accordion').accordion({
active: 0,
header:'h2.Blog'
});
//alert(accordion())
}
});
}
});
});
</script>
</head>
<body>
<div style="left: -100em; position: absolute; width: 100em;"/>
<div id="wrapper">
<h3 id="show-menu">
</h3>
<div id="main_menu" style="display: block;">
</div>
<div id="left-content-holder">
</div>
<div id="right-content">
<div id="accordion" class="ui-accordion ui-widget ui-helper-reset" role="tablist">
<h2 class="Blog ui-accordion-header ui-helper-reset ui-state-active ui-corner-top" role="tab" aria-expanded="true" tabindex="0">
</h2>
<div class="Blog ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom ui-accordion-content-active" style="height: 16px;" role="tabpanel">Hello World</div>
</div>
</div>
</div>
As you can see the data gets appended to the <div id="accordion"> and all the apropriate classes get given to the elements that should give it accordion functionality but I get nothing. Should i be creating the accordion from the DOM and theoretically the data is returned is not in the HTML and if so how would I go about doing this?
Thanks
Looks as though the accordion doesn't like things being appended onto it. Assuming you already have the accordion initiated, try destroying the accordion before you append the html to it in your success function.
$('#accordion').accordion('destroy');
before
$('#accordion').append(html);
Then you can re-initiate it as you're doing already.