0

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

Gibrán Vazquez
  • 54
  • 5
  • In JQuery when you use `$("#XXXXX").modal(); XXXXX` must be the id of an HTML element, right? But in your function the ID is different...? – Juan Nov 03 '22 at 17:08
  • Actually I edited the id when I posted this and made this mistake. I just checked on my code and they are the same id, so this is not it. I am editing my question right now. – Gibrán Vazquez Nov 03 '22 at 17:18

2 Answers2

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

Martin Lisowski
  • 490
  • 1
  • 3
  • 10
  • I made some editions while posting my question and made a couple mistakes with id names and the function name, now it is corrected, but in the code the html and javascript function name match. I confirmed it having an alert inside the function. It only works when I comment out the jquery method tho. – Gibrán Vazquez Nov 03 '22 at 17:35
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.

Gibrán Vazquez
  • 54
  • 5