I 'm trying to learn as an autodidact casperjs .
I have encountered a problem that I do not know how to fix. I'm trying to do the following:
By clicking on the search box , a pop-up appears. However, when I do it by casperjs the drop does not appear.
What I need is to enter in this field the value of a city and click on the drop-down that appears.
I think it should be a matter that does not release the necessary jquery events.
My code:
var casper = require('casper').create({
verbose: true,
logLevel: "debug",
waitTimeout: 10000,
viewportSize: {
width: 1024,
height: 760
}
});
/*
* PARAMETERS
*/
var listItems = [];
var location = casper.cli.args[0];
casper.start('http://www.vibbo.com/pisos-y-casas-barcelona-capital/', function() {
this.echo(this.getHTML('title'));
this.captureSelector('vibbo-1.png', 'html');
casper.click('#sb_location');
this.captureSelector('vibbo-2.png', 'html');
});
casper.waitUntilVisible('#ui-id-1', function() {
casper.sendKeys('#sb_location', 'Valencia');
this.wait(1000, function() {
this.captureSelector('vibbo-3.png', 'html');
});
this.echo(listItems);
});
casper.run();
I would appreciate help and I've tried everything I knew .
Thank you
I am not sure what you are expecting. What I would do, is to use jquery to mimic the behavior.
I have looked at the web site. When you enter the field and keys in barcelona, it calls a webservice :
http://suggest.vibbo.com/regionSuggest?callback=jQuery111106577302796537023_1474408404858&location=barcelona&_=1474408404866
So what I would do is the following :
1) collect the suggestions by calling the Web Service :
jQuery.getJSON("http://suggest.vibbo.com/regionSuggest?callback=jQuery111106577302796537023_1474408404858&location=mardid&_=1474408404866")
(Here with madri, take the first result :
{"label" : "Madridanos", "regionID":"49", "areaID": "", "municipalityID" : "49103"}
2) Fill the field with this value :
casper.evaluate(function(){
$('#sb_location').val('Madridanos')
}
3) Eventually hit the Buscar button :
$('button#sb_searchbutton').click();
Is it what you were looking for ?
Related
I'm using JS-Grid and I want to update a specific cell value right after i change a page.
Looking at the documentation , onPageChanged method seems like the right way to do it, but it doesn't work properly.
I have the following JS-Grid code:
$("#itemsListGrid").jsGrid({
width: "100%",
filtering: true,
sorting: !0,
viewsortcols : [true,'vertical',true],
paging: true,
autoload: true,
pageSize: 9,
pageButtonCount: 5,
controller: db,
fields: jsGrid_fields_mapping,
onPageChanged: function() {
alert("START onPageChanged");
var archiveRNTable = document.getElementsByClassName("jsgrid-table")[1];
archiveRNTable.rows[0].cells[2].innerText="valueIsChanged"
alert("END onPageChanged");
}
});
Running my app, i see that the alerts are popping BEFORE the page actually change. I'm trying to find a workaround to make it work.
Maybe not the most clean way to do it, but have you tried using setTimeout()?
So, in your case:
onPageChanged: function(args) {
alert("START onPageChanged");
// Wait some time to render table, then call function
setTimeout(function() {
var archiveRNTable = document.getElementsByClassName("jsgrid-table")[1];
archiveRNTable.rows[0].cells[2].innerText="valueIsChanged"
alert("END onPageChanged");
}, 300);
},
Background: the docs of JSGrid say that the event fires immediately after the page index is changed and doesn't wait for the data to load.
I'm using angular 6 to create a testimonial slider.
It looks great, but the problem is... I'm using RouterLink in my header, so everything loads at once. When you open the page with testimonial javascript for the first time it works, but then when you go onto another page and re-direct back it does not work.
Has anyone encountered a similar issue?
Is there a way to modify this function so it loads on page-view rather than page-load?
Thanks
JS Code:
function mfnSliderTestimonials(){
var pager = function( el, i ){
var img = $( el.$slides[i] ).find('.single-photo-img').html();
return '<a>'+ img +'</a>';
};
$('.testimonials_slider_ul').each(function(){
var slider = $(this);
slider.slick({
cssEase : 'ease-out',
dots : true,
infinite : true,
touchThreshold : 10,
speed : 300,
adaptiveHeight : true,
appendDots : slider.siblings( '.slider_pager' ),
customPaging : pager,
autoplay : window.mfn_sliders.testimonials ? true : false,
autoplaySpeed : window.mfn_sliders.testimonials ? window.mfn_sliders.testimonials : 5000,
slidesToShow : 1,
slidesToScroll : 1
});
});
}
EDIT: WORKS
All working fine now. Even when re-routing. In thecomponent I've declared the javascript function in such way:
declare function YOURFUNCTION(): any;
#component......
ngOninit
YOURFUNTION()
and obviously import * as $ from 'jquery'; was also necessary!
Thanks
I try to implement a way to prevent the updating of values with mouse (actually when the three.js animation has started, launched with a click on button).
For the moment, I have the following dat.GUI menu:
Once "start" button is clicked, I would like to prevent user from modifying with mouse the parameters "Rotation x" and "Rotation y".
Here is the concerned part of code for this menu:
// Create GUI
var gui = new dat.GUI({
autoplace: false,
width: 350,
height: 9 * 32 - 1
});
var params = {
GreatCircle : '',
Rotationx : torusRotationInitX,
Rotationy : torusRotationInitY,
StartingVector : '',
ComponentVectorTheta : 15.0,
ComponentVectorPhi : 15.0,
CovariantDerivativeVector : '',
ComponentCovariantDerivativeTheta : 15.0,
ComponentCovariantDerivativePhi : 15.0
};
// Set parameters for GUI
gui.add(params, 'GreatCircle').name('Great Circle ');
controllerRotationx = gui.add(params, 'Rotationx', 0, 2*Math.PI, 0.001).name('Rotation x ');
controllerRotationy = gui.add(params, 'Rotationy', 0, 2*Math.PI, 0.001).name('Rotation y ');
...
When I click on reset button, I call the following function:
// Reset Button
resetButton.onclick = function ResetParameters() {
...
// Reinitialize parameters into gui
params.Rotationx = torusRotationInitX;
params.Rotationy = torusRotationInitY;
for (var i in gui.__controllers) {
gui.__controllers[i].updateDisplay();
}
render();
}
I don't know if there is an option for controller to lock these sliders which usually change their values. Is it possible?
Update 1
Maybe I could wrapper the dat.GUI menu into a div and make this div not clickable, is it a solution?
Update 2
I tried to apply the method used on Method for disabling a button in dat.gui?
Following this solution, I have added the extension into dat.gui, just after:
dat.controllers.FunctionController = (function (Controller, dom, common) {
...
});
The following added code snippet is:
function blockEvent(event)
{
event.stopPropagation();
}
Object.defineProperty(dat.controllers.FunctionController.prototype, "disabled", {
get: function()
{
return this.domElement.hasAttribute("disabled");
},
set: function(value)
{
if (value)
{
this.domElement.setAttribute("disabled", "disabled");
this.domElement.addEventListener("click", blockEvent, true);
}
else
{
this.domElement.removeAttribute("disabled");
this.domElement.removeEventListener("click", blockEvent, true);
}
},
enumerable: true
});
Is extension code well located into dat.GUI source?
Then, I set the property "disabled" into my code to prevent user from sliding "controllerRotationx" with mouse (once start button is pressed):
if (animation)
controllerRotationx.__li.disabled = true;
Unfortunately, my method doesn't work : when animation is started, I can still move the slider contained into "controllerRotationx".
I saw that above link (Method for disabling a button in dat.gui?), this was about a button and not for a slider, does it change anything for my case?
I didn't find an explicit controller for the slider.
I would do this. The slider is not a form element, there's nothing to disable in the traditional w3c sense. Luckily we can use pointer-events and disable it properly as if it were a form element using just public dat.gui properties.
var speeder = menu.add(text, 'speed', -5, 5);
speeder.domElement.style.pointerEvents = "none"
speeder.domElement.style.opacity = .5;
The solution given by #Radio works pretty well. But, with sliders, the slider is a sibling of the text box's DOM element. We need to disable pointer events on the div which contains all the controls (and which is not exposed directly by dat.gui). So,
var speeder = menu.add(text, 'speed', -5, 5);
// disables the text box
speeder.domElement.style.pointerEvents = "none"
// disables all controller elements related to "speeder"
speeder.domElement.parentElement.style.pointerEvents = 'none'
When the Start button is pressed, set:
controllerRotationx.__li.setAttribute( "style", "display: none" );
thanks for tips
on my side i hack the Common controller
so able to chainning.
gui.add(this, '_screenW').disable(true);
Common.extend(controller, {
disable: function disable(v) {
this.domElement.style.pointerEvents = v?"none":"auto";
this.domElement.style.opacity = v?.5:1;
return controller;
},
I am aiming to do a phone gap-android project.
I want to implement the swipe view (as in android with page-controller) in phone gap but preferably using Java script.
I saw there are many options such as
hammer,zepto,jquerysloution,quo & iScroll.
Which is the best one out of these or anything else that better to implement?(preferably in java script )
I also notice that for all these we need to give the no of contents for the swipes such as page 1, page 2....etc.
**How to create a swipe view based on the no of contents in the database?
i have tried implementing using iscroll...
this the scroll.js code..
document.addEventListener("orientationchange", updateLayout);
// The wrapperWidth before orientationChange. Used to identify the current page number in updateLayout();
wrapperWidth = 0;
var myScroll = new iScroll("pageWrapper", {
snap: true,
momentum: false,
hScrollbar: false,
vScrollbar: false,
lockDirection: true});
updateLayout();
function updateLayout() {
var currentPage = 0;
if (wrapperWidth > 0) {
currentPage = - Math.ceil( $("#swipe_body").position().left / wrapperWidth);
}
wrapperWidth = $("#pageWrapper").width();
$("#swipe_body").css("width", wrapperWidth * 4);
$(".page").css("width", wrapperWidth - 40);
myScroll.refresh();
myScroll.scrollToPage(currentPage, 0, 0);
}
page3Scroll = new iScroll("wrapper", {hScrollbar: false, vScrollbar: false, lockDirection: true });
and i copied the iscroll.js from here
when i run the program i get an error as
04-22 18:26:01.892: E/Web Console(2453): TypeError: Result of expression 'that.wrapper' [null] is not an object. at file:///android_asset/www/iscroll.js:57
As,i was facing errors, i tried implementing it with SwipeView.js from [here] (https://github.com/cubiq/SwipeView/blob/master/src/swipeview.js) it goes in to the loop..the page controller is displayed but.the following things are missing
the page controller is been seen vertically and not horizontally
the images set for the swipe view are not visible.
the page moves vertically and not horizontally
i also, find a WARNING as Miss a drag as we are waiting for WebCore's response for touch down.
i tried adding the following code...there is no change
document.addEventListener( "touchstart", function(e){ onStart(e); }, false );
function onStart ( touchEvent ) {
if( navigator.userAgent.match(/Android/i) ) {
touchEvent.preventDefault();
}
}
Any remedy or solution for this??
I'm creating an audio player with MediaElement.js, like this:
//button has been clicked, create new audio player and play
var audioElement = $('<audio>', {
id : 'audioPlayer' + index,
src : '/streamFriendFile',
loop : 'loop',
preload : 'none'
})[0];
$(row).append(audioElement);
new MediaElement(audioElement, {
plugins : ['flash', 'silverlight'],
pluginPath : 'http://localhost:3000/mediaelement/',
flashName : 'flashmediaelement.swf',
silverlightName : 'silverlightmediaelement.xap',
pluginWidth : 0,
pluginHeight : 0,
audioWidth: 0,
audioHeight : 0,
startVolume: 0.8,
//loop: true,
//enableAutosize: false,
//features : [],
//timerRate : 250,
success : function(mediaElement, domObj) {
console.log('mediaElement success!');
mediaElement.play();
},
error : function(mediaElement) {
console.log('medialement problem is detected: %o', mediaElement);
}
});
The error callback is immediately called, but it only contains the media element as an argument. This does not tell me what is wrong.
How can I get the actual error message so I can debug this issue?
Note that I'm only using the MediaElement core API, thus not the actual player (so I only include mediaelement.js).
In your MediaElement options (along with flashName, silverlightName, etc...) add enablePluginDebug:true and it should show debug errors on the screen. From the API reference in the code example at right.
Other than that I don't believe they have any detailed error handling yet for that error object, from looking at the github repo it seems to be a "to do" feature mentioned at the bottom (most likely a 2.2 feature).
Looks like you might have to figure out your own error handling for the time being.