Develop Reference

Java HtmlUnit click on anchor link does not work. How do I get the new page?

I'm trying to click on a "More" anchor tag on a website using HtmlUnit in order to expand a list until the more anchor tag does not exist.
page = client.getPage(url);
HtmlAnchor anchor;
while((anchor = page.getFirstByXPath("//a[#class='load-more list']")) != null) {
page = (HtmlPage) anchor.getPage();
}
I've also tried page = anchor.click();
System.out.println(anchor) shows
HtmlAnchor[ a
href="/guideitem/list/?id=g407&requestType=browse&filter=ZmlsdGVyPXMlM2FmcmVlJmxpbWl0PTMw"
class="load-more list" data-hijax="false" ]
I will continue to look into this problem and post what I find here.

I've had a somewhat similar problem, hope this helps.
It "solved itself" after we disabled CSS on the WebClient:
webClient.getOptions().setCssEnabled(false);
My anchor was:
<div class="my-anchors-parent-class"/>
Search
</div>
It had some JQuery attaching the .click() handler to it, who acted based on the 'class' property of my anchor's parent:
$('.my-anchor's-parent-class').each(function () {
$(this).children('a').click(function () {
// if parent has another given class appended, call .myFunction(this)
// else, call other function
});
});
When we reenable the CSS, the .click() is broken again.

Change url using jquery

Сan you explain please.
Why returned, only the first data attribute - "link-1.html", even if I click on the second link
<a class="project-link" href="link-1.html" data-url="link-1.html">
<a class="project-link" href="link-2.html" data-url="link-2.html">
var toUrl = $('.project-link').attr('data-url');
$('a').click(function() {
window.location.hash = toUrl;
});
The meaning of such action - my links open through Ajax, but I want to URL displayed in the browser.
I want to make it as behance, if you click on the cards portfolio, they displayed through Ajax in the same window, but it also left open the possibility of direct appeal to the links. That's why I want to URL displayed in the browser address bar

You have to get current target url by this
$('a').click(function() {
var toUrl = $(this).data('url'); // use this as current target
window.location.hash = toUrl;
});
I recommend you to use .data() when you're retrieving data attributes (only) instead of .attr()
Demo

.attr( attributeName )
Returns: String
Description: Get the value
of an attribute for the first element in the set of matched elements.
$('.project-link') matches more than one element. Therefore, $('.project-link').attr('data-url') will return the value of the data-url attribute for the first element in the set.
To solve this you have maintain the context of the clicked element as you get the attribute, and you do this by using the this keyword.
And if you have other event listeners attached to the element already and you do not want them to fire -- although ajax calls will abort when the user is redirected -- you can use event.stopImmediatePropagation():
$('a').on('click', function( event ) {
event.stopImmediatePropagation();
window.location.hash = $(this).data('url'); //this here refers to the element that was clicked.
});

$('a[data-url]').click(function() {
window.location.href = $(this).data("url");
});

You might want to try this:
$('.project-link').click(function(){
window.location.hash = $(this).data('url');
});

Trying To Add Onclick To Links, But Can't With .onclick

So I'm trying to use ajax to put content into a div, and trying to have it change all internal links before it adds the content so that they will use the funciton and load with ajax instead of navigating to another page. My function is supposed to get the data with ajax, change the href and onclick attributes of the link, then put it into the div... However, all it's doing is changing the href and not adding an onclick attribute at all. Here's what I was using so far:
function loadHTML(url, destination) {
$.get(url, function(data){
html = $(data);
$('a', html).each(function(){
if ( $.isUrlInternal( this.href )){
this.onclick = loadHTML(this.href,"forum_frame"); // I've tried using both a string and just putting the function here, neither seem to work.
this.href = "javascript:void(0)";
}
});
$(destination).html(html);
});
};
Also, I'm using jquery-urlinternal. Just thought that was relevant.

You can get the effect you want with less effort by doing this on your destination element ahead of time:
$(destination).on("click", "A", function(e) {
if ($.isUrlInternal(this.href)) {
e.preventDefault();
loadHTML(this.href, "forum_frame");
}
});
Now any <a> that ends up inside the destination container will be handled automatically, even content added in the future by DOM manipulations.

When setting a function to onclick through js it will not show on the markup as an attribute. However in this case it is not working because the function is not being set correctly. Easy approach to make it work,
....
var theHref=this.href;
this.onclick = function(){loadHTML(theHref,"forum_frame");}
....
simple demo http://jsbin.com/culoviro/1/edit

casperjs: how do I click a remote div and then update it's class name?

As a way of learning CasperJS, I am trying to initiate a click event on a div on a remote page, and then change the class name of the div after I have clicked it. The idea is to find the first clickable div, click it, and then mark it as clicked so I can skip over it to other clickable divs. The markup for the div tag on the remote page looks like:
<div class='clickable_div'></div>
I have tried the following casperjs code:
...
casper.then(function() {
if( this.exists( 'div.clickable_div' ) ) {
this.evaluate(function() {
this.click(document.querySelector('div.clickable_div'));
return document.querySelector('div.clickable_div').setAttribute("className","clicked");
});
}
});
...
It doesn't seem to work. First, I don't think I am initiating the mouse click event on the div correctly. What am I missing? Second, when I fetch the updated html, I don't see any changes in the div's class name. Am I going about this step in the wrong way?

You're calling this.click within evaluate(), it just can't work as evaluate() executes code within the page DOM context where there's probably no window.click method.
Here's a possibly working script:
var linkSelector = 'div.clickable_div';
casper.then(function() {
if (!this.exists(linkSelector)) return;
this.click(linkSelector);
this.evaluate(function(linkSelector) {
__utils__.findOne(linkSelector).setAttribute("className", "clicked");
}, linkSelector);
});
You may want to have better handling of errors and edge cases, but you get the idea.

Problems getting values into a dynamic variable in javascript

selectedsong div has differents links with differents rel=""... and the problems is...
I'm using that:
selectedBtn = $('#selectedsong a');
selectedBtn.click(function()
{
self.selectedsong($(this).attr('rel'));
return false;
});
selectedsong: function(number)
{
$('#selectedsong').html('new content with new links, rel, and more...');
selectedBtn = $('#selectedsong a'); <---- THE PROBLEM IS HERE,
}
The problem is that, in the first click it works properly, but when the #selectedsong content change, selectedBtn = $('#selectedsong a'); don't work properly, because the selectedBtn.click(function() doesn't work :'(
Thank you very much!

Use
$('#selectedsong').on('click','a',function(e)
{
e.preventDefault(); // prevent default behavior of anchor click
self.selectedsong($(this).attr('rel'));
//return false; dont use return false as it does more work than you need
});
selectedsong: function(number)
{
$('#selectedsong').html('new content with new links, rel, and more...');
}
As your HTML content changes you need to use event delegation.
read more on .on()

I think the problem is that you changed the html inside #selectedsong, and that removed your <a> tag from it, and that's what you're trying to do a select on, is the <a> tag inside #selectedsong. Maybe you could try and just select #selectedsong instead of the anchor tag? Or when you change the html, change the html of #selectedsong a.