How to run a javascript function from a modal window?

Question

I have a select, which change in value calc executes a function.

$("#modelo").change(function () {
            var id_modelo = $(this).val();
            $.ajax({
                type: "POST",
                url: "<?php echo base_url(); ?>cotizacion/getimages",
                dataType: 'json',
                async: true,
                data: "id_modelo=" + id_modelo,
                beforeSend: function () {

                    //$('#msgUsuario').html('<span></span>');
                },
                success: function (data) {
                    $("#imagenesnaves").html(data);
                    $('#contenimages').show();
                }
            });
            return false;
        });

which runs the following method controller

public function getImages() {
        $id_modelo = $this->input->post('id_modelo', TRUE);
        $imagenes = $this->Modelos_model->getImages($id_modelo);
        $output = NULL;
        if ($imagenes) {
            $index = 0;
            foreach ($imagenes as $fila) {
                $output .= '<div class="file-preview-thumbnails">
                                <div class="file-live-thumbs">
                                    <div class="file-preview-frame"  data-fileindex="4" data-template="image">
                                        <div class="kv-file-content">
                                            <img src="' . base_url() . 'uploads/' . $fila->name . '" class="kv-preview-data file-preview-image" style="width:auto;height:160px;">
                                        </div>
                                        <div class="file-thumbnail-footer">
                                            <div class="file-actions">
                                                <div class="file-footer-buttons">';
                                                    if ($fila->active == 1) {
                                                        $output .=  '<a href = "javascript:desactivar(' . $fila->id_imagen . ');" type = "button" class = "kv-file-deactivate btn btn-xs btn-default" title = "Desactivar imagen">
                                                    <i class = "glyphicon glyphicon-remove text-danger"></i></a>';
                                                    } else {
                                                        $output .=  '<a id="work" type = "button" class = "kv-file-deactivate btn btn-xs btn-default" title = "Activar imagen">
                                                    <i class = "glyphicon glyphicon-ok text-primary"></i></a>';
                                                    }
                                                 $output .= '</div>
                                                <div class="clearfix"></div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>';
                        $index ++;
            }
            $output .= '<div class="clear"></div>';
        } else {
            $output .= '<p>No hay imagenes disponibles para mostrar. Prueba agregando una.</p>';
        }
        echo json_encode($output);
    }

this method is loaded into view

<div id="contenimages" class="col-lg-12" style="text-align: center; display: none">
                <a data-toggle="modal" data-target="#events-imagenes">Ver imagenes</a>
                <div class="modal fade col-lg-12" id="events-imagenes">
                    <div class="modal-dialog" style=" width: 800px !important">
                        <div class="modal-content">
                            <div class="modal-header">
                                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                            </div>
                            <div class="modal-body clearfix" style="height: 95%; display: initial">
                                <div class=" kv-main">
                                    <div class="file-input ">
                                        <div class="file-preview">
                                            <div id="imagenesnaves" class=" clickable" tabindex="-1">
                                                <div class="clearfix"></div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="clearfix"></div>
                            <div class="modal-footer" style="height: 10%; text-align: center">
                                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                            </div>
                        </div><!-- /.modal-content -->
                    </div><!-- /.modal-dialog -->
                </div>
</div>

once loaded, each image will have a button either on or off

if ($fila->active == 1) {
$output .=  '<a href = "javascript:desactivar(' . $fila->id_imagen . ');" type = "button" class = "kv-file-deactivate btn btn-xs btn-default" title = "Desactivar imagen">
<i class = "glyphicon glyphicon-remove text-danger"></i></a>';
} else {
$output .=  '<a id="work" type = "button" class = "kv-file-deactivate btn btn-xs btn-default" title = "Activar imagen">
<i class = "glyphicon glyphicon-ok text-primary"></i></a>';
}

and functions are run javascript script into the view

    function activar(id_imagen) {
        $.ajax({
            type: "POST",
            url: '<?php echo base_url() ?>imagenes/activate',
            data: "id_imagen=" + id_imagen,
            beforeSend: function () {
                //$('#msgUsuario').html('<span></span>');
            },
            success: function (respuesta) {
                $('#contenedor2').html(respuesta);
            }
        });
    }
    function desactivar(id_imagen) {
        $.ajax({
            type: "POST",
            url: '<?php echo base_url() ?>imagenes/deactivate',
            data: "id_imagen=" + id_imagen,
            beforeSend: function () {
                //$('#msgUsuario').html('<span></span>');
            },
            success: function (respuesta) {
                $('#contenedor2').html(respuesta);
            }
        });
    }
    function eliminar(id_imagen) {
        $.ajax({
            type: "POST",
            url: '<?php echo base_url() ?>imagenes/eliminar',
            data: "id_imagen=" + id_imagen,
            beforeSend: function () {
                //$('#msgUsuario').html('<span></span>');
            },
            success: function (respuesta) {
                $('#contenedor2').html(respuesta);
            }
        });
    }
</script>

but when the modal window is opened, do not run, what would it be?

In Firefox or Chrome(ium) use F12 to open the console and see, if error comes up — Wolfgang Blessen, Jun 30 '16 at 19:50
Might be as simple as: `$("#modelo").change(function () {` change to `$("#modelo").on('change', function () {` — Farkie, Jun 30 '16 at 19:57
@Farkie that is not the problem, that is successful, load the images by ajax, but the button inside the div containing the image does not execute the function JS — Senèn Rubio, Jun 30 '16 at 20:03
The problem as @Farkie said, was to use .on an apology friend, and thank you very much, I can continue — Senèn Rubio, Jun 30 '16 at 20:24

score 1 · Accepted Answer · answered Jun 30 '16 at 20:32

1

This is because your DOM doesn't exist until after you have AJAX fetched them. You need to use the $.on method to do this:

$("#modelo").change(function () {

change to

$("#modelo").on('change', function () {

answered Jun 30 '16 at 20:32

Farkie

3,307
2
22
33

$(".clickable").on("click", ".act", function () { var value = $(this).attr('data-record-id'); activate(value); }); thanks – Senèn Rubio Jun 30 '16 at 21:03

How to run a javascript function from a modal window?

1 Answers1