With protractor it's possible by doing element.all(by.css("li")).get(0)
How to do it with codecept?
I tried with no success:
I.click('.item').get(1);
I.click('.item:nth-child(2)');
Using XPath to click the element is the best option you have. However, you might have various instances of the element's tag. So your XPath has to be absolute
For example:
I.click("//li[contains(#class,'next')]");
or
I.click("//div[contains(#class,'next')]/li[1]");
Note: #class can be changed to whatever identifier you want to use.
You could just use XPath to click the first li element.
I.click('//li[1]');
It's also possible to grab all the elements that match a certain pattern and then specify the one you want by its index. In my case I needed to click all the checkboxes on a page. Here I grabbed all the elements that had the same xpath pattern (using I.grabNumberOfVisibleElements("//fieldset/label") and went through their indexes using a for loop.
module.exports = {
firstCheckbox: { xpath: '//li[1]//fieldset/label'},
async clickOnClassAssociations() {
await I.waitForElement(this.firstCheckbox, WAIT_FOR_TIMEOUT)
const totalCb = await I.grabNumberOfVisibleElements("//fieldset/label")
for (let i=1; i<=totalCb; i++) {
await I.waitForElement(`//li[${i}]//fieldset/label`, WAIT_FOR_TIMEOUT);
await I.click( `//li[${i}]//fieldset/label`);
}
},
};
Related
I have 2 lists in a view. What I want to do is that pick elements from list1 and update list2 with selected elements everytime I pick one. I tried to use PartialView (I don't know if it's correct approach or not) but I failed. I have a function in controller that fills a list by selected items. What needs to be done is updating the view dynamically. Can you suggest me a roadmap for this?
Update
I forgot to say that I have done this with javascript. But I feel like it's the long way when it comes to some validations (checking duplications etc.)
$(document).ready(function (){
$("#allPlayersList a").on("click", function () {
var options = $(this).clone();
$("#thisWeekList").append(options);
});
});
Just create an html list. See if this link helps. https://codepen.io/alexander-holman/pen/QNQrvz. You can also populate the values from database
Then you can get the selected element by javascript like this
var input = document.getElementById('Something').value;
Update after edited question
You can try something like
var listSelection = document.getElementById('Something').value;
Now you can create an api in the backend which accepts this value and returns a list based on it. Call that Api like this
&.ajax({
url: //url of api
data: {exactNameOfApiParameter : listSelection },
success: function(data){
for (i = 0; i < data.length; i++) {
$('<li>', { text: data[i] }).appendTo($('#list2'));
}
}
})
Make sure that id of second list is list2.
I am using jspdf to convert an HTML page to PDF using fromHTML(). The HTML page includes multiple images, which I need fromHTML() to ignore in order to generate the PDF.
I want to use the elementHandler to ignore the images. However, I can only get that to work with a single element ID. Here is the way the documentation shows:
var elementHandler = {
'#ignorePDF': function (element, renderer) {
return true;
}
};
I have tried to replace the '#ignorePDF' ID reference to a reference with a class that applies to all of the images:
'.ignorePDF'
or to include multiple ID's (one for each image):
'#ignorPDF1,#ignorePDF2'
but neither of those approaches has worked for me. Is there another way to accomplish this?
i figured out both issues. To reference multiple items to ignore, set it up like this:
var elementHandler = {};
elementHandlers["#img1"] = function...
elementHandlers["#img2"] = function...
also best to create a function that you can reuse rather than defining it over and over.
As for the inability to use a variable for the key, that was a dumb javascript error on my part. The variable name can be used like this:
var img1 = "#img1";
elementHandlers[img1] = function...
The # character must be included.
It would be useful if the method were modified to permit a class value to be entered so that a single class could be used to denote all items to be ignored.
You can ignore all objects of the same class (called for example no-print), as follows:
var noprints = document.getElementsByClassName("no-print");
var elementHandler = {};
for (var i=0; i<noprints.length; i++) {
elementHandler['#'+noprints[i].getAttribute('id')] = function (element, renderer) { return true; }
};
i have content listed in a div and i have a dropdown with various options to order and filter that content.
I'm using ajax to filter/order that content and is working but i use other php page with the content i want on the div that has the content, like this
function order(str){
$.post("order_products.php",
{
q: str,
},
function(data, status){
document.getElementById("txtHint").innerHTML = data;
});
}
What i wanted was to instead of putting the code (data) to change in another page just for that, i could put that code inside a class php function that i have.
<?php
class products{
function list(){
blablabla
}
That way i would "save space" and organize everything, considering that i have many other things to order/filter but i don't know to to make the ajax request to that function, or if it's possible without having a page in between and then get the response from the function and put it on the div.
You can do this using Laravel by setting up a route to a function that will do the ordering. Please note I've made a lot of assumptions in the following answer as I can't see all your code and have made it quite general, please adjust the code to your project or provide more details of your code if you don't understand the answer fully.
routes.php
Route::post('products/order', [
'as' => 'products.order',
'uses' => 'ProductsController#orderProducts'
]);
Your view (assuming you're using blade)
$txtHint = $('#txtHint'); // grab the reference to txtHint dropdown
$.post( '{{ route("products.order") }}', // hit our route
{
q: str,
},
function(data, status){
$txtHint.empty(); // clear the dropdown
// loop through the data and assign each element to the dropdown
$.each(data, function(value, key) {
$txtHint.append($("<option></option>")
.attr("value", value)
.text(key));
});
});
ProductsController.php
public function orderProducts()
{
$orderBy = \Input::get('q');
return \Products::lists('name', 'id')->orderBy($orderBy);
}
For outside of a framework just change the url to your php file and add in a data attribute for the method you require to be fired from the file.
$.post( 'products.php', // hit our route
{
action: 'order',
q: str,
},
...
Then in products.php you'd do something like this
if(isset($_POST['action']) && !empty($_POST['action'])) {
$action = $_POST['action'];
switch($action) {
case 'order' : order();break;
case 'otherFunction' : otherFunction();break;
}
}
function order()
{
// order logic here
// get $_POST['q']
// do your ordering
// return data as json
}
See here for similar question: using jquery $.ajax to call a PHP function
How I can strip out the variables listed below from within a textbox (input) that if a user tries to type a URL i.e these variables:
"http://"
"www."
".com"
".co.uk"
If any of the variables above exist in the textbox on keyup the submit button gets disabled or/and it removes/strips out the variables above.
Is this possible? I've tried doing it using Charcodes, but I face the problem that I would like the user to still use '.; (full-stops) etc
Can somebody help?
Thanks,
Here you go!
Demo
$("#myinput").keyup(function()
{
var a = ["http://", "www.", ".com", ".co.uk"]; //Add the substrings
a.forEach(function(k)
{
if($("#myinput").attr("value").indexOf(k) > -1)
{
alert('Found!'); //Do something
return true;
}
else
{
return false;
}
});
});
Every time the user types a char, it checks for the string in array a. If the substring is found, it popups an alert message.
Using blur it will check for the string only when the user go outs of the input box (its more efficient using blur, but you can use this way if you want to check few strings and the input value is not too long).
Try this,
$("#textboxId").blur(function (event) {
var text = event.target.val();
if(text.contains("www")) {
$("submitBtnId").prop('disabled', true);
}
});
(target framework is 4.0)
I am implementing a feature to delete multiple records in a simple table. In order to do this, I am using simple HTML checkboxes with a Javascript function to loop through each one to find which are selected. The Javascript is returning an array of int values representing the record IDs to delete.
I am using an ActionLink to call all of this, and to ultimately return to the Delete function (with an int array as a parm) in my controller file to actually submit the deletions to the database.
My problem is, I don't know how to take the array I get back from the Javascript to place into the ActionLink, to pass it into the controller.
Here is the code with which I am working:
<p>
#Html.ActionLink("Add New", "Add") | #Html.ActionLink("Delete Selected", "Delete", new { id = "???" }, new { onclick = "return getProjectsToDelete()" })
</p>
<script type="text/javascript">
function getProjectsToDelete() {
var answer = confirm("Are you sure you wish to delete the selected projects?");
if (answer) {
var listToDelete = new Array();
var arrayCount = 0;
for (i = 0; i < document.projectList.deleteProject.length; i++) {
if (document.projectList.deleteProject[i].checked) {
listToDelete[arrayCount] = document.projectList.deleteProject[i].value;
arrayCount++;
}
}
return listToDelete;
}
}
</script>
If I understand you correctly, you want to know how to push back a collection of IDs to a controller?
In general, this would be done as a FORM and POST the form to the back end. I myself prefer to do this via AJAX but thats just me.
While you can do this using a GET and stuffing all of the IDs in the query string, its dirty!
It would look something like /controller/action?id=7&id=8&id=9
The Model Binder in .NET will convert that in to a List<int> or int[].
I would suggest using ".push" in Javascript to manage you array of IDs. You can also use the ".join" method on your array to create a clean querystring.