can plain javascript and jQuery be minified in one file - javascript

I have a js file that is written in jQuery (3.1.0) and just one line plain javascript.
for example:
$(window).on('load',function(){
var email = $('#email');
function setMessage(str){
document.getElementById('email').setCustomValidity(str);
};
email.bind('keyup',function(){
if(email.val()==''){
setMessage('Box is Empty');
}
});
});
It worked fine when it was like this.
Next step is minify the js file, that's when problem starts where console keeps on screaming Uncaught TypeError: Cannot read property 'setCustomValidity' of null - jquery-3.1.0.min.js.
Sources I used:
setCustomValidity
Make sure semi-colon - Checked

Rather than using window.onload using document.ready
Refer this for difference between onload and document.ready as the error which you are facing is due to the element not loaded and you are trying to access element before document is fully loaded
https://stackoverflow.com/a/3698214/1569443
Use below code
$('document').ready(function(){
var email = $('#email');
function setMessage(str){
document.getElementById('email').setCustomValidity(str);
};
email.bind('keyup',function(){
if(email.val()==''){
setMessage('Box is Empty');
}
});
});

Related

How to resolve this error type 'Uncaught TypeError: (...) is not a function'?

I am aware of the another question like this on stackoverflow and have looked at it, but it doesn't answer/resolve my situation that I'm having from which the error has occurred.
I'm trying to make both scripts, embed.js (plugin) & more-content-arrow.js (my script) work properly on the page when the document loads. When and if I remove either script, one or the other will work but not both scripts together. When the page finishes loading first, it will load the more-content-arrow.js properly, then when it is trigged again by a scrolling event, it will give off this error message in the console browser:
VM249 embed.js:2 Uncaught TypeError: ((fe.event.special[s.origType] || (intermediate value)).handle || s.handler).apply is not a function
at dispatch (VM249 embed.js:2)
at m.handle (VM249 embed.js:2)
I tried to resolve it by adding a jQuery.noConflict();, but that doesn't work as I assume it could be a conflict between the two scripts. The only way I found out to get rid of the error message is removing one of the two scripts file or removing $.getScript(...), but I don't want to do that. I want to be able to keep both scripts running properly in the page.
JS:
$(document).ready(function(){
//jQuery.noConflict();
$.getScript("more-content-arrow.js", function(){
alert("arrow script loaded and executed.");
});
});
I recreated a jsfiddle with the uncaught type error here:
https://jsfiddle.net/wr6cc2ct/2/
Your error appears it be in your more-content-arrow.js file, you were passing an integer as a third argument which is not a handler, here is the jquery doc for .on()
$(window).on('scroll', function () {
if (!footerIsVisible) {
$('.bounce').fadeIn(300);
}
}); // <--- removed integer here.
Update
Alternatively, you can use event.stopPropagation(); along with re-ordering the jquery.unevent.js script after the ember.js script.
$(window).on('scroll', function (e) {
e.stopPropagation();
if (!footerIsVisible) {
$('.bounce').fadeIn(300);
}
}, 800);

TypeError: document.observe is not a function

in my js file i wrote like this
document.observe("dom:loaded", function() {
add();
});
but it show error TypeError: document.observe is not a function
I am using rails 3 & jquery-ui-1.10.0
can any one tell me why i am getting like this ?
Thanks in advance
As rails 3 uses jquery and you are writting code in prototype. That might creating issue here.
So try convert your code in jquery. Your code might look like.
$( document ).ready(function() {
// Run code
});
But consider below and make your changes as per your need
$(window).load(function(){
// Run code ##It will run the js after the whole page is loaded.
});
$(document).ready(function(){
// Run code ##It will run the js just after the loading of DOM.
});

Uncaught TypeError: undefined is not a function - jQuery

I have problem with website slide. after clicking on inspect element in chrome i get massage
"Uncaught TypeError: undefined is not a function" in file custom.js
here is file code
jQuery(document).ready(function() {
jQuery('#slider').nivoSlider({pauseTime: 4500}); });
}
here is website address http://myisraeltoday.com using WordPress
Theme: http://wordpress.org/themes/effect
Help needed
That means that you're calling something as a function (or method), when in fact it doesn't exist. You're calling three functions:
jQuery
jQuery(document).ready
jQuery('#slider').nivoSlider
The third of these is most likely the problem.
try changing your code to this :
$(document).ready(function() {
$('#slider').nivoSlider({'pauseTime': 4500});
});
PS : Note the }); at the end not just the $

Undefined jscript in javascript

I have created an ASP.Net application. I am using a javascript which is written in a separate file. I am using Var myvariableName ={} in javascript file.
I have included this file in MasterPage and accessing myvariableName in my aspx page.
This is working fine in Google Chrome, however, in IE 8 an unhandled exception is thrown as
myvariableName is undefined.
the error shows as;
0x800a1391 - Microsoft JScript runtime error: 'Common' is undefined
where Common is my javascript variable.
Please assist me in resolving this issue.
You're probably accessing the variable before your external script is executed.
Be sure to access your variable as soon as the document is fully loaded (i.e. $(document).ready(function(){...}); if you use jQuery) or try to find out the real execution order with some alert (that shouldn't be browser-depentent, by the way!).
If your code is already in a document.load or $(document).ready(function) you can always
handle the variable before acessing it via
if (typeof myvariableName !== "undefined") {
// do stuff
}
Some times in IE shit happens and window.load gets screwed specially when async calls are in place.
You are probably getting this error due to a missing semicolon. Change the code to this:
var myvariableName = {};
In your asp page, where you access your custom variable, wrap your code with:
var myvariableName = {};
window.onload = function(){
// your code here where you're accessing the variable
};

Error on using alert in Javascript (Property 'alert' of object is not a function)

I am just trying to use alert and put a string variable inside the alert and get an error:
Uncaught TypeError: Property 'alert' of object [Object Window] is not a function
My code is:
var shortenurl = msg.d;
alert(shortenurl);
I've checked the value and it has a string inside, not an object.
Somewhere in your code you overrode alert. Check for var alert = ... or some other kind of declaration like that. Also check for window.alert declarations.
I had that error message due to an alert() blocked by my pop-up-blocker.
I'm adding this one as an addition to this. In my case, when I had a similar problem, it turned out to not be my own code that was causing the problem but a poorly written extension that had been added to a client's browser. Once it was disabled, the script error went away.
If you haven't overridden the method name in your own code anywhere, you may want to try disabling extensions to see if any of those is inadvertently interfering with your script.
Check if you've got a Bootstrap .js declaration if required (after jQuery) i.e.
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
Mozilla says,
The alert function is not actually a part of JavaScript itself.
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Introduction_to_Object-Oriented_JavaScript
You can not see a function called alert here : https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects
Adding to Chris's answer... I had mistakenly overrode alert in my own function!
//Don't do this:
function alertOrConsole(node, alert){
if(alert){
alert(node);
}else{
console.log(node);
}
}
//----------------------------
//Fixed:
function alertOrConsole(node, flag){
if(flag){
alert(node);
}else{
console.log(node);
}
}
One of the possible reasons could be that alert is used as variable - for example inside of function:
function MyFunction(v1,alert)
{
alert(v1); //will fail exactly with that message
}
Solution is not to use predefined words as variables.

Categories

Resources