Avatar of ROM
ROM
Flag for United Kingdom of Great Britain and Northern Ireland asked on

Joomla - chzn-container chzn-container-multi drop down menu.. How can I add to the results via my own divs

Hey All,
I have used these drop down quite happily in some other components I have developed.
This requirement I would like to retain the ability to click, search and add to the results.

BUT ALSO... have my own lists that allow a user to click within the list and add my items to the czhn results section.

So I have two methods. Slower, search and click to add. Then I have my own multi display list that people can click and that will also populate. I will also be ordering the items in the list based on relevance and probability of clicking to the top and then the list will show less relevant towards the bottom.

That is the background.

My requirement is: "What code/function/html do I need to be able to do this?"

I have not dived into breaking this apart before. So tried to work out what JS is fired and how I need to create my html to fire this. It is like a quick add section for many, many values.

Many thanks in advance

R
JavaScriptJoomla

Avatar of undefined
Last Comment
ROM

8/22/2022 - Mon
leakim971

so you want to create THIS by yourself or ok for using a javascript library or framework ?

ROM

ASKER
Not really no.

I want to keep the existing rendered field in Joomla and create my own list of those values that can be clicked or indeed styled etc...

So if I had 500 values in that rendered multi select field with nice styling, that stays there.

I then have a long list probably 20 values high with selected and deselected values which I order myself upon load... This is all good. I can do all of this.

But right now my problem is being able to add values to that rendered multi select control.
Currently if I do it my way then you cannot see my additions within the control as it sits infront of the actual HTML Select menu which is hidden.

Thanks in advance

R
leakim971

Currently if I do it my way then you cannot see my additions within the control as it sits infront of the actual HTML Select menu which is hidden.

so starting from this, you need to add to this hidden select menu and re-render it, do that make sense to you?
This is the best money I have ever spent. I cannot not tell you how many times these folks have saved my bacon. I learn so much from the contributors.
rwheeler23
ROM

ASKER
Yes that makes sense.

If I go through a save when adding to the hidden HTML select menu this will work I know.

But I want to see the results in the UI. Current process appears to be that you undertake the operation and it populate the select menu hidden. Then when there is a post it will do the save operation.

So yes adding to the select and then rerendering the control makes sense. Unless the control renders from the retrieved array of values on load. Because unless I then save with every add operation if I was to do the following it would fail.

a) Add to the select html element.
b) Then perform a jquery div reload on the fancy drop down menu so it reads back what is in the database.

Or are you thinking of something else as the render will occur from the saved data I imagine.. It is hard to se and track the steps  in detail for me trying to debug.

Thanks

R
leakim971

So there's at least three ways to achieve your goal :
Best to worst (IMHO)
1) find the code responsible (CR) of rendering the hidden to this marvelous and beautiful multidropdown (MBM) to update (add a new item) the hidden select and ask it to re-render the MBM
2) find the way to do what the CR is doing when adding a new item to multidropdown and do it with your own code, this mean, find a reference of the MBM (class, id, ...) and add HTML to it
3) use Ajax to update database, use ajax to load the page and extract the portion representing the MBM

ROM

ASKER
Thanks

1) Having trouble tracking this down within the Joomla 3.9x install... I have been trying that to date.
2) I can see the HTML result of course and considered to add an additional element. There is a data-option-array-index value which is used in the original marvellousso dropdown that I need to generate. So need to work out the logic on that.. Could just be order of data entry and therefore probably Joomla Order maybe.
3) Can totally do this... Totally do not want to do this :)

I think probably 2 is the best option and actually adding additional elements. Please can you supply an example of this?

Many thanks in advance

R
Get an unlimited membership to EE for less than $4 a week.
Unlimited question asking, solutions, articles and more.
ROM

ASKER
Yep looks like database entry order.. the the ORDER BY that returns starting with 0 etc... so using the same MySQL query ORDER BY I can achieve this.

This may be the better option. Would love to do 1) though ... but cannot track down the function when I am looking. There is so much going on.

R
leakim971

1) is not so difficult if you provide a link to your website or a link to the Joomla extension multiselect

