I want to use CasperJS to click each enabled date in a JQuery UI datepicker, do something while that is clicked, and then go back and click the next date. The problem here is that once I have the datepicker displayed, I don't know how to get the selectors for the anchors within its body and its body only.
I don't think that CasperJS does anything similar to jquery where you can pass it a selector and get an array of elements back.
I could drop into an evaluate call and get the array via jquery, but then I'd have to send it back as valid unique selectors for CasperJS to loop over.
I could use jquery to get the content of each anchor, like "1", and then use CasperJS's clickLabel, but clickLabel scopes only by tag, so all I could say is "click the anchor whose content is '1'", and then potentially click the wrong thing if there are multiple anchors with the content "1" onscreen.
You don't need jQuery to do this. XPath can be used to devise a good selector function for the datepicker days like so:
var x = require('casper').selectXPath;
function daySelector(day) {
return x("//*[contains(#class,'ui-datepicker')]//td[#data-handler='selectDay']/a[text()='"+day+"']");
}
Since you know the numbers that you want to click, you can do (untested):
var numbers = [2,3,4,5,6,7],
pickerSelector = ".ui-datepicker";
casper.thenEach(numbers, function(num){
num = num.data;
// TODO: click into the date field
this.waitUntilVisible(pickerSelector);
this.thenClick(daySelector(num));
this.waitWhileVisible(pickerSelector);
// TODO: Check or do something you need
});
Related
I would like to be able to use the dc.js select menu (dc.selectMenu) in such a way that when I click on an element it gets the value of said element and that becomes the value of the select, once selected it should refresh the data as it normally would if you had just selected in the first place.
The problem I'm having is that I can set the value, but dc.redrawAll() seems to do nothing for me so I think I must be filtering wrongly, but I can't find much information online regarding how to do it other than simply using the filter method (not onclick).
I have tried to set the destination to whatever data-destination is which appears to be working, the value of the select does update when I check with console.log to check the value of the select menu, I then use the dc.redrawAll() function expecting it would filter based on the select option but it does nothing (not even an error in the console)
My function so far is looking like:
function select_destination(ndx) {
var destination_dim = ndx.dimension(dc.pluck('destination'));
var destination_group = destination_dim.group();
var destination = null;
document.addEventListener('click', function(e) {
if (!e.target.matches('.open-popup-link')) return;
e.preventDefault();
var destination = e.target.getAttribute('data-destination').toString();
document.getElementById('select-destination').value = destination;
dc.redrawAll();
});
dc.selectMenu('#select-destination')
.dimension(destination_dim)
.group(destination_group)
.filter(destination);
}
I would expect the graphs to update based on the select option but nothing happens, and I get no error message to go off either.
I suspect I'm using dc.redrawAll() wrongly as if I go to the console and type dc.redrawAll(); I get undefined but I'm really at a loss now and the documentation isn't really helping me at this point so I don't know what else to do.
they are bits of your code that I don't quite understand, for instance why do you have have filter(destination /*=null */)
anyway, So you want to filter the select menu? you can call directly the replaceFilter function with the value, as done in the source code:
menu.replaceFilter(destination);
dc.events.trigger(function () {
menu.redrawGroup();
});
See the source code for the full example of how it's done
https://dc-js.github.io/dc.js/docs/html/select-menu.js.html#sunlight-1-line-129
as for why it doesn't work, I have had some surprising results mixing d3 with pure dom js. Try to rewrite your even handler in d3, eg
d3.select('#select-destination').property('value', destination);
it's possibly that changing the value on the dom directly isn't triggering the change event.
My experience with d3 is that it works better to change the underlying data (call directly filter functions or whatever you want to do) and let dc redraw the needed rather than manipulating the dom directly
I am trying to change the recordtext of a display grid to a custom format. I am using a treeview as the selector that refreshes the display grid. I need to find the total records for the grid and I am able to get this value using the getGridParam records method when I click on the treeview node and load the display grid.
However, after I get this value and try to create the custom recordtext, the record count is the previous value, not the current records count. I know that the gridComplete happens before the loadComplete, but even placing the get in the gridComplete and the set int he loadComplete, it still doesn't work, even with a reloadGrid trigger. If I click on the treeview node twice, I get the correct value.
I am thinking it is a timing issue as to when the new value is ready to set the recordtext. Any help would be great, thanks in advance.
I recommend you to try updatepager method, which updates the information on the pager. Alternatively you can do for example the following:
loadComplete: function () {
var p = $(this).jqGrid("getGridParam");
p.records = 123;
p.recordtext = "My View {0} - {1} of <i>{2}<i>";
this.updatepager();
}
to see the viewrecords
I am trying to make my chart 508 compliant. Hence in order to make it possible to navigate the chart using keyboard, i want to add anchor elements before every bar column. I tried doing :
d3.select("svg").insert("a",".nv-bar").attr("href","");
but it didnt work.
Can anybody suggest a better way of doing it. Thanks !
Here's one way to do it:
d3.selectAll('.nv-bar')
.each(function() {
var el = this;
d3.select(el.parentNode)
.insert('a', function(){return el;})
.attr('href', '');
});
The insert method will add elements to each item in the current selection, regardless of how many elements the "before" parameter matches.
My solution will add an anchor for each bar in the document, and takes advantage that the insert method can accept a selector string or a function that returns an element to insert before. (Although, somewhat frustratingly, it does not accept a DOM node directly)
Edit: Here's a jsfiddle with an example: https://jsfiddle.net/bgp6atzo/
the normal way in kendo ui grid update data is add a edit popup.
What I want is, Think I change a value in text field.In update I added switch case and change the submit value. Then It will add that value and return that values to the grid. But I want to do is when get the return value and change it and show a different value in the grid.
Here is a example.....
In edit popup it has a input text field. I submit a value as "A". In the update I add a switch tells that If the value is "A" change the submit value to 1(number one).
Then it submit the value and show the value in grid as "1" not as the "A".
How I do this ???
I think you want a custom handler. In the grid you toss in this:
edit: function(e) {onEdit(e)},
and then on top of the page you do whatever logic you want to do
function onEdit(e) {
if (true) {
$("#Whatever").text('Hello') //Whatever in this case is a field in grid
This seems like a really easy question, but I can't seem to find the answer.
Now that toggle() is deprecated for click events, how would I have say a button add DOM elements on the first click, then remove those same DOM elements on the second click?
Also.... how do I remove contents from a div I have inserted content into (using load()) without removing the div itself? Using remove() removes the div.
use empty() to clear an elements inner html
As for the toggle issue, you can toggle a class on the element and test for that class:
$('#myDiv').on('click', function(){
if(! $(this).hasClass('clicked') ){
/* code for first click*/
}else{
/* code for second click*/
}
$(this).toggleClass('clicked')
})
your click would first check for the presence of the dom elements that get added (use an id perhaps).
if $('div#id of the stuff you add')
$('element exists...').remove();
else
$('div#id of where you want to add stuff').add( new code );
You can clear a div contents with:
divSomeDiv.html("");
or
divSomeDiv.empty();