Discussion :

[mower666]

Bonsoir,

Je tente de mettre le focus sur les textarea de chacune de mes modals bootstrap, mais en vain.

J'ai tenté l'attribut html autofocus, qui ne fonctionne pas, je tente de l'ajouter à la fonction js qui charge toute mes modals

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
<div>
	<form method="POST" action="{{ path('message_maj_chat') }}">
		<textarea name="content" class="form-control" tabindex="1" autofocus></textarea>
		<input type="hidden" name="isoffer" value="1"/>
		<input type="hidden" value="{{ id_client }}" name="client"/>
		<label class="giveMeSpace">Choisir le produit concerné :</label>
		<input class="form-control" name="product" id="searchProduct"/>
		<div class="modal-footer">
        	<button type="submit" class="btn btn-primary">Envoyer</button>
		</div>
	</form>
</div>

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
$('a.btn-modal').click(function(){
	var that = $(this);
	$.get( $(this).attr('href'), function(htmlBack){
		$('div.modal .modal-title').html(that.attr('data-title'));
		$('div.modal .modal-body').html(htmlBack);
		$('div.modal').modal('show');	
                // Tentative de focus des textarea contenant tabindex="1"
		console.log($('.modal-body [tabindex="1"]').attr('class'));
		$('.modal-body [tabindex="1"]').val('va me pendre ! ').focus();
		/**
		 * Send modal form
		 */ 
		$('div.modal .modal-body form').submit(function(){
			var that = $(this);
			$.ajax({
				method: "post",
				url: that.attr('action'),
				data: that.serialize(),
				success: function(){
					$('div.modal').modal('hide');
					window.location.reload();
				}
			});
			return false;
		});
	});
	return false;
});

Le console.log me retourne bien la class du textarea soit "form-control", rempli bien la value "va me pendre ! " mais ne focus pas le textarea. Pourtant une fois la modal chargée, via la console de firefox la meme ligne met bien le textarea en focus...

[Darkaurora]

Si je me souviens bien, les modals Bootstrap ont un événement 'shown', qui est appelé une fois la modal ouverte et les animations css terminées.

Tu devrais te pencher la dessus je pense

[mower666]

Merci, mais comme dit dans mon premier post, le problème n'est pas le chargement de la modal, ni meme un problème lié à la détection de l'objet (textarea), puisque le console.log me retourne la class.

La modal est crée dans mon layout, la fonction js se contente de récupérer l'url des boutons pour ouvrir les urls en ajax dans les modals.

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<div class="modal fade">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title">Modal title</h4>
            </div>
            <div class="modal-body">
            </div>
            {# <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary">Save changes</button>
             </div> #}
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

Malgré tout j'ai tenté de l'ajouter

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
$(document).on('show.bs.modal', function (e) {
    console.log($('.modal-body [tabindex="1"]').attr('class'));
    $('.modal-body [tabindex="1"]').val('va me pendre ! ').focus();
});

Mais le résultat est le meme.

[Darkaurora]

Après avoir lu la dernière version des Modals par Bootstrap, tu as deux events intéressant, le premier est toujours 'shown' et non 'show' (comme tu as fait l'erreur sur ton dernier post), la différence se fait dans le temps. L'autre est 'loaded' l'événement est déclenché lorsque le contenu est chargé.

La logique veux qu'une fois ton contenu chargé tu puisse focus l'élément souhaité.

[mower666]

En effet avec le shown.bs.modal ça fonctionne, je ne m'explique toujours pas pourquoi ça ne passe pas après le show, mais c'est good, merci

[Darkaurora]

Pour information le show est appelé pour lancer l'ouverture, en gros il s'agit de l'event qui ouvre ta modal, il passe en premier et il est donc normal que tu ne puisse pas faire ce genre de manipulation avec cet event. Le shown lui est appelé lorsque le travail est terminé c'est a partir de lui qu'il faut travailler.