Déclenchement de l'événement onClick lors de l'Entrée de pression de touche dans un Twitter Bootstrap Modal
J'ai un peu de modals de construire au-dessus de Twitter Bootstrap Modal, ont chacun au moins un bouton "soumettre" qui est l'action par défaut j'ai besoin de déclencher dans la plupart des cas depuis le deuxième bouton pour revenir en arrière (rejeter le modal), comment, sur un modal, quand j'appuie sur entrer, je peux déclencher l'action que soumettre a? Par exemple maintenant, comme ils sont le bouton j'ai quelque chose comme:
$("#btn").on("click", function(e){
e.preventDefault(); //wait... not send form yet, will be a Ajax call
});
De l'aide? Exemple de code?
Pour la référence, c'est le contenu modal (je l'aide avec Twig dans le cadre d'un projet Symfony2 donc ne vous inquiétez pas {{ }}
):
<div class="modal fade " id="addNorma" tabindex="-1" role="dialog" aria-labelledby="addNorma" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">{{ 'boton.cerrar'|trans({}, 'AppBundle') }}</span></button>
<h4 class="modal-title" id="myModalLabel">{{ 'modal.normas.titulo'|trans({}, 'AppBundle') }}</h4>
</div>
<div class="modal-body">
<form id="buscadorNorma" method="POST">
<div class="spacer10"></div>
<div class="row">
<div class="col-md-5 col-lg-5 col-sm-5 col-xs-5">
<label for="codigo_norma">{{ 'modal.normas.codigo'|trans({}, 'AppBundle') }}</label>
<input type="text" class="form-control" id="codigo_norma" name="codigo_norma" placeholder="{{ 'modal.normas.codigoPlaceholder'|trans({}, 'AppBundle') }}">
</div>
<div class="col-md-5 col-lg-5 col-sm-5 col-xs-5 col-md-offset-2">
<label for="ano_publicacion">{{ 'modal.normas.anno'|trans({}, 'AppBundle') }}</label>
<input type="text" class="form-control" id="ano_publicacion" name="ano_publicacion" placeholder="{{ 'modal.normas.annoPlaceholder'|trans({}, 'AppBundle') }}">
</div>
</div>
<div class="spacer10"></div>
<div class="row">
<div class="col-md-12">
<label for="nombre_norma">{{ 'modal.normas.term'|trans({}, 'AppBundle') }}</label>
<input type="text" class="form-control" id="nombre_norma" name="nombre_norma" placeholder="{{ 'modal.normas.termPlaceholder'|trans({}, 'AppBundle') }}">
</div>
</div>
<div class="spacer10"></div>
<div class="row">
<div class="col-md-12">
<label for="procedencia_producto">{{ 'modal.normas.comite'|trans({}, 'AppBundle') }}</label>
<div class="form-group">
<div>
<select name="comite_tecnico" id="comite_tecnico" class="form-control toSelect2">
<option value="" selected="selected">{{ 'seleccioneOpcion'|trans({}, 'AppBundle') }}</option>
{% for key, item in comiteTecnico %}
<option value="{{ key }}">{{ item.nombre }}</option>
{% endfor %}
</select>
</div>
</div>
</div>
</div>
<div class="spacer5"></div>
<div class="row">
<div class="col-md-12">
<button type="button" class="btn btn-default pull-right" disabled="disabled" id="btnBuscarNorma"><i class="fa fa-binoculars"></i> {{ 'boton.buscar'|trans({}, 'AppBundle') }}</button>
</div>
</div>
</form>
<div class="spacer10"></div>
<table class="table table-hover table-condensed" id="resultadoNorma" style="display: none">
<thead>
<tr>
<th><input type="checkbox" id="toggleCheckboxNorma" name="toggleCheckboxNorma" /></th>
<th>{{ 'columnas.normas.no'|trans({}, 'AppBundle') }}</th>
<th>{{ 'columnas.normas.norma'|trans({}, 'AppBundle') }}</th>
<th>{{ 'columnas.normas.anno'|trans({}, 'AppBundle') }}</th>
<th>{{ 'columnas.normas.comite'|trans({}, 'AppBundle') }}</th>
</tr>
</thead>
<tbody id="resultadoNormaBody"></tbody>
</table>
<div class="alert alert-danger" role="alert" style="display: none;" id="sinResultadosBuscarNormas">
{{ 'mensajes.msgNoEncontrado'|trans({}, 'AppBundle') }}
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal">{{ 'boton.regresar'|trans({}, 'AppBundle') }}</button>
<button type="submit" class="btn btn-primary" id="btnAplicarNorma" disabled="disabled"><i class="fa fa-save"></i> {{ 'boton.aplicar'|trans({}, 'AppBundle') }}</button>
</div>
</div>
</div>
</div>
Et c'est le code que j'ai déclencher lorsque je clique sur #btnBuscarNorma
:
$('button#btnBuscarNorma').on('click', function (ev) {
ev.preventDefault();
$.post(Routing.generate('filtrarNormas'), $('#buscadorNorma').serialize(), 'json')
.done(function (data, textStatus, jqXHR) {
$('#resultadoNorma').toggle(!!data.entities.length);
$("#sinResultadosBuscarNormas").toggle(!data.entities.length);
if (data.entities.length > 0) {
var $html = '';
data.entities.forEach(function (value, index, array) {
$html += '<tr>';
$html += '<td><input type="checkbox" id="' + value.id + '" value="' + value.id + '"></td>';
$html += '<td>' + value.codigo + '</td>';
$html += '<td>' + value.norma + '</td>';
$html += '<td>' + value.anno + '</td>';
$html += '<td>' + value.comiteTecnico + '</td>';
$html += '</tr>';
});
$("table tbody#resultadoNormaBody").html($html);
marcarTodosCheck('#toggleCheckboxNorma', '#resultadoNormaBody');
}
});
});
L'idée est Enter
touche de déclenchement #btnBuscarNorma
cliquez sur l'événement et ne pas #btnAplicarNorma
cliquez sur l'événement.
Vous devez vous connecter pour publier un commentaire.
Lier cet événement lorsque vous ouvrez un modal.
show.bs.modal
oushown.bs.modal
événements pour le modal lui-même? Si c'est la dernière je ne sais pas comment adapter votre solution, en fournissent un exemple si vous pouviezVous pouvez écouter de la soumission d'un formulaire et de le prévenir.
De cette façon vous pouvez vous assurer que le formulaire est jamais présenté. Vous pouvez également lancer l'appel Ajax lors de la soumission de la fonction est appelée.
D'un bouton normal
<button>
aussi de ne pas soumettre le formulaire.Quand modal est ouvert dans classe est actif sur celui-ci.
De sorte que vous pouvez obtenir en JQuery: