Dropdown doesn't get visibile on click - javascript

I'm very new to JavaScript. Right now i'm trying to create a simple onclick event which shows a dropdown when you click the button
Here is the Demo.
However when I click the language button the dropdown doesn't show up. I can't figure out where in the JavaScript or HTML problem lies or what i'm missing.
Does anyone see the problem?

You also need to change the opacity. It's still on zero, even if you set display to block. Also note that the initial value for style.display won't be "none", but "".

Related

ngx-chips show dropdown when input is focused

I'm using ngx-chips to create a tag input for Angular 8. I got it all to work but I would like for my input to show the dropdown whenever I focus on the tag. Currently it only shows the dropdown when I focus on the input part, which is pretty small:
I want the dropdown to show when I click anywhere on the form, like this:
Is this behavior possible? I also noticed that pressing Enter can show the dropdown, but trying to trigger that behavior on click isn't really working out.
I tried altering the CSS itself by increasing the input width, but it looks and feels weird to use. So instead, I created a workaround with jQuery.
I just created a function for the component that uses ngx-chips, and used some jQuery inside that function
showDropdown() {
$('.ng2-tag-input__text-input').click();
}
Since the dropdown appears when focusing on the tag input field, what this snippet does is exactly that, but I used this function on an outer div, so that it would seem like when you click on the whole form, the dropdown would still appear.
Hope this would help someone else as well.

Show text box when checkbox clicked and keep showing after page reload

I have written a JavaScript function that shows a text input field when a checkbox is clicked. The essence of the function is basically to change the text box display property from "none", to "block" on checkbox click. This works fine, and thus when I check the box I see the text field, and when I uncheck the box, the text box hides.
Now, I am trying to figure out how to keep the text box showing after the page is refreshed. This is where I am stuck.
Any suggestions? Thanks!
Please let me know if I need to clarify anything!
Best way is to store your state in a cookie and read it after load to get back to the same state : Set cookie and get cookie with JavaScript

Dynamically loaded items not shown in second time on dropdown (Harvesthq Chosen)

I'm using this following tool to make the dropdown searchable and look nice.
Harvesthq Chosen
First I'm loading the data dynamically in dropdown and applying this code to apply the effect.
$(".chosen-select").chosen();
It works just fine. Everything ok. Then depending on some option I want to empty all data and insert new options. Now problems occur. The newly added options are not shown. Old options are still visible.
So I checked with the firebug. Select tag contains my desired data, but it's showing wrong data(Old ones).Some kind of div is visible. I tried to apply the chosen methd once again. But not working. Then I tried
$("#form_field").trigger("chosen:updated");
And not working either. Can anybody tell me what is missing?
I want to clear and load data dynamically multiple times in dropdown and apply the chosen effect.
This worked for me
$("#form_field").trigger("liszt:updated");

Changing FORM element values with JavaScript only works once

The following function to change the text of an input box works perfectly. but when I try and fire it again with a different parameter, it does not change.
function changeForm(name)
{
$("#the-input-box").val(name);
}
This also happens when I try change the selectedIndex on a select tag.
Also, the form is located on a modal box using Twitter's bootstrap, could that be the issue?
Any suggestions?
I think it's the way you are using the modal box. I've experienced the exact same thing before.
The thing about the id attribute is that there can only be ONE at any given time within the HTML DOM.
You may want to check whether you are 'destroying' your modal box after closing it. The first time you open the modal box, calling the function works without any problems. There could be a chance that after opening the modal box again, the function doesn't work anymore. This is because you are spawning multiple instances of the modal box and this causes multiple instances of #the-input-box to appear in the DOM.
Give that a try and let me know. The key is to DESTROY the modal box when it is closed (maybe closing it is fine, but I prefer the more drastic approach of destroying).

Inside a gridview (label turn to textbox on click) One at a time

Following this Question/Answer regarding changing label to textbox inside a gridview gives me a answer on my project
Changing label to textbox on javascript
but there is a slight modification cause on my project I want that only one click at a time be used. Cause on what the question ask it only show how to change label to gridview without on change one at a time.
Ive tried googling it but I cant find the right answer.
Any Ideas? My codes is same as the question above.
Thanks
Here's the pseudo-code on how I implemented it,
$('label#elementYouWantThemToClick').click(function(){
var textbox_HTML = '<textbox></textbox>'
$(this).parent().html(textbox_HTML) // This will destroy the event listener on your label as well
});

Categories