I have a javascript function Display(args...) that modifies the content of a modal window depending on which button is pressed. The function contains other attributes that are hidden or displayed (depending on the arguments that are being passed). Where I am going crazy is that a particular div section refuses to hide/display. Let's say that initially I set it up to be hidden/display:none, then onClick is suppose to be display it; even if I invert the initial state the expected behavior does not occur. I set up the debugger and I see that is trying:
if ($('#SectionRefusingToShow').is(":visible") == false) {
$('#SectionRefusingToShow').show();
}
I see it enters the if statement but still not shown. Inspecting the DOM, its element attribute display:none was not removed. For other classes and ids the hidden are properly removed/added. I am using .show for this one given that hidden state for it did not work either!
I have had a similar problem before, and it turned out that I had multiple elements with the same ID value. Have you checked for that? jQuery can get a little fussy when you select elements by ID, and the ID is not unique (which is technically invalid, so it get's fussy for a good reason).
Related
I cannot interact with the input element to select the first radio button.
Below is what I've tried by far;
export function clickOnMediaAutoLevel(level) {
// button is not clickable without force: true, it is set to hidden in the CSS
cy.get(locators.screen)
.within(($screen) => {
cy.get('div.radio-buttons')
.contains('Media Audio Level')
.find('input')
.click( { force: true } )
})
cy.pause()
}
What am I doing wrong?
Your input has a prop "hidden" and it is possible that it prevents firing of that event (like a prop "disabled" would do).
The hidden global attribute is a Boolean attribute indicating that the element is not yet, or is no longer, relevant. For example, it can be used to hide elements of the page that can't be used until the login process has been completed. Browsers won't render elements with the hidden attribute set.
The hidden attribute must not be used to hide content just from one presentation. If something is marked hidden, it is hidden from all presentations, including, for instance, screen readers.
Hidden elements shouldn't be linked from non-hidden elements, and elements that are descendants of a hidden element are still active, which means that script elements can still execute and form elements can still submit. Elements and scripts may, however, refer to elements that are hidden in other contexts.
https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/hidden
Try to mimic clicking on the label, because right now you don't click input itself in an application. You should consider removing a "hidden" prop completely in that context.
Try to use .check() no .click(). Source - https://docs.cypress.io/api/commands/check.html#Syntax
I am using some JQuery Combobox that you can check out here: https://simpletutorials.com/uploads/1860/demo/index.html
As you can see, you can start typing and get the results filtered.
However, once you have selected a value, when clicking on the arrow to open the list, no other values are shown anymore. So, if I want to change college/state, I need to manually clear the input value. I don't like this, so I want to modify it.
I changed that code and added this JS on the click event of the list:
onclick="document.getElementById('statesCombo-ddi').value='';"
This line basically finds the input by id and sets its value to an empty string.
You can try out by looking for the td element having class "stc-button" (with Chrome, just focus on the arrow of the second combo box) and add my code to the tag.
===EDIT===
You can obtain the same results by adding this code directly to the input:
onclick="this.value=''"
===END EDIT===
This has a weird behavior:
If I SELECT an element from the list, it clears the value and everything works correctly.
If I TYPE some letters and then select a value from the list, no item is shown in the list after clicking.
What's wrong with it?
You can override one of the combo box methods to accomplish this:
STComboBox.prototype.filterAndResetSelected = function() {
this.$('ddi').val('');
this.filterList('');
this.selectRow(0);
this.$('ddl').scrollTop(0);
};
Does this help?
The unminified code is provided, is relatively small (12kb) and is fairly well commented, so you could make this modification directly to the source if you'd like.
Edit: Fixed to clear the input value (as indicated in the comment below)
By reading the source and doing a little debugging with Chrome's inspector (Control+Shift+i), you can find the particular ID of the element you need to clear (#collegesCombo-ddi) in order to clear the input box. Once you've found the element's ID you need to clear (and being very careful with plugins that assign multiple elements with the same ID, which is not allowed in the standard, and an indicator of poorly-written code):
$('#collegesCombo-ddi').val('');
I don't know if this is possible or not.
I have a dynamic form with contents that are dynamically created. Every time a button is clicked, a new div element is added. And what I wanted to do is to make the previous div not editable, that is, the input fields could not be used, buttons could not be clicked.
Is it doable?
Thanks.
Try something like this:
// Disable all input-like elements in the divs except for the last div
$(".divclass:not(:last-child) :input").attr("disabled", true);
Where divclass is the class of the divs you mentioned.
Example: http://jsfiddle.net/grc4/LrxkU/2/
Maby something like this? http://jsfiddle.net/ng4Ct/2/
If you can access your previous div elements you can add attribute disabled="disabled" to them.
You can fire the code that adds the disabled attribute to required elements on the same button click function.
Well, you can either access the specific elements inside the DIV and disable them using Javascript, or you can access the DIV and then loop through all the elements inside (probably preferable), and disable them automatically with Javascript.
Of course it depends on how your code is written, can you provide some of the code that generates the DIVs?
This drives me mad. I just can't understand it.
I wrote a filter-function based on checkboxes and clicking on their labels. I'm checking the 'checked' state of checkboxes and show mathed elements of the list (the rest elements are hidden). I use 3rdparty plugin that stylizes checkboxes (cut from example) and makes checkboxes checked while other onClick event does the filtering.
The problem is that after 'checked' state is successfully set inside a callback-function it "suddenly" becomes reset! I can't understand why that happens.
I implemented the base logic (without stylizing) here: http://jsfiddle.net/3Xtuh/13/
and ask all to help me solve this, please.
The problem is that you are invoking the click event manually, and then when your function is done running, the default click event is invoked.
By passing the event variable to your click handler and calling event.preventDefault(); fixes this behavior.
See example here: http://jsfiddle.net/3Xtuh/14/
The HTML label will check the associated checkbox even if it´s hidden (using CSS) so there´s no need to reinvent the wheel.
You should use the change() event. Try this demo and view your console.
It's default browser behavior that's messing your js script. By default, clicking on a label that is either wrapped around checkbox or have valid for attribute set, is toggling checked state of that checkbox.
You've attached custom onclick handler on labels.
So what's going on is that when clicking on a label? Your click handler gets fired (in in you alter state of target checkbox), and then
I need to hide a text input field with javascript. Changing its type attribute to hidden does not work in IE (security issue).
What would be the best way to do it?
Note: No jQuery or other lib can be assumed.
I assume you have to show and hide the text field dynamically based on changing conditions in the form, otherwise you'd just make it an <input type="hidden"... to begin with.
Keep your code that shows and hides the field as it is, but also catch the onsubmit event.
In the submit handler, get your text field via document.getElementById(...) (or by accessing document.forms[i]) and check to see whether or not it's hidden.
If it is hidden, create a new DOM node for an <input type="hidden" ...> field and add that node to the form, probably via myform.appendChild(...). You'll have to give it the name your server-side code expects. Copy the contents of the hidden text field into the newly created type=hidden field, then return from your submit handler, allowing the standard submit to continue.
You could also just un-hide the text field on submit, but you'd have to move it "off screen" also or the user would see it reappear during submit processing.
Try wrapping it in a div or span and then setting the display style to none when you want to hide it, and then to block (if you used a div) or inline (if you used a span) when you want to show it.
document.myform.myelement.style.display = 'none'
works as expected even in Internet Explorer.
The only way you can change it is before you append it to the DOM. You can make a new element and then replace the current one with it.
Look at replaceChild and createElement since you want to do manual DOM scripting. I assume you know what to do.
EDIT: "Hidden" fields as far as I know are sent. Have you checked whether they are? And you can also just do position:absolute; left:-9999em; to offset them.