I am scraping a site using PHP and I am able to login to site and scrape site data as well.
Now I have switched to Casper js but it is not allowing me to log in site.
Tried to use different user-agents and IP's as well, but couldn't get any success.
casper = require('casper').create();
casper.on('started', function () {
this.page.customHeaders = {
"User-Agent" : "Mozilla/5.0 (Windows NT 6.1; WOW64; rv:51.0) Gecko/20100101 Firefox/51.0",
"Accept": "*/*",
"Accept-Language": "en-US,en;q=0.8",
}
});
casper.start('https:somesite.com');
casper.then(function() {
this.fill('form#J_Form', {
'TPL_password': '123',
'TPL_username': 'xyz',
}, true);
});
casper.wait(20000, function() {
this.echo("I've waited for a 2 seconds.");
});
casper.then(function() {
casper.capture('Screeenshots/loginsuccessfully1.png');
});
casper.thenOpen('https://item.othersite.com/item.htm?id=538450584178', function() {
this.echo(this.getHTML());
});
casper.run(function() {
this.echo('login successfully').exit();
});
any suggestions would be helpfull
thanks.
First I would suggest to use this to start your Casper:
casper = require('casper').create({
verbose: true,
logLevel: 'debug',
viewportSize: {width: 1280, height: 800},
});
as it will provide you much more information regarding what is actually happening in the process.
To answer your question, at login.tmall.com the login is in the iframe, so you need to switch first to that iframe to fill the form. You can do that with this.
casper.then(function() {
this.withFrame(0, function() {
this.fill('form#J_Form', {
'TPL_password': '123',
'TPL_username': 'xyz',
}, true);
});
});
Then combining this with your code, you have this
casper = require('casper').create({
verbose: true,
logLevel: 'debug',
viewportSize: {width: 1280, height: 800},
});
casper.on('started', function () {
this.page.customHeaders = {
"User-Agent" : "Mozilla/5.0 (Windows NT 6.1; WOW64; rv:51.0) Gecko/20100101 Firefox/51.0",
"Accept": "*/*",
"Accept-Language": "en-US,en;q=0.8",
}
});
casper.start('https://login.tmall.com/', function() {
this.capture('test.png');
});
casper.then(function() {
this.withFrame(0, function() {
this.fill('form#J_Form', {
'TPL_password': '123',
'TPL_username': 'xyz',
}, true);
});
});
casper.wait(20000, function() {
this.echo("I've waited for a 2 seconds.");
});
casper.then(function() {
casper.capture('Screeenshots/loginsuccessfully1.png');
});
casper.thenOpen('https://item.othersite.com/item.htm?id=538450584178', function() {
this.echo(this.getHTML());
});
casper.run(function() {
this.echo('login successfully').exit();
});
Related
I am have an api like this:
(This is a wechat-miniprogram api.)
wx.request({
url: 'test.php',
data: {
x: '',
y: ''
},
header: {
'content-type': 'application/json'
},
success (res) {
console.log(res.data)
},
fail(err) {
console.log(err)
},
complete(res) {
console.log(res.data)
}
})
However I want to use it like this:
(I want to use it like an observable.)
rxwx.request({
url: 'test.php',
data: {
x: '',
y: ''
},
header: {
'content-type': 'application/json'
},
}).subscribe(
(res) => {
console.log(res.data)
},
(err) => {
console.log(err)
},
(res) => {
console.log(res.data)
}
)
I cannot transform wx.login with bindCallback or bindNodeCallback. Please help. Thanks in advance :D
Use Observable constructor instead
const request=new Observable(emitter=>{
wx.request({
url: 'test.php',
data: {
x: '',
y: ''
},
header: {
'content-type': 'application/json'
},
success:emitter.next
fail:emitter.error
complete:emitter.complete
})
return ()=>{ //... clearn up logic here }
}
I've recently started to study reactjs and I'm currently experimenting with ajax requests and passing properties from parent to children. I have a react component Competitions which performs an ajax request:
var Competitions = React.createClass({
getInitialState: function() {
return {
compData: [],
}
},
componentDidMount: function() {
axios.get(this.props.source, {
headers: {'X-Auth-Token': '*******************',
'Content-type': 'application/json'}
})
.then(result => {
this.setState({compData: result.data});
})
.catch(error => {
console.log(error);
});
},
render: function() {
return (
<CompTable compData={this.state.compData} />
);
}
});
module.exports = Competitions;
The Competitions component passes the results data to CompTable
var CompTable = React.createClass({
propTypes: {
compData: React.PropTypes.array.isRequired
},
handleClick: function(e) {
var url = 'http://api.football-data.org/v1/competitions/x/teams';
var source = url.replace(url.split('/')[5], e);
console.log(source);
},
render: function() {
var list = this.props.compData.map(function (comp, i) {
return (
<tr key={i+1}>
<th scope="row">{i+1}</th>
<td className={comp.id} onClick={this.handleClick.bind(this, comp.id)} >{comp.caption}</td>
</tr>
);
}, this);
return (
<tbody>{list}</tbody>
)
}
});
module.exports = CompTable;
This is the Teams component
var Teams = React.createClass({
getInitialState: function() {
return {
teamData: [],
}
},
componentDidMount: function() {
axios.get(this.props.source, {
headers: {'X-Auth-Token': '*******************',
'Content-type': 'application/json'}
})
.then(result => {
this.setState({teamData: result.teams.data});
})
.catch(error => {
console.log(error);
});
},
render: function() {
return (
<TeamsTable teamData={this.state.teamData} />,
);
}
});
module.exports = Teams;
What I'm trying to do is take on click the compData.id property of the CompTable component with a handleClick function and use it as a source property on another component named Teams (identical with the Competitions component) that uses the given property as a source url in order to perform a new ajax request. Is there a way to do that? Thank you
I think I found a solution to my problem.
So, Competitions is the Parent and CompTable and Teams are the children. I don't know if there is a simpler way, but this one seems to work. It's not perfect, I have other problems to solve, but I managed to make a second ajax call inside a child component using my first ajax call inside the parent component, by grabbing the compData.id property and passing it to the children, on click. Any comments are welcome.
Competitions component
var Competitions = React.createClass({
getInitialState: function() {
return {
compData: [],
id: "",
}
},
componentDidMount: function() {
axios.get(this.props.source, {
headers: {'X-Auth-Token': '********************',
'Content-type': 'application/json'}
})
.then(result => {
this.setState({compData: result.data});
})
.catch(error => {
console.log(error);
});
},
changeId: function (newId) {
this.setState({
id: newId
});
},
render: function() {
return (
<CompTable compData={this.state.compData} id={this.state.id} onClick= {this.changeId} />
);
}
});
module.exports = Competitions;
CompTable component
var CompTable = React.createClass({
propTypes: {
compData: React.PropTypes.array.isRequired
},
getInitialState: function() {
return {
showTeams: false,
hide: false,
};
},
teamsClick: function() {
this.setState({
showTeams: true,
hide: true,
});
},
handleClick: function(e) {
this.props.onClick(e);
},
render: function() {
var list = this.props.compData.map(function (comp, i) {
return (
<tr key={i+1}>
<th scope="row">{i+1}</th>
<td className={comp.id} onClick={function() { this.teamsClick(); this.handleClick(comp.id); }.bind(this)}> {comp.caption} </td>
<td>{comp.league}</td>
<td>{comp.numberOfTeams}</td>
</tr>
);
}, this);
return (
<div > { this.state.showTeams ? <Teams id={this.props.id}/> : null } </div>
<tbody>{list}</tbody>
)
}
});
module.exports = CompTable;
Teams component
var Teams = React.createClass({
getInitialState: function() {
return {
teamData: [],
}
},
componentDidMount: function() {
var url = 'http://api.football-data.org/v1/competitions/x/teams';
var source = url.replace(url.split('/')[5], this.props.id);
axios.get(source, {
headers: {'X-Auth-Token': '********************',
'Content-type': 'application/json'}
})
.then(result => {
this.setState({teamData: result.data.teams});
})
.catch(error => {
console.log(error);
});
},
render: function() {
return (
<TeamsTable teamData={this.state.teamData}/>
);
}
});
module.exports = Teams;
I am using the latest version of the jQuery plugin SweetAlert2. I want to use the "Dynamic queue"-function to make a AJAX call. So on the homepage there is a nice example, but you have to click a confirm button first to execute the AJAX call. I do not want this, when the alert is shown the AJAX call should execute immediately, without clicking a button. So how to do this?
Here the example from the homepage
swal.queue
([{
title: 'Your public IP',
confirmButtonText: 'Show my public IP',
text: 'Your public IP will be received via AJAX request',
showLoaderOnConfirm: true,
preConfirm: function()
{
return new Promise(function (resolve)
{
$.get('https://api.ipify.org?format=json').done(function(data)
{
swal.insertQueueStep(data.ip);
resolve();
});
});
}
}])
You should pass the callback with the AJAX request to onOpen parameter:
Swal.queue([{
title: 'Your public IP',
confirmButtonText: 'Show my public IP',
text:
'Your public IP will be received ' +
'via AJAX request',
onOpen: () => {
fetch('https://api.ipify.org?format=json')
.then(response => response.json())
.then(data => {
Swal.insertQueueStep(data.ip)
})
}
}])
<script src="https://cdn.jsdelivr.net/npm/sweetalert2#8"></script>
My working example for auto submit form with sweetalert loading and display results.
var preMessage = $('#new-ad-form').attr('pre-message');
var formData = $('#new-ad-form').serialize();
var formUrl = $('#new-ad-form').attr('action');
Swal.queue([{
allowOutsideClick: false,
allowEscapeKey: false,
title: preMessage,
showConfirmButton: false,
showCloseButton: false,
showCancelButton: false,
onOpen: () => {
Swal.showLoading();
return fetch(formUrl, {
method: 'POST',
body: formData,
headers: {
'Accept': 'application/json, text/plain, */*',
'Content-Type': "application/x-www-form-urlencoded",
}
})
.then(response => response.json())
.then(data => {
Swal.hideLoading();
if (data.status == 'success') {
Swal.update({
allowEscapeKey: false,
allowOutsideClick: false,
showConfirmButton: false,
showCloseButton: false,
showCancelButton: false,
type: 'success',
title: false,
html: data.html
})
} else {
Swal.update({
type: 'error',
title: false,
html: data.html,
allowEscapeKey: true,
allowOutsideClick: true,
showConfirmButton: true,
})
}
})
.catch(() => {
Swal.hideLoading();
Swal.update({
type: 'error',
title: 'Save request error!',
html: false
})
})
}
}]);
IE is driving me bananas. I've tried searching for answers on here, and the answers I've found don't seem to be working either.
I'm trying to read the output of a php file, write it within a div (that is generated using jQuery), and then check the php output every minute. I've tested the php file in all browsers, and it's working fine, so it's definitely something with the js. Here's what I've tried so far (they work in everything BUT IE).
The php will output:
<p>Example alert text</p>
Right now, I have:
jQuery('<div/>', {
id: 'emerg-alert-system'
}).prependTo( "body" ).css({
"background": "#b40000",
"color": "white",
"display": "block",
"max-width": "100%",
"font-family": "Arial,sans-serif",
"font-size": "1rem",
"text-align": "center",
"text-transform": "uppercase",
"letter-spacing": "1px"
});
function get_alert() {
$.ajaxSetup( { cache: false } );
var request = $.ajax({
url: "http://example.com/alert.php",
type: "GET",
dataType: "html",
cache: false
});
request.done(function(msg) {
$("#emerg-alert-system").html(msg);
});
};
setInterval( get_alert, 1*60*1000 );
get_alert();
I've tried it with and without ajaxSetup/ajax cache: false, and I've also tried it with $.get() and $.post() (swapped one out for the other)
function get_alert() {
$.ajaxSetup( { cache: false } );
$.get('http://example.com/alert.php', function(data) {
$( "#emerg-alert-system" ).html( data );
});
};
setInterval( get_alert(), 1*60*1000 );
get_alert();
The only thing generating is:
<div id="emerg-alert-system"> </div>
Anything else I should try?
So my co-worker and I reworked this to no end and finally got it working to our liking. Here's the new JS:
jQuery(document).ready(function () {
jQuery('<div/>', {
id: 'emerg-alert-system'
}).prependTo( "body" ).css({
"background": "#b40000",
"color": "white",
"display": "block",
"max-width": "100%",
"font-family": "Arial,sans-serif",
"font-size": "1.2em",
"text-align": "center",
"text-transform": "uppercase",
"letter-spacing": "1px",
"line-height": "1.5"
});
function get_alert () {
$.ajaxSetup({ cache: false });
$.get('http://example.com/alert.php').done(function ( data ) {
$("#emerg-alert-system").html(data);
if( !$.trim( $('#emerg-alert-system').html() ).length ) {
$("#emerg-alert-system").css({ "display": "none" });
}
});
}
window.onload = function () {
get_alert();
setInterval( get_alert, 1*60*1000 );
}
});
Is it possible for pagination last button reload in jquery datatable?
I have used jquery datable ,Now my record more than one lack's data.
So I have page initialize 1000 record load and then last pagination button click reload data 1000.
can give me any other idea...?
For your reference:
$("#tblExmaple").hide();
jQuery(document).ready(function ($) {
getRecords();
function getRecords() {
jQuery.support.cors = true;
$.ajax({
cache: false,
type: "GET",
url: "http://localhost:1111/TestSample/api/getRecords",
datatype: "json",
data: { Arg1: "Values1",Arg2: "Values2",Arg2: "Values3" },
statusCode: {
200: function (data) {
$.each(data, function (index, obj) {
var colRes1 = obj.Res1;
var colRes2 = obj.Res2;
var dataAdd = [colRes1, colRes2];
getData.push(dataAdd);
});
// Server Side Code
setTimeout(function () {
$('#tblExmaple').dataTable({
"sPaginationType": "full_numbers",
"sScrollXInner": "50%",
"sScrollyInner": "110%",
"aaData": getData,
"iDisplayLength": 8,
"sInfoEmpty": false,
"bLengthChange": false,
"aoColumns": [
{ "sTitle": "Column1" },
{ "sTitle": "Column2" }
];
})
}, 500);
setTimeout(function () {
$("#tblExmaple").show();
}, 500);
},
408: function (data) {
var response_Text = JSON.stringify(data, undefined, 50);
if (data.response_Text == undefined) {
window.location = "/Home/Index";
}
else {
timeoutClear();
}
}
}
});
}