Execute a javascript function from a component function.

[chinoosniel]

I was trying to show some messages in some MODALs and I think the easiest way would be to call a javascript function like for example:

function ShowModalUserInfo() {
$('.modal-user-info').modal('show');
};

If there is another way to do it, I would appreciate it.

[adamghill]

Hi @chinoosniel, can you give me some more information about what you are trying to do? Or maybe some sample HTML with an example?

On my todo list I have adding some of the "Javascript Hooks" from https://laravel-livewire.com/docs/2.x/lifecycle-hooks and some JavaScript events similar to https://laravel-livewire.com/docs/2.x/events.

However, I'm not positive that's what would help your use case. If I have more context, I might be able to prioritize a new feature that would help you out. Thanks!

[chinoosniel]

I want to show a user more than one type of "modal message bootstrap", creating the modal right now works very well for me but it would be interesting to be able to call a javascript function directly (function ShowModalUserInfo () {$ ('. modal-user-info'). modal ('show');};) when they are created.

. Sorry if my question is too basic. Thanks for this wonderful project.

[adamghill]

Definitely not too basic! I'm just trying to make sure I know what features I can add that would be the most useful. :)

So, you want to call the ShowModalUserInfo when the component initially gets rendered? Is that right?

[chinoosniel]

The idea would be to call it from any function from the UnicornView class. I'm just a django fan but my solution was:

{% for msg in UserModalInfo %}

...

{% endfor %}

<div  id="probadorCambiosParaModal">
    {% for msg in UserModalInfo %}
    <label>
        <input class="modal-user-info-control" hidden id="{{ msg.id }}" >
    </label>
    {% endfor %}
 </div>

<script>
    function MostrarModalUserInfo() {
        $('.modal-user-info').modal('show');
        console.log("sholl all my modals");

        $('.modal-user-info').on('hidden.bs.modal', function () {
            $(this).remove();
            console.log("remove from DOM");
        });

MostrarModalUserInfo();

$("body").on('DOMSubtreeModified', "#probadorCambiosParaModal", function() {
    console.log("Show news modals");
    MostrarModalUserInfo();
});

</script>

UserModalInfo is created inside a function in my UnicornView class. When the messages are obtained from the DB they change their state to avoid duplicates.
I really appreciate your answers.

[adamghill]

Thanks for showing me more context for what you are trying to do! It looks like you got to a good solution, but I think I can add a few features to Unicorn that might reduce the amount of JavaScript you have to write in the future. I created #138 to keep track of its implementation.

Thanks again for the question!

[adamghill]

This feature is now available in 0.20.0!