Nativescript : get page object outside loaded function - nativescript

javascript:
...
//I want use page object outside the loded function
var page
exports.loaded =function (args) {
page = args.object;
page.bindingContext = viewModel;
//there is already a 'grid9' element in XML file
var gridLayout = page.getViewById("grid9");
if(gridLayout ) alert("yes");//<============it works
}
if (page.getViewById("grid9")) alert("yes");//<========== got error
I want use page object outside the loaded function.In my mind,page is defined outside the loaded fuction,then the page variable get the real page object in the funtion,so I can use the page object outside the function right now.
But,I got a error of undefined .And ,without the second if statement ,it goes well.
If I met a variable scope mistake or something else?

First problem with your if is that it will execute before loaded function because its outside of functions so its executte immediately at loading of file so either you put that if somewhere to function or try use this to get current page outside of loaded function
var frameModule=require("ui/frame");
var page = frameModule.topmost().currentPage;
but if its still outside exports.foo = function(){} it's not sure that it will page object

Related

document.getElementsBy..().appendChild is not a function error

i have been trying to create a div inside my DOM every time i press the button yet it says appendChild is not a function sorry for the rude code but thats where i am at the moment.
var btn = document.getElementsByTagName('button')[0];
function crtRow(){
var newDiv = document.createElement('div');
newDiv.className = 'row';
document.getElementsByClassName('container').appendChild(newDiv);
document.body.appendChild(container);
}
btn.addEventListener('click', crtRow)
In your example appendChild is trying to be executed with HTML Collection, which it can't. You need to specify index for html collection document.getElementsByClassName('container')[0]
Also, then you will see another error for this line of code document.body.appendChild(container);. That's because you didn't define a variable called as container. It will try to append undefined to the body.

Nightwatch Page Object persistence

Using Nightwatch's Page Object capability, I have all the elements of a page defined as well as its URL. After navigating to the page (e.g., page.navigate()), the code waits for the one of the elements to be visible and then records the values of several elements before clicking on another element that leaves the page. I want to ensure that the page is no longer displayed by waiting for that same element to not be displayed, but that second wait always times out and I'm forced to look for an element that's not on that page to verify I've left the page. For example,
module.exports.command = function (settings)
{ var page = this.page.settings()
page.navigate()
.waitForElementVisible('#firstName',3000)
.getValue('#firstName', function(r) {settings.firstName = r.value})
.getValue('#lastName', function(r) {settings.lastName = r.value})
.waitForElementVisible('#firstName',3000)
.click('#dashboard')
.waitForElementNotVisible('#firstName',3000) // this times out
this.verify.visible('#AvailableProcedures') // but this works
}
My question is: does a page object become invalid once the page is no longer displayed?
'Leaves the page',does that mean navigate to another url ? If yes,you should check the element is 'present or not', instead of 'visible or not'
module.exports.command = function (settings)
{ var page = this.page.settings()
page.navigate()
.waitForElementVisible('#firstName',3000)
.getValue('#firstName', function(r) {settings.firstName = r.value})
.getValue('#lastName', function(r) {settings.lastName = r.value})
.waitForElementVisible('#firstName',3000)
.click('#dashboard')
.waitForElementNotPresent('#firstName',3000,false,
function(),'Element is not there');
}
E.g , when i try to login:
loginPage = client.page.login();
loginPage
.navigate()
.waitForElementVisible('#username',5000,false)
.setValue('#username',username)
.setValue('#password',password)
.click('#submit')
.waitForElementNotPresent('#username,5000,false)

Nativescript Get Current Page

How can I get the current screen I'm working on? For example, I have a slidedrawer containing buttons to navigate to another page. When I'm on a certain page(About Page) and when I tap the button to navigate to the About Page, I want to just close the slidedrawer if it is on the same page.
My idea is that to get the current page and just compare it but I dont know how.
Note: The slidedrawer content menu is a custom component.
There are several ways to solve this problem. The easiest is to install the nativescript-dom plugin and then you can do this really simply:
// This will return an array of elements that are SlideDrawer's.
var slideDrawers = getElementsByTagName('SlideDrawer');
or even better is if you have assigned your SlideDrawer an id, you can do
<!-- Declarative XML -->
<SlideDrawer id="myId">...</SlideDrawer>
// JS: Will return a single element that matching the id.
var mySlideDrawer = getElementById('myId');
However, if you just want to not use any helpers and you want to get direct access to the currentPage the method is to do:
var frame = require('ui/frame');
var myPage = frame.topmost().currentPage;
Please note; the currentPage will reflect the old page while navigation is taking effect until the navigatedTo event is fired, at that point the currentPage is actually updated to be the currentPage. However, if you are looking for the current page during any of the navigation events (NavigatingTo, NavigatedTo, Loaded, Unloaded) each of those events are transferred a parameter with the current page as part of the object.
exports.onNavigatedTo = function(args) {
var page = args.object;
// do what you want with the current page variable
}

ng-grid does not refresh with $resource service

ng-grid is not updating my list.
I am trying to create a object in one view and on creating I redirect my page to list view where i want to see all my added objects. I am able to create a new object through api call and on success I call the view which should ideally show list of all objects, however I dont see the latest added object (On refresh I do see the same object)
Save function call in my create view:
$scope.save = function() {
SERVICE.$save();
$location.path('listview');
}
ListViewCtrl has and init() function which sets the ng grid option
SERVICE.query().
$promise.then(function (data) {
$scope.ngGridOptionVariable = data;
});
I dont see the new data that is being added
Any clue how to handle this issue?

AJAX Loader doesn't stay untill the new content is loaded

I am using AJAX functionality to make my WordPress pages load in real time. I use the following approach to make it load in real time
var toLoad = $(this).attr('href')+' #container';
$('#container').slideUp('300',loadContent);
$('#load').remove();
$('#wrapper').append('<span id="load">LOADING...</span>');
$('#load').fadeIn('normal');
window.location.hash = $(this).attr('href').substr(0,$(this).attr('href').length-5);
function loadContent() {
$('#container').load(toLoad,'',showNewContent())
}
function showNewContent() {
$('#container').slideDown('400',hideLoader());
}
function hideLoader() {
$('#load').fadeOut('normal');
}
return false;
The problem i am facing is that the loading... text appear for half a second and the old content appears again.. and then after 4-5 seconds, it just replaces the new content with the old one.
How can i keep the Loading Text until the content is fully loaded.
Question is not perfectly clear to me,
But,
$('#container').load(toLoad,'',showNewContent())
should be changed to
$('#container').load(toLoad,'',showNewContent)
and,
$('#container').slideDown('400',hideLoader());
to
$('#container').slideDown('400',hideLoader);
We pass the function reference ( we dont call them )
Also, I dont think there's any .fadeIn('normal').
It would be either .fadeIn('slow') or .fadeIn('fast')
Also,
lines following this
$('#container').slideUp('300',loadContent);
do not wait for animation completion. They gets called instantly.
I guess, you would want them to put in loadContent function

Resources