Senèn Rubio Senèn Rubio - 5 months ago 18
Ajax Question

How to run a javascript function from a modal window?

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?

Answer

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 () {
Comments