Html:
<section id="playing" class="gradient">
<div id="playing-header"> … </div>
<div id="playing-carousel"> … </div>
<div id="playing-info">
<a id="radio-star" class="" href="radio:star"></a>
<div id="radio-track-info">
<h2 id="radio-track"> … </h2>
<h2 id="radio-artist">
<a class="outgoing">
JAY Z
</a>
</h2>
</div>
<div id="thumb-container"> … </div>
</div>
<div id="loading" style="display: none;"></div>
<div id="loading-throbber" style="display: none;"></div>
<div id="station-error" style="visibility: hidden;"> … </div>
jQuery:
alert($('#radio-artist .outgoing').text());
jsfiddle:
http://jsfiddle.net/CT95N/
Works on jsfiddle, but not on website. returns empty. what could be the problem? what could i check to call my jquery after dom?
thanks
Edit:
$(document).ready(function() { }; is of course already called in the start, so that is not the point.
The problem is that FIREFOX is blocking the content, since I am working on https website and trying to get some data from that site. Since the site doesn't use jQuery I had to append it by myself which means that I am adding http content inside of https website. I think this happens because I am adding jquery external source(appending) from google via greasemonkey script.
This is the warning:
http://i.imgur.com/oV19dFz.png
Can I somehow do this in better way?
The most likely answer is that the document isn't ready yet, you should wait til the doc is loaded:
$(document).ready(function() {
alert($('#radio-artist .outgoing').text());
});
"what could i check to call my jquery after dom?"
I assume that means you haven't wrapped this alert with anything. You most likely need to ensure that the function is only called once the document/DOM is ready and rendered. jsfiddle works because they most likely add this wrapping for brevity in your source snippets.
$(document).ready(function() {
alert(....);
});
Ok figured it out. When you work with https you have to append jQuery CDN from hTTPS instead of HTTP:
function appendjQuery(){
var script = document.createElement( "script" );
script.type = "text/javascript";
script.src = "https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js";
document.body.appendChild(script);
document.body.removeChild(script);
}
Cheers.
try this code
$(document).ready(function(){
alert($('#radio-artist .outgoing').text());
});
According to this code the jQuery will called when the DOM is ready.
Related
I am working with prestashop 1.7.I wrote jQuery code that affect on the category page. And I put it in the file path below:
public_html/themes/panda/assets/js/theme.js
But it will work only after refresh page. Is the code wrong? Is the file path wrong? Or should I introduce this jQuery code? Should I convert jQuery to Javascript? If so, how? Thanks
$(document).ready(function() {
$(".hover_fly .hover_fly_btn").mouseover(function() {
$(this).parents('.pro_first_box').find('#overlayToOpen').css('display', 'block');
});
$(".hover_fly .hover_fly_btn").mouseout(function() {
$(this).parents('.pro_first_box').find('#overlayToOpen').css('display', 'none');
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<div class="pro_first_box">
<div id="overlayToOpen">every things</div>
<img src=" ">
<div class="hover_fly ">
<a class="hover_fly_btn " href="# ">
<div class="hover_fly_btn_inner "><span>More info</span></div>
</a>
</div>
</div>
Make sure that the target element of your script exists in your page. In your case it is the element that has a class "hover_fly hover_fly_btn". If you are sure that the target element exists, add console.log() to your function to help you debug the problem and to make sure that the code was executed.
I have a comment system and I would like to implement the "Show Replies (2)" slide down effect.
This is an example of my setup.
<div class="comment">
<div class="main-comment">
Message.
Show Replies (1)
</div>
<div class="sub-comment">
Funny comment up there, mate.
</div>
</div>
But because both the main comment and its sub comments are dynamically generated using ajax, setting event handlers was a little tricky. This is how I did it:
$(".comment").delegate('.show-replies', 'click', function(event) {
$(this).parent().next(".sub-comment").slideDown();
});
I've tried to make the setup as simple and close to the real thing as possible.
What am I doing wrong and how do I solve it?
<div class="comment">
<div class="main-comment">
Message.
Show Replies (1)
</div>
<div class="sub-comment" style="display: none">
Funny comment up there, mate.
</div>
</div>
<script>
$(document).ready(function() {
$('.show-replies').on('click', function() {
$('.sub-comment').slideToggle();
});
});
</script>
In order to bind to NEW dynamic content you need to tell jquery where it is going to be.. Also make sure to use the latest jQuery, delegate is old.
<div class="comments">
<div class="main-comment">
Message.Show Replies (1)
</div>
<div class="sub-comment" style="display: none">
Funny comment up there, mate.
</div>
</div>
<script>
$(document).ready(function() {
$('.show-replies').on('click','.comments', function() {
$('.sub-comment').slideToggle();
});
});
</script>
Notice the .on(eventType, selector, function) signature.
This will work for dynamic content, anything loaded INTO the div class 'comments' - jQuery will always travesre that container from fresh, instead of caching it.
Also- dont just do it on the entire page,because it will cause slow response, since, every click, it will try and bind to the selector.
Replacing
$(this).parent().next(".sub-comment").slideDown();
with
$(this).parent().parent().next(".sub-comment").slideDown();
Fixed the problem.
I'm trying to get Addthis to work in a div tag that's being loaded with AJAX I read on their site I had to render the toolbox with javascript http://support.addthis.com/customer/portal/articles/381263-addthis-client-api
I'm using the code below but it doesn't seem to be working, any help with the function is appreciated. Thanks.
<div id="toolbox"></div>
<script type="text/javascript">
addthis.method('#toolbox', [configurationObject], [sharingObject]);
</script>
Since I don't know that much about your particular problem, I'd start start by looking into addthis.toolbox('.yourClass');
If you have a typical toolbox like this...
<div id="myToolbox" class="toolbox addthis_toolbox addthis_default_style ">
<a class="addthis_button_facebook" style="cursor:pointer"></a>
<a class="addthis_button_twitter" style="cursor:pointer"></a>
<a class="addthis_button_email" style="cursor:pointer"></a>
</div>
Once your ajax content has finished loading into the dom you could do the following...
addthis.toolbox('#myToolbox');
However, watch out for this!
Don't put your like button inside your toolbox because when you call the addthis.toolbox method it will create a duplicate like button iframe for some reason. It must be a bug but it took a couple years off my life. Instead you should put it in its own toolbox containing div and call the method on it as well.
In the case of multiple toolboxes
you should probably use a class instead. See the following code for the final example.
html
<div class="toolbox">
<a class="addthis_button_facebook_like" fb:like:layout="button_count" addthis:userid="myCompany"></a>
</div>
<div class="toolbox addthis_toolbox addthis_default_style ">
<a class="addthis_button_facebook" style="cursor:pointer"></a>
<a class="addthis_button_twitter" style="cursor:pointer"></a>
<a class="addthis_button_email" style="cursor:pointer"></a>
</div>
javascript:
//on complete of ajax load
addthis.toolbox('.toolbox');
var addthis_config =
{
ui_hover_direction: -1
, ui_offset_left: offsetLeft
, ui_offset_top: -45
, ui_delay: 300
, ui_click: false
};
var addthis_share =
{
url: 'http://www.example.com',
title: 'example title'
}
addthis.method("#Button2", addthis_config, addthis_share);
Visit http://www.addthis.com/forum/viewtopic.php?f=5&t=14137 this may help you.
method is not a valid function of the addthis object. It's a placeholder in the example for you to use a real method name.
You are never really calling anything as you aren't waiting for the DOM to ready:
<script type="text/javascript">
$().ready(function () {
addthis.method('#toolbox', [configurationObject], [sharingObject]);
});
</script>
I am attemtping to solve an issue I am having and decided to try the event handler for the .load() jQuery function. I am unsure what I did wrong. The example on the jQuery page is:
$('#book').load(function() {
// Handler for .load() called.
});
my script was:
var $j = jQuery.noConflict();
$j('#gallery-nav-instruct').load(function() {
if(!$j.cookie('gallerycookie')){
$j.colorbox({ inline:true, href:"#gallery-nav-instruct"});
$j.cookie("gallerycookie", 1, {expires: 30, path: '/'});
}
});
Why did my script not work?
Here is the HTML related to that script:
<div style="display:none">
<div id="gallery-nav-instruct">
<h2>Gallery Navigation Instructions - Step 1</h2>
<h2 style="text-align:right">
<a style="text-align:right;" class="inline cw" href="#gallery-enlarge-instruct">Step 2</a>
</h2>
<p> </p>
<p class="white">
<img src="/Images/Pages/gallery-navigation.jpg" width="890" height="450" alt="Gallery Navigation Instructions" />
</p>
</div>
</div>
Do you have a way of confirming that the div isn't already loaded by the time the event is bound? In other words, it could be a timing issue. The load completes, the event is bound, but the event is never fired because the load is already complete.
I would be interested in knowing the problem you're trying to solve; rather than trouble-shooting the .load() itself (although that might end up being the tool after all!) it's best to allow room for lateral thinking. For example, I don't see why you couldn't do your cookie check and colorbox initialization on document ready. It may be that the image isn't loaded yet, but I don't think that would break user experience.
Try putting your script at the end of the page. That might work. It will execute only when all the content is loaded as .load() event is called when all the stuff inside the parent is loaded completely.
This should help you
I'm using Dojo toolkit version 1.3.1. I have defined the following dijit in a jsp page:
<div dojoType="dijit.layout.BorderContainer" gutters="false" id="ui_container">
<div dojoType="dijit.Toolbar" region="top">
<div dojoType="dijit.form.Button" id="zoomin" iconClass="zoominIcon">Zoom In</div>
</div>
<div dojoType="dijit.layout.BorderContainer" gutters="false" region="center">
<div dojoType="dijit.layout.ContentPane" id="mapPane" region="center"><div>hi</div>
</div>
</div>
</div>
In the onload event for my body tag I specify a function with this code in it:
var container_id = "ui_container";
// blah blah blah some stuff in the middle here
dijit.byId(container_id).resize({h: new_container_height});
And I get this error when viewing the page: dijit.byId(container_id) is undefined.
It works if I add a check to exit the function and call it again in 100 ms when this value is undefined, but that's a sloppy hack. Is there some more precise way to know when dijits are available for use?
It doesn't really mention this very clearly in the docs I read, but it looks like dojo.addOnLoad was what I was looking for.
Thanks!