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).
Related
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.
I have recently used Semantic UI to display a modal box in my app. In the modal box is a for, when the form is submitted the values of the forms feilds go on to be used in various ways. My issue is when the page posts back the form feilds are losing their values? For instance a text box that was filled out just appears as empty? However if I move the logic outside the Modal Box it all works fine? Also I have a link that when clicked fires an event in a code behind page, however when in the modal box the event does not fire?
Does anyone have any idea what might be causing these strange issue? It would seem from some things I have tried that its the javascript showing the Modal Box which is causing issues. If I manually add a class to show the modal box and disable the javascript which was causing it to show previously my logic then works fine?
Any help one this would be great im running out of things to try.
For Reference:
Heres the modal box im using http://semantic-ui.com/modules/modal.html#/definition
Here is how to show it according to the docs $('.ui.modal').modal('show'); this is what i believe to be causing the issues
EDIT:
It looks like something in the javascript is rendering the modal just below above the closing body tag regardless of where it is in the context of the website?! This certainly part of the issue, however I fell there is still something else going on
There is a text area within the dialog and it has an id.
If I want to get the content of the text area it shows every time the first given value. So if I close and reopen it, it does not recognize the changes. This problem should be solved.
example-jsbin
I think maybe the closed dialog's are not well destroyed.
instead:
dialog('close');
make this:
dialog().remove();
I am having some trouble with getting jquery to recognize classes/ids of content that has been loaded into a dialogue box. All the jquery code (including the code that deals with the as yet unloaded classes) is loaded before the dialogue box is created, however the html that eventually goes into the dialogue box is created on the fly. I know it is going to get certain classes but don't know the rest of the code/content hence the reason I am loading it from the database. If I put the html on the page with the clickable class rather than the dialogue box it works, but I obviously don't want to do that. I was thinking this is a DOM problem since the class that jquery is going to be listening for is not on the page until AFTER the dialogue box is created (the dialogue box itself is also created by a click on another item - this has to happen this way as people may or may not want to get the dialogue box with the info from the database in it up). Any help in explaining and possibly finding a solution for this is much appreciated.
Have a look at jQuery.live().
A Jquery Modal is called with two form elements. There is also an option to close the modal. One scenario is that the user would close the modal, and can come back to it.
But when the user come back, the form elements do not work, and the modal just closes upon a click.
$('#test').jqmAddClose('#test');
My assumption is that when the modal closes, it destroys the elements. Thus behaving erratically.
I tried Hiding the modal rather than closing it, but this does not remove the overlay.
The other option is to assign a unique for each instance.
Any other suggestions.
Thank you.
The issue was as I noted in the question, browser deleting the elements, and not re creating them. Assigning a new id each time modal was called solved the problem.