How to check if element is been dragging with Dojo - dojo

What to check if an element is been dragging to make a report of how many times has been dragged, any idea? with dojo of course.
This is the element to be sensed.
<p id="id_number" class="button">Button_name</p>

Please be more clear. I suppose you mean you want to use dojo/dnd/Moveable on your DOM node to make it draggeable? If you look at the API documentation you will notice that it has an event called onDragDetected which will be useful to you. Just increment a counter with it and you're done.

Related

Drag and drop two elements and execute POST call with InteractJS and Htmx

Disclaimer: This is more an architectual question.
I am trying to build a quite simple UI. I have two lists of elements, all elements in boths lists are of the same type. If I drag one element from the left to the right onto an element of this list, I want to execute a POST call to the backend sending both data-obj-id attribute values along.
I settled on InteractJS and HTMX but its f**** hard to build something like this.
My approach: I need to fire some kind of event to trigger the HTMX POST call. But the event needs to know which elements are being dropped on each other. So I need a custom event (not possible to get the drop event anyway), which contains the ID of the other element.
I tried:
const newEvent = new Event('interactjs:drop-'+draggableElement.getAttribute('data-obj-id'));
document.body.dispatchEvent(newEvent);
<div data-obj-id="{{ my_obj.id }}"
hx-post="/my-post-call"
hx-trigger="interactjs:drop-{{ my_obj.id }} from:body">...</div>
But the moment the event contains a number, it's not recognised anymore. I guess I just chose a poor choice of architecture to solve my problem?
Thx!

How can I access a button to click it with following code in selenium webdriver?

There are many buttons sharing the same class.
May have to go with clicking the link /account/logout'.
This is the code I'm trying to use:
input class="btnRed text-uppercase fo_white" value="Logout" onclick="window.location.href='/account/logout';" type="button"
Hard to say because you didn't provide enough info, but you could probably make it work by using value attribute. Something like this if you are using java.
driver.findElement(By.cssSelector("[value='Logout']")).click();
Not pretty solution, but give it a try:
driver.findElement(By.cssSelector(".btnRed.text-uppercase.fo_white")).click();
Looking at your HTML DOM this command will work for you:
driver.findElement(By.xpath("//input[#value='Logout']")).click();
Let me know if it works for you.
Looking at your HTML, this should work
driver.findElement(By.xpath("//input[#value='Logout'][#type='button']")).click();
Let me know if it works.
Is your element visible/enabled? In order to select an element, it must be present in your DOM. If the element is activated through an event, it cannot be selected until the event occurs.
Take a look at this post. This other post also have good ideas.

Materialcss modal not working with datatables.js

I am trying to build an admin dashboard using material design framework. As a part of it, I am trying to add modal-trigger element inside a <td></td> tag of a table that uses datatable.js library. But when I click on the trigger no modal is appearing. Did anyone face similar issue before?
I think that what's happening is that your trigger isn't in the DOM when you draw the table, but without seeing your code I can't be sure. Generally, it will trigger a modal when it is clicked or something? You might want to change the actual triggering to clicking on a td with a given class contained within the table so something like this:
$(".modal-trigger").click(function(){//Open Modal});
This would work on the first page but not after the first draw of the table as the event had been registered before the elements were within the DOM. Rather, you'd need to listen to the click within the table like this:
$("#table-id").on("click", ".modal-trigger", function(){//Open Modal});
I hope that makes sense and that it helps, if not perhaps work up a JSFiddle illustrating your issue?

tooltipster.js: title is removed when tooltipstered

Here's another clue:
https://jsfiddle.net/68umt5b3/
Please note, that title of <span> is getting lost after first hovering. How can I preserve it?
Thanks!
There is no option to accomplish that, as otherwise the browser would display a native tooltip on top of Tooltipster's tooltip. Whatever you want to accomplish, do it in another way, for example with some "data-title" attribute.

How to click on Toolbar Item with selenium?

Web page contain a button with some text for example "Test". This button actually is a toolbar element. ( class ="tbButton" id="id",text="Test") and redirects to a certain table when press on it.
When try to use the following click methods
selenium.click("id");
selenium.doubleClick("id");
selenium.click("//*[text()='Test'and contains(#class, 'tbButton')] ");
the button does not react
Could enybody show an alternative methods that is able to resolve a problem
It's hard to know exactly what the problem is without knowing more about the actual contents of the page you are testing. Is there an example of the toolbar online somewhere?
With modern interfaces, locating elements with Selenium is not always an exact science. Here are a few suggestions:
With modern interfaces you often find that the DOM is being manipulated, so it is possible that the identifier you are using is no longer valid by the time you get to your click(). Use Firebug to check that you have the correct element.
Often it helps to click on the parent of the element, such as a div or the parent table cell. Again, use FireBug, to try some other elements near your toolbar button. Alternatively, Firebug sometimes reveals that the element contains other elements. You might have more luck changing the target to a contained element instead.
Sometimes you have to play around with some of the alternative actions. For instance, some controls respond to a mouseDown() followed by a mouseUp(), but not to a click(). Again you can often get hints from looking at the source with Firebug.