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.