Question 36081 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

jquery modal() not working when called from inside a function

I have a table where i put a button on the final column of some rows. This button is supposed to open a bootstrap modal using jquery through the onclick attribute. It calls a js function which has the jquery method that shows the modal, but is not working.

When I put an alert on the function and comment the jquery method it works. Also, when I call the method to open it outside of any function, it works when I load the page, as it should. So for some reason it only doesn’t work when I try to call it from inside a function.

I need to call it from inside the function because I need to pass some values from the specific table row.

Button:

<button type="button" class="btn btn-success btn-sm" onclick="iniciar_produccion();">Iniciar Producción</button>

Jquery:

// This works
$("#modalIniciarProduccion").modal();

function iniciar_produccion() {
    // This doesn't work
    $("#modalIniciarProduccion").modal();
        // alert('working');
}

Modal:

<div id="modalIniciarProduccion" class="modal fade" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">Finalizar Proyecto</h4>
            </div>
            <div class="modal-body">
                <form action="marcar_proyecto_como_finalizado.php" id="finalizar" method="post" target="_self">
                    <div class="input-group">
                        <label> Fecha en que se entregó </label>
                        <input type="date" id="fechaEntrega" name="fechaEntrega" class="form-control" required>
                        <br><br>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <input type="submit" form="finalizar" class="btn btn-default pull-right" name="action" value="Subir">
            </div>
        </div>
    </div>
</div>

Your help is much appreciated

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    Upon further research I tracked the error the console gave me and found the solution to my problem in other post:

    Bootstrap modal: is not a function

    So this is a duplicate. Please mark it as such.

    Anyway, the problem was conflict of the jQuery version being loaded twice. The solution is the following:

    function iniciar_produccion() {
    jQuery.noConflict(); // I added this
    $("#modalIniciarProduccion").modal(); // This was not working
}

    I just added the line jQuery.noConflict(); before the jquery method. Hope this helps someone in the future.


  2. 0

    You put the wrong function name in the HTML.
    Your function is called modalIniciar_produccion but you wrote onclick="iniciar_produccion();"
    To be safe please copy&paste your function name from JS code into the HTML (note hat JS is also case dependent).

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search