dijit.byId not ready at body onload? When are dijits actually available? - javascript

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!

Related

Get the number of a specific class from a parent jquery

So I have this structure on a online website:
<div class="main">
<div class="child-one"></div>
<div class="child-one"></div>
<div class="child-two"></div>
<div class="child-two"></div>
</div>
Now I want to find the number of .child-two in the base div using pure jquery, preferably using the structure: $(selector).someFunction().
I already tried these:
$('.main .child-two').length; //does not work -> undefined
$('.main').find('.child'); // does not work -> Uncaught TypeError: $(...).find is not a function
Which do not work.
Any ideas?
Thanks in advance.
It seems you do not have include jQuery on your main directory, and this code $('.main .child-two').length which you are provided works perfectly fine. You can try this either jQuery or javaScript Thanks.
e.g.
/* JQUERY */
console.log($('.main .child-two').length);
/* JAVASCRIPT */
var parent = document.querySelector(".main").children;
parent[2].innerHTML = "Hello World"; // examples
parent[2].classList.add("active"); // examples
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<div class="main">
<div class="child-one"></div>
<div class="child-one"></div>
<div class="child-two"></div>
<div class="child-two"></div>
</div>

How to slide down dynamic content using jQuery?

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.

How to change static text in a web page using inner html?

I have some text in a website that I want to change using javascript because I can't change it any other way.
In short, the site is laid out like such:
...some other divs before here, body, head, etc...
<div id="header" class="container-fluid clearfix">
<div class = "hero-unit">
<h1 class="title">Support Center</h1>
...some other divs for other parts of the page...
</div>
</div>
...more divs, footer, etc...
I don't need the text to change on click or anything like that I just want it to be set on load to something different than Support Center but I'm not sure if I'm placing the script in the correct place or if the syntax is wrong?
I've tried placing it before and after and it doesn't seem to work. Here is the code:
<script type="text/javascript">
var targetDiv = document.getElementByID("header").getElementsByClassName("hero-unit")[0].getElementsByClassName("title")[0];
targetDiv.innerHTML = "Please use the Knowledge Base to find answers to the most frequently asked questions or you may submit a support ticket which will be sent to your COM email account.";
</script>
Thank you.
Looking at the actual source of your page, your page does not contain a h1 element with a class of title.
Your actual source code
<div id="header" class="container-fluid clearfix">
<div class="hero-unit"></div>
<div class="container-fluid clearfix">
<div class="row-fluid">
<div class="leftcolumn"></div>
<div class="rightcolumn"></div>
</div>
</div>
</div>
This means it does not exist till some point after your page loads. You need to put your code after the code that generates the h1 title element
In jQuery (if you can use it), you'd use something like
$("#title").text("Something else");
it looks like you are not getting the specific class to change the html
try with querySelector like i have done
JS Fiddle
var targetDiv = document.querySelector('#header > .hero-unit > h1.title')
targetDiv.innerHTML = "Please use the Knowledge Base to find answers to the most frequently asked questions or you may submit a support ticket which will be sent to your COM email account.";

jQuery access DOM on https - mixed-content security

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.

Fallback for people without Javascript is flashed before jQuery is loaded

I basically have something like this:
<div id="slide-1" style="display:none;">
Not too important stuff
</div>
<div id="slide-2">
Important stuff
</div>
<script>
$('#slide-2').hide(0,function(){
$('#slide-1').fadeIn();
});
</script>
However, "slide-2" is showing up for about half a second before the jQuery is executed, and the files are all on my computer. If someone else views it, the delay would be long. How can I prevent the user from seeing "slide-2"?
You can use the noscript tag to show content to individuals without javascript. So something like this should work.
<noscript>
<div id="slide-2">
Important stuff
</div>
</noscript>
Don't use jQuery for hiding that little div. The delay may be due to the browser waiting for jQuery to download. Use simple javascript right after it like so:
<div id="slide-1" style="display:none;">
Not too important stuff
</div>
<div id="slide-2">
Important stuff
</div>
<script>
document.getElementById('slide-2').style.display = 'none'
</script>
Slide-2 could be hidden with display:none;
Without knowing exactly how the slides work, it's difficult to say how appropriate the solution is.

Categories