This is my code on the razor view engine
Delete
I have an external js file which contains the code for function detele:
alert('external');
function Delete(recordID, pID) {
alert('function called');
}
I added alert('external'); to check if I have the correct reference to the external js file, and it worked. Not sure why it keeps returning js error:
Microsoft JScript runtime error: 'Delete' is undefined
Related
i have a file where i call functions collectively. This file contains the following code. i get error on non-library(jquery.barrating.min.js) pages running this code.
error i got "barrating is not a function error".
how can i get the code to run if only this function exists?
$(function() {
$('#example').barrating({
theme: 'fontawesome-stars'
});
});
If you want to run this code only if this function exists, you can test its presence in the jQuery prototype:
if (jQuery.prototype.barrating) {
// Your code goes here
}
I am using laravel mix, which produces files correctly. Everything works fine, except when I call function form console I receive
Uncaught ReferenceError: test is not defined
at <anonymous>:1:1
This is part of code I get from running npm run dev. How can I call this function from console?
__webpack_require__(14);
function test() {
return 'testing';
}
$(document).ready(function () {
console.log(test());
});
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);
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');
}
});
});
I have the following files loaded in sequence:
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&callback=try_to_initialize"></script>
<%= javascript_include_tag "application" %>
The application.js.erb referenced secondly has the following line of code:
function try_to_initialize() {
initialize_google_maps();
if (typeof initial_data !== 'undefined') {
google_maps_draw_data(initial_data, false);
}
}
The function is defined at the global space. It is not in any kind of event handler or local scope.
I checked the network tab to make sure the files are loaded in order:
js?v=3.exp&sensor=false&callback=try_to_initialize GET 200 script (index):30 (from cache) 6 ms
application-3332227d778ac1e4b9e987588145ff49.js GET 200 script (index):31 (from cache) 0 ms
Everything looks fine. Unfortunately, in the console I get the following error:
js?v=3.exp&sensor=false&callback=try_to_initialize:95 Uncaught InvalidValueError: try_to_initialize is not a function
I know what the error suggests. I just don't know why it is happening. Why can't it find the function?
Problem
The order of function definition matters in relatively small apps. If you have Google JS loader put first, then init, the script will block other resources from loading until it is fully loaded.
Test 1 (without async attribute)
The following example will throw an error from Google engine as an object with message:
init is not a function
function init(){
console.log('API loaded');
}
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&callback=init"></script>
Changing the order of <script> will fix the issue as init will be defined, and then browser fetches Google library.
<script>
function init(){
console.log('API loaded');
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&callback=init"></script>
Test 2 (with async)
I have used async attribute in <script> to ensure it will not block the rest of resources from loading.
function init(){
console.log('API loaded');
}
<!-- the following script will act as block because of async attribute -->
<script async src="https://maps.googleapis.com/maps/api/js?v=3.exp&callback=init"></script>