I am new to dojo. I am debugging a js that's using dojo 1.9.1
require(["dojo/ready", "dojo/hash", "dojo/topic"], function (ready, hash, topic) {
ready(function(){
try {
dimXsl = getDimensionXSLT("somepath.xsl"); // 1
topic.subscribe("/dojo/hashchange", callback); // 2
var djConfig = ""; // 3
djConfig.hashPollFrequnecy = 10; // 4
} catch (e) {
console.log('Error ' + e);
}
});
});
function callback() {// blbla }
The above code works for IE8 and above to fire callback(), but not IE7.
My investigations:
I searched Dojo documentation. for version 1.7, the doc https://dojotoolkit.org/reference-guide/1.7/dojo/hash.html suggests a blank html page. So, I did below:
change js dojo link to 1.7 when href it.
Added blank blank.html in project, and replaced //3-4 with
var dojoConfig = "";
dojoConfig.hashPollFrequnecy = 10;
dojoConfig.dojoBlankHtmlUrl = "/blank.html";
Another replacement //3-4 try was:
var dojoConfig = {
hashPollFrequnecy: 10,
dojoBlankHtmlUrl: "/blank.html"
};
But no luck. I also tried to carry above changes with dojo version 1.9.1, but still no luck.
Any ideas please? Thank you very much.
Related
Here I create a jqueryui dialog from an iframe and populate the iframe with some html.
In firefox this displays nothing until I add the alert. Is there a better way to convince firefox to draw the iframe?
http://jsfiddle.net/jtmx00f4/6/
function fancyDialog(htm) {
$('<iframe></iframe>').dialog({
open: function () {
//alert('presto!');
var doc = this.contentDocument || this.contentWindow.document;
doc.body.innerHTML = htm;
}
});
}
fancyDialog('<html><body><p>Hello</p></body></html>');
While #dandavis fiddle does work in firefox, I also found a more complete solution in this article which does not require setTimeout.
http://jsfiddle.net/jtmx00f4/9/
function fancyDialog(htm) {
$('<iframe></iframe>').dialog({
open: function () {
this.contentWindow.contents = htm;
this.src = 'javascript:window["contents"]';
}
});
}
fancyDialog('<html><body><p>Hello</p></body></html>');
I'm new to the Jquery world and am having an issue with the code below. I'm hoping you can let me know what I'm doing wrong.
<script type="text/javascript">
$(document).ready(function () {
$('#SocialSecurity').on('input', function () {
var newNum = jQuery('#SocialSecurity');
if (newNum.val().contains("x")) {
newNum.val("");
} newNum.clone().attr('alt','999-99-9999').insertAfter('#SocialSecurity').prev().remove();
$('#SocialSecurity').focus();
});
});
</script>
The issue I am having is that my application has a SSN box which on page load,for security reasons, is populated xxx-xx-9999. However, if a user wants to update it I am attempting to clone the box, but changing the format to 999-99-9999.
The code above works fine in Firefox, however in Chrome and all versions of I.E. the field is not auto-inserting the dashes for the SSN. This causes the authentication to fail.
A few changes I've tried after research that have not worked are,
Changing the attr() to prop()
Changing the $ to Javascript
I appreciate any advice you can give me. Also let me know if I need to provide any additional information/code.
Regards,
I believe this is what you are trying to do.
JSFiddle
$(document).ready(function () {
$('#SocialSecurity').on('input', function () {
var $ss = $(this);
var ssval = $ss.val();
if (ssval.indexOf("x") > -1) {
$ss.val("");
} else {
ssval = ssval.split(/\D+/g).join('');
ssvals = ssval.match(/(\d{1,3})(?:(\d{1,2})(\d{1,4})?)?/);
if (ssvals) {
ssvals.shift();
ssval = ssvals.filter(Boolean).join("-");
}
$ss.val(ssval);
}
});
});
Please try this
Demo: jsFiddle
$(document).ready(function () {
$('#SocialSecurity').on('input', function () {
var newNum = jQuery('#SocialSecurity');
if (newNum.val().indexOf("x")) {
newNum.val("");
} newNum.clone().val('999-99-9999').insertAfter('#SocialSecurity').prev().remove();
$('#SocialSecurity').focus();
});
});
I'm developping a Firefox based on jQuery as described in this Answer here.
After implementing the example provided in the answer, eveything works fine, but the problem is the code between Firefox Tabs is somehow linked, and example.doc always refers to the last opened tab.
Opened tab1 : the plugin-example has been added and to the current page.
this.doc refers to tab1.
Oepened tab2: the plugin-example has been added to to current page (tab2).
this.doc now refers to tab2
back to viewing tab1 : this.doc still refers to tab1.
clicking on plugin-example on tab1 will act on the plugin-example in tab2 instead.
How can I make my code independent between tabs?
Here is an excrept from the code:
(function() {
jQuery.noConflict();
$ = function(selector,context) {
return new jQuery.fn.init(selector,context||example.doc);
};
$.fn = $.prototype = jQuery.fn;
example = new function(){};
example.run = function(doc,aEvent) {
if (doc.getElementById("plugin-example")) return;
this.doc = doc;
this.main = main = $('<div id="plugin-example">').appendTo(doc.body).html('Example Loaded!');
this.main.click(function() { //<--- added this function
example.main.html(example.doc.location.href);
});
main.css({
background:'#FFF',color:'#000',position:'absolute',top:0,left:0,padding:8
});
};
// Bind Plugin
var delay = function(aEvent) {
var doc = aEvent.originalTarget; setTimeout(function() {
example.run(doc,aEvent);
}, 1);
};
var load = function() {
gBrowser.addEventListener("DOMContentLoaded", delay, true);
};
window.addEventListener("pageshow", load, false);
})();
Your code (overlay script) will only run once per window, not once per tab. So there is only one example instance per window. And hence example.doc will be set to whatever dispatched DOMContentLoaded last.
Your function should properly close over the document and avoid global state.
This is who I would write it (then again, I would avoid jquery (in add-ons) like the plague...)
// Use strict mode in particular to avoid implicitly var declarations
(function() {
"use strict";
// Main runner function for each content window.
// Similar to SDK page-mod, but without the security boundaries.
function run(window, document) {
// jquery setup. per https://stackoverflow.com/a/496970/484441
$ = function(selector,context) {
return new jq.fn.init(selector,context || document);
};
$.fn = $.prototype = jq.fn;
if (document.getElementById("my-example-addon-container")) {
return;
}
let main = $('<div id="my-example-addon-container">');
main.appendTo(document.body).text('Example Loaded!');
main.click(function() { //<--- added this function
main.text(document.location.href);
});
main.css({
background:'#FFF',color:'#000',position:'absolute',top:0,left:0,padding:8
});
};
const log = Components.utils.reportError.bind(Components.utils);
// Do not conflict with other add-ons using jquery.
const jq = jQuery.noConflict(true);
gBrowser.addEventListener("DOMContentLoaded", function load(evt) {
try {
// Call run with this == window ;)
let doc = evt.target.ownerDocument || evt.target;
if (!doc.location.href.startsWith("http")) {
// Do not even attempt to interact with non-http(s)? sites.
return;
}
run.call(doc.defaultView, doc.defaultView, doc);
}
catch (ex) {
log(ex);
}
}, true);
})();
Here is a complete add-on as a gist. Just drop in a copy of jquery and it should be good to go.
PS: Reposted this at in the jquery in extensions question
I have written a plugin that depends on external libraries that I want to include conditionally, that is, the user can choose to not have them be included automatically in case the user's web site already has those libraries. Here is some pseudocode to illustrate the issue
<script type="text/javascript" src="path/to/plugin.js"></script>
<script type="text/javascript">
PLUGIN.init({
"param1": "foo",
"parma2": 33,
"include": {"jquery": 0, "googlemaps": 0}
});
</script>
In my plugin script
var PLUGIN = {
"init": function(obj) {
if (obj.include.googlemaps !== 0) {
document.write('<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true&v=3.6">\x3C/script>');
}
if (obj.include.jquery !== 0) {
document.write('<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js">\x3C/script>');
}
.. do more things ..
}
The problem is that when I am ready to "do more things," the libraries don't seem to be loaded yet. I get an error that jquery not found, or google maps not found. I can solve this by changing my code to
document.write('<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true&v=3.6">\x3C/script>');
document.write('<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js">\x3C/script>');
var PLUGIN = {
"init": function(obj) {
.. do more things ..
}
but now the user can't control loading the libraries or not loading them. Suggestions? Workarounds?
Update: Thanks for the suggestions, you all, but no joy so far. Here is what I am doing, and what is happening. Since I am potentially loading 0 or more scripts (the user can optionally decide which scripts need not be loaded), I have made my code like so
"importLib": function(libPath, callback) {
var newLib = document.createElement("script");
if (callback !== null) {
newLib.onload = callback;
}
newLib.src = libPath;
document.head.appendChild(newLib);
},
"init": function(obj) {
var scripts = [];
if (obj.include.googlemaps !== 0) {
scripts.push("http://maps.google.com/maps/api/js?sensor=true&v=3.6");
}
if (obj.include.jquery !== 0) {
scripts.push("http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js");
}
if (obj.include.anotherlib !== 0) {
scripts.push("http://path/to/another/lib.js");
}
var len_scripts = scripts.length,
callback = null;
if (len_scripts > 0) {
for (var i = 0; i < len_scripts; i++) {
// add callback only on the last lib to be loaded
if (i == len_scripts - 1) {
callback = function() { startApp(obj) };
}
importLib(scripts[i], callback);
}
}
// Start the app rightaway if no scripts need to be loaded
else {
startApp(obj);
}
},
"startApp": function(obj) {
}
What happens is that Firefox croaks with a attempt to run compile-and-go script on a cleared scope error, and Safari doesn't get that error, but doesn't load anything. Funnily, Safari error console shows no error at all. Seems like the Firefox error is caused by the line document.head.appendChild(newLib); which, if I comment, the error goes away, but of course, the web page doesn't load correctly.
You should add each script as a DOM node and use the onload attribute to take action when it has completed loading.
function importLib(libPath, callback) {
var newLib = document.createElement("script");
newLib.onload = callback;
newLib.src = libPath;
document.head.appendChild(newLib);
}
Above, the libPath argument is the URL of the library, and the callback argument is a function to call when loading is complete. You could use it as follows:
importLib("http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js", function() {
alert("jquery loaded!");
nowDoSomething(aboutIt);
});
By the way: in general, document.write is not a good solution for most problems (but I won't say never the right solution -- there are exceptions to every rule).
the above solution would work in modern browsers but for IE 7/8 u might wanna added little extra code, something like this:
function importLib(libPath, callback) {
var newLib = document.createElement("script");
if (navigator.userAgent.indexOf('MSIE') !== -1) {
newLib.onreadystatechange = function () {// this piece is for IE 7 and 8
if (this.readyState == 'complete') {
callback();
}
};
} else {
newLib.onload = callback;
}
newLib.src = libPath;
document.head.appendChild(newLib);
}
I encountered the same issue. One workaround if you are writing your site in .NET is by conditionally writing the script reference before the page loads from the code behind. My issue is when remote users access my app over VPN, it blocks access to the internet, thus google maps cannot be referenced. This prevents the rest of the page from loading within a reasonable timeframe. I tried controlling the script reference of the google maps library via jQuery's getScript() command, but as you found out, the subsequent google maps configuration code runs before the external library is referenced.
My solution was to conditionally reference google maps from code behind instead:
VB (code behind):
'if VPN mode is not enable, add the external google maps script reference (this speeds up the interface when using VPN significantly)
If Session("VPNMode") = False Then
Dim sb As System.Text.StringBuilder = New System.Text.StringBuilder()
sb.AppendLine("")
sb.AppendLine("<script type='text/javascript'")
sb.Append(" src='http://maps.google.com/maps/api/js?v=3&sensor=false'>")
sb.Append("</script>")
Dim header As LiteralControl = New LiteralControl
header.Text = sb.ToString()
Me.Page.Header.Controls.Add(header)
End If
Client side script (javascript):
<script type='text/javascript'>
$(function () {
if ($("input[name*='VPN']").is(":checked"))
{ }
else {
loadGoogleMap()
}
});
function loadGoogleMap() {
hazsite = new google.maps.LatLng(hazLat, hazLong);
map = new google.maps.Map(document.getElementById('map_canvas'), { zoom: 18, center: hazsite, mapTypeId: google.maps.MapTypeId.SATELLITE });
var marker = new google.maps.Marker({
position: hazsite,
map: map,
title: "Site Location"
});
}
</script>
The code that contains the error is:
var Slide = new Class({
initialize: function(triggers, panels) {
this.triggers = $(triggers).getElements('a[rel=content1-1]');
this.panels = $(panels).getElements('ul[class=rel-content1-1]');
this.active = -1;
this.toggle();
}, ...
})
This is called from later in the same file:
function activateSliders() {
var slide_1 = new Slide('aCol', 'content');
var slide_2 = new SlideTwo('content', 'content2', 'content2-hider');
}
window.onload = activateSliders();
Why does Chrome -- and only Chrome -- calculate $(triggers) as NULL?
In my experience, IE and FF tend to be sporadically generous with letting jQuery code work nicely without it being encapsulated within a $(document).ready( block. Try:
$(document).ready(function() {
activateSliders();
});