Titanium, calling a function in one JS file from another JS file - javascript

so i have been trying for many hours a day now for the past 3 days.i researched this to death but still cannot get it.
Goal:
-file1.js has a buttion that when pressed will call method Main_Menu in file2.js and will open a new window created by that method, or function.
failed attempts:
-i have tried Ti.include but always getting a, cant find file error, i have tried changing string to every possible path.
-var file = require(path) but can not use the method inside the file, for example file.Main_Meue, does not work
I have also tried many other things that do not come to mind but if anyone has any advice or you need more information just ask. PLEASE HELP, AND THANKYOU

second answer
Create the second window like so:
//file1.js
button.addEventListener('click', function()
{
var secondWindow = Ti.UI.createWindow({
url:'file2.js'
});
secondWindow.open();
});
file1.js creates a new window using file2.js via the url parameter. file2.js is now your new window after calling secondWindow.open()
First answer
Based off the title of this topic, you can use the fireEvent method. For example:
file1.js
Ti.App.addEventListener('customEventName', function()
{
Ti.API.info('function fired from file2.js');
});
file2.js
Ti.App.fireEvent('customEventName');
http://docs.appcelerator.com/titanium/latest/#!/api/Titanium.Proxy-method-fireEvent

file1.js
var toBeExported ={
a : function(){
//your code goes here
}
};
exports.a = toBeExported.a
file2.js
var b = require ('file1');
//you can use all the functions that is exported from file1 here.
//you have to create a lib folder or place the file1.js in the existing lib folder for the export/require to work.
Hope this will help.