Please can you supply an example of this?
2) you need to post some html, at least this MBM
inside the code adding the hidden option :
var some_text = "foo bar";
$("<div class="item"><span>" + some_text  + "</span></div>").appendTo(".top-container-mbm .items-container-mbm");

Open in new window

ROM

ASKER
This project is local only at this time.

But here is a section:

<div class="controls"><select id="jform_actors" name="jform[actors][]" class="inputbox" multiple="multiple" style="display: none;">
   <option value="12" selected="selected">Internal Actor</option>
   <option value="13">Jack</option>
   <option value="14">Courtney</option>
   <option value="15">Martin</option>
   <option value="16">Walter</option>
   <option value="17">Mitch</option>
</select>
    <div class="chzn-container chzn-container-multi chzn-with-drop chzn-container-active" style="width: 220px;" title="" id="jform_actors_chzn">
        <ul class="chzn-choices">
            <li class="search-choice"><span>Internal Actor</span><a class="search-choice-close" data-option-array-index="0"></a></li><li class="search-field"><input type="text" value="Type or select some options" class="" autocomplete="off" style="width: 25px;"></li>
        </ul>
        <div class="chzn-drop">
            <ul class="chzn-results">
                <li class="result-selected" data-option-array-index="0" style="">Z Info Actor</li>
                <li class="active-result highlighted" data-option-array-index="1" style="">Jack</li><li class="active-result" data-option-array-index="2" style="">Courtney</li>
                <li class="active-result" data-option-array-index="4" style="">Martin</li>
                <li class="active-result" data-option-array-index="2" style="">Walter</li>
                <li class="active-result" data-option-array-index="5" style="">Mitch</li>
            </ul>
        </div>
    </div>
</div>

Open in new window


Having trouble adding to that UL list underneath the Div.
I.e. jform_actors_chzn chzn-choices

I get an append issue and error. I am not identifying it correctly.

Many thanks in advance
All of life is about relationships, and EE has made a viirtual community a real community. It lifts everyone's boat
William Peck
ASKER CERTIFIED SOLUTION
leakim971

Log in or sign up to see answer
Become an EE member today7-DAY FREE TRIAL
Members can start a 7-Day Free trial then enjoy unlimited access to the platform
Sign up - Free for 7 days
or
Learn why we charge membership fees
We get it - no one likes a content blocker. Take one extra minute and find out why we block content.
Not exactly the question you had in mind?
Sign up for an EE membership and get your own personalized solution. With an EE membership, you can ask unlimited troubleshooting, research, or opinion questions.
ask a question
ROM

ASKER
Are you building an array because you cannot supply a string?

I keep getting append error on null when I try to fit your answers into my partial code rather than total transfer.

I can follow what you are doing... but are you monitoring the DOM for changes? Why do we need to do that if we are inserting by our own action?

Thanks


leakim971

even if it was that, I would use vanilla Javascript
but it's just a choice...

var html = "";
$("option", "#jform_actors").each(function(i,v) {
    html += "<li class='>" + ($(v).is(":selected")?"result-selected":"active-result") + "' data-option-array-index='" + i + "'>" + $(v).val() + "</li>";
});
$(".chzn-results").html(html);

Open in new window


ROM

ASKER
Ok I think I am getting a little confused because you are trying to add an option to a select field.

In Joomla all of the values are already in the select. It is just hidden.

So I need to add a list item to an unordered list within a div as well as some other divs too.

But this is what I am trying to achieve as that is the very visual element to the user.

so we are talking <div>-><ul>-><li>

as in:<li class="search-choice"><span>Toby</span><a class="search-choice-close" data-option-array-index="6"></a></li>
to the

<div class="chzn-container chzn-container-multi chzn-with-drop chzn-container-active" style="width: 220px;" title="" id="jform_actors_chzn">
        <ul class="chzn-choices">
            <li class="search-choice"><span>Internal Actor</span><a class="search-choice-close" data-option-array-index="0"></a></li><li class="search-field"><input type="text" value="Type or select some options" class="" autocomplete="off" style="width: 25px;"></li>
        </ul>

Open in new window


