Dojo addOnLoad fires before widget loaded in FireFox - javascript

I am using both IE and Firefox for testing. The Dojo addOnLoad works for both browsers BUT for Firefox, it fires before my Dojo TabContainer is initialised. For IE, it is working fine. Is there any other Dojo / Javascript / jQuery method to circumvent this problem?
Script
<script>
dojo.addOnLoad( function(){
alert("Tabcontainer loaded");
});
</script>
TabContainer
<div dojoType="dijit.layout.TabContainer" id="TabContainer">

I apologize, but I haven't used Dojo in over a year, so I've forgotten it all. Maybe try dojo.ready(), or you could try adding djconfig="parseOnLoad:true" to the <script> tag where you include the Dojo JS file. I have no idea if either of these methods will work, but it can't hurt to try :)
Edit: maybe a call to dojo.parser.parse(); in your onload handler will do the trick? (in conjunction with parseOnLoad:false?)

I have fixed it! This is done by including the first jsp page using the <%#include> This will definitely initialise the TabContainer so that future tabs can be added.

Related

Click function not working using jquery on tablet device inside document ready

I am not a JS developer, I am just a Web Designer dealing with simple JS interaction most of the time.
I am using jquery-1.11.3 and jquery.mobile v1.4.5 with just core features and slider capability.
As tablet I have a kindle with the firefox (beta) browser and an ipod with safari browser.
I am having a problem in understanding some JS behaviours of tablets and browsers regarding the click event function and document ready
$(function(){
$('.menu-ham').click(function(){
alert("test")
});
});
the click event doesn't work on tablets but it works perfectly on web browsers.
Instead if use this outside the document ready
$(document).on('click', '.menu-ham', function(){
alert("test")
})
it works like a charm. Only that I am not sure if this it would create problem with the browser because not inside document.ready
I tried to use as well
$(function(){
$('.menu-ham').on('click', function(){
alert("test")
});
});
inside or outside the document ready and nothing works.
"menu-ham" it is a button with that class. I read about a lot of topics, who said to use cursor:pointer, who said to use ".on('click'" instead of the normal click event, or vclick, or bind or touchstart but none really worked a part the solution that I offered, and now I am very confused about the whole thing on why is working and the other are not when I read a lot of comments that the other solution should work.
Any help would be very much appreciated, thank you!
I found the problem! it was all fault of Phalcon debugbar. On the mobile devices was generating an error that it wasn't happening on the normal browser. This error was making any jquery or selectors working.
Thank you for your help and support!

tooltip jquery method not working on IE

I am running my App on Internet Explorer. There seems to be some issue with JQuery method:
$('.tooltip-demo').tooltip({
selector: "a[rel=tooltip]"
})
for which, i get the following error on the javascript console:
Object doesn't support property or method tooltip
What can be the cause of this error? please help.
There's no standard tooltip() function in jQuery, it's provided by a plugin. Ensure that you're a. loading the plugin and b. loading it after jQuery by placing the <script> tag for the plugin after the one for jQuery.
It looks like you're using a tool tip plugin for jQuery, but it hasn't been loaded when you make the call.
If this code is being run when the page loads, you should put it into a $(document).ready() function, to ensure that all the supporting libraries are loaded before it runs. This should solve the problem.

jquery (null is null or not an object) error on IE8

When I load jquery using:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
it works on IE9, firefox, chrome, safari but not IE8. I tried the developer/debugger tools but still don't understand why this is an issue.
This is the character code jquery supposedly has error on: 32039.
On that line there is such function:
G=function(a){
var b=F.exec(a);
b&&(b[1]=(b[1]||"").toLowerCase(),b[3]=b[3]&&new RegExp("(?:^|\\s)"+b[3]+"(?:\\s|$)"));
return b
}
Anyone came across this issue as well?
The site is http://www.kanersan.com
I am not calling jquery before it is loaded and I'm loading it inside the head tag.
This is a bug in jQuery 1.7.1 when used with SyntaxHighlighter
http://bugs.jquery.com/ticket/10961
So you have to upgrade jQuery to 1.7.2 and everything will be working fine.
try to folow some steps:-
1.jQuery is not being loaded, this is not likely specific to IE8. Check the path on your jQuery include. statement. Or better yet,.. TRy to give direct path.
2.May be because of compatibility issue.. Try to give compatibility solutions..
Things worked in IE6, Firefox, and IE8 running in IE7 compatibility mode; but not in 'normal' IE8. My solution was to put this code in the header
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
As to why jquery isn't working in IE8 I'm unclear.
3.Try to load your jquery on window load.
4.Try to define your jquery file in top..
5.Very important point - try to check your html and jquery code.. IE is very sensetive for code.. so cross check your Html code ,... Is everything is fine..
6.Changing browser sercurity level to allow executing external javascript code.
7.Replicate javascript framwork..
May this will help You !!!!!!!!1
Some things worth trying...
Remove type="text/javascript" like so: <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
Make sure you reference jquery.min.js before your javascript code that uses jQuery.
Most probably, the above suggestions will not help, but since the problem sounds IE8 specific, I believe it's worth a try doing some trivial things that might solve the problem.

