How to use JQuery and custom site variables with phantomjs - javascript

I'm trying out phantomjs for browser testing and am having a few issues. My current code is below...
var page = require('webpage').create();
page.open('http://address.com', function(){
console.log('page opened');
page.evaluate(function(){
console.log('inside page eval');
varname.varaction(13633);
})
if (jQuery('#bcx_13633_iframe_overlay').is(':visible')){
console.log('it is visible');
} else {
console.log('it is not visible');
}
console.log('made it to exit');
phantom.exit();
})
I've tried using includeJS with a link to jQuery and wrapping that around everything between page.open and phantom.exit but it seems to stall out and skip that portion. I have custom actions located on the site that I can call in the console if i visit it as called in the code listed above, however, it tells me that it can't find the variable name for that either. Anyone with phantomjs experience have any tips on how to fix this?

Related

JS not running until second refresh of page

Just what it says. I'm trying to do some simple drop down filtering with jquery, and my function doesn't get executed on page load. Here's what I've checked:
added a console.log to verify
used document.ready to call function
It's getting loaded through sprockets in app.js
it's listed in dev console, and I don't get any resource not found errors
Here's the crazy part : everything works perfectly after one refresh. Console.log comes back and reports the listener has been attached to the select element and everything is roses.
Any ideas why?
EDIT here's the entirety of the js (there may be a better way of doing this, also open to suggestions):
//unrelated JS
$(document).ready(function(){
$("#user_state_code option").unwrap();
$state_copy = $("#user_state_code").children().clone(true);
$("#user_country_code").change(function(){
console.log("state filter called");
filterStates($("#user_country_code").val());
});
$("#user_country_code").change();
});
function filterStates(countryCode){
$("#user_state_code").html(
$state_copy.get().filter(function(d){
var currCountry = String(d.value);
return currCountry.slice(0,2) == countryCode;
})
);
}
Epilogue
Here's what needed to be fixed (thanks to #Rain who put me in the right track, and prompted me to find this amazing resource: Rails 4 turbo-link prevents jQuery scripts from working
var ready = function() {
$("#user_state_code option").unwrap();
$state_copy = $("#user_state_code").children().clone(true);
$("#user_country_code").change(function(){
console.log("state filter called");
filterStates($("#user_country_code").val());
});
filterStates($("#user_country_code").val());
};
function filterStates(countryCode){
$("#user_state_code").html(
$state_copy.get().filter(function(d){
var currCountry = String(d.value);
return currCountry.slice(0,2) == countryCode;
})
);
}
$(document).ready(ready);
$(document).on('page:load', ready);

Close a child window in an Android app made with Angularjs

I'm coding an Android app with Angularjs and cordova, but I have a problem:
For an oauth call I need to open a new window, go to the withings site and when I come on my callback url close the window.
I have tried to use setInterval (or $interval) to check every 2 seconds if I reveived the infos by a call to my API. It works fine on a computer in chrome but when I compile the app with Cordova I never enter in the loop.
So I tried to catch an event or $watch on the url of my new window but I execute only once my function at the first url change even if my call to the API result an error.
This is my last code but I tried a lot of different tests :
var newWindow = $window.open(result.res);
var unwatch = $scope.$watch(window.location, function() {
$http.get(url)
.success(function(result) {
newWindow.close();
unwatch();
$location.path('/tab/dash');
})
.error(function(error) {
console.log(error);
});
});
If you have any idea to make this work, would be very happy.
Thanks by advance !
Finally I found a solution:
I install the cordova plugin inAppBrowser and use this code
var windowWithings = $window.open(result.res, '_blank', 'location=no');
windowWithings.addEventListener('loadstart', function(event) {
$http.get(url)
.success(function(result) {
windowWithings.close();
$location.path('/tab/dash');
})
.error(function(error) {
console.log(error);
});
});
Be careful if you don't add 'location=no' in open it won't work.

function running before javascript include via bookmarklet

Ok, So I am writing a bookmarklet which will hopefully eventully turn into a plugin that will check the current url and then redirect them to another page based on that URL. The problem I an running into is that one of my functions is running before the new js file is included. An example would be me loading jquery and sweet alert then running the sweet alert function:
function loadElements() {
var addjquery = document.createElement('script');
addjquery.src = '//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js';
document.head.appendChild(addjquery);
// Then add sweet alert js/css
}
function runstuff() {
swal("Its good!!","yay","success");
}
Then I run the two back to back
loadElements();
runstuff();
Now what happens is when I run this bookmarklet is I get an error stating that swal is not defined. But when I run it a second time it works perfectly fine and as expected. Any ideas how I can delay the "runstuff" function from running until the javascript is loaded?
You need a callback when the script is loaded, it's asynchronous:
addjquery.addEventListener('load', function (e) {
alert('jQuery Loaded');
console.log(e);
runStuff();
}, false);
Fiddle