I want to add more search-choice litem items to this UL list.. the Select is all fine as it is assembled correctly. The Joomla JS then does a select change on the list NOT an add

Thanks

R

Get an unlimited membership to EE for less than $4 a week.
Unlimited question asking, solutions, articles and more.
leakim971

Ok I think I am getting a little confused because you are trying to add an option to a select field.

this is your words :
Currently if I do it my way then you cannot see my additions within the control as it sits infront of the actual HTML Select menu which is hidden.

So, NOW, try again with YOUR WAY and you should see a new item in the multibox
ROM

ASKER
OKI have this working as a test not in the actual Joomla page.

Many thanks

However, I have duplicated that DIV and given a different name of jform_places as I have several on the page.

How do I target JUST that particular one for the appendTo please?

<div class="controls">
    <select id="jform_actors" name="jform[actors][]" class="inputbox" multiple="multiple" style="display: none;">
        <option value="12" selected="selected">Internal Actor</option>
        <option value="13">Jack</option>
        <option value="14">Courtney</option>
        <option value="15">Martin</option>
        <option value="16">Walter</option>
        <option value="17">Mitch</option>
    </select>
    <div class="chzn-container chzn-container-multi chzn-with-drop chzn-container-active" style="width: 220px;" title="" id="jform_actors_chzn">
        <ul class="chzn-choices">
            <li class="search-choice"><span>Internal Actor</span><a class="search-choice-close" data-option-array-index="0"></a></li><li class="search-field"><input type="text" value="Type or select some options" class="" autocomplete="off" style="width: 25px;"></li>
        </ul>
        <div class="chzn-drop">
            <ul class="chzn-results">
                <li class="result-selected" data-option-array-index="0" style="">Z Info Actor</li>
                <li class="active-result highlighted" data-option-array-index="1" style="">Ireland</li>
                <li class="active-result" data-option-array-index="2" style="">Courtney</li>
                <li class="active-result" data-option-array-index="4" style="">Martin</li>
                <li class="active-result" data-option-array-index="2" style="">Walter</li>
                <li class="active-result" data-option-array-index="5" style="">Mitch</li>
            </ul>
        </div>
    </div>
</div>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<div class="controls">
    <select id="jform_places" name="jform[places][]" class="inputbox" multiple="multiple" style="display: none;">
        <option value="12" selected="selected">Internal Actor</option>
        <option value="13">London</option>
        <option value="14">Japan</option>
        <option value="15">Australia</option>
        <option value="16">Scotland</option>
        <option value="17">China</option>
    </select>
    <div class="chzn-container chzn-container-multi chzn-with-drop chzn-container-active" style="width: 220px;" title="" id="jform_actors_chzn">
        <ul class="chzn-choices">
            <li class="search-choice"><span>UK</span><a class="search-choice-close" data-option-array-index="0"></a></li><li class="search-field"><input type="text" value="Type or select some options" class="" autocomplete="off" style="width: 25px;"></li>
        </ul>
        <div class="chzn-drop">
            <ul class="chzn-results">
                <li class="result-selected" data-option-array-index="0" style="">Z Info Place</li>
                <li class="active-result highlighted" data-option-array-index="1" style="">London</li>
                <li class="active-result" data-option-array-index="2" style="">Japan</li>
                <li class="active-result" data-option-array-index="4" style="">Australia</li>
                <li class="active-result" data-option-array-index="2" style="">Scotland</li>
                <li class="active-result" data-option-array-index="5" style="">China</li>
            </ul>
        </div>
    </div>
</div>

<script>
    MutationObserver = window.MutationObserver || window.WebKitMutationObserver;
    var observer = new MutationObserver(function(mutations, observer) {
        var html = [];
        $("option", "#jform_places").each(function(i,v) {
            html.push("<li class='>" + ($(v).is(":selected")?"result-selected":"active-result") + "' data-option-array-index='" + i + "'>" + $(v).val() + "</li>")
        });
        $(".chzn-results").html(html.join(""));
    });
    observer.observe($("#jform_places")[0], { subtree: true, childList:true, attributes:true });
