I am doing tests with fluentlenium to my application, but some errors are happening. I ‘m using Play Framework and Slickgrid to create my grid. Slickgrid create the grid dynamically in javascript.
The structure that is created seems like this:
<div id=”grid”>
<div class=”header”>
<div class=”slickgrid-column-header column-1”>Column 1 </div>
<div class=”slickgrid-column-header column-2”>Column 2 </div>
<div class=”slickgrid-column-header column-2”>Column 2 </div>
</div>
<div class=”viewport”>
<div class=”canvas”>
<div class=”slick-row row-1”>
<div class=”slick-cell l0 r0> Column 1 Row 1</div>
<div class=”slick-cell l1 r1> Column 2 Row 1</div>
<div class=”slick-cell l2 r2> Column 3 Row 1</div>
</div>
<div class=”slick-row row-2”>
<div class=”slick-cell l0 r0> Column 1 Row 2</div>
<div class=”slick-cell l1 r1> Column 2 Row 2</div>
<div class=”slick-cell l2 r2> Column 3 Row 2</div>
</div>
</div>
</div>
</div>
Normally, when you see your source code with fluentlenium, you can see all source code, but in my case, some slickgrid code lines are missing. And this missing lines are the lines that I need.
This code creates a simple test that get the page source.
#Test
public final void fakeTest() {
final int port = 3333;
running(testServer(port, fakeApplication()), HTMLUNIT,
new Callback<TestBrowser>() {
#Override
public void invoke(final TestBrowser browser) throws Throwable {
browser.goTo("http://localhost:3333/fake");
System.out.println(browser.pageSource());
}
});
}
The output seems like this:
<html>
<head> <title> </title> </head>
<body>
<div id=”grid>
<div class=”header”>
<div class=”slickgrid-column-header column-1”>Column 1 </div>
<div class=”slickgrid-column-header column-2”>Column 2 </div>
<div class=”slickgrid-column-header column-2”>Column 2 </div>
</div>
<div class=”viewport”>
<div class=”canvas”></div>
</div>
</div>
</body>
</html>
How you can see, the cells didn’t appear and I can’t get the cell FluentWebElement to simulate clicks or get the cell value.
You have the comportement you have write :
go to the page
print the source immediatly
What's happend there : the Slickgrid stuff is not generated yet. If you want so, you have to wait.
So use the await api with something like between the goTo(page) and :
await().atMost(5, TimeUnit.SECONDS).until(".slick-row").isPresent()
or anything you think more appropriate. There it will wait at most 5 seconds until a element with the class slick-row has been found.
Related
I would like to hide an element on a specific page by using Javascript, Jquery, or CSS. I have really limited options on how to do it because I'm using a very strict eshop solution. I can add Jquery or Javascript but it will be inserted into every single page on my eshop. I don't want to overload my website so the first condition has to be something like "if body class is .view-commodity-detail" (which is a page for every product detail) do something.
The second condition I need is to hide div with class .detaillist-row but only that one where the text Luggage Volume is located. (I need to hide .detaillist-row-value of this div parameter also - such as 50-59L, 60-69L etc..)
My code on eshop product page looks like this
<body class=".view-commodity-detail">
<div class="vc-commoditydetail_parameters">
<div class="detaillist-row">
<div class="detaillist-row-name">Luggage Volume</div>
<div class="detaillist-row-value"><span>50-59l</span></div>
<div class="detaillist-row-value"><span>60-69l</span></div>
</div>
<div class="detaillist-row">
<div class="detaillist-row-name">Weight</div>
<div class="detaillist-row-value"><span>2500 G</span></div>
</div>
<div class="detaillist-row">
<div class="detaillist-row-name">Size</div>
<div class="detaillist-row-value"><span>56 x 34 x 36 CM</span></div>
</div>
</div>
</body>
I was thinking about using something like this, but it would hide all my detaillist-row and I want to hide only that one where the Luggage Volume is.
if ($("body").hasClass(".view-commodity-detail")) {
if ($('.detaillist-row > .detaillist-row-name:contains("Luggage volume")').length > 0) {
$(".detaillist-row").hide();
}
}
I hope it makes any sense.
Thank you guys for your help!
You can do this using data-value but you need to add data-value to that element which you want to hide.
like this:
<div class="detaillist-row-name" data-value="Luggage Volume">Luggage Volume</div>
div[data-value="Luggage Volume"] {
display: none;
}
<body class=".view-commodity-detail">
<div class="vc-commoditydetail_parameters">
<div class="detaillist-row">
<div class="detaillist-row-name" data-value="Luggage Volume">Luggage Volume</div>
<div class="detaillist-row-value"><span>50-59l</span></div>
<div class="detaillist-row-value"><span>60-69l</span></div>
</div>
<div class="detaillist-row">
<div class="detaillist-row-name">Weight</div>
<div class="detaillist-row-value"><span>2500 G</span></div>
</div>
<div class="detaillist-row">
<div class="detaillist-row-name">Size</div>
<div class="detaillist-row-value"><span>56 x 34 x 36 CM</span></div>
</div>
</div>
</body>
or you can use javascript
<body class=".view-commodity-detail">
<div class="vc-commoditydetail_parameters">
<div class="detaillist-row">
<div class="detaillist-row-name" id="detaillist-row-name">Luggage Volume</div>
<div class="detaillist-row-value"><span>50-59l</span></div>
<div class="detaillist-row-value"><span>60-69l</span></div>
</div>
<div class="detaillist-row">
<div class="detaillist-row-name">Weight</div>
<div class="detaillist-row-value"><span>2500 G</span></div>
</div>
<div class="detaillist-row">
<div class="detaillist-row-name">Size</div>
<div class="detaillist-row-value"><span>56 x 34 x 36 CM</span></div>
</div>
</div>
</body>
<script>
var str = document.getElementById("detaillist-row-name").innerHTML;
var n = str.replace("Luggage Volume", "");
document.getElementById("detaillist-row-name").innerHTML = n;
</script>
I have a structure something like this:
<div class="list_wrapper">
<div class="row mainrow">
Main Row
Remove
</div>
<div class="row subrow">
Sub Row
</div>
<div class="row subrow">
Sub Row
</div>
<div class="row mainrow">
Main Row
Remove
</div>
<div class="row subrow">
Sub Row
</div>
</div>
Here, after mainrow, subrow can be inserted it is not mandatory. Now if I delete mainrow then its subsequent subrow should also be deleted, for that I'm trying this code but it is not working, current element which is list_remove_button on click deletes the closest mainrow but not the siblings subrow (of mainrow):
$('.list_wrapper').on('click', '.list_remove_button', function()
{
$(this).closest('div.row').remove();
$(this).children('.subrow').remove();
});
Once you get the closest .mainrow using .closest()
use .nextUntil() to get the next-siblings
and use .addBack() to add back the initial $main to the stack - before .remove()ing them all
$('.list_wrapper').on('click', '.list_remove_button', function() {
const $main = $(this).closest('.mainrow');
$main.nextUntil('.mainrow').addBack().remove();
});
<div class="list_wrapper">
<div class="row mainrow">
Main Row 1
Remove
</div>
<div class="row subrow">
Sub Row 1
</div>
<div class="row subrow">
Sub Row 1
</div>
<div class="row mainrow">
Main Row 2
Remove
</div>
<div class="row subrow">
Sub Row 2
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
I have 30 divs with different images and links and wanted to get them to be displayed in 10 different divs randomly.
Example: http://imgur.com/Ar1gdzL (it's an animated gif)
Something like a "random related posts" that we use in wordpress, but my page is not in wordpress. It's just a simple website in php.
the div would be so
Link
Link
Link
etc
etc
etc
How to do this in javascript or php?
Create 10 divs with those positions (empty divs)
Create a string array with the 10 (or more) html content that will fill the divs
Shuffle the array as stated here
Pass by the array and modify the innerHtml of the 10 divs one by one (Only first 10 elements since only 10 divs)
You can use different ways, depending on your needs. When using MySQL you can use a query like:
SELECT images, link FROM tablename WHERE ...... ORDER BY RAND()
Or you can use shuffle on an array.
$array = array ( 'image1', 'image2' );
shuffle ( $array );
// Display divs
<div class="divPool">content 1</div>
<div class="divPool">content 2</div>
<div class="divPool">content 3</div>
etc... to 30 divs
<div class="destination">destination 1</div>
<div class="destination">destination 2</div>
<div class="destination">destination 3</div>
etc. to 10 divs,
then in JavaScript:
//make arrays of the html elements in each class:
var arrayOfContent=document.getElementsByClassName("divPool");
var arrayOfDestinations=document.getElementsByClassName("destination");
for (var i=0; i<10: i++){//for each of the 10 destination divs
//select a random number from 0 to 29
var random=Math.floor(Math.random() * 30);
arrayOfDestinations[i].innerHTML=arrayOfContent[random].innerHTML
}
Also, in css you can make the divPool class invisible like this:
.divPool{display:none}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
for(i=1;i<=10;i++){
var id = Math.floor(Math.random() * 30) + 1;
$("#display_"+id).show();
}
});
</script>
<div id="display_1" style="display:none;">1</div>
<div id="display_2" style="display:none;">2</div>
<div id="display_3" style="display:none;">3</div>
<div id="display_4" style="display:none;">4</div>
<div id="display_5" style="display:none;">5</div>
<div id="display_6" style="display:none;">6</div>
<div id="display_7" style="display:none;">7</div>
<div id="display_8" style="display:none;">8</div>
<div id="display_9" style="display:none;">9</div>
<div id="display_10" style="display:none;">10</div>
<div id="display_11" style="display:none;">11</div>
<div id="display_12" style="display:none;">12</div>
<div id="display_13" style="display:none;">13</div>
<div id="display_14" style="display:none;">14</div>
<div id="display_15" style="display:none;">15</div>
<div id="display_16" style="display:none;">16</div>
<div id="display_17" style="display:none;">17</div>
<div id="display_18" style="display:none;">18</div>
<div id="display_19" style="display:none;">19</div>
<div id="display_20" style="display:none;">20</div>
<div id="display_21" style="display:none;">21</div>
<div id="display_22" style="display:none;">22</div>
<div id="display_23" style="display:none;">23</div>
<div id="display_24" style="display:none;">24</div>
<div id="display_25" style="display:none;">25</div>
<div id="display_26" style="display:none;">26</div>
<div id="display_27" style="display:none;">27</div>
<div id="display_28" style="display:none;">28</div>
<div id="display_29" style="display:none;">29</div>
<div id="display_30" style="display:none;">30</div>
`
I have multiple rows
<div class="row" id="move-data-row0"></div>
<div class="row"></div>
<div class="row"></div>
<div class="row"></div>
<div class="row"></div>
<div class="row"></div>
<div class="row"></div>
I want only the first three to be shown and on a button click 3 more should appear.
My first thoughts were to give every div the same classname with an index but I do not know how the JavaScript should be implemented.
I started by trying to hide one div, but that doesn't really work
$("#move-data-row0").children().prop('disabled',true);
You can use this minimal example, or improve it to get what you really want:
HTML:
<div class="row">1</div>
<div class="row">2</div>
<div class="row">3</div>
<div class="row">4</div>
<div class="row">5</div>
<div class="row">6</div>
<div class="row">7</div>
<button>More</button>
JavaScript:
$(document).ready(function(){
$('.row:gt(2)').hide();
$('button').click(function(){
$('.row:hidden:lt(3)').show();
});
});
FIDDLE: https://jsfiddle.net/lmgonzalves/e0ppjwnm/
I'm using javascript to build a list of results. I have a for-loop that iterates over some data and creates a mydata div, and adds that to the results div. Let's pretend it looks something like this:
<div id="results">
<div class="mydata">data 1</div>
<div class="mydata">data 2</div>
...
<div class="mydata">data 20</div>
</div>
What I want to do is only display 5 results at a time, and should the user wish to see more, they can click a show next 5 or show more button (or something similar). Any ideas?
Just to clarify, every time the user clicks "show more" I want to 'unhide' the next 5 elements, not ALL the remaining elements. So each click reveals more elements until all are displayed.
You can use the gt() and lt() selectors along with :visible pretty well here.
The following will show the next 5 results on clicking and removes the link once all items are visible.
$('.mydata:gt(4)').hide().last().after(
$('<a />').attr('href','#').text('Show more').click(function(){
var a = this;
$('.mydata:not(:visible):lt(5)').fadeIn(function(){
if ($('.mydata:not(:visible)').length == 0) $(a).remove();
}); return false;
})
);
working example: http://jsfiddle.net/niklasvh/nTv7D/
Regardless of what other people are suggesting here, I would not hide the elements using CSS, but do it in JS instead, because if a user has JS disabled and you hide the elements using CSS, he won't get them visible. However, if he has JS disabled, they will never get hidden, nor will that button appear etc, so it has a full noscript fallback in place + search engines don't like hidden content (but they won't know its hidden if you do it on DOM load).
My solution is here: jsFiddle.
You can put this link somewhere:
show more
and use the following code:
var limit = 5;
var per_page = 5;
jQuery('#results > div.mydata:gt('+(limit-1)+')').hide();
if (jQuery('#results > div.mydata').length <= limit) {
jQuery('#results-show-more').hide();
};
jQuery('#results-show-more').bind('click', function(event){
event.preventDefault();
limit += per_page;
jQuery('#results > div.mydata:lt('+(limit)+')').show();
if (jQuery('#results > div.mydata').length <= limit) {
jQuery(this).hide();
}
});
where limit is your current number of results displayed and per_page is number of results shown with each click on "show more". The link disappears if all the results are displayed. See how it works on jsFiddle.
You can create a CSS class like:
.hiddenData { display: none }
and attach it to any quantity of divs that exceeds 5.
After that make handlers for adding/deleting this class from the needed quantity of divs.
jQuery for class removing:
$(".hiddenData").removeClass("hiddenData")
Create a class with something like:
.hidden_class{
display: none;
}
Add this class to all the mydata div's that you dont want seen.
when the user click the button, remove it from the next 5 div's.
repeat everytime the user clicks the "read more" button
This should work...Let me know how it goes
<script type="text/javascript">
function ShowHide(id) { $("#" + id).toggle(); }
</script>
<div id="results">
<div class="mydata">data 1</div>
<div class="mydata">data 2</div>
<div class="mydata">data 3</div>
<div class="mydata">data 4</div>
<div class="mydata">data 5</div>
<div style="clear:both" onclick="ShowHide('grp6')">More</div>
<div id="grp6" style="display:none">
<div class="mydata">data 6</div>
<div class="mydata">data 7</div>
<div class="mydata">data 8</div>
<div class="mydata">data 9</div>
<div class="mydata">data 10</div>
</div>
<div style="clear:both" onclick="ShowHide('grp11')">More</div>
<div id="grp11" style="display:none">
<div class="mydata">data 11</div>
<div class="mydata">data 12</div>
<div class="mydata">data 13</div>
<div class="mydata">data 14</div>
<div class="mydata">data 15</div>
</div>
</div>
In your forloop, you also have to add these divs hidden container
<div style="clear:both" onclick="ShowHide('grp6')">More</div>
<div id="grp6" style="display:none">
You get the idea.
Here you have:
<style>
/*This hides all items initially*/
.mydata{
display: none;
}
</style>
Now the script
<script>
var currentPage = 1; //Global var that stores the current page
var itemsPerPage = 5;
//This function shows a specific 'page'
function showPage(page){
$("#results .mydata").each(function(i, elem){
if(i >= (page-1)*itemsPerPage && i < page*itemsPerPage) //If item is in page, show it
$(this).show();
else
$(this).hide();
});
$("#currentPage").text(currentPage);
}
$(document).ready(function(){
showPage(currentPage);
$("#next").click(function(){
showPage(++currentPage);
});
$("#prev").click(function(){
showPage(--currentPage);
});
});
</script>
And a sample html:
<div id="results">
<div class="mydata">data 1</div>
<div class="mydata">data 2</div>
<div class="mydata">data 3</div>
<div class="mydata">data 4</div>
<div class="mydata">data 5</div>
<div class="mydata">data 6</div>
<div class="mydata">data 7</div>
<div class="mydata">data 8</div>
<div class="mydata">data 9</div>
<div class="mydata">data 10</div>
<div class="mydata">data 11</div>
<div class="mydata">data 12</div>
</div>
Previous
<span id="currentPage"></span>
Next
The only thing remaining is to validate fot not going to a page lower than 1 and higher than the total. But that will be easy.
EDIT: Here you have it running: http://jsfiddle.net/U8Q4Z/
Hope this helps. Cheers.