headjs multiple onready calls in IE8

Using IE8 and headjs
I have a template header template file that has a head.ready(function(){}) in it. This page is loaded my all my pages.
On some page, I have scripts in the code that call the head.ready (which means it would be on the page twice because of the above header template). I noticed that putting an additional head.ready(function(){}) works in Chrome/FF, however it appears not to work in IE8. Only the first ready call seems to work. The second one does not fire.
Does anyone know if this is an issue in IE8 and if there is a simple workaround?
It might be an untested bug with IE8.
You'll probably have to poke at the source code which is never fun or try reporting it to the author.
Did you try any alternatives? YepNope? RequireJS? LabJS?
I wrote my own to be as small and simple as possible:
https://github.com/sgarbesi/fallback.js

JavaScript code in iframes in IE9 not working

I've a very complete site in ASP.NET which uses iframes. I'm working to change an old control we'd been using to show dialogs to use jQuery UI dialogs. I'm also making sure everything works well in IE9.
The fact is: the script I've in the pages shown in iframes is not working in IE9. Why? Because Object, Array and String are undefined. There may be some others issues, I've seen only this ones.
There is no chance (because a lot of reasons) to stop using iframes on some dialogs. And I'd rather not to use the meta tag to force IE8 Compatibility. Does anyone know any way to fix this ugly bug in IE9?
jQuery code for the iframe in a plugin I've made to config jQuery UI dialog:
options.content = $("<iframe>")
.attr("src", options.intSrcIframe)
.attr("frameborder", 0)
.attr("scrolling", options.intIframeScrolling)
.css("background-color", options.intBgColorIframe)
.attr("height", "100%")
.attr("width", "100%");
_this.html(options.content);
Note: here there is some documentation from IE9 that may help to understand. Thanks to #Ben Amada for sharing it.
After almost a week of going crazy day after day I found it out.
The problem with IE9 is no specifically with the javascript code in the iframes. Not even with the javascript in iframes added by javascript or any library (I have lots of js libraries and plugins that could be screwing IE9).
The problem is when you move the iframe or one ancestor through the DOM. IE9 will excecute the code in the page loaded in the iframe as many times as moves you make. Each time (but the last one) will have Object, String, Array and others undefined (and other bugs too).
Example:
var iframe = $("<iframe>").attr("src", "www.example.com").attr("id", "myIframe");
iframe.appendTo("body");
$("#myIframe").appendTo("form:eq(0)");
The javascript code in "www.example.com" will be executed once with the error described above and then once with no errors.
With the following code the code will be excecuted just once and correctly:
var iframe = $("<iframe>").attr("src", "www.example.com").attr("id", "myIframe");
iframe.appendTo("form:eq(0)");
I hope this helps someone to avoid this pain in the ass,
Diego
There is a similar way of achieving this using an existing iframe if you aren't creating a new element.
$(function () {
var iframeSrc = $("#iframeid").attr("src"); // capture target URI
$("#iframeid").attr("src", "about:blank"); // delay loading until we reposition in the DOM
$("#iframeid").appendTo("#newparent").attr("src", iframeSrc); // reposition, load iframe by setting src
});
IE9 or jquery framework needs to fix this issue.
I'm having a similar issue, however the iframe is added to the page rather than removed from it. It still appears to have the same problems.

Categories

Resources