I am recently working on a task of an existing website, updating Bootstrap from version 3.3.4 to 4.4.1 . The problem that I encountered is when you implicitly call a js function in the cshtml, function is undefined even though it's in the Bundle.config file and I think that it's correctly arranged. But when you call a function inside of ex. a button on a onclick attribute the function works fine, also the called functions works when you explicitly add the script reference ( ex. ) inside the cshtml file. I'm still new at web development and in mvc, have anyone encountered this? can someone help me, I would really appreaciate a helping hand..
Bundle.config
bundles.Add(new ScriptBundle("~/Scripts/js").Include(
"~/Scripts/jquery-3.4.1.min.js",
"~/Scripts/jquery-{version}.js",
"~/Scripts/jquery.cookie.js",
"~/Scripts/login.js",
"~/Scripts/jquery-ui-1.12.1.min.js",
"~/Scripts/umd/popper.min.js",
"~/Scripts/bootstrap-submenu-min.js",
"~/Scripts/loyalty-members.js",
"~/Scripts/prepaid-card.js",
"~/Scripts/contactus.js",
"~/Scripts/loading.js",
"~/Scripts/jquery.flexslider.js",
"~/Scripts/home.js",
"~/Scripts/myprofile.js",
"~/Scripts/alertmsg.js",
"~/Scripts/merchants.js",
"~/Scripts/flipclock/flipclock.js",
"~/Scripts/bootstrap.min.js",
"~/scripts/adjustmentbs4/navbar-customize.js" --> this is a test js file with function with alert
));
This is just a test function to call inside the cshtml
function ShowDropdownMenu() {
alert("Test");
}
This is the script inside the cshmtl, as you can see the test function ShowDropdownMenu is called, but originally below that is the alertMessagePrompt function that is also when called is undefined or not defined. but I tested other functions as well like that ShowDropdownMenu and it has the same error the alertMessagePrompt function
<script>
ShowDropdownMenu();
if ('#TempData["Message"]' != null && '#TempData["Message"]' != "") {
if ('#TempData["pc_result"]' == '0') {
} else {
alertMessagePrompt("Registration Error", "#TempData["Message"]", 1, [["Ok", "btnOkCloseId", 2, "closeMsgPrompt()"]]);
}
changeValue("pc_firstname");
changeValue("pc_middlename");
changeValue("pc_lastname");
validateMobile("pc_mobile");
changeValue("pc_bdate");
validateEmail('pc_youremail');
changeValue("pc_cardName");
changeValue("pc_cityResidence");
changeValue("pc_cityWork");
}
</script>
I've also tested from the original version of this project, I first updated the jquery and functions implicitly called inside cshtml are still working fine, but after updating bootstrap 4 that is when the error begins.
Related
I have the following JavaScript loaded into Webpacker:
'use strict';
(function() {
alert("This shows up.");
var someObject = document.querySelectorAll('[data-toggle="thing"]');
})();
I know that the file is loaded into Webpacker correctly and is executed because I see the alert This shows up.. However, when I go into the console, someObject is an empty array despite the page containing an object with the data-toggle attribute.
I don't see any errors in the console to help diagnose the issue.
I am guessing that the problem involves the script executing before the page is loaded? However, I'm not sure how to remedy that situation when using Rails 6 with Webpacker...
Any assistance would be hugely appreciated!
You may need to wrap your code in an event listener callback that will execute when the DOM is loaded. This may be the case if your script tag is in the <head>; it executes before the rest of the page is loaded.
window.addEventListener('DOMContentLoaded', (_event) => {
let someObject = document.querySelectorAll('[data-toggle="thing"]');
});
You also don't necessarily need to wrap your code in an IIFE (i.e., (function() { })() because each file in webpack is (typically) treated as module with its own function scope.
I'm new to typescript and I'm trying to use a bit of code I found online to change links to look nice for my site,
<script src="https://wow.zamimg.com/widgets/power.js"></script>
<script>var wowhead_tooltips = {
"colorlinks": true,
"iconizelinks": true,
"renamelinks": true
};
</script>
I included that into my index.html, and it works great, until I load a component, I spent a lot of time looking around and found that I need to call $WowheadPower.refreshLinks();
To get the links to change when a new element is added, I wasn't sure how to declare that variable in typescript so I could tie it to various angular commands I wanted to do, unless I add it in a try catch:
loadScript(){
try{
// update tooltips
if(typeof $WowheadPower == 'undefined'){
$.getScript('//wow.zamimg.com/widgets/power.js');
} else {
$WowheadPower.refreshLinks();
console.log($WowheadPower)
}
} finally {}
}
I get an error that says
Cannot find name '$WowheadPower'
but I saved it anyway, and somehow on my page it works as I want it too.
It works perfect, but I still got the error so I declared it
try{
// update tooltips
var $WowheadPower
if(typeof $WowheadPower == 'undefined'){
$.getScript('//wow.zamimg.com/widgets/power.js');
} else {
$ WowheadPower.refreshLinks();
console.log($WowheadPower)
}
} finally {}
and it broke, I assume because I overwrote the correctly variable that has the right method.
Now I have to leave the error in to get functionality, but the error stops me from compiling when I ng serve. Until I hit save on VScode then it works fine again.
Any thoughts on how to resolve this?
since $WowheadPower is an external variable imported from another file, you can tell typescript that it exists without explicitly declaring it:
declare var $WowheadPower: any
write this at the beginning of your code so you tell TS that this variable exists. Ideally, you would write an interface that correctly defines $WowheadPower's type instead of any there.
I have a pretty basic MVC application and I am using a little bit of jQuery/JavaScript in it.
I am passing a Model parameter of type string into a function call. It works with some input but not others and I am wondering why and if it is any of the characters in the string.
Here are my functions:
//In the View
$().ready(function () {
alert(#Model.PartNumber); // Returns nothing on second input value below
LoadMenus(#Model.PartNumber);
});
// In an external js file referenced in _layout.cshtml
LoadMenus(partNumber){
alert(partNumber) // Returns nothing on my second value from below
$('#something').append('<div class="col-12 sidebar-link">Part</div>');
...
}
These are two of the values that I have used:
'100226' and the function is executed successfully, loading my menu
'5237HES-06' and the function doesn't execute
I have put console log and alert statements to see what gets loaded and what doesn't. No JS alerts are triggered in the jquery or javascript functions.
Please shed some light. Hopefully something silly that I am overlooking.
I have defined a library in Javascript that works great when I am in a browser but whose name isn't found when running under PhoneGap on my device.
The library is defined as so:
(function(bsdi, $) {
bsdi.SomeName = "XYZ";
bsdi.addDays = function (date, days) { ...stuff here...}
....
}(bsdi = window.bsdi || {}, jQuery));
Later, in a .js file that is loaded last, I have:
function knockoutFn() {
var self = this;
if (bsdi.SomeName == "XYZ") { <<--- CRASHES HERE, "bsdi not defined" but only on Device
...stuff here...
}
}
// Happens to use Knockout...
var koFn = new knockoutFn();
ko.applyBindings(koFn);
function init() {
if (isPhoneGap) {
document.addEventListener("deviceready", onDeviceReady, false);
}
else {
koFn.InitPage();
}
}
function onDeviceReady() {
// Now safe to use the Cordova API
koFn.InitPage();
}
What happens is that a normal web browser handles this just fine. However, when I download to my iPhone using the PhoneGap Build app, it gets to "bsdi.SomeName" and crashes because bsdi is not defined. I thought that my method for defining the bsdi library was correct but, obviously, there is something in PhoneGap that doesn't like this. Note that "isPhoneGap" is true and we do use the addEventListener on the device.
Any ideas are greatly appreciated!
UPDATE: On a hunch, I tried moving the bsdi object into the same .js file as the code that uses it. In this case, it finds the object and uses it correctly. When it is an external file, however, it fails. And yes, I have triple-checked that the file exists and is at the correct location. Again, it works fine in a browser!
If window.bsdi isn't defined, then (as posted in your question) your initialization code never ensures that window.bsdi is defined by the time the code is finished. All it does is add those properties to the new empty object passed in, but that won't have any effect on anything once the initialization function is finished.
This is my onComplete.
$('#fine-uploader-house').fineUploader({
...
}).on('complete', function(event, id, name, json) {
if(!blank(json.cancelAll) && json.cancelAll){
//$('#fine-uploader-<?=$data['type'];?>').cancelAll();
//$(this).cancelAll();
document.getElementById('fine-uploader-<?=$data['type'];?>').cancelAll( );
}
});
I've try to run the cancelAll( ) function multiple ways but always get the same error message.
[FineUploader 3.7.0] Caught exception in 'onComplete' callback - document.getElementById(...).cancelAll is not a function
http://ahm.localhost/jquery.fineuploader-3.7.0/jquery.fineuploader-3.7.0.min.js
Line 16
I cannot seem to find any other information on this and I cannot determine where the fault lies.
Other than this the uploader is working without any issues.
Any ideas?
The typical way to call methods on a jQuery plug-in is by passing the name of the method into the plug-in's associated jQuery function. For example:
$('#someDiv').somePlugin('someMethod', somearg1, somearg2);
Fine Uploader is no different. In this case, you would call cancelAll like this:
$(this).fineUploader('cancelAll');
This is all covered in the jQuery plug-in section of Fine Uploader's documentation as well.