this might be a problem of code structure. Basically you have three good way to doing this depending on which version you are using (actually on which version you started your project :
before 2.x : the best way was call the tweetanium architecture : www.shanestillwell.com/index.php/2012/03/29/mvc-for-appcelerator-titanium-understanding-tweetanium/
for 2.x : you can use the CommonJS structure : https://wiki.appcelerator.org/display/guides/CommonJS+Modules+in+Titanium
for 3.x : you should take a look at the Alloy.Globals which is the almost the same than tweetanium
Hope it helps.

Related

Access variable from 1 .js source file (jqTree), from within different .js file, to override method

(new to JS, jQuery, & jqTree)
I am trying to override a method (JqTreeWidget.prototype.openNode) from one .js file (tree.jquery.js) in another (my own custom.js).
I've read that to override a js method in general, I just need to redefine it. So I am trying to do that on the method, and I think I am stuck on accessing the variable that has the original method (JqTreeWidget). I think the challenge is that the original method is in tree.jquery.js (source) that is separate from my own other custom.js file where I want to do the override.
The goal of this Question would be to allow me to write something like this in my custom.js (<reference to JqTreeWidget.prototype.openNode> would be the Answer to this Question):
var originalMethod = <reference to JqTreeWidget.prototype.openNode>;
// Override of originalMethod
<reference to JqTreeWidget.prototype.openNode> = function( node, slide ){
// my code I want to happen 1st here
changeAncestorHeightRecursively( node, true);
// my code is done, and now I'm ready to call the original method
originalMethod.call( this, node, slide );
}
I think that would be the most non-intrusive way to do the override, without actually hacking in to the tree.jquery.js source.
See my custom.js at http://codepen.io/cellepo/pen/LGoaQx
The separate source tree.jquery.js is added externally in the JS settings of that codepen.
How can I get access (from within my custom.js file) to JqTreeWidget variable that is in the source file (tree.jquery.js)? Is it even possible? Is JqTreeWidget not in scope outside of tree.jquery.js, or is it not a global variable? I was hoping treeContainer.tree.prototype would have it, but I haven't had luck so far...
Thanks!
The prototype object can be obtained via:
jQuery.fn.tree("get_widget_class").prototype
Note that this is not a generalized solution for any jQuery plugin. This is something explicitly implemented by the tree plugin.
I found this hacky workaround. But since it's a hack, I'd still prefer to find the Answer as posed in this Question (so please, continue to Answer with respect to the <reference to JqTreeWidget.prototype.openNode> I mentioned in the Question, thanks)...
As stated in this Question, the goal involves making it possible to override JqTreeWidget.prototype.openNode (from tree.jquery.js) externally in custom.js. As such, calls to changeAncestorHeightRecursively (my code) & JqTreeWidget.prototype.openNode would both be made from the override in custom.js, and tree.jquery.js source is not modified at all.
Workaround:
Declare global var in html:
<script type='text/javascript' language="javascript">
changeAncestorHeightRecursively = 1;
</script>
In custom.js, set the globar var to the function (the one I want to be called before JqTreeWidget.prototype.openNode):
window.changeAncestorHeightRecursively = changeAncestorHeightRecursively;
Call the global-var-referenced function at the beginning of JqTreeWidget.prototype.openNode (hack into tree.jquery.js):
JqTreeWidget.prototype.openNode = function(node, slide) {
// Only way I could figure out to get this to execute before the rest of this method
// (global-var-referenced function in custom.js)
changeAncestorHeightRecursively( node, true );
// Rest of original openNode code...
}
This calls my code function from within tree.jquery.js, as opposed to calling the overridden method from within custom.js. So this is hacky because of the global var, and modifying tree.jquery.js source.
This will work for now, but hoping for a less hacky Solution as stated in this original Question... Thanks!

meteor / javascript function not working when in another file

This is interesting.
I have a file structure as such:
/
/client/
/server/
The app I'm working on is working fine, I have many .js files in the /client/ folder, all separated into logical (to me) sections. They work fine when compiled.
I have added a new file though, called miscFunctions.js to the mix and added a simple function and saved:
function sessionDataReset(){
//Set the New Organisation Session data to be false, meaning we're not adding a new organisation
return Session.set('addingOrganisation', false);
};
This function, when called returns the following error:
Uncaught ReferenceError: sessionDataReset is not defined
When I move that exact code though to the .js file I'm calling it from it works fine.
Why is the error happening as I was of the understanding what I'm trying to do can be done with Meteor?
Any advice greatly appreciated.
Rob
First try declaring your file this way:
sessionDataReset = function() {
//Set the New Organisation Session data to be false,
//meaning we're not adding a new organisation
return Session.set('addingOrganisation', false);
};
This ensures the function will be visible globally.
(#user1623481 Meteor wraps files as IIFE's when it compiles them, creating a function scope that was limiting the visibility of this function.)
This will most likely resolve it, but following this check the file load order in the Meteor Docs

plupload add file function

I have dragged'n'dropped a file on the textarea. I have the file object in JavaScript. So now I would like to call a function to add it to the pluploadQueue.
How do I do that?
I assumed that would be a function like: pluploadQueue.addFile( File ) or uploader.addFile( File ) but I can't find it anywhere.
Any ideas?
There's no included support yet to do that in plupload, but you can add it by exposing addSelectedFiles.
on plupload.html5.js search for where addSelectedfiles is defined and replace that line with:
var addSelectedFiles = uploader.addFiles = function(native_files) {
You can later access this from your instance by calling myinstance.addFiles(...)
You can see me making this suggestion around 7 months ago here: https://github.com/moxiecode/plupload/issues/461
sadly, the plupload devs are mostly MIA.

Can I tell Javascript to call a method from another JS file?

In AppMenu.js,
AppMenu = function()
{
var scope = this;
}
Also noted:
Star.Bus.addEvent("AppMenu_StatSheet");
Star.Bus.on("AppMenu_StatSheet", scope.AppMenu_StatSheet, scope);
scope.registerApp("Exit Game", "AppMenu/images/exit_button.png", "AppMenu_exit", "");
Further down is a method
scope.AppMenu_StatSheet = function()
{
showStats();
}
I moved the location of the showStats() method to another js file, and I want the method to send its call there instead of where it originally was going. In Javascript, can I tell the program where to look to call showStats()?
EDIT Curiously, there is no AppMenu.html. I now believe that all of the html is dealt with by a main HTML file in the above folder.
If you include both Javascript files in your PHP/HTML page, the compiler automatically uses your showStats() function, even when it is called from file1.js and the actual function is located in file2.js.
As long as you include both files in your HTML page you'll be fine. Maybe load the file with showStats() before the other one.

Appcelerator titanium - passing js variables

I am new to JS and Appcelerator titanium. I am trying to implement the MVC model to my app, but I have a problem accessing the data in the model:
in the model.js:
var my_val;
then in file1.js, I modified the value of my_val:
Ti.include("model.js");
my_val=5;
then in another file file2.js:
Ti.include("model.js");
T.API.info(my_val); // the value I always get is "undefined"
why is file2.js not detecting the change file1.js has done to my_val? Is there anyway to make it work?
take a look at my blog posting regarding this particular problem.
blog.clearlyinnovative.com
you want to include both files in your app.js and add the variable to your namespace; this is cleaner and doesn't pollute the global scope.
var myApp = {};
Ti.include("model.js");
Ti.include("file2.js");
in model.js do something like this
var myApp.model = {};
myApp.model.my_val = 100;
in file2.js do something like this; no need to incude model.js again, the value was set in your own namespace and is clearly defined
Ti.API.info(myApp.model.my_val);
If you want to get this functionality done use Titanium Properties so that you can get/set your variable as per requirement.Do something like this in your app.js
// initialize your variable, you can update it as well with your custom value
Titanium.App.Properties.setInt('my_value', 0);
You can get this value any where you want like this:
var myValue = Titanium.App.Properties.getInt('my_value');
This is because what the statement
Ti.include('model.js');
does is to just sort of 'copy-paste' the code in your 'model.js' file into the other two files. All the variables in 'model.js' will be available to the file in which you included 'model.js'. But this only means that a copy of the variable my_val is made available to 'file2.js' not a variable that is common to all files that have the Ti.include('model.js') line!Including a file in another is pretty much the same as typing out the lines of the first file into the second but it in no way connects all files that include a common file!
So maybe instead of
Ti.include('model.js');
Ti.API.info(my_val);
you can this try this seeing as you have already included 'model.js' in 'file1.js??'
Ti.include('file1.js');
Ti.API.info(my_val);
OR you can always go with Muhammad Zeeshan's advice and check out Ti.App.Properties. Good Luck! :)

Categories