</script>
<script>
// FOR TESTING
// JUST LIKE YOUR SCRIPT,
// WE ADD AN OPTION TO THE HIDDEN SELEC
//$("<option>Romolo</option>").appendTo("#jform_actors");
var myvalue = '<li class="search-choice"><span>Toby</span><a class="search-choice-close" data-option-array-index="6"></a></li>';
$(myvalue).appendTo(".chzn-choices")
</script>



Open in new window


Many thanks

R

ROM

ASKER
I have done this on your test page ... but cannot get it to work on Joomla.. ok Ill try again

Thanks

R
Experts Exchange is like having an extremely knowledgeable team sitting and waiting for your call. Couldn't do my job half as well as I do without it!
James Murphy
ROM

ASKER
var myvalue = '<li class="search-choice"><span>Toby</span><a class="search-choice-close" data-option-array-index="6"></a></li>';

$(myvalue).appendTo("#jform_actors_chzn .chzn-choices");

Works on yours but nothing working in the Joomla view page.

R
leakim971

check how many you have :
var how_many = $("#jform_actors_chzn .chzn-choices"); // test your selector
alert( how_many ); // should be 1 not more or zero
console.log( how_many );
$(myvalue).appendTo("#jform_actors_chzn .chzn-choices");

Open in new window



ROM

ASKER
ok weird... $ is causing a function error so changed to jQuery. Also put this on a click event as I think it was firing too early before JS was doing all of its manupilation.

I now have it working on a click event.. but I must have jQuery and not $. I have been $ the same way for all of my other custom views... this is the first view I am altering that is being loaded in Joomla and trying to use JQuery instead of vanilla JS.

Referenced same as others...

However the remove is NOT working. Assuming this is because I am doing this after the DOM is loaded. So that Hyperlink is meant to remove the item. So I guess I need to reinitialise I think.
Also it has added it after the <li class="search-field">
and I need it before this and a continuation.

How can I do this? Do I need to work out the last element in the list..? if so ..please help

Many thanks in advance

R


Get an unlimited membership to EE for less than $4 a week.
Unlimited question asking, solutions, articles and more.
leakim971

jQuery(function($) {
     // put your jQuery code inside
});

Open in new window

https://jsfiddle.net/ecf1wa08/
ROM

ASKER
Yes I did this also.. just odd that I had to do anything different to my other total custom views.
How can I insert this after the previous

<li class="search-choice"><span>Walter</span><a class="search-choice-close" data-option-array-index="4"></a></li>

Open in new window


or whatever that last item is but before the:

<li class="search-field"><input type="text" value="Type or select some options" class="" autocomplete="off" style="width: 25px;"></li>

Open in new window

Thanks in advance

R

leakim971

https://api.jquery.com/insertbefore/

$(myvalue).insertBefore(".search-field");
Your help has saved me hundreds of hours of internet surfing.
fblack61
ROM

ASKER
ok that is brilliant.
That works now.. I have additional requirement around the same drop down in Joomla.
I need to find the value in the REAL select and change it to say SELECTED as part of the same action.
AND another DID and UL to change the class to selected.


Many thanks

R

ROM

ASKER
Still need to reinitialise after adding the element or the JS wont fire on the remove.. or have I misunderstood that? That hyperlink should remove it from that list.

Thank you

R
leakim971

// use
$("option[value='" + someValue  + "']", "#jform_actors").prop("selected", true);
// or
$("option[value='" + someValue  + "']", "#jform_actors").attr("selected", "selected");
// or
$("#jform_actors").val(someValue);

Open in new window


Get an unlimited membership to EE for less than $4 a week.
Unlimited question asking, solutions, articles and more.
ROM

ASKER
ok second option worked for me. Awesome.
How do I do this in the final UL list
<div class="chzn-drop">
    <ul class="chzn-results">
        <li class="active-result" data-option-array-index="0" style="">Z Info Actor</li>
        <li class="result-selected" data-option-array-index="1" style="">Jack</li>
        <li class="active-result" data-option-array-index="2" style="">Courtney</li>
        <li class="active-result" data-option-array-index="3" style="">Martin</li>
        <li class="active-result" data-option-array-index="4" style="">Walter</li>
    </ul>
</div>

Open in new window


