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);
});
});
Related
Trying to get content from other pages to load into specific Div from url on click . But for some reason it will not work.
The link keeps forwarding to the page instead of opening in the div. On top of that the initial load code works. It loads the initial content. after setting an alarm to notify my when I click the link with the desired content it sends the alert. Then I put return false; at the end and now it doesn't load anything. What am I doing wrong. Im using the code that I used a year ago on here. but now its not working on my new website. Please help me determine how to fix this.
Here is my AJAX code:
$(document).ready(function () {
$('#main').load('pages/home.php');
$('ul#navMenu li a').click(function() {
var page = $(this).attr('href');
$('main').load('pages/' + page + '.php');
return false;
});
});
Here is my HTML:
<body class="">
<div class="container">
<div class="menu-wrap">
<nav class="menu">
<div class="link-list">
<center>
<ul id="navMenu">
<li><span>HOME</span></li>
<li><span>TALENT</span></li>
<li><span>SERVICES</span></li>
<li><span>MUSIC</span></li>
<li><span>BEATS</span></li>
<li><span>VIDEOS</span></li>
<li><span>CONTACT US</span></li>
</ul>
</center>
</div>
</nav>
</div>
<button class="menu-button" id="open-button"><img src="img/menubutt.png" height="42" width="42"><span>Open Menu</span></button>
<div class="content-wrap">
<div id="main">
</div>
</div><!-- /content-wrap -->
</div><!-- /container -->
<script src="js/jquery-3.2.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/ajax.js"></script>
<script src="js/classie.js"></script>
<script src="js/main.js"></script>
And, here's the website testing on my server:
https://trillumonopoly.com/testing
Looks like I found the real reason of your error.
Take a look at your link <li><span>HOME</span></li>
To be more precise, at home.php
In your JS you get full link, e.g. pages/home.php, then you add to it .php one more time, so your final link is pages/home.php.php, but not pages/home.php
Try to change
$('main').load('pages/' + page + '.php');
to
$('#main').load('pages/' + page + '.php');
You have forgotten the # at start of main
Try correcting your url on page variable and also your main typo:
$(document).ready(function () {
$('#main').load('pages/home.php');
$('ul#navMenu li a').click(function() {
var page = $(this).attr('href');//your href attribute is '#', which doesn't yield a correct path
$('#main').load('pages/' + page + '.php');//$('#main') instead of $('main'), for id
return false;
});
});
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...
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 try to open a panel with jQuery Mobile.
The panel should come from the left and push the page, but it seems like the panel overlay the whole side.
In the console i get the error:
Uncaught Error: cannot call methods on panel prior to initialization; attempted to call method 'open'
My HTML:
<div data-role="page">
<div data-role="header">
<header>
<div id="header">
Menu
<h1 id="headline">Text</h1>
<div class="clean"></div>
</div>
</header>
</div>
</div>
<footer>
</footer>
<div data-role="panel" id="menue_panel" data-position="left" data-display="push">
<ul class="ui-alt-icon ui-nodisc-icon">
<li>Startseite</li>
<li>Medikamente</li>
</ul>
</div>
My JS
$( document ).ready(function() {
$( "#menu-btn" ).on( "click", function() {
$( "#menue_panel" ).panel( "open" );
});
});
I don't know why it doesnt work.
The panel should be inside the page DIV.
see docs here http://demos.jquerymobile.com/1.3.0-beta.1/docs/panels/
I have 4 collapsible-sets: 1 collapsible for each quarter of the year.
According to the current month, the corresponding collapsible should expand at document ready. However this is not functioning.
<script type="text/javascript">
$(document).ready
(
function()
{
var today=new Date();
var month=today.getMonth()+1;
alert(month);
if(month>9)
{
$('#qFourCollapsible').trigger("expand");
}
else if(month>6)
{
$('#qThreeCollapsible').trigger("expand");
}
else if(month>3)
{
$('#qTwoCollapsible').trigger("expand");
}
else
{
alert("in else");
$('#qOneCollapsible').bind("expand", function () {
alert('Expanded');
});
}
}
);
</script>
<html>
<div data-role="collapsible-set" data-theme="b" data-content-theme="c" data-collapsed="false" id="qOneCollapsible">
<div data-role="collapsible">
<h2>January-March</h2>
<table id="quarterOneTable">
</table>
</div>
</div>
<div data-role="collapsible-set" data-theme="b" data-content-theme="d" id="qTwoCollapsible">
<div data-role="collapsible">
<h2>April-June</h2>
<table id="quarterTwoTable">
</table>
</div>
</div>
<div data-role="collapsible-set" data-theme="b" data-content-theme="c" id="qThreeCollapsible">
<div data-role="collapsible">
<h2>July-September</h2>
<table id="quarterThreeTable">
</table>
</div>
</div>
<div data-role="collapsible-set" data-theme="b" data-content-theme="d" id="qFourCollapsible">
<div data-role="collapsible">
<h2>October-December</h2>
<table id="quarterFourTable">
</table>
</div>
</div>
</html>
So, as you can see I have tried expanding the collapsible in two ways. 1: $('#qFourCollapsible').trigger("expand"); 2: $('#qOneCollapsible').bind("expand", function () {
alert('Expanded'); Both of them are not working. The 2nd method is working and the alert-expanded is shown only upon CLICKING the collapsible. I however, want it to be expanded by itself depending on the current month.
The current api docs provide new info
$("#resCollapsable").collapsible("expand");
This works the previous code in this thread no longer seems to work.
Answer is a simple one, you are trying to expand a wrong element, you need to expand data-role="collapsible" and you are trying to do that on a data-role="collapsible-set".
Here's a working example: http://jsfiddle.net/Gajotres/vSjtA/
$(document).on('pagebeforeshow', '#index', function(){
$( "#qOneCollapsible-inner" ).trigger( "expand" );
$( "#qThreeCollapsible-inner" ).trigger( "expand" );
});
Also do not use document ready with jQuery Mobile, it will work in some basic cases. Take a look at my other ARTICLE about that topic. Or find it HERE. Just look at the first chapter called: $(document).on('pageinit') vs $(document).ready()
You need to add
.collapsible("refresh");
After all
.trigger("expand");
calls. So an example from your code would be:
$('#qTwoCollapsible').trigger("expand").collapsible("refresh");