Including javascript file dynamically and then calling function dynamically - javascript

I've included a javascript file dynamically, here is the file http://www.zaarly.com/anywhere.js
When I call the Zaarly.Anywhere.Open() function I get this error
Zaarly.Anywhere is undefined
If I replace contents of the javascript with a simple function and then call that function it works fine, for example this function works fine:
function simpleFunc() {
alert("called");
}
What could be the problem? The javascript file has no errors, I think it's because of including the file dynamically because it works fine if I include it normally in html file.
Any suggestions
EDIT:
Here is the html that is calling the function
Request on Zaarly
If a call a simple function function such as the on above it works fine

Be sure that you will call Zaarly.Anywhere.Open() only after the script was loaded on page.

Related

MVC Model property works intermittently with Javascript

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.

How to call a function with in same java script file

I am writing Automation scripts using protractor. I have created a java script file in which I have created a function.
PlatformviewCnOPage is my JS file and searchCapabilityOfferingsName is function. I want to call this function in another function (in same file).
var PlatformviewCnOPage = function() {
this.searchCapabilityOfferingsName = function(){
coreutil.clickElement(objectrepo.platformView_Searchbox_EnterBtn,'xpath');
browser.sleep(2000);
var searchResult= coreutil.getTextofElement(objectrepo.platformView_SearchResult,'xpath');
return searchResult;
}
I want to use the above function i.e searchCapabilityOfferingsName in another function in same java script file. I have tried some combinations but its not working.Basically I am new to java script.
this.verifySearchinCnO = function(){
this.searchCapabilityOfferingsName();// Failed-method not defined
searchCapabilityOfferingsName(); //Failed method not defined
Create object of same file and call the function. // Failed.
}
};
module.exports = PlatformviewCnOPage;
Could anyone suggest how can I call the function in another function in same JS file?
PlatformviewCnOPage is defined as object/function which contains the method searchCapabilityOfferingsName.
So you can easily call PlatformviewCnOPage.searchCapabilityOfferingsName()
There should be some mistake in your PlatformviewCnOPage.js which lead to some definitions missing even loaded by require.
You can try below steps to figure out the wrong place:
Step 1 comment out other codes only except function: verifySearchinCnO and searchCapabilityOfferingsName
Step 2 add a console.log(xxx) as first line of the function: verifySearchinCnO and searchCapabilityOfferingsName
Step 3 run your test script again, if the both console.log(xxx) print out, means the wrong place in functions you commented out, then remove comment of some code lines and run test script again until find the correct place.

Laravel compressing javascript using mix.scripts(); renames function in compressed file

I am compressing a js file like this:
mix.scripts('resources/assets/js/pages/login.js', 'public/js/login.js');
My pre-compressed file contains this function:
function zoomInForm() {
$('#login-page').toggleClass('zoom animated');
........ ........
}
But in my compressed file the function zoomInForm is renamed so I can never call the zoomInForm(); function on my page.
How can I just compress a js file to one line without removing functions?
If the minifier renames the function, it also renames every place that you call it within the JS files.
Generally, you should NEVER have JavaScript outside of your JS files. Not in a script tag, not in an onclick attribute.
If you want to fx. listen to button click, you should create the listener in the JS:
$('#login-page').click(function(){
zoomInForm();
);
While cssBlaster21895 provides you with a real solution to your specific problem, I believe a more correct solution would be to move your JavaScript logic to your JS files.
You can prevent function from being renamed. You can pass uglify options into mix options.
mix.options({
uglify: {
"mangle": {
"except": ["zoomInForm"]
}
}
});
Maybe it can help,but maybe there something wrong with your whole script at all, even double declaring same function, just a guess...
Or try declaring a function the other way:
var zoomInForm = function(){...}
Then call it when you need with zoomInForm() later in the script and see whats happening.

Reassigning javascript function in an attached js file

I have an HTML page with multiple attached js files that include functions that are used on that page.
For functions that are included on the base HTML page they are successfully re-assigned. FunctionA = FunctionB.
The problem comes when I try to reassign a function that is part of one of the attached js files. The normal reassignment doesn't work. Say FunctionC is on attached js file more functions.js .
I try FunctionC = FunctionD. FunctionC runs as it would normally - WITHOUT the reassignment to FunctionD. I know the reassignment to FunctionD 'should' occur before the FunctionC runs because it fires when I check with console.log.
Any ideas as to why this isn't working would be appreciated.
You have to make your reassignments after included file.
For example (Disclamer: don't do this in real projects - this is for demo purposes only) the code below includes jQuery library, but then overwrites jQuery function with a custom one:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
jQuery = function(s) {
alert(s);
}
</script>
<script>
jQuery('aaa');
</script>
when this runs it produces alert (demo), but if you reverse the order of first two script tags - original "attached" jQuery function will take over.

jQuery page-flip animation

I am using a pageflip script called Moleskine Notebook. Inside the jquery.booklet.1.1.0.js file there is a function called next which turns the page. I want to call this function from my html file.
I tried "$mybook.next();" but it didn't work, I think I have to do something with jQuery.data() as it states on jquery.booklet.1.1.0.js file (lines 100-103)
//store data for api calls
b.data('booklet',true);
b.data('id', id);
b.data('total', src.children().length);
Here is the script:
http://tympanus.net/Tutorials/MoleskineNotebook/
Read the API docs:
$('#mybook').booklet('next');

Categories

Resources