Petite question sur JQuery UI concernant le widget dialog

[John Smith]

Bonjour,

Partant de cet exmple simple :

    $(document).ready(function() {
	    $('.mybox').click(function(){
	      var monurl = "mapage.html";
	      var submittest = "request.html";
	      $("#monid").load(monurl, function() {
	          $(this).dialog({
	             draggable: false,
	             modal: true,
	             overlay: {
	                     backgroundColor: '#000',
	                     opacity: 0.5
	             },
	             buttons: {
	                'Envoyer': function() {
                        $("#monid form").ajaxSubmit({
                               url: submittest,
                               type: "post",
                               error: function(){
                                       alert("theres an error with AJAX");
                               },
                               beforeSubmit:function(){},
                               success: function(e){

		/* Ici je veux modifier les bouttons  */
                          }
                        });
	                },
	                Cancel: function() {
	                        $(this).dialog('close');
	                }
	             }
	          });
	      });
		});
    });

Voilà à l'issus de ma requête Ajax, plutôt que de fermer ma dialog box, je voudrais supprimer le bouton "Envoyer" et modifier le bouton "Cancel" en "OK".

Est-ce que quelqu'un pourrait me dire comment on fait ça ? Merci.

 

[ZelkiN]

Tu as tes boutons qui sont appelé 'ENVOYER' et 'CANCEL' dans ton JS,
Pour supprimer le bouton envoyer, supprime :

'Envoyer': function() {
                        $("#monid form").ajaxSubmit({
                               url: submittest,
                               type: "post",
                               error: function(){
                                       alert("theres an error with AJAX");
                               },
                               beforeSubmit:function(){},
                               success: function(e){

      /* Ici je veux modifier les bouttons  */
                          }
                        });
                   },

Pour remplacer le bouton Cancel en OK ce n'est pas dans ce JS, mais plus dans la librairie UI a mon avis. Il suffira de faire un remplacement de texte, fais un CRTL+F et cherche "cancel" tu devrais trouver rapidement

Bonne chance

 

[John Smith]

Tu n'as pas compris ce que je veux faire. Je veux ouvrir mon dialog avec les boutons "Envoyer" et "Cancel", et une fois que j'ai cliqué sur "Envoyer" et que j'ai fini d'exécuter ma requête en Ajax, je veux que le buoton "Envoyer" disparaisse et que le bouton "Cancel" soit renommé en "Ok".

 

[YoyoS]

bah tu récupères l'id de tes boutons et tu joues sur leur propriété css display et change le texte de cancel en OK ? =D C'est quoi qui est dur ?

 

[John Smith]

Il n'y a pas d'ID puisque ce sont des boutons de la fenêtre dialog de jQuery UI. Ce ne sont pas de simples boutons de formulaire...

Voir ici pour ceux qui n'auraient pas compris de quoi je parle :

http://jqueryui.com/demos/dialog/#modal-form

 

[YoyoS]

Tu as regardé dans le code pour voir s'il n'y avait pas d'ID au moins ? Ca me ferait rire que jQuery utilise des objets sans id dans ses widgets

Moi j'ai trouvé le code pourtant:

<div class="ui-dialog-buttonset">
<button class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" type="button" role="button" aria-disabled="false">
<span class="ui-button-text">Create an account</span>
</button>
<button class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" type="button" role="button" aria-disabled="false">
<span class="ui-button-text">Cancel</span>
</button>
</div>

 

[John Smith]

Le code, c'est celui cité plus haut...

 

[YoyoS]

t'as plus qu'à prendre tes ptites mains, à aller changer Cancel ^^ et display none sur le premier bouton :wink: