I want to save an element in a variable.
This is my code
var casper = require("casper").create();
var data = "";
casper.start("http://www.naver.com",function(){
data = require('utils').dump(this.getElementsAttribute("#name","cy"));
});
casper.run();
This doesn't work!
If I remove (data =) part, then it makes a log in cmd...
But, I didn't even used this.echo !!
Selector #name doesn't actually exists in www.naver.com
It is too long, so I just used #name for a replacement.
I think you are missing some basic idea about CasperJS... I write a small sample code for you to illustrate extracting data by css selector:
var casper = require("casper").create();
var data;
casper.start("http://stackoverflow.com/users/6571228/cute-developer",function() {
data = casper.evaluate(function () {
return document.querySelector('#user-card > div > div.row.col-content > div.col-left.col-8.about > div.bio > p').textContent;
})
}).then(function () {
casper.echo("result:\n" + data);
});
casper.run();
Output:
$ casperjs evaluate2.js
result:
I wanna be a best Korean woman developer.
Feel free to leave a comment here if you still got some questions about CasperJS...
Related
I'm now using casperjs for web crawling. Almost everything is good, but I faced some trouble. First, my code is like below.
casper.start().each(SOME_URLS, function(self, URL) {
self.thenOpen(URL, function() {
self.then(function() {
var getDatas = function() {
var title = $('SOME_SELECTOR').map(function() {
return $(this).text();
}).get();
return {
title: title
};
}
data = self.evaluate(getDatas);
console.log(JSON.stringify(data));
});
});
}).run();
I want to get some data from webpage to 'data' variable. Sometimes data is perfectly good(on console.log), but sometimes, data is empty!
Why this happening? What did I wrong?
The problem is you cant call casper.start more than once. Your loop needs to inside the casper.start function or inside a casper.then
See this excellent SO answer to help you do this.
Basically only call casper.start once and place your loop inside a casper.then
I am trying to create an JQM app and are doing so by getting a lot of data from database. When I click on a link from a ajax/json generated calendar list I should then be able to get the info for that event by calling the server and get the data. As it is now I do this in 2 steps like this.
My ajax generated event list:
$.each(groupcalendar, function (i, val) {
output += '<li><h2>' + val.matchformname + '</h2><p><strong>' + val.matchday + '</strong></p><p>' + val.coursename + '</p><p class="ui-li-aside"><strong>' + val.matchtime + '</strong></p></li>';
});
When I click on one of the links I want to goto a page called prematchdata.html and get the data fro that specific event. I do so by first calling the click and get the eventid from data-id like this:
$(document).on('click', '#gotoMatch', function () {
var matchid = $(this).attr("data-id");
$.get("http://mypage.com/json/getmatchinfo.php?matchid="+matchid, function(data) {
localStorage["matchinfo"] = JSON.stringify(data);
$.mobile.changePage( "prematchdata.html", { transition: "slide", changeHash: true} );
}, "json");
});
I save the returned data as localStorage and then uses this data in my pageinit like this:
$(document).on("pageinit", "#prematchdata", function() {
var matchinfo = {};
matchinfo = JSON.parse(localStorage["matchinfo"])
var content = '<h2>'+matchinfo["matchname"]+'</h2>';
$('.infoholder').html(content);
});
It works, although for me it seems like the last 2 steps should be done in one, but i am not sure how to do so? It seems a little bit wrong get data, save locally and then use it? Can't this be done without the $(document).on('click', '#gotoMatch', function () {});?
Hoping for some help and thanks in advance :-)
You could try sending it up using a query string. When you're using changePage, change your code like this :
$(document).on('click', '#gotoMatch', function () {
var matchid = $(this).attr("data-id");
$.get("http://mypage.com/json/getmatchinfo.php?matchid=" + matchid, function (data) {
paramData = data[0];
$.mobile.changePage("prematchdata.html", {
transition: "slide",
changeHash: true,
data: paramData //added this extra parameter which will pass data as a query string
});
}, "json");
});
When you're getting it back,
$(document).on("pageinit", "#prematchdata", function() {
var url = $.url(document.location);
var name= url.param("matchname");
var content = '<h2>'+ name +'</h2>';
$('.infoholder').html(content);
});
Another easy way would be use a singlepage template instead of a multi page template. Then, you could just use a global variable to get and set data.
That said, what you're doing right now is more secure than this query string method. By using this, anyone can see what you are sending over the URL. So I advise you keep using localStorage. For more info on this, look into this question.
Ok, I've looked at a lot of examples that don't really appear different from mine. I simply want to do something (right now, just an alert), when a checkbox changes (is clicked, or whatever). My code:
$(document).ready(
function () {
$('input:checkbox').bind('change', function() {
var id = $(this).attr("id").substring(5);
var skill = $("#skill" + id).val();
alert("you processed skill number " + skill);
})
}) ; // end doc ready
One thing that MAY be different from others is that I'm dynamically creating these checkboxes with another script included like this (without the "script" tags here):
<pre>src="jscript/skills_boxes.js" type="text/javascript" </pre> <br>
Currently that is ABOVE my 'problem' but I've had it below and my stuff still doesn't work. Is there some sort of timing issue here? I'd appreciate any help. Thanks.
Use jquery on function.
$(document).ready(
function () {
$('body').on('change', 'input:checkbox', function() {
var id = $(this).attr("id").substring(5);
var skill = $("#skill" + id).val();
alert("you processed skill number " + skill);
})
}) ; // end doc ready
For some reason when I try running the following code:
var casper = require('casper').create();
var x = require('casper').selectXPath;
var links = [];
casper.start('http://www.website.com');
function getLinks() {
var links = document.querySelectorAll(x('//*[#id="horizontalList"]/li[#class="paddingRight6"]/a');
return Array.prototype.map.call(links, function(e) {
return e.getAttribute('href')
});
}
casper.then(function() {
links = this.evaluate(getLinks);
this.echo(links);
}
casper.run();
Returns a null object, but when I use the very same xpath selector in conjunction with the thenClick method, everything works fine and the url changes. Why on earth is that?
So, it turns out that the querySelectorAll method doesn't actually support XPath. In fact it doesn't come from casperjs at all, and is supported by the browser, which is why it accepts CSS3 selectors, and not XPath. It was tough for me to figure that out so I figured I would put this up in case anyone else had this problem. You have to use CSS3 selectors for this within casperjs so the line:
var links = document.querySelectorAll(x('//*[#id="horizontalList"]/li[#class="paddingRight6"]/a');
Needs to be changed to:
var links = document.querySelectorAll('ul#horizontalList li.paddingRight6 a');
Happy hacking
The below function works for me with Xpath.
function getLinks() {
var links =__utils__.getElementsByXPath('//*[#id="horizontalList"]/li[#class="paddingRight6"]/a');
return Array.prototype.map.call(links, function(e) {
return e.getAttribute('href');
});
}
I've successfully implemented a bit of code that strips all HTML from a pasted string using stripTags(). My next goal is to mark a few tags with white flags so they get ignored on 'paste' event using .wrap() to augment the function.
I'm using prototype.js as a framework and have slowly been working through the growing pains of learning both the framework and javascript, but this issue has presented a bit of a roadblock.
I've googled around a bit and found what looks like two great solutions, but I don't seem to be implementing them correctly.
Found solutions:
http://perfectionkills.com/wrap-it-up/ (function to indicate tags to remove)
and
http://pastebin.com/xbymCFi9 (function to allow tags to keep)
I pretty much copied and pasted from the latter.
If I pull the 'br' from the code, then the regex is ignored and all html is stripped. If I leave it, nothing gets pasted.
Here is what I've pieced together (and I feel silly for not being able to figure this out!).
String.prototype.stripTags = String.prototype.stripTags.wrap(
function(proceed, allowTags) {
if (allowTags) {
if (Object.isString(allowTags)) allowTags = $w(allowTags)
this.gsub(/(<\/?\s*)([^\s>]+)(\s[^>]*)?>/, function(match) {
if (allowTags.include(match[2].toLowerCase()))
return match[1] + match[2] + match[3] + '>'
})
} else {
// proceed using the original function
return proceed();
}
});
WysiHat.Commands.promptLinkSelection = function() {
if (this.linkSelected()) {
if (confirm("Remove link?"))
this.unlinkSelection();
} else {
var value = prompt("Enter a URL", "http://www.alltrips.com/");
if (value)
this.linkSelection(value);
}
}
document.on("dom:loaded", function() {
var editor = WysiHat.Editor.attach('event_desc');
var toolbar = new WysiHat.Toolbar(editor);
editor.observe("paste", function(event) {
var el = $(this);
setTimeout(function() {
var pText = el.innerHTML.stripTags('br');
//alert(pText);
$('event_desc_editor').update(pText);
$('event_desc').setValue(pText);
}, 0);
});
(You may recognize the WysiHat code from 37Signals text editor)
note: you can see the alert commented out. If I do alert the ptext, I get 'undefined' returned.
So I've given up on and moved to a regex solution:
el.innerHTML.replace(/<(?!\s*\/?\s*p\b)[^>]*>/gi,'')