Select object not updating displayed value

Topic: Select object not updating displayed value

Dylan Keith asked 5 years ago

Expected behavior: When the value of a select object is changed, the displayed selected object should be updated as well.

Actual behavior: Value is updated in the backend, but not displayed in the select object

Resources (screenshots, code snippets etc.)

This select object works fine: select class="browser-default custom-select"

but the mdb select object: select class="mdb-select md-form" does not update after changing the value via JS.

I've searched through the documentation a number of times and can't find anything on this, except for a message saying:

"In addition, you will need a separate call for any dynamically generated select elements your page generates."

But no information on what call to make.

Please advise,

Thanks

Add comment

Tomek Makowski staff answered 5 years ago

0 0 Best answer

Can you show your code in snippet code editor

Regards

Dylan Keith commented 5 years ago

Sure, https://mdbootstrap.com/snippets/jquery/dylan_keith/2134241?action=forum_snippet

I can't run the client code inside of the snippet editor as it doesn't find my object IDs, but i'll describe it down below.

I'm updating the select object via AJAX, and want to run the following: document.getElementById("commentType").value="Customer Contact" This seems to update the value of the select box (This does work correctly in the snippet) but in my code, as soon as I add the mdb.js file, I have to update the temp0 object that is spawned from the select object. If I update both values it works as expected. I've included the object below from the DOM browser.

Thanks for your time

Dylan Keith commented 5 years ago

Will also note that downloading the snippet to the desktop and extracting / running yeilds the same negative results. Same issue i'm experiencing in my code

Add comment

Tomek Makowski staff answered 5 years ago

0 0 Best answer

I'm trying to reopen your problem is this something similar to your expect

https://mdbootstrap.com/snippets/jquery/tomekmakowski/2136845?view=project#js-tab-view

If it doesn't please show me your AJAX code and all js

Regards

Add comment

Dylan Keith answered 5 years ago

0 0 Best answer

I'm not trying to add new elements to the select, but rather I want to change the value/display of the object for the user. For instance, if an object(mongodocument) is loaded to the edit page, it might update the category to 'Prospect' as below. This part works as expected, but when I load a second document, the displayed object is still "Prospect" even if the actual value might now be "General Update". I was able to find a work around by re-initializing the select object after each data call. Is this the best solution? or is there a better way to dynamically update the select

Initial condition loaded from the ajax call

value of the select = "Prospect" via document.getElementById('category').value

Value after a forced update

Value of the select = "Quote" via document.getElementById('category').value after via document.getElementById('category').value="Quote" but the select still displays Prospect

Add comment

Tomek Makowski staff answered 5 years ago

0 0 Best answer

If it works it fine then but try maybe this

https://mdbootstrap.com/snippets/jquery/tomekmakowski/2136845?view=project#js-tab-view

Regards

Add comment