Select2 not working on the child component

@furqanDev Yes, I put in the webpack.mix

    'resources/admin/css/bootstrap.min.css',
    'resources/admin/css/nifty.min.css',
    'resources/admin/plugins/pace/pace.min.css',
    'resources/admin/plugins/font-awesome/css/font-awesome.min.css',
    'resources/admin/plugins/ionicons/css/ionicons.min.css',
    'resources/admin/plugins/themify-icons/themify-icons.min.css',
    'resources/admin/plugins/bootstrap-select/bootstrap-select.min.css',
    'resources/admin/plugins/chosen/chosen.min.css',
    'resources/admin/plugins/select2/css/select2.min.css',
    'resources/admin/DataTables/datatables.min.css',
],'public/css/main.css')
    .scripts([
        'resources/admin/js/jquery.min.js',
        'resources/admin/js/bootstrap.min.js',
        'resources/admin/js/nifty.min.js',
        'resources/admin/plugins/pace/pace.min.js',
        'resources/admin/plugins/flot-charts/jquery.flot.min.js',
        'resources/admin/plugins/flot-charts/jquery.flot.resize.min.js',
        'resources/admin/plugins/flot-charts/jquery.flot.tooltip.min.js',
        'resources/admin/plugins/sparkline/jquery.sparkline.min.js',
        'resources/admin/plugins/bootstrap-select/bootstrap-select.min.js',
        'resources/admin/plugins/chosen/chosen.jquery.min.js',
        'resources/admin/plugins/select2/js/select2.min.js',
        'resources/admin/DataTables/datatables.min.js',
], 'public/js/main.js');

@Sinnbeck That's how to initialize select2 sir. I just follow their document in basic usage.

@anonymouse703 Link?

@anonymouse703 I'm pretty sure they meat this ?

$(document).ready(function() {
    $('#ex').select2();
});

@anonymouse70 You have 2 id attribute in select tag. Choose one and add it in the selector as well.

@Sinnbeck https://select2.org/

@anonymouse703 I dont see that code anywhere? they use document ready as @furqandev suggested

@furqanDev I just erase the second id :) but still doesn't working

@anonymouse703 What do you mean? Can you show how both selects look currently and the js you are using?

@anonymouse703 If you have added id="ex" then in the selector it should also be $("#ex")

@Sinnbeck What I mean the JS file is included in the table(parent) component and not in the form(child) component.

I have this sample in the table where I used id

    <label class="col-sm-3 control-label" for="customer_id">Country</label>
    <div class="col-sm-9">
        <select id="ex" class="form-control" data-placeholder="Choose a Country..." tabindex="2">
            <option value="United States">United States</option>
            <option value="United Kingdom">United Kingdom</option>
            <option value="Afghanistan">Afghanistan</option>
            <option value="Aland Islands">Aland Islands</option>
            <option value="Albania">Albania</option>
            <option value="Algeria">Algeria</option>
            <option value="American Samoa">American Samoa</option>
            <option value="Andorra">Andorra</option>
            <option value="Angola">Angola</option>
            <option value="Yemen">Yemen</option>
            <option value="Zambia">Zambia</option>
            <option value="Zimbabwe">Zimbabwe</option>
        </select>
    </div>

and in the form(child) component

<div class="form-group">
    <label class="col-sm-3 control-label" for="customer_id">Country</label>
    <div class="col-sm-9">
        <select class="demo-chosen-select form-control" data-placeholder="Choose a Country..." tabindex="2">
            <option value="United States">United States</option>
            <option value="United Kingdom">United Kingdom</option>
            <option value="Afghanistan">Afghanistan</option>
            <option value="Aland Islands">Aland Islands</option>
            <option value="Albania">Albania</option>
            <option value="Algeria">Algeria</option>
            <option value="American Samoa">American Samoa</option>
            <option value="Andorra">Andorra</option>
            <option value="Angola">Angola</option>
            <option value="Yemen">Yemen</option>
            <option value="Zambia">Zambia</option>
            <option value="Zimbabwe">Zimbabwe</option>
        </select>
    </div>
</div>

and the scripts for both

$(function(){
        $('#ex').select2();//table
        $('.demo-chosen-select').select2();//form
    });

Since it only work in the table(parent) component should I make an inline script in the form? or attached another script file?

@anonymouse703 That should be fine. But only the first one works or? Any chance that the second isnt shown at first render? If it is loaded later by livewire, then it wont work.

@Sinnbeck This one is working in the parent $('#ex').select2();//table but when I click the the modal form (the child component) then this $('.demo-chosen-select').select2();//form wont working..

@Sinnbeck Here is the pic for your reference

Working in Table (Parent): https://ibb.co/SNrL1fW Not working in form modal (Child): https://ibb.co/7JsHm4s

@anonymouse703 let me just repeat

Any chance that the second isnt shown at first render? If it is loaded later by livewire, then it wont work.

How is the modal shown/hidden? By class? If it isn't in the html source, it won't work (f12 -> Elements)

@Sinnbeck Ah yes it was hidden in the first render sorry about that.

I did like this one

 <!-- The Modal -->
            <div wire.ignore.self class="modal fade" id="joborderModal" tabindex="-1" role="dialog"
                aria-labelledby="joborderModal" aria-hidden="true" data-backdrop="static" data-keyboard="false">
                <div class="modal-dialog modal-lg" role="document">
                    <livewire:j-o-m-s.job-order-form />
                </div>
            </div>

@anonymouse703 So now it is in the html on first render? Does it work then?

@Sinnbeck First render sir, in the table(parent) component.

@anonymouse703 While the modal is open, try opening the console (F12->Console) and paste in $('.demo-chosen-select').select2() and hit enter. Does it work then?

@Sinnbeck sorry sir I fall asleep yesterday... Yeah it's running..

I tried this approach

$('.demo-chosen-select').select2({
     dropdownParent: $('#joborderModal')
});

What JS hooks should I used? or I need to use livewire inline script?

@anonymouse703 sounds like it is a timing issue, if it works when you run it manually. You can try running it with a timeout

setTimeout(function () {
     //run the code 
}, 300)

@Sinnbeck still don't work sir

@anonymouse703 maybe look into hooking into livewire events then

https://laravel-livewire.com/docs/2.x/inline-scripts

https://laravel-livewire.com/docs/2.x/events#in-js

@Sinnbeck Thanks sir I already fixed it.... I just put it in event and called when the modal open

document.addEventListener("DOMContentLoaded", () => {

        Livewire.on('select2', postId => {
            $('#customer').select2({
                dropdownParent: $("#joborderModal")
            });//
        })
        
}