I'm working with two js files and sharing variables between them in a titanium app. In my main app.js I have 3 variables associated with each row in a table. I have an event listener for when a row is clicked to open a modal view whose components are in a separate js file. My three variables are below and on the click event I have an alert of the 3 variables and the 3 global variables.
var titleText = titleInRow.text;
var artistText=artistInRow.text;
Ti.App.myGlobalSongVar = titleText;
Ti.App.myGlobalArtistVar = artistText;
var rowNumber=e.row.name;
Ti.App.myGlobalRowNumber= rowNumber;
alert("titleText is: "+titleText+" and /n artistText is "+artistText+ " and /n row number is "+rowNumber +"/n TiAppmyGlobalSongVar is "+Ti.App.myGlobalSongVar+ " /n TiAppmyGlobalArtistVar is "+Ti.App.myGlobalArtistVar);
These are all returning the correct results. Then in my second js file, I also have the following alert:
alert("\n TiAppmyGlobalSongVar in modal is "+Ti.App.myGlobalSongVar+ " \n TiAppmyGlobalArtistVar in modal is "+Ti.App.myGlobalArtistVar + "TiAppmyGlobalRowNumber in modal is "+Ti.App.myGlobalRowNumber);
In the second js file The first time I click on a row, my second alert's variables are all undefined. The second time I click they are all defined but sometimes wrong. It seems to give the results of the variables for the row I first clicked which was undefined. Hope this question was clear. What am I doing wrong?
UPDATE PLEASE READ!!:
In the end, after trying:
Titanium.API.titleText = titleText;
Titanium.API.artistText = artistText;
and
Ti.App.Properties.setString('globalTitleText', titleText);
Ti.App.Properties.setString('globalArtistText', artistText);
and
Ti.App.myGlobalSongVar = titleText;
Ti.App.myGlobalArtistVar = artistText;
(which ALL worked the second time, but were undefined the first),
the only thing which worked was firing this event in my table event listener:
Ti.App.fireEvent('myCustomEvent', {
myTitleText: titleText,
myArtistText: artistText
});
and having this in my second js file:
var globalTitleText;
var globalArtistText;
Ti.App.addEventListener('myCustomEvent', function(event) {
globalTitleText=event.myTitleText;
globalTitleText=event.myTitleText;
//Ti.App.globalTitleText=event.myTitleText;
//Ti.App.globalArtistText=event.myArtistText;
alert('You sent me: '+event.myTitleText+" and "+event.myArtistText);
});
//However I can't use it here in my second js file (outside the custom event listener) as it is undefined.
Can anyone help me with the last bit of the problem?
I still don't know why the other methods didn't work. I've used them in different contexts before and they did work, but not in this particular instance!
Is the following code IN the eventListener?
var titleText = titleInRow.text;
var artistText=artistInRow.text;
Ti.App.myGlobalSongVar = titleText;
Ti.App.myGlobalArtistVar = artistText;
var rowNumber=e.row.name;
Ti.App.myGlobalRowNumber= rowNumber;
Because for your variables to be global, you need to declare them outside the eventListener function. Something like:
var rowNumber;
tableView.addEventListener('click',function(e) {
rowNumber = e.rowIndex;
}
rowNumber will be global if declared in App.js, whereas:
tableView.addEventListener('click',function(e) {
var rowNumber;
rowNumber = e.rowIndex;
}
won't.
Pleasee go through this link in titanium developer forum
Global Variables in Titanium
.........................
And it's also best to pass your own object it works in that case.
Passing object as global variable
Please Check it out and let me know
Note : also declare the variables in App.js :) if any value is to be modifies then do it in other JS.
Related
Is there a way to trigger a function from within a rowFormatter? I'm using the responsiveLayout: "collapse"-option, and I really like it.
However, I would like to trigger the toggleList function (or what's it's called.... 1 from '19)
I would like to not go the .click() way, so I created my own (rip-off) solution within the rowClick:
let isOpen = row._row.modules.responsiveLayout.open;
var collapseEl = row._row.element.querySelector('div.tabulator-responsive-collapse');
if (!(isOpen)) {
collapseEl.classList.add("open");
if (collapseEl) {
collapseEl.style.display = '';
}
} else {
collapseEl.classList.remove("open");
if (collapseEl) {
collapseEl.style.display = 'none';
}
}
row._row.modules.responsiveLayout.open = !(isOpen);
But... There must be a good way to trigger toggleList(), instead of writing a rip-off function, which doing the same thing...
I've tried to look through the values and functions in row._row, with no luck. I'm 99.7% sure that I missed this part in the documentation........ But I've really tried to search the best I could.
TL;DR: I would like to trigger the toggleList() function defined within formatter, in my rowClick() event-function. Is that possible?
There is no toggleList function built into Tabulator.
In the example you reference there it is simply a function called toggleList that is defined inside the row formatter and triggered when an element added by the row formatted is clicked.
Because the toggleClick function is defined inside the row formatter its scope is limited to that formatter function so it cannot be accessed from outside it.
one way to get around this would be to assign the function to a property on the row data object then you could access it from else where in the table.
So if we take the example you provided a link to and at the top of the customResponsiveCollapseFormatter function add the following:
var data = cell.getData(); //retrieve the row data object
Yhen where we define the toggleList function, instead of the simple function definition we can assign it to a property on the data object, lets call it collapseToggle, we will also tweak it so it dosnt need the isOpen property passed in and insted flips the state of the open variable itself, that way it can be called from anywhere outside the formatter without knowledge of the current state:
data.collapseToggle = function toggleList(){
open = !open;
Then in our cellClick function we can check to see if the collapseToggle property is defined on the row data and then call it:
cellClick:function(e, cell){
var data = cell.getData();
if(data.collapseToggle){
data.collapseToggle();
}
}
We are defining variables from the elements on one page of the website, clicking on the edit button, which is opening the next page. In this page we need to assert that the data captured on the earlier page matches the data shown on the 2nd page. Our problem is, once the test moves to the 2nd page, it fails to recall the variables that we defined on the 1st page. below is our code snippets:
it ('Student ID Validation', function(){
// get rows
var rows = tableData_Dashboard.all(by.tagName("tr"));
// get cell values
var cells = rows.all(by.tagName("td"));
var Student_ID = cells.get(0).getText().then(function(SID){
console.log(SID);
});
Edit_Button_1.click();
browser.sleep(2000);
expect(Student_ID_on_Reg_Page.getAttribute('value')).toEqual(Student_ID);
after execution, we get the following error
Message:
Expected '123456' to equal undefined.
We were suspecting that it may be due to asynchronization, but that is not the case. the test moves to page 2 after it stores the variable from page 1, so we are at a loss why this is happening. How can we fix this and use the variables for assertion purpose?
The problem is that you've specified the then() callback where you just log the value but don't return it:
var Student_ID = cells.get(0).getText().then(function(SID){
console.log(SID);
});
As nothing is returned, Student_ID would become a promise which would resolve into undefined.
You either need a return:
var Student_ID = cells.get(0).getText().then(function(SID){
console.log(SID);
return SID;
});
Or, remove the custom callback completely:
var Student_ID = cells.get(0).getText();
actually, the following part is causing the problem. Once we removed this part, the test is working fine.
.then(function(SID){
console.log(SID);
});
so i have some code which looks like this :
var my_important_var_x = 'init'; // my global variable for storing one very important piece of info. [screen size/resolution]
function checkmyresolutin() {
// this tests the broswer/window resolution and print to the body [for css purposes]
var resolution_is = '768px';
my_important_var_x = resolution_is; // now the var contains the resolution
return my_important_Var_X;
}
checkmyresolutin(); // for getting the resolutoin on document ready.
$(window).resize(function(){
checkmyresolutin(); // this is the important part,every time the browser is resized i need to know ,certain function load/unload on certain resolutions.
});
function_abc(); // this is my problem,ill explain bellow,to keep this code block clean.
So after the checkmyresolutin() is called when the browser is resized and it returns the resolution/sceensize and is stored in the my_important_var_x variable ,i need to pass that latest information from that variable to the function_abc(); function...anyone ?
EDIT :
Guys,there are typos but ignore them,i did not copy paste my .js,becasuse it would take up to 400 lines,this is just an example ,the "logic" is what's important here.
I just need somehow to pass content of the enter code here to the function_abc() after the checkmyresolutin() has been run by the jQuery resize function()
You have a typo:
var my_important_var_x = 'init'; // my global variable for storing one very important piece of info. [screen size/resolution]
should be
var my_important_Var_X = 'init'; // my global variable for storing one very important piece of info. [screen size/resolution]
See this JSFiddle, with an annoying alert, to show it working.
I also made a different version where function_abc() is called automatically on resize, just to show how that works.
Check out this discussion of variable scope in Javascript.
I have the following little piece of code:
var instance = this;
window.onload = function () {
for (var i = 0; i < array.length; ++i) {
var currentDivId= array[i];
var currentDiv = document.getElementById(currentDivId);
try {
if (!currentDiv) {
throw 'Div id not found: ' + currentDivId;
}
var image = document.createElement('img');
image.src = 'img.jpg';
image.onclick = function() {
instance.doSomething(currentDivId);
};
currentDiv.appendChild(image);
}
catch(e) {
console.warn('oops');
}
}
};
This code is passed an array of id of divs. What it does is that, it renders an image at each of those divs and set their onclick property.
Say I have an array of strings: ['abc', 'xyz']
I want the code to place an image inside <div id="abc"></div> and another image inside <div id="xyz"></div>.
When you click the first image, instance.doSomething function should be called with parameter 'abc' and vice versa.
But the code does not work as expected. It always calls instance.doSomething with the last parameter in the array, in this case, 'xyz'.
I'm new to JS and still don't have a solid grasp of its inner workings. What's wrong here and how can I fix it?
Any help appreciated.
image.onclick = function() {
instance.doSomething(this.parentNode.id);
};
That should do it. Since we know that the image is inside the div we want to get at, just go one dom element up and get its id.
Welcome to the wonderful world of Javascript scoping issues. As it stands now, JS is treating your onclick code as something like "when this object is clicked, fetch the value stored in the currentDivID variable AT THE TIME THE CLICK occurs and pass it to the doSomething function".
What you should do is base the argument on the image object itself. Every DOM object knows where it is in the DOM tree, so at the time it's clicked, the onclick code should use DOM traversal operations to figure out which div it's inside of and dynamically retrieve its ID. That way you don't have to worry about binding variables and scoping issues... just figure out which div contains your image and get the ID at run time.
Try:
image.onclick = (function() {
var currentD = currentDivId;
return function() {
instance.doSomething(currentD);
}
})();
Hope it helps
Very confused here.
I have a search box which reads a list of school names from my database. When I select a school, the id (from the db) gets put in a hidden textbox.
I also have a search box which reads a list of courses from my database. However, I made the query so that it only reads the courses from the selected school.
It does that, in theory.
I was planning to pass the school id, which I grab from the hidden box, to the search script which in turn passes it to my database query. However, the variable I put my school id in doesn't seem to be updating.. yet it does. Let me explain.
I come on the page. The school for my test account has id 1. The id number in my hidden box is indeed 1. I search for a school which I know has some courses assigned to it: the id number in the box changes to 3.
I have a JS variable called school_id which I declared outside of my $(document).ready. I assume that means it's global (that's what I got taught even though SO told me once it isn't really the correct way to do this. Still have to look into that). I wrote a function which updates this variable when the school search box loses focus:
$("#school").blur(function() {
school_id = $("#school_id").val();
});
A quick javascript:alert(school_id); in my browser bar also shows the updated variable: it is now 3 instead of 1.
Onto the search script part of my page (excerpt of the script):
script:"/profiel/search_richting?json=true&limit=6&id=" + school_id + "&"
As you can see, I pass the school_id variable to the script here. However, what seems to be happening is that it always passes '1', the default variable when the page loads. It simply ignores the updated variable. Does this string get parsed when the page loads? In other words, as soon as the page loads, does it actually say &id=1? That's the only idea I can come up with why it would always pass '1'.
Is there a way to make this variable update in my script string? Or what would be the best way to solve this? I'm probably missing out on something very simple here again, as usual. Thanks a lot.
EDIT
Updated per request. I added a function getTheString as was suggest and I use the value of this function to get the URL. Still doesn't work though, it still seems to be concatenating before I get a chance to update the var. HOWEVER, with this code, my ajax log says id:[object HTMLInputElement], instead of id:1. Not sure what that means.
<script type="text/javascript">
var school_id;
$(document).ready(function() {
$("#school").blur(function() {
school_id = $("#school_id").val();
});
// zoekfunctie
var scholen = {
script:"/profiel/search_school?json=true&limit=6&",
varname:"input",
json:true,
shownoresults:false,
maxresults:6,
callback: function (obj) { document.getElementById('school_id').value = obj.id; }
};
var as_json = new bsn.AutoSuggest('school', scholen);
var richtingen = {
script: getTheString(),
varname:"input",
json:true,
shownoresults:true,
maxresults:6
};
var as_json2 = new bsn.AutoSuggest('studierichting', richtingen);
});
function getTheString() {
return "/profiel/search_richting?json=true&limit=6&id=" + school_id + "&";
}
</script>
This is because the URL is static, it is not updated as the ID changes.
You should update the URL as part of the code you wrote to get the ID:
$("#school").blur(function() {
school_id = $("#school_id").val();
// update URL here ...
});
Aren't you concatenating script:"/profiel/search_richting?json=true&limit=6&id=" + school_id + "&" before the event is fired and the var updated?
Okay. So the problem was my third party plug-in instead of the code I wrote. I fixed this by editing the code of the autoSuggest plugin so it now includes my id field in the AJAX request.
var url = this.oP.script+this.oP.varname+"="+encodeURIComponent(this.sInp)+"&id="+ $("#school_id").val();
Thanks to everyone who tried to help me out!