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.
Related
I'm working with jQuery, making a WordPress website, and ran into issues because Wordpress doesn't seem to work with the $(window).load(...) event listener, due to which I had to change the code.
Here's the original code in jQuery:
$(window).load(function(){
...
}).resize(function() {
...
});
Hers's what I'd changed it to:
window.addEventListener('load', function() {
...
}).resize(function() {
...
});
However, I get an error in console TypeError: windowAddEventListener is undefined. How can I solve this?
You have two issues:
addEventListener return undefined so you can't do anything after it
in vanilla JavaScript there are no resize function this is only in jQuery.
You will need this:
window.addEventListener('load', function() {
...
});
window.addEventListener('resize', function() {
...
});
and if you want chaining you will need:
const x = {
load: function(fn) {
window.addEventListener('load', fn);
return this;
},
resize: function(fn) {
window.addEventListener('resize', fn);
return this;
}
};
x.load(function() {
}).resize(function() {
});
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/
below methods are working fine when I have them in razor or partial views. after them to JS from these are not at all. JS file is loading and other regular javascript methods working fine. What could be the wrong?
$('.phonelocation').on('change', function () {
$("#HdnCommunicationLocation").val(this.value); // or $(this).val()
});
$('.phonetype').on('change', function () {
$("#HdnCommunicationType").val(this.value); // or $(this).val()
$('.phoneCountry').trigger('change');
});
$('.phoneCountry').change(function () {
..
}
You must add the js after the document is loaded.
$(document).ready(function () {
$(document).on('change', '.phonelocation', function () {
$("#HdnCommunicationLocation").val(this.value); // or $(this).val()
});
$(document).on('change', '.phonetype', function () {
$("#HdnCommunicationType").val(this.value); // or $(this).val()
$('.phoneCountry').trigger('change');
});
$(document).on('change', '.phoneCountry', function () {
..
}
});
update: try adding the events to the document that way no matter when the elwments are added the events will still work
I creating jquery Plugin with simple alert option. I did this way see below is my code.But it doesn't work.
Below code is the seperate js file.
(function($) {
$.fn.gettingmessage = function() {
var element = this;
$(element).load(function() {
alertingcontent();
function preventnextpage() {
return false;
}
function alertingcontent() {
alert("nicely done");
});
};
})(jQuery);
I called this function as
this way
$(function(){
$("body").gettingmessage();
});
I am not sure how can i fix this any suggestion would be great.
JSFIDDLE
Thanks
First, you're missing a closing bracket.
Second, the load() function doesn't do what you're searching for, use ready() instead of.
Updated code :
(function($) {
$.fn.gettingmessage = function() {
var element = this;
$(element).ready(function() {
alertingcontent();
function preventnextpage() {
return false;
}
function alertingcontent() {
alert("nicely done");
}
});
};
})(jQuery);
$(function(){
$("body").gettingmessage();
});
Updated jsFiddle
I just created my first jQuery plugin , it is very simple it slideToggle two Divs , the code works fine and it do what i want , the problem is that i get an ERROR message at the console saying :
Uncaught TypeError: object is not a function
it refer to this line of code
})(jQuery);
CODE
$(function($) {
$.fn.toggleDiv = function(opt) {
var options = $.extend({}, $.fn.toggleDiv.objectOptions, opt);
return this.each(function() {
if (options.animation == true) {
$(this).slideToggle();
} else {
$(this).toggle();
}
});
};
$.fn.toggleDiv.objectOptions = {
animation: false
};
$("button").click(function() { $("#Div1, #Div2")
.toggleDiv({animation : fa}); return false; });
})(jQuery);
Does any one know what is that error and how can i fix it thanks
You either want to do
(function ($) { ... })(jQuery);
if you want your code to be run immediatly,
or
jQuery(function ($) { .... });
for your code to be run on document-ready.
You are referring to $("button"), and therefore need the document tree to be available. So use the second version. A even nicer solution would be to use the jQuery function "delegate", this would look something like this:
jQuery(function ($) {
$(document).delegate("button", "click", function (ev) { ... });
});