PhantomJS cannot open a page

I'm trying to get a html version of my url because of my backbone structure with multiple javascript code but this lines work only sometimes... Yes, sometimes works and the page content is loaded but sometimes phantom stucks and is not able to open the page. In fact, it doesn't log anything.
I'd played with timeouts but I'd got nothing. Any help? It appears to be a no deterministic behaviour. Thanks in advance!
var page = require('webpage').create();
page.open('myurl', function(status) {
if (status !== 'success') {
console.log('FAIL to load the address')
phantom.exit(1);
} else {
console.log( "Successful page open!" );
console.log(page.content);
phantom.exit(0);
}
});

Web App stops working

This question is a bit vague as I am not sure how to phrase it. I fully accept this can be voted down but if anyone has an insight it would be most helpful.
I am trying to determine whether it is my web app code that is at fault or the inherit nature of Mobile Web apps (especially on Android devices).
I have this web app.
It has been designed using asp.net, C#, JavaScript and Jquery.
I have 1 page with 2 divs in it.
The 1st div shows a login page (i.e. Username and Password).
When logged in this div is hidden and the 2nd div is shown.
This 2nd div 'starts' a timer that downloads an image from my server every now and again.
I use the SetTimeout function and I recall it if there is no image ready to download or/and the image.src has finished its onload event.
I can look at this web app on my phone for hours and it will always work.
Then, I logoff (i.e. no timer is active) and the 1st div is shown.
I go to bed.
I wake up.
I go to my Android browser.
The web app shows the login div
I login
All OK.
{so the call to my server works}
But no images are downloaded.
I have put a visual counter in to show whether my timer is working.
It is not.
I refresh the page and relogin. Everything works again.
Now, I can accept if it is my code but is it the way Android handles web apps?
Any suggestions would be grand.
I can post this code if anyone needs to see it,. But it is very simple and I did not want to obscure my question.
CODE#
In DIV 1
<script type="text/javascript">
jQuery(function ($) {
$("#btnGoToLogin").click(function () {
function StartRefresh() {
try {
Start();
//display div 2
//hide div 1
}
catch (err) {
$("#divVersion").html("1# " + err);
}
}
});
});
</script>
In DIV 2
function Start() {
try {
if (timer4x4) window.clearTimeout(timer4x4);
timer4x4 = window.setTimeout(swapImages4x4, 100);
}
catch (err) {
$("#divVersion").html("1# " + err);
}
}
function Stop() {
if (timer4x4) window.clearTimeout(timer4x4);
}
function setImageSrc1x1(src) {
live1x4.src = src;
Start();
}
function swapImages4x4() {
try {
serverImage1x4.onload = function () {
setImageSrc1x1(serverImage1x4.src);
};
serverImage1x4.onerror = function () {
Start();
};
GetImageStatus();
}
catch (err) {
$("#divVersion").html("2# " + err);
}
}
function GetImageStatus() {
serverImage1x4.src = url + '/Mobile/LiveXP.ashx?Alias=' + Alias + '&camIndex=' + camIndex + '&Guid=' + createGuid();
}
jQuery(function ($) {
$("#btnExitLogin").click(function () {
function ExitDiv2() {
try {
Stop();
//display div 1
//hide div 2
}
catch (err) {
$("#divVersion").html("1# " + err);
}
}
});
});
Without the code it's difficult to say where is the problem, but try this 3 approaches:
1) Is this happening if you log off, than log back in again, without leaving the activity?
If so, you should dig in your javascript more
2) Is this happening if you log off, put app in background, than bring it to foreground, log back in? If so look at on pause on resume events
3) It's only happening if you log out, put the app in background leave it for a longer period, I will look more in the onStop
E
Well, I guess you stopped the timeout when you logged out.
So when you login again, you start it again.
But something might fail with the start after the next login.
I guess it's definitively your Javascript code.
(...) but is it the way Android handles web apps?
I guess the automatic lock screen is one thing, that could cause timers to pause / stop.You didn't use your device over the night, so I guess it locked itself. That might cause the browser to stop draining your battery.
E.g. when your screen locks, you won't be able to watch Youtube videos.
That's what I know about it. Hope that helped a bit.

Categories

Resources