The second page cannot be read in phantomjs --my code is below
var webPage = require('webpage');
var page = webPage.create();
page.onLoadFinished = function(){
var title = page.evaluate(function()
{
return document.querySelector("#link1").innerText;
});
console.log(title);
page.evaluate(function(args)
{
document.querySelector("#link1").click();
});
page.onLoadFinished = function(){
var title1 = page.evaluate(function()
{
return document.querySelector("#div1").innerText;
});
console.log(title1);
phantom.exit();
};
};
page.open('http://staging.eubookingsdata.com/scrape1.php', function(status) {
});
Here the first page is "http://staging.eubookingsdata.com/scrape1.php"
I want to read the content of div in "http://staging.eubookingsdata.com/scrape2.php"
Every thing is working fine ,but when i add target="_blank" in scrape1.php "link" it stopped working.
scrape1.php
<html>
<body>
<a id="link1" name="link1" href="scrape2.php" target="_blank" >click</a>
</body>
</html>
scrape2.php
<html>
<body>
<div id="div1" name="div1">hello world</div>
</body>
</html>
var webPage = require('webpage');
var page = webPage.create();
page.onLoadFinished = function() //1st level
{
var title = page.evaluate(function()
{
return document.querySelector("#link1").innerText;
});
console.log(title); //1st level
//var newPage = webPage.create();
//var page1=page.pages[0];
page.evaluate(function(args){ //1st level
document.querySelector("#link1").click();
});
};
page.onPageCreated = function(newPage){
newPage.onLoadFinished = function(status){ //2nd level
console.log(status);
var title1 = newPage.evaluate(function()
{
return document.querySelector("#div1").innerText;
});
console.log(title1);//2nd level
phantom.exit();
};
};
page.open('http://staging.eubookingsdata.com/scrape1.php', function(status)
{
console.log("page1");
});
Related
YouTube iFrame API “setPlaybackQuality” not working.i want to change video qulity to lowest.but i cant change it by the api.i used player.setPlaybackQuality('small').it not worked.
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
</head>
<body>
<button id="change_quality">Change Quality</button>
<div id="player"></div>
<script>
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
var player;
function onYouTubeIframeAPIReady() {
player = new YT.Player('player', {
height: '390',
width: '640',
videoId: '6LV3JdR5aZw',
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
}
function onPlayerReady(event) {
}
function onPlayerStateChange(event) {
if (event.data == YT.PlayerState.PLAYING) {
$("#change_quality").click(function() {
event.target.playVideo();
var d=player.getPlaybackQuality()
console.log("before");
console.log(d);
player.setPlaybackQuality('small')
var v=player.getPlaybackQuality()
console.log("after");
console.log(v);
});
}
}
</script>
</body>
</html>
it is not working in youtube demo also
Demo
I'm trying to get results from a simple form using PhantomJS. I'm using jQuery but don't work. I have this HTML:
<!doctype html>
<html>
<head>
<title>PhantomJS!</title>
</head>
<body>
<form method="post" id="frm">
<input type="text" name="nombre" id="nombre" />
<input type="submit" value="Publicar" id="btn-submit" />
</form>
Your name is <span id="nombrez"><?php if (isset($_POST['nombre'])) { echo $_POST['nombre'];} ?></span>
</body>
</html>
And this Javascript code:
var page = require('webpage').create();
page.open('http://localhost/phantom/', function() {
page.includeJs("https://code.jquery.com/jquery-3.1.1.slim.js", function() {
page.evaluate(function() {
$('#nombre').val('Fabian');
document.forms[0].submit();
});
page.onLoadFinished = function(){
console.log($("#nombrez").html());
phantom.exit();
};
});
});
page.onLoadFinished must not be called inside of page.evaluate, but inside the main PhantomJS script:
var page = require('webpage').create();
page.onLoadFinished = function(){
var html = page.evaluate(function(){
return document.getElementById("nombrez").innerHTML;
});
console.log(html);
phantom.exit();
};
page.open('http://localhost/phantom/', function() {
page.includeJs("https://code.jquery.com/jquery-3.1.1.slim.js", function() {
page.evaluate(function() {
$('#nombre').val('Fabian');
document.forms[0].submit();
});
});
});
However page.onLoadFinished fires every time a page is done loading and with this implementation phantom will exit the first the time page is loaded, even before the form is submitted.
You need to implement some check to distinguish between the first and the second load of the page. For example, if return html variable is empty it means that we haven't submitted page yet.
I want create a dynamic on click append data to tab but I get in the tab undefined. Could you tell me whats wrong? Not quite sure what is the case,
My js
<script type="text/javascript">
$(document).ready(function () {
// Create jqxTabs.
$('#jqxTabs').jqxTabs({ width: 580, height: 200,showCloseButtons: true });
var length = $('#jqxTabs').jqxTabs('length') + 1;
var loadPage = function (url) {
$.get(url, function (data) {
data;
// console.log( $('#content' + length ).text(data));
// console.log(data);
});
}
$('div.s span').click(function() {
var getvalue = $(this).attr('rel');
$('#jqxTabs').jqxTabs('addFirst', 'Sample title',loadPage(getvalue).text());
$('#jqxTabs').jqxTabs('ensureVisible', -1);
});
// $('#jqxTabs').on('selected', function (event) {
// var pageIndex = event.args.item + 1;
// loadPage('pages/ajax' + pageIndex + '.htm', pageIndex);
// });
});
</script>
My html
<div class="s">
<span rel="gen.php">Load</span>
</div>
<div id='jqxWidget'>
<div id='jqxTabs'>
<ul>
</ul>
</div>
</div>
So first check the right syntax for tab control:
HTML:
....
<div id='jqxTabs'>
<ul>
<li></li>
</ul>
<div></div>
</div>
Javascript:
// Create jqxTabs.
$('#jqxTabs').jqxTabs({ width: 580, height: 200, showCloseButtons: true });
$('#jqxTabs').jqxTabs("removeFirst"); //here removes the empty tab
//here the function must return the content, and the ajax must be async false for this purpose
var loadPage = function (url) {
var result = null;
$.ajax({
url: url,
type: 'get',
dataType: 'html',
async: false,
success: function(data) {
result = data;
}
});
return result;
}
$('div.s span').click(function() {
var getvalue = $(this).attr('rel');
$('#jqxTabs').jqxTabs('addFirst', 'Sample title', loadPage(getvalue));
$('#jqxTabs').jqxTabs('ensureVisible', -1);
});
For better understanding check: http://jsfiddle.net/charlesrv/h4573ykv/1/
EDIT: For the new condition, use a custom attribute so checking would be easier:
$('div.s span').click(function() {
var getvalue = $(this).attr('rel');
var opened = $(this).attr('opened');
if (!opened) {
$(this).attr('opened', true);
$('#jqxTabs').jqxTabs('addFirst', 'Sample title', loadPage(getvalue));
$('#jqxTabs').jqxTabs('ensureVisible', -1);
}
});
Hi I am new to facebook development, and would like to post a feed using this code below, but the message nor the user_message_prompt do not appear in the text box. Do I need to set something in my application to allow this. All I get is default messages.
I tried the 2 methods below, and both of them do not show the message nor user_message_prompt message.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://www.facebook.com/2008/fbml">
<head>
<title></title>
</head>
<body>
<script src="http://connect.facebook.net/en_US/all.js"></script>
<script>
FB.init({ appId: "174009502722096", status: true, cookie: true, xfbml: true });
function postToFeed() {
var publish = {
method: 'feed',
message: 'Martin Okello presents share',
caption: 'Visit MartinLayooinc',
description: (
'Martin Okello, aka the medallion presents his application'
),
link: 'http://www.martinlayooinc.co.uk',
picture: 'http://www.martinlayooinc.co.uk/topImages/bigMedallion.jpg',
user_message_prompt: 'Share MartinLayooinc Software with friends!'
};
FB.ui(publish,
function(response)
{
alert('MartinLayooInc has been posted!!')
});
function callback(response) {
document.getElementById('msg').innerHTML = "Post ID: " + response['post_id'];
}
FB.ui(obj, callback);
}
</script>
<!--from here-->
<div id="fb-root">
<p>
<a onclick='postToFeed(); return false;'><img src="topImages/facebook_button.png" style="height:20px; width:80px;" />
</a>
</p>
<p id='msg'>
</p>
</div>
</body>
</html>
<script type="text/javascript">
window.fbAsyncInit = function () {
FB.init({ appId: '174009502722096', status: true, cookie: true, xfbml: true });
/* All the events registered */
FB.Event.subscribe('auth.login', function (response) {
// do something with response
login();
});
FB.Event.subscribe('auth.logout', function (response) {
// do something with response
logout();
});
FB.getLoginStatus(function (response) {
if (response.session) {
// logged in and connected user, someone you know
login();
}
});
};
(function () {
var e = document.createElement('script');
e.type = 'text/javascript';
e.src = document.location.protocol +
'//connect.facebook.net/en_US/all.js';
e.async = true;
document.getElementById('fb-root').appendChild(e);
} ());
</script>
I believe they are both deprecated. The message parameter is now ignored and I didn't see the other parameter in the documentation. Apparently, Facebook wants users to put their own message into the text field rather than be forced or prompted. Check out the main info page for it here:
https://developers.facebook.com/docs/reference/javascript/FB.ui/
and the detailed page here:
https://developers.facebook.com/docs/reference/dialogs/feed/
Scroll to the bottom and you'll see the supported parameters. Hopefully it's not a game changer for you.
You should do something like this
window.fbAsyncInit = function() {FB.init({
appId: '{YOUR APP ID}',
xfbml: true,
version: 'v2.1'
});
};
(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) {
return;
}
js = d.createElement(s);
js.id = id;
js.src = "//connect.facebook.net/en_US/sdk.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
function share_prompt() {
FB.ui({
method: 'feed',
name: 'Your App Name',
link: 'https://example.com',
picture: 'http://example.com/img/fbicon.jpg',
caption: 'Your Caption here',
description: 'some sort of your own description',
message: 'Your Message goes here mate'
});
}
Then call the function like below;
<div>Click to open your dialog </div>
I'm new to the Google Places Autocomplete API, and to development in general but I'm hoping someone can help point me in the right direction. I've reviewed the Google Places documentation and example. In trying to duplicate Google's example in order to gain a better understanding (http://code.google.com/apis/maps/documentation/javascript/examples/places-autocomplete.html), I receive the following error when I run it:
"The Google Maps API server rejected your request. The "sensor" parameter specified in the request must be set to either "true" or "false"."
What's maddening is I do have "sensor" set to "false"! Please see below for the full page code. Any advice would be greatly appreciated.
<html>
<head>
<title>Google Maps JavaScript API v3 Example: Places Autocomplete</title>
<script src="https://maps.googleapis.com/maps/api/js?sensor=false&libraries=places"
type="text/javascript"></script>
<style type="text/css">
body {
font-family: sans-serif;
font-size: 14px;
}
#map_canvas {
height: 400px;
width: 600px;
margin-top: 0.6em;
}
</style>
<script type="text/javascript">
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(-33.8688, 151.2195),
zoom: 13,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById('map_canvas'),
mapOptions);
var input = document.getElementById('searchTextField');
var autocomplete = new google.maps.places.Autocomplete(input);
autocomplete.bindTo('bounds', map);
var infowindow = new google.maps.InfoWindow();
var marker = new google.maps.Marker({
map: map
});
google.maps.event.addListener(autocomplete, 'place_changed', function () {
infowindow.close();
var place = autocomplete.getPlace();
if (place.geometry.viewport) {
map.fitBounds(place.geometry.viewport);
} else {
map.setCenter(place.geometry.location);
map.setZoom(17); // Why 17? Because it looks good.
}
var image = new google.maps.MarkerImage(
place.icon,
new google.maps.Size(71, 71),
new google.maps.Point(0, 0),
new google.maps.Point(17, 34),
new google.maps.Size(35, 35));
marker.setIcon(image);
marker.setPosition(place.geometry.location);
var address = '';
if (place.address_components) {
address = [(place.address_components[0] &&
place.address_components[0].short_name || ''),
(place.address_components[1] &&
place.address_components[1].short_name || ''),
(place.address_components[2] &&
place.address_components[2].short_name || '')
].join(' ');
}
infowindow.setContent('<div><strong>' + place.name + '</strong><br>' + address);
infowindow.open(map, marker);
});
// Sets a listener on a radio button to change the filter type on Places
// Autocomplete.
function setupClickListener(id, types) {
var radioButton = document.getElementById(id);
google.maps.event.addDomListener(radioButton, 'click', function () {
autocomplete.setTypes(types);
});
}
setupClickListener('changetype-all', []);
setupClickListener('changetype-establishment', ['establishment']);
setupClickListener('changetype-geocode', ['geocode']);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div>
<input id="searchTextField" type="text" size="50">
<input type="radio" name="type" id="changetype-all" checked="checked">
<label for="changetype-all">All</label>
<input type="radio" name="type" id="changetype-establishment">
<label for="changetype-establishment">Establishments</label>
<input type="radio" name="type" id="changetype-geocode">
<label for="changetype-geocode">Geocodes</label>
</div>
<div id="map_canvas"></div>
</body>
</html>
Try this script
<script>
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(-33.8688, 151.2195),
zoom: 13,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById('map_canvas'),
mapOptions);
var input = document.getElementById('searchTextField');
var autocomplete = new google.maps.places.Autocomplete(input);
autocomplete.bindTo('bounds', map);
var infowindow = new google.maps.InfoWindow();
var marker = new google.maps.Marker({
map: map
});
google.maps.event.addListener(autocomplete, 'place_changed', function() {
infowindow.close();
marker.setVisible(false);
input.className = '';
var place = autocomplete.getPlace();
if (!place.geometry) {
// Inform the user that the place was not found and return.
input.className = 'notfound';
return;
}
// If the place has a geometry, then present it on a map.
if (place.geometry.viewport) {
map.fitBounds(place.geometry.viewport);
} else {
map.setCenter(place.geometry.location);
map.setZoom(17); // Why 17? Because it looks good.
}
var image = new google.maps.MarkerImage(
place.icon,
new google.maps.Size(71, 71),
new google.maps.Point(0, 0),
new google.maps.Point(17, 34),
new google.maps.Size(35, 35));
marker.setIcon(image);
marker.setPosition(place.geometry.location);
var address = '';
if (place.address_components) {
address = [
(place.address_components[0] && place.address_components[0].short_name || ''),
(place.address_components[1] && place.address_components[1].short_name || ''),
(place.address_components[2] && place.address_components[2].short_name || '')
].join(' ');
}
infowindow.setContent('<div><strong>' + place.name + '</strong><br>' + address);
infowindow.open(map, marker);
});
// Sets a listener on a radio button to change the filter type on Places
// Autocomplete.
function setupClickListener(id, types) {
var radioButton = document.getElementById(id);
google.maps.event.addDomListener(radioButton, 'click', function() {
autocomplete.setTypes(types);
});
}
setupClickListener('changetype-all', []);
setupClickListener('changetype-establishment', ['establishment']);
setupClickListener('changetype-geocode', ['geocode']);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>