index.php
// load jquery.js and jquery.ui.js
$("#dialog_a").load("template_a.php").dialog();
$("#dialog_b").load("template_b.php").dialog();
template_a.php
just HTML, no JS
template_b.php
// !!! -> load jquery.js and jquery.ui.js <- !!!
$("#dialog").load("template_c.php").dialog({modal:true});
As you can see, I load two dialogs. #dialog_a just loads text without any function BUT #dialog_b loads a stand-alone-script which includes jquery and jquery.ui again.
After opening #dialog_b (by anchor/onclick) it's not possible to access objects in the index.php (e.g. closing a dialog). For me it seems like template_b.php overwrites the DOM. But I've no idea how to fix this problem. Do you have?
Thanks in advance!
Solution: use the jQuery live() function!
index.php
$(".anchor_in_dialog_or_not_doesnt_matter").live("click", function() {
$("#dialog").dialog();
});
template_b.php
if ($_GET["standalone"])
// load jquery, jquery.ui
endif;
I hope it helps somebody!
Edit: As adamb already mentioned below, use on() instead of live()!
Related
Maybe I am so noob with jQuery but cant reach my objective. I need to add the attribute target="_blank to all the links inside certain divs. But anything I do works.
I have checked for jquery loaded with:
if(wp_script_is('jquery')==false) {
wp_enqueue_script("jquery");
}
Using the the following code nothing happens:
jQuery("#adagal").html("<p>asdf*</p>");
The #adagal element remains with previous content. I have checked in the source if my javascript file was correctly added, and it is.
<script type='text/javascript' src='http://localhost/wordpress/wp-content/plugins/AdManagerAdagal/js/ads/show_ad.js?ver=4.3.1'></script>
So, what is the problem¿?
Use that:
jQuery(document).ready(function($)
{
$(".your_class a").attr("target", "_blank");
});
Don't forget $ in ready(function to use jquery in your js
I've never done Javascript,
On the website I've added rel="shadowbox" to the posts to pull up the lightbox of the post. The template has infinity-scroll built in and I've seen that you have to use a callback to make shadowbox work on the new posts. The problem is where do I put the code and how?
Example:
$("#container").on("focusin", function(){ $("a.ajaxFancyBox").fancybox({ // fancybox API options here 'padding': 0 }); // fancybox }); // on
Do I put this in the head in a script tag?
You could include it in the head of your website if you'd like... something like this may work for you:
<script>
$(function(){
$("#container").on("focusin", function(){ $("a.ajaxFancyBox").fancybox({
// fancybox API options here 'padding': 0
}); // fancybox
});
});
</script>
If you're not so much a programmer and want a top-notch modal plugin (lightbox), I suggest checking out Easy Fancybox. It works and looks great. http://wordpress.org/extend/plugins/easy-fancybox/
Scratch that, Took Shadowbox & Easy FancyBox out completely.
Used Wordpress Built in Thickbox
Above the post added
<?php add_thickbox(); ?>
add a class
class="thickbox"
At the end of the link added because it was an iframe
?KeepThis=true&TB_iframe=true&height=400&width=600
Which I think does it's own callback (I Can't find if I put it in)
If so add the following to the header.php
<script> tb_init( $('a.thickbox, area.thickbox, input.thickbox',this) );</script>
Like I said I don't think it needs it.
Thanks for your help though.
I am trying to enable the bootstrap tooltips in Gantry 4.
The bootstrap javascript is loaded, as bootstrap.min.js as is jquery.
I added the following to the index.php file just before the closing body tag
<script type="text/javascript">
$(document).ready(function () {
$("[rel=tooltip]").tooltip();
});
</script>
I seem to have a conflict as I get the following error:
TypeError: 'undefined' is not a function (evaluating '$(document).ready(function () {
$("[rel=tooltip]").tooltip();
})')
The text that is supposed to trigger the tooltip is:
le cas d’un mariage de longue durée
Can someone please point out what I need to do to resolve this? Thanks.
Sorry, I forgot to add the link to the site and page where the tooltip is not functioning.
http://gobet.ergonomiq.net/divorce-séparation/divorce/26-requérir-seul-le-divorce-après-deux-ans-de-séparation#
You have MooTools active on the website, so the $ selector doesn't work like it would if jQuery were the primary $ selector agent. You'll need to convert the uses of $ where jQuery is expected to use jQuery instead.
Example:
$(selector here)
should be:
jQuery(selector here)
And everything else will work fine.
Ensure that you have only 1 jQuery library being loaded and that it is at the top of the list. If not, then your bootstrap.min.js file won't work.
If this is done and it's still not working, try adding the code like so:
$document = JFactory::getDocument(); //remove is this line is already being used
$js = "$(document).ready(function(){
$('[rel=tooltip]').tooltip();
});";
$document->addScriptDeclaration($js);
Hope this helps.
Add the bootstrap framework to the component.php of your template:
JHtml::_('bootstrap.framework');
This should solve the ".tooltip is not a function" error
In your Joomla Project, open templates/<your-template-name>/index.php.
find JHtml::_('behavior.framework', true); and comment it out.
OR You can just replace the word behavior with bootstrap.
New to posting on stackoverflow here, so my apologies in advance if I messed anything up here.
I'm using Twitter Bootstrap's popovers. My popovers seem to be working for elements that I manually type into my HTML document - but NOT the elements that I dynamically generate via Javascript / Ajax.
For example, the popover seems to work if I manually add this directly to my HTML document:
<p rel=popover data-content='It is so simple to create a tooltop for my website!' data-original-title='Twitter Bootstrap Popover'>hover for popover</p>
But what I really need is for my dynamically generated elements to have popovers. I use an XMLHttpRequest to send a request to a PHP file, and then grab the responseText and display it. When I add this line of code to my aforementioned PHP file:
echo "<p rel=popover data-content='It is so simple to create a tooltop for my website!' data-original-title='Twitter Bootstrap Popover'>hover for popover</p>";
... surely enough, the words "hover for popover" appear - but the popover itself doesn't work!
This has been driving me nuts for some time and it would be incredible if someone could lend me a helping hand! I've also added the JQuery function I'm using to enable Bootstrap's popovers below, for what that's worth.
$(function (){
$("[rel=popover]").popover({placement:'left'});
});
I've done a thorough search of similar problems and the best I could find was this link. But that link doesn't seem to have any solutions either. Thanks in advance again!
UPDATE:
Fixed! Many thanks to everyone who helped out. My problem was that the function was being called BEFORE the elements were added into the Document Object Model. There are multiple possible fixes - I simply tested out the solution by shifting the popover function to the END of the Ajax function and it worked!
You need to call $("[rel=popover]").popover({placement:'left'}); AFTER the elements are in the DOM.
UPDATE
If you are using jQuery
$(element_selector)
// load results into HTML of element_selector
.load('your/php/file')
// when done, initialize popovers
.done(function(){
$("[rel=popover]").popover({placement:'left'});
});
OR a catch all for jQuery ajax requests
$.ajaxComplete(function(){
$("[rel=popover]").popover({placement:'left'});
});
In the success function of the ajax you need to call the popover. Something like this
success:function(){
$("[rel=popover]").popover({placement:'left'});
}
This Function will work properly in the selector you have to specify the location on the page where you have to search "rel=popover" like I put *
$(function ()
{
console.info($("*[rel=popover]"));
$("*[rel=popover]").popover();
});
One of the scripts added in between the <head> element kills my other javascript. Is their a way to isolate it or not to interfere with other scripts? I need this only for one page, not for the whole site ,etc. frontpage.php. Tried to add the script only to this page, but it dont work, as it seems what it only works than I put in between <head></head> elements.
This is the killer script:
<script type="text/javascript">
$(document).ready(function() {
$.noConflict();
<!-- THE ACTIVATION OF THE MINI IMAGE SLIDER PLUGIN -->
jQuery('#first_mini_slider').minislides(
{
width:980,
height:320,
slides:5,
padding:30,
ease:'easeOutQuint',
speed:400,
hidetoolbar:2000,
animtype:1,
mousewheel:'on'
})
<!-- THE ACTIVATION OF THE LIGHTBOX PLUGIN -->
jQuery('.freshlightbox').fhboxer({})
jQuery('.freshlightbox_round').fhboxer({
hover_round:"true"
})
});
</script>
The script you posted puts jQuery into "noConflict" mode, which means that the $ used to refer to jQuery will no longer work. You can still refer to jQuery with jQuery i.e. these two are equivilent:
$('.freshlightbox')
jQuery('.freshlightbox')
If this is what is causing problems with your other scripts you can do one of the following:
don't put jQuery into noConflict mode
change your other scripts to use jQuery instead of $
put the following code around your other scripts:
(function($){
// your code goes here
})(jQuery);
more detail on the last here: https://stackoverflow.com/a/4484317/12744