Topic: Select on focus
When I click on select focus method not working, while if I switch focus to change it's working.
document.querySelector("#shirtEdit").addEventListener("focus", function () { console.log(this.value); console.log("focus done"); })
This is because our Select is an overlay for native select. And so our overlay is really focused, not the native element. I modified your snippet to get the effect you want: https://mdbootstrap.com/snippets/standard/grzegorz-bujanski/4056987
novatechsk free commented 2 years ago
yop that is working. I have another question how to get this to work with dynamically created selects by ajax?
You must execute init after fetching the data. In the snippet you sent, it first executes the code that tries to initialize the component, and then the data is loaded.
Check out this snippet: https://mdbootstrap.com/snippets/standard/grzegorz-bujanski/4136452#js-tab-view I modified your code to make the components initialize correctly
After adding elements dynamically, you need to execute the same code - find the element that has been dynamically added and attach events to it.
I prepared a simple snippet that adds dynamically select to the wrapper and add events after adding and initializing select: https://mdbootstrap.com/snippets/standard/grzegorz-bujanski/4065089#html-tab-view
novatechsk free commented 2 years ago
this is working. But when I created selects with ajax it's not.
Grzegorz Bujański staff commented 2 years ago
Can you prepare a snippet with this problem? I'll check what's going on
novatechsk free commented 2 years ago
Here is a snippet example. https://mdbootstrap.com/snippets/standard/novatechsk/4111844
novatechsk free commented 2 years ago
this is working https://mdbootstrap.com/snippets/standard/novatechsk/4114117
Grzegorz Bujański staff commented 2 years ago
Unfortunately both snippets do not work. You probably didn't click the publish button
novatechsk free commented 2 years ago
published .
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- ForumUser: Free
- Premium support: No
- Technology: MDB Standard
- MDB Version: MDB5 3.9.0
- Device: PC
- Browser: Chrome
- OS: W10 Pro
- Provided sample code: No
- Provided link: No
novatechsk free commented 2 years ago
this worksdocument.querySelector("#shirtEdit").previousElementSibling.firstElementChild.addEventListener("focus", function () { console.log(this.value); })
Dawid Wajszczuk staff commented 2 years ago
Hi. Can you provide a snippet with this issue https://mdbootstrap.com/snippets/? Also describing it in more details will help.
novatechsk free commented 2 years ago
here is a snippet https://mdbootstrap.com/snippets/standard/novatechsk/4047146 I need to store the original and changed value of select to pass it to ajax.
Grzegorz Bujański staff commented 2 years ago
Unfortunately the snippet you created doesn't work - maybe you didn't click the publish button
novatechsk free commented 2 years ago
Hello, try it now.