On one of the pages of my website, I am implementing a multi-select dropdown element to allow users to select years and quarters. However, when the page first loads and a user selects options, they receive incorrect data, as shown in the loom video linked below.
Interestingly, this issue does not always occur and tends to happen only upon the initial page load. After a certain amount of time, it appears as though the code "gets itself together" and returns the correct elements.
To provide further context, I have included a screenshot of the function I use to return the selected elements as well as a screenshot of the console output that appeared after clicking on "2022" in the attached loom video.
loom clip
'createYearButton' function (there is also a similar function for quarters.
The output of the 'console.log()' in the functions
Any idea why this is happening?
Related
I am trying to set focus to an Elementor Search form. I have searched everywhere for code to do this but cant not find anything that works with Elementor. I reached out to Elementor but they say it is not possible.
I can not believe that you have to click twice to get to an input field when it is the only one on a page.
You see the issue on SilentMedia Website. Click the search icon on the left of the page, which calls an Elementor Popup Template, which has just a single Search Element.
If this is not possible with popup I would consider the search icon opening a new page, on which hopefully the search element has focus on page load.
due to Elementor behavior - you can not achieve that using normal way. But you can use this trick. Here are steps for that:
check if the search form is exits
if exits - Set the pointer to the search form
code:
setInterval(function(){
if(jQuery('#autofocus input').length>0){
jQuery('#autofocus input').focus().val();
return false;
}
}, 500);
In case my answer is not clearly for you, i made a short guide video for this here.
I have a ranorex project, which automated an use case with clicking 5 buttons in an application.
To set up this project I used the record function. I defined some sleep times between the clicks.
The run with the clicks is in a loop, where the loop count is dynamically defined. One button of the five and always the same button, Ranorex "ignores" sometimes. According to the log file, the button is visible and enabled and ranorex also runs the code with the Click(), but the application doesn’t receive the click. Before in code the click is called, I check with an “If” whether the button is visible and enabled - and if the click() is called (or doesn't), I log it to ranorexlog. Sometimes the application is running through and all the clicks work and sometimes this button click is missing one or more times. It doesn’t depend on the sleep time between the clicks, because I tried long and small pause times. It doesn’t depend on the focus of the application, too, because I switched the focus several times.
Does anybody know this problem, workarounds or what I’m doing wrong?
the obvious workaround is to use Mouse.Click("{Button}") with a 0 duration rather than invoking the click event, or if you are invoking the mouse click invoke the buttons click action. (sorry since they are both named Click() i don't know which one you are using).
As to what is happening, from your description it sounds like your script is finding more than one element with the same xpath. This would cause issues with the click event because it may try to click on the element, but it's the first xpath that matches not the second. Are there any optional elements in this sequence of button clicks that appear? for instance a busy spinner with inner text of "OK" that is hidden from view when you are clicking a button on a form with inner text of "OK" would cause two elements to be found if the xpath was looking for an inner text of ok. This element that is causing may not have been caught in the recorder because it might not have been present at the time.
Another possibility if you are using Mouse.Click() (particularly if this is a website)is that it is possible your button is not actually on the screen, I know that should be taken care of by the visible check but it is visible on the dom even though it is not visible on the screen that causes issues.
I highly recommend do not use the recorder to create test suites that need to be re-runnable. It would actually be better to use the spy tool to create a repository or several repositories for the product you are testing, this way you can be sure the xpaths are all unique, which using the recorder there is no gaurantee. You can actually record with the created repository, and ranorex will attempt to find item in the repository before creating a new item, so the recorder will use this repository when creating recordings.
In a multi page template,I have three category pages (comedy, action, drama) that you can swipe between each containing rows of images (Seinfeld, Modern Family, Family Guy, Big Bang). Clicking on an individual image should open a dialog box (Seinfeld summary), close when you click the close button, and stay close. Initially it works, then what happens is based on the number images click after two, it opens and closes n -1 (clicking the 3rd image, opens the dialog box twice).
what could be the reason behind this?
Without your code I can be sure but I think I understand what is happening to you.
You have a problem with multiple event binding. Because of jQuery Mobile architecture it is possible to bind an event numerous time to some object.
I have an blog ARTICLE on jQuery Mobile page events handling and there's a chapter dedicated to this problem, just search for the chapter Prevent multiple event triggering. Or it can be found HERE.
In few words always unbind event before you bind it to some object to prevent this from happening:
$('#test-button').die('click').live('click', function(e) {
alert('Button click');
});
I'm developing an application for the XBox using XNA, with a custom made UI framework.
For this I developed a navigation system, the navigation system works as followed:
The system exists of pages, each page contains child UI elements, which all have
one or more PageTabs as I called them.
The pagetabs are objects, having 2 properties, X and Y.
(I know I could have used Point, but the pagetab class has some methods also)
Based on the current state of the system, I check for input, and I raise events on elements with the right pagetab.
So I have this array:
pages[]{
Start,
Exit,
Settings,
...}
Then, I use an enum for my state, like Start, and access the page navigatable elements like this:
pages[Start].Navigatables[]
This is an array containing all the pagetabs of the page. When you go down, Y gets increased, and vice versa. Same for X
This works great, it keeps the max & min Y&X values in mind, so something always get selected.
However, this system has one major flaw, it can only box input for 1 state.
But say I am for example on the start page,
so my state is Start, and I have a popup, with 2 buttons, pagetabs:
(1,1) & (2,1)
The system as it currently is designed, will look for ALL elements in the current state with the selected pagetab, but I need to make it so that if the popup is visible, only the popup accepts navigation, and everything else won't react to user input (gamepad).
I was thinking of adding an extra List to the PageTab class, which contains 'substates' on which the element may accept input, but there must be a better way, ain't there?
I hope I explained it good enough, if you need more info I'll be glad to provide it.
I'd suggest using some kind of flag in your system, so that when you have a pop-up active. it marks all other elements as disabled. then when you close the pop-up you re-enable the other elements. you can check this flag when passing input to the elements so that you only send it to enabled elements.
I went with the extra Z-index approach.
Using a different Z-index for some elements and catching this input works like a charm.
I also added a flag: IndependentNavigation, which makes sure some elements are Z-index-independent (so one could click somewhere different when a dropdown is opened for example)
My universal app has a settings page, wherein the user must choose a theme from a dozen available themes.
Problem is, if I am using a picker-view, it takes up most of the screen on an iPhone.
I think what I want is something like your standard Windows drop-down menu, where it just displays on a single line the current selection, and clicking it expands into a scrollable list of possible items. Selecting an item collapses the list back into the original form.
So my question is: What is my best method for handling this situation? Can anyone point me to pictures or code examples of how this situation is handled successfully?
EDIT:
This is the behaviour I'm looking for:
only the currently selected profile is displayed
when the user taps on this, it expands into a list
when the user selects an item (or taps outside of the view) it collapses back to its original form, now displaying the new selection
ie functionally equivalent to a dropdown.
Firstly, this question is a duplicate of:
(not much good) Picker view as subview
(same) How to make an iPhone dropdown-looking button
(better) How to create drop down list box for an iphone app
(even better) Creating a drop-down list in iPhone app
(that last one links to some handy code)
Secondly, Google image search for 'dropdown control iphone' restricting the image size to 320x480 shows how everyone is doing this.
Basically a picker view scrolls in from the bottom, the same way as the keyboard does.