I wanted to change the class to "active-selected".

And do I need to reinitialise to get the REMOVE JavaScript to work as I am adding these after the DOM is made? If so how please or advise me differently if I am way off track.

Super many thanks in advance...

R
leakim971

that should be done automatically with the code provided
ROM

ASKER
No it does not.
So far I have added a list item to UL a).
I have SELECTED within the original select menu.

I need to change class to SELECTED in the other UL list used as the search area.

And I need the HREF to actually fire the REMOVE action of the normal JS.. but it does not seem to do anything.

Thank you

R
I started with Experts Exchange in 2004 and it's been a mainstay of my professional computing life since. It helped me launch a career as a programmer / Oracle data analyst
William Peck
ROM

ASKER
This is why I thought maybe I need to do something as I am adding to the DOM and I know the link to the JS can break as it cannot see the new items... probably a better description than that somewhere.

Thank you

R
ROM

ASKER
Assuming the mutation code is meant to do this, it is pointing at the SELECT ID not the UL .

But I have tried the following but it still just POPS the search box and not remove the element I have added.
<script>
    MutationObserver = window.MutationObserver || window.WebKitMutationObserver;
    var observer = new MutationObserver(function(mutations, observer) {
        var html = [];
        $("option", "#jform_actors_chzn").each(function(i,v) {
            html.push("<li class='>" + ($(v).is(":selected")?"result-selected":"active-result") + "' data-option-array-index='" + i + "'>" + $(v).val() + "</li>")
        });
        $(".chzn-choices").html(html.join(""));
    });
    observer.observe($("#jform_actors_czhn")[0], { subtree: true, childList:true, attributes:true });
</script>

Open in new window


Thank you

R
leakim971

the mutation code is :
every time the hidden select change update the UL
Get an unlimited membership to EE for less than $4 a week.
Unlimited question asking, solutions, articles and more.
ROM

ASKER
Aha looking over your code with better eyes now:

Is your code meant to be doing this?

Look for addition of option within the original select id
If so then add additional list item against particular div.

Because I am NOT adding to the select ID... I have changing to selected and it is a multi select field.

Is this why I am having issues?

Thanks

R
ROM

ASKER
But by change... does this apply to the later answer I got around making an option SELECTED or just adding a new item?

Maybe this is why I have got a bit muddled

Thanks in advance
R
ROM

ASKER
And if so.. the value that I set on the select id option is not the same as the value in the div is a position in the drop down. So  Courtney is option 14 in the select and data-option-array-index="2" in the div and UL lists.

This is how the Joomla field renders it. The Select is the unique value from the database and the fancy drop down is the position in the drop down.

R
Experts Exchange has (a) saved my job multiple times, (b) saved me hours, days, and even weeks of work, and often (c) makes me look like a superhero! This place is MAGIC!
Walt Forbes
leakim971

Look for addition of option within the original select id

If so then add additional list item against particular div.
yes
leakim971

... and it clean the original to rebuild it from scratch and set the selected element with the class "result-selected" instead the default one "active-result"
ROM

ASKER
OK.. I have now changed it to NO LONGER add the li .... as that is what I did in my code as I thought that was the answer.

I now have COURTNEY being changed to select with value of 14. But the UL chzn-choices within DIV jform_actors_chzn
is not changing adding COURTNEY with a data-option-array-index value of 2.

Many thanks

R
Get an unlimited membership to EE for less than $4 a week.
Unlimited question asking, solutions, articles and more.
ROM

ASKER
This is now nearly exactly your code apart from I am setting someValue to 14

Thanks

R
ROM

ASKER
So the three events are:

a) Change hidden SELECT and change option to SELECTED.. i.e. 14 in this case.(jform_actors)
b) Add LI to UL (chzn-choices) within the DIV as above (jform_actors_chzn).
c) Change the tag from active-result to result-selected..and for Courtney this is data-option-array-index 2.This is within the UL (chzn-results) within the DIV (chzn-drop) still wrapped within the parent DIV (jform_actors_chzn).

Thanks for much

R

Thank you

leakim971

do you really have duplicate ID ?
 id="jform_actors_chzn"

Open in new window

for the both main containers :
<div class="chzn-container chzn-container-multi chzn-with-drop chzn-container-active" style="width: 220px;" title="" id="jform_actors_chzn">

Open in new window

instead :
<div class="chzn-container chzn-container-multi chzn-with-drop chzn-container-active" style="width: 220px;" title="" id="jform_actors_chzn">

Open in new window

and
<div class="chzn-container chzn-container-multi chzn-with-drop chzn-container-active" style="width: 220px;" title="" id="jform_places_chzn">

Open in new window


This is the best money I have ever spent. I cannot not tell you how many times these folks have saved my bacon. I learn so much from the contributors.
rwheeler23
ROM

ASKER
No duplicates. Only 1.. The other one of these fields in use on this Joomla view is called jform_places_chzn.

But I am doing this as well on your example simple html. Still not getting the results where I did when I pushed my LI .. but then I had to do everything else separately.. Now I understand what your code is trying to do .. to a point.

No duplicates involved at all.. I had this working as I say when trying to push LI.. but then the JS broke and would not remove as I did not understand what your code was trying to do.

But your code does not touch chzn-choices which I think is what was confusing me.. as I need a NEW element added there.

Thanks

R

ROM

ASKER
Don't understand what you are pointing out in your 4x code post. First one I get.. no duplicates.. the others... ?!?

Thanks

R
leakim971

here an example with both hidden select and multiselect : https://leak.im/29222908/
(please note IDs lines 14 and 55 are different)
<!DOCTYPE html>
<html>
<head></head>
<body>
<div class="controls">
    <select id="jform_actors" name="jform[actors][]" class="inputbox" multiple="multiple" style="display: none;">
        <option value="12" selected="selected">Internal Actor</option>
        <option value="13">Jack</option>
        <option value="14">Courtney</option>
        <option value="15">Martin</option>
        <option value="16">Walter</option>
        <option value="17">Mitch</option>
    </select>
    <div class="chzn-container chzn-container-multi chzn-with-drop chzn-container-active" style="width: 220px;" title="" id="jform_actors_chzn">
        <ul class="chzn-choices">
            <li class="search-choice"><span>Internal Actor</span><a class="search-choice-close" data-option-array-index="0"></a></li><li class="search-field"><input type="text" value="Type or select some options" class="" autocomplete="off" style="width: 25px;"></li>
        </ul>
        <div class="chzn-drop">
            <ul class="chzn-results">
                <li class="result-selected" data-option-array-index="0" style="">Z Info Actor</li>
                <li class="active-result highlighted" data-option-array-index="1" style="">Ireland</li>
                <li class="active-result" data-option-array-index="2" style="">Courtney</li>
                <li class="active-result" data-option-array-index="4" style="">Martin</li>
                <li class="active-result" data-option-array-index="2" style="">Walter</li>
                <li class="active-result" data-option-array-index="5" style="">Mitch</li>
            </ul>
        </div>
    </div>
</div>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<div class="controls">
    <select id="jform_places" name="jform[places][]" class="inputbox" multiple="multiple" style="display: none;">
        <option value="12" selected="selected">Internal Actor</option>
        <option value="13">London</option>
        <option value="14">Japan</option>
        <option value="15">Australia</option>
        <option value="16">Scotland</option>
        <option value="17">China</option>
    </select>
    <div class="chzn-container chzn-container-multi chzn-with-drop chzn-container-active" style="width: 220px;" title="" id="jform_places_chzn">
        <ul class="chzn-choices">
            <li class="search-choice"><span>UK</span><a class="search-choice-close" data-option-array-index="0"></a></li><li class="search-field"><input type="text" value="Type or select some options" class="" autocomplete="off" style="width: 25px;"></li>
        </ul>
        <div class="chzn-drop">
            <ul class="chzn-results">
                <li class="result-selected" data-option-array-index="0" style="">Z Info Place</li>
                <li class="active-result highlighted" data-option-array-index="1" style="">London</li>
                <li class="active-result" data-option-array-index="2" style="">Japan</li>
                <li class="active-result" data-option-array-index="4" style="">Australia</li>
                <li class="active-result" data-option-array-index="2" style="">Scotland</li>
                <li class="active-result" data-option-array-index="5" style="">China</li>
            </ul>
        </div>
    </div>
</div>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
    jQuery(function($) {
        const mbms = ["jform_places", "jform_actors"];
        mbms.forEach((mbm)=> {
            const hidden_select_id = mbm;
            const hidden_select = $("#" + hidden_select_id)[0];
            const div_chzn_id = mbm + "_chzn";
            const div_chzn = $("#" + div_chzn_id)[0];
            MutationObserver = window.MutationObserver || window.WebKitMutationObserver;
            const observer = new MutationObserver(function(mutations, observer) {
                var html = "";
                $("option", hidden_select).each(function(i,v) {
                    html += "<li class='>" + ($(v).is(":selected")?"result-selected":"active-result") + "' data-option-array-index='" + i + "'>" + $(v).val() + "</li>";
                });
                $(".chzn-results", div_chzn).html(html);
            });
            observer.observe(hidden_select, { subtree: true, childList:true, attributes:true });
        });
        // FOR TESTING
        // JUST LIKE YOUR SCRIPT,
        // WE ADD AN OPTIONS TO THE HIDDEN SELECT
        $("<option>Romolo</option>").appendTo("#jform_actors")
        $("<option>leakim971</option>").appendTo("#jform_actors")
        // ADDING PLACES NOW
        $("<option>England</option>").appendTo("#jform_places")
        $("<option>Guadeloupe</option>").appendTo("#jform_places")
    });
</script>
</body>
</html>

Open in new window


Get an unlimited membership to EE for less than $4 a week.
Unlimited question asking, solutions, articles and more.
ROM

ASKER
It is not allowing any action after the item is added. i.e. the close X does not work etc...
I mention above, is this something to do with the DOM already being loaded and I need to refresh or something as the listener is not listening for these new items?

Many thanks in advance.

R
leakim971

One month later since my previous, you're describing your issue like I have your Joomla website on my browser...
If you can't share the URL to access, I'm totally blind
ROM

ASKER
Aha ok... no I am not expecting you to have that at the top of the list etc... I know you have not seen the site. And I think I need to setup some new domain dummy site for this.

I meant as more of a general development issue.

If you add items after the page is loaded and you have event listeners on page load, would the new items that you have created be fired by the event listener or does there have to be some sort of reinitialisation... as a general rule as these are totally new items to the DOM?

Many thanks in advance

R
All of life is about relationships, and EE has made a viirtual community a real community. It lifts everyone's boat
William Peck
leakim971

let m know when you setup the website, it 1000 times better and faster to help someone with all the context
ROM

ASKER
This is still a requirement and will come back to it very shortly. There are pre-requisite tasks for this which I am completing so I can then focus on this particular function.

Many thanks in advance

R
ROM

ASKER
OK..
This is a Joomla Administrator Edit view. Not something I can just put up on the Internet.

What you detail does add a new li class to the box. That bit is great.
However the href button that removes from the box does not do anything when I try to remove using any of the NEW list items added. So I thought is this because I need to reinitialise or something.

With this being Joomla all of these functions and things are squirreled away in a MVC framework.

I cannot see what function is fired to remove this list item at all.

<li class="search-choice"><span>Walter</span><a class="search-choice-close" data-option-array-index="4"></a></li>

Open in new window

This is added all ok. But that HREF does not remove the list item from the chzn-choices list
<ul class="chzn-choices"><li class="search-choice"><span>Walter</span><a class="search-choice-close" data-option-array-index="4"></a></li><li class="search-field"><input type="text" value="Type or select some options" class="" autocomplete="off" style="width: 25px;"></li></ul>

Open in new window

If I cannot remove the items added then I can not use it.

So that is why I thought maybe as it is a new item added the DOM is not aware of it and that is why it is not firing?

Please advise

Many thanks in advance

R
Get an unlimited membership to EE for less than $4 a week.
Unlimited question asking, solutions, articles and more.
ROM

ASKER
I am experiencing this last issue in other places so I think I need to rephrase and create a new question.

Thank you so much for the help you gave me in adding those new elements.