I am implementing the NicEdit editor with our own rich textbox ASP.NET control, which is just composite control that includes a TextArea and registers the NicEdit scripts on document ready.
The rich textbox control (and all our pages/controls) are also using JQuery.
The problem is that for some reason a piece of the NicEdit code's nulls out the "$" JQuery alias.
The following line of code executes when the control is loading:
onDomLoaded: function (A) {
debugger;
this.domLoad.push(A);
if (document.addEventListener) {
document.addEventListener("DOMContentLoaded", bkLib.domLoaded, null)
}
else {
if (bkLib.isMSIE) {
document.write("<style>.nicEdit-main p { margin: 0; }</style><script id=__ie_onload defer "+((location.protocol=="https:")?"src='javascript:void(0)'":"src=//0")+"><\/script>");
$BK("__ie_onload").onreadystatechange = function () {
if (this.readyState == "complete") {
bkLib.domLoaded()
}
}
}
} window.onload = bkLib.domLoaded
}
The specific line of code I am talking about is:
document.write("<style>.nicEdit-main p { margin: 0; }</style><script id=__ie_onload defer "+((location.protocol=="https:")?"src='javascript:void(0)'":"src=//0")+"><\/script>");
Before this executes, the $ alias points to JQuery, after the execution of that line, it is undefined.
I cannot seem to figure out what this line is suppose to do and why does it mess with the $ JQuery alias.
Could anyone suggest what is going on here?
Seems like the onDomLoaded function does not work good, so I used JQuery $(document).ready()
Before:
$(document).ready(function () {
bkLib.onDomLoaded(function() { new nicEditor().panelInstance('area1'); });
});
After:
$(document).ready(function () {
new nicEditor().panelInstance('id');
});
Related
My problem is that the jQuery load event is not working with my custom Javascript structure. I have tried many solutions to solve this problem but I failed.
var Init_Template = (function($) {
"use strict";
return {
init: function() {
this.plugins();
this.menus();
},
plugins: function() {
// Codes
},
menus: function() {
$(window).on("load", function(e) {
alert();
});
}
};
})(jQuery);
// Load when ready
jQuery(document).ready(function() {
function System_Init() {
Init_Template.init();
}
if (window.self === window.top) {
System_Init();
} else {
setTimeout(System_Init);
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
You will want that script with the jquery loading BEFORE you execute your javascript and jquery code so move the script tag above your code. I believe this will solve your issue for you.
I'm trying to modify an iframe/object content adding a script into it. At the moment, I have something like this:
// "script" is a node with an self-called function as its content
$(function() {
$('object, iframe').each(function() {
this.addEventListener('load', function() {
this.contentDocument.getElementsByTagName('head')[0].appendChild(script.cloneNode(true));
});
});
});
And it works as expected (the script does its job and it is added to the DOM of the iframe) but the problem comes when I try to do it the "jQuery" way:
// "script" is a node with an self-called function as its content
$(function() {
$('object, iframe').each(function() {
$(this).on('load', function() {
this.contentDocument.getElementsByTagName('head')[0].appendChild(script.cloneNode(true));
});
});
});
In the previous code, the script won't be added to the dom of the iframe.
Is there any reason why the .on('load') version is not working? What can be wrong? Am I missing something?
PS: The iframe is same-origin.
In each case, the inner function's this might not always be what you want it to be. I'd try:
$(function() {
$('object, iframe').each(function () {
$(this).on('load', function (event) {
event.target.contentDocument.getElementsByTagName('head')[0].appendChild(script.cloneNode(true));
});
});
});
Cf. https://api.jquery.com/event.target/
In my one of the PHP project, part of it done by some other people. All the js scripts are loaded in footer file. The html closes at the footer file.
How Can I use jquery functions before the inclusion of footer file ?. Since using it after the footer file will show it after the closing of html. When I tired to use jquery functions before the footer I get the js error $ not defined etc.. I have searched many similar questions but couldn't find a solution. I can't change the file inclusion order currently since some other people have done it. Any help will be appreciated.
If, like you mention, you have absolutely no control over where jQuery scripts are included, you can set timer to check when jQuery is ready, e.g.:
<script>
var i = setInterval(function() {
if ($) {
clearInterval(i);
$(document).ready(function(){
alert('Ready!');
})
}
}, 100)
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
But otherwise - if you can control it - include them before your code.
this code will only run properly in modern browsers (IE > 8)
<div class="jq"></div>
<script>
document.addEventListener('DOMContentLoaded', function(){
$('.jq').html('working');
});
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Example - http://jsfiddle.net/2mmdrega/
I sometimes did something like this:
function JQueryManager(callback, thisArgument) {
this.execute = function() {
if (typeof jQuery == "undefined") {
console.log("Waiting for jQuery...");
var self = this;
var selfArgs = arguments;
setTimeout(function() {
self.execute(selfArgs)
}, 100)
} else {
console.log("Found jQuery. Version: " + jQuery.fn.jquery);
callback.apply(thisArgument, arguments)
}
}
}
function myCallback(results) {
alert("found " + results.length + " results")
}
var jQueryManager = new JQueryManager(myCallback);
jQueryManager.execute($("div"));
That allows you to execute a callabck function when jQuery is available
EDIT: fixed some copy-paste errores
I am new to javascript n jquery. I used javascript along with jquery on my script tag.When jquery is not added, the javascript works fine,but when a jquery function is added, the script is not working.....shall i convert both to javascript or both to jquery or am i missing anything.Here is my script
<script type="text/javascript">
function getLocations() {
$.post('#Url.Action("getLocations","Home")', { 'id': $("#cities").val() },
function (data) {
$("#loca").html(data).show();
});
}
$(function () {
$('.submit').on('click', function () {
var ck = "";
var city = $("#cities option:selected").text();
var location = $("#loca option:selected").text();
alert(city+"and"+location)
}
});
</script>
here i am loading location based on the city selected.Its works fine when the onclick is not there,But when added ,location are not loading n the function is not calling.I have tried by butting alert inside it.Do i need do any thing else for both to work....Thank You
you forgot a )
$(function () {
$('.submit').on('click', function () {
...
}) // <---
});
if you properly indent the code blocks and if you look on the javascript console, this kind of errors become easier to be detected. Just adopt an indent style and write code adhering to it.
I have in a javascript file code, but it isn't encapsulate in a function, specifically is an event, so I need to know how can I call this event in my html file.
$(window).scroll(function() {
if ($(window).scrollTop() > 164) {
$("ticky-nav").show();
}
else {
$("ticky-nav").hide();
}
});
and I include that like this
<script type="text/javascript" src="static/js/GD.js"></script>
Thanks for your answers
You need to make sure it is either encapsulated in a $(document).ready() handler or after the DOM has loaded
$(document).ready(function () {
$(window).scroll(function () {
if ($(window).scrollTop() > 164) {
$("ticky-nav").show();
} else {
$("ticky-nav").hide();
}
});
});
$("ticky-nav") is an invalid selector also since there is no element type of ticky-nav you are most likely looking for $("#ticky-nav") which is an element with id ticky-nav
Also make sure to include
<script type="text/javascript" src="static/js/GD.js"></script>
underneath your jQuery script tag
If you want to execute the function without the scroll event, you can create it like this:
var doScroll = function() {
if ($(window).scrollTop() > 164) {
$("ticky-nav").show();
}
else {
$("ticky-nav").hide();
}
};
And then call doScroll(); from somewhere :)