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"  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"  role="dialog">
    <div >
        <div >
            <div >
                <button type="button"  data-dismiss="modal">&times;</button>
                <h4 >Finalizar Proyecto</h4>
            </div>
            <div >
                <form action="marcar_proyecto_como_finalizado.php" id="finalizar" method="post" target="_self">
                    <div >
                        <label> Fecha en que se entregó </label>
                        <input type="date" id="fechaEntrega" name="fechaEntrega"  required>
                        <br><br>
                    </div>
                </form>
            </div>
            <div >
                <input type="submit" form="finalizar"  name="action" value="Subir">
            </div>
        </div>
    </div>
</div>

Your help is much appreciated

CodePudding user response：

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).

CodePudding user response：

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.