I know I will butcher this question, so here goes. I have never been able to get UI-tabs to work with ajax. My problem is this.
The tabs work and appear correctly. The desired linked to content is present. However their is a huge space underneath the tabs that firebug tells me is the UL. My actual content the LI is under the long space(and apprently out of the scope of the UL) and is now a DIV.
May be observed at This link . Scroll down just a little and its on the right column.
My jquery is
$('#example').tabs({
load: function(event, ui) {
$('a', ui.panel).click(function() {
$(ui.panel).load(this.href);
return false;
});
}
});
My html
<div id="example">
<ul>
<li><span>Palin</span></li>
<li><span>Beck O Mania</span></li>
<li><span>On The Left</span></li>
<li><span>On The Right</span></li>
</ul>
</div>
As far as the tabs appearing correctly I could use just the regular
$( "#tabs" ).tabs();
and it comes out the same
I have had this problem every time I have tried to use tabs with Ajax and would like to know what I am doing wrong. thanks for your time
Related
I am caught with a problem that a modal popup link that is inside a sliding side bar is not working correctly to open a modal pop up box. The sliding sidebar will only open when a user click on it, and in it there will be contents that contain the modal links.
I have added
Jhtml::_('behavior.modal');
At the beginning of the codes but still doesn't work. My link code is as follows
<a class="modal" rel="{handler: 'iframe', size: {x: 750, y: 600}}" href="index.php">Click me</a>
Based on this link, it should open the content in a modal popup box in normal case (on the main page and not in the sliding sidebar). However when it is in the sliding sidebar it doesn't work.
The main reason I think of could be because the sliding sidebar is dynamically created after the site has been loaded, so the link will not behave as a modal link but just an ordinary href link.
I have seen a reply online here suggesting to execute this
SqueezeBox.assign($$('a.modal'), {
parse: 'rel'
});
every time you add a new element. But I do not know what it means and how to execute it.
Does anyone here have a solution to make the sliding sidebar modal link work?
Finally, i found the answer myself. For anyone who may encounter this problem with ajax or dynamic content just add the following to your loading page javascript
$('body').on('click', 'a.osmodal', function(event) {
event.preventDefault();
SqueezeBox.open($(this).attr('href'), {
handler: 'iframe',
size: {x: 900, y: 500}
});
});
This is just a simple contribution, hope someone will find it helpful.
Wanted to answer your question regarding the proper means to assign Joomla's core modal behavior to dynamically generated content, because you were so close. At work we generate a lot of content using AJAX/lazy loading.
There are two parameters for assign method. The first indicates which DOM elements to apply, and below I include examples for both assigning by class or id. The second is JSON object options, which 9 times out of 10 will already be attached to the rel attribute of your anchor element.
A final caveat being this method must be run after dynamically generated HTML is inserted into the DOM.
Using Class
SqueezeBox.assign(
$$('a.modal.unique-class-identifier'),
$('a.modal.unique-class-identifier').attr('rel')
});
Using ID
SqueezeBox.assign(
'a.modal#unique-id-identifier',
$('a.modal.unique-class-identifier').attr('rel')
});
Hope that helps.
Had the same issue, I dynamically added some links in a Joomla page after the page was already loaded. The following snipped added the event handler for the modal dialog on the newly added elements (make sure it's called after the elements were added):
<script>
SqueezeBox.assign(jQuery('a.modal'), {
parse: 'rel'
});
</script>
Also make sure, you have the modal functionality loaded in (e.g.) your template:
JHTML::_('behavior.modal');
1) I'm using jquery waypoint plugin and trying to do infinite scroll with php/mysql data.
I initially populate the container, which works, and then when scroll to bottom of page the "More" link appends more data. But... it only appends one time. I'm guessing I need to use a callback to re-enable or something? But, total noob, don't know how to do this.
2) What is a good way to let load-more.php know what "page" we're on? Just use a session var to keep track, or is there a way to send param from the main file?
div class="infinite-container">
<?
include("load-more.php");
?>
</div>
More
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"> </script>
<script src="js/waypoints.min.js"></script>
<script src="js/waypoints-infinite.js"></script>
<script>
$( document ).ready(function() {
$('.infinite-container').waypoint('infinite');
});
</script>
If your problem is the same as mine then your issue is likely due to 'waypoint' not being able to find your .infinite-more-link. My "load-more.php" was returning a partial result and not the whole page. waypoint uses JQuery.find to try and locate the more-link in your html, if it cannot find it then it turns off infinite scroll. The problem with this is that find only looks amongst descendants and not at root elements. I wrapped my infinite-more-link in a span tag and waypoint worked as expected.
e.g.
<span>More</span>
Here is a working fiddle, remove the div around the anchor to replicate your problem.
I have been making a website that has lots of pages. Hence decided to put the navigation bar in a separate php file to reduce re-work in all those pages in case of changes. So in my index.php I have included the navigation bar like:
<?php include 'navbar.php'; ?>
And the navbar.php looks like:
<div id="nav">
<ul>
<li pg="#home" >home</li>
<li pg="#pack" >packages</li>
<li pg="#about" >about</li>
</ul>
</div>
In the index.php, I have a javascript onClick function to select the <li> from navbar:
<script type="text/javascript">
var oldpg = "#home";
$(document).ready(function() {
$('#nav ul li').click(function() {
//here are the codes to hide/show divs });
});
</script>
But when you click those <li> nothing happens. I think the js is not picking up the elements from the php. How can I refer to those elements in a separate php file?
You need to fix your JavaScript:
$(document).ready(function() {
$('#nav ul li').click(function() {
//here are the codes to hide/show divs });
});
}); // you left off this closing
You can use Chrome DevTools or Firebug to view the console.
Use on and try. Not tested but that may be the problem here. Try
$(document).ready(function() {
$(document).on('click', '#nav ul li', function(e) {
//Your code
});
});
Also make sure that you included jQuery library
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
The code you showed us is correct. As long as the div with id "nav" is indeed being displayed, make sure you are including the jQuery library correctly. If it is, your error must reside inside whatever you did inside the click event handler $.click (in //here are the codes to hide/show divs).
Thanks for replying #Retsam #Campari #Chris #Ankit
As #Retsam said, I tried with Chrome console and found the error to be
Uncaught reference error: $ not defined (Firebug console didn't give any error/message)
The reason was because I had put my code before linking with the jQuery library.
So I moved my
<script src="scripts/jquery-1.3.2.min.js" type="text/javascript"></script>
above the onClick function and it worked.
Silly me ...
Thanks guys
How to make a sliding up horizontal DIV container using jquery? So far I have the below-provided code. The problem is that the content of <h1 id="filter_content">Content</h1> is initially not hidden. Also I've seen very nice looking sliding up menus, something like the first screenshot here. So, when user clicks on +, the content slides up. Where can I actually find a sample code or some example?
<div id="filter">
<h1>Filter</h1><br>
</div>
<h1 id="filter_content">Content</h1>
<script>
$('#filter').click(function() {
if ($("#filter").is(":hidden")) {
$("#filter_content").show("slow");
} else {
$("#filter_content").slideUp("slow");
}
});
</script>
Hiya working demo click here or Initially hidden demo here
using slideToggle API: good read http://api.jquery.com/slideToggle/ Will do the trick for the exact behavior you are looking for.
code
$('#filter').click(function() {
$("#filter_content").slideToggle("slow");
});
I'm having issues getting jQuery tooltips (using Tipsy) to work. The tooltips work fine on regular pages, but I actually need the tooltips on a page that I am including through PHP. The reason why I'm including that page, is because I'm also using jQuery to auto-refresh that included page every x milliseconds.
It appears that this auto-refresh mechanism is keeping the tooltips from functioning properly. When I remove that mechanism, the tooltips appear but that part of the page obviously does not reload itself anymore at an interval. I'm looking for a way to get Tipsy to work while making sure my included page refreshes itself.
I include my page as follows:
<div id="vardisplay">
<?php include("vardisplay.php"); ?>
</div>
I then use the following script to refresh the "vardisplay" DIV, resulting in my included page to be reloaded:
<script>
$(document).ready(function() {
$('#vardisplay').load('editarticle.php?bid=<?php echo $bnummer ?> #vardisplay');
var refreshId = setInterval(function() {
$('#vardisplay').load('editarticle.php?bid=<?php echo $bnummer ?> #vardisplay')}, 750);
$.ajaxSetup({ cache: false });
});
</script>
The object I would want a Tipsy tooltip on (within my included page) could be something like:
<div id="TipsyMe" title="I got tipsied">
<p>Testpiece</p>
</div>
I'm currently trying to achieve that particular tooltip by putting this script on that page, which is supposed to show "I got tipsied" in a Tipsy tooltip:
<script>
$(function() {
$("#TipsyMe").tipsy({gravity: 's'});
});
</script>
What ends up showing is a regular browser tooltip where jQuery is fully ignored. Again, it works fine when I remove the auto-refresh mechanism on the main page.
I'm dumbfounded at this point. I've been Googling for the past few hours without any result what-so-ever. Any help would be greatly appreciated!
in the tipsy doc, you can stumble upon an option called "live"
$(function() {
$("#TipsyMe").tipsy({
gravity: 's',
live: true
});
});
shall do it. (as you seem new, accepting answer will attract people for your future answer hint hint hint :P)
be careful thou: "live tooltips do not support manual triggering." (from the doc)
EDIT: didn't see properly your code:
$(function() {
$("div.someTotal").tipsy({
gravity: 's',
live: true,
title: "I got tipsied"
});
});
"someTotal" is the class for all you "boxes" where you have the edit and delete icon. If you don't have such class yet, you can create one (you can name it tipsy by example) and use it ($("div.tipsy").tipsy({...