11548 sujets

JavaScript, DOM et API Web HTML5

Salut à tous,

jai fait une fonction ajax qui utilise les dialog box de jquery UI.Le hic c'est que la fonction ajax qui est appelée après la validation ne marche pas.

Voici le code complet de la page javascript.



$(document).ready(function() {
		
		 function updateTips(t) {
			$("#validateTips").text(t).effect("highlight",{},1500);
		}

		function checkLength(o,n,min,max) {

			if ( o.val().length > max || o.val().length < min ) {
				o.addClass('ui-state-error');
				updateTips("La longueur du " + n + " doit être comprise "+min+" et "+max+".");
				return false;
			} else {
				return true;
			}

		}
		
		
		
		function checkMessage(o,n) {

			if ( o.val().length <= 0 ) {
				o.addClass('ui-state-error');
				updateTips("Vous devez écrire quelque chose dans le message.");
				return false;
			} else {
				return true;
			}

		}

	
        $('a.ajax').click(function() {
            var url = this.href;
            // show a spinner or something via css
            var dialog = $('<div style="display:none" class="loading"></div>').appendTo('body');
            // open the dialog
            dialog.dialog({
                // add a close listener to prevent adding multiple divs to the document
                close: function(event, ui) {
                    // remove div with all data and events
                    dialog.remove();
                },
                modal: true,
				
				buttons: {
				'Envoyer': function() {
				    var sujet = $("#sujet"),
			message = $("#messager"),
			
			allFields = $([]).add(sujet).add(message),
					 bValid = true;
					allFields.removeClass('ui-state-error');
					
                    bValid = bValid && checkLength(sujet,"sujet",3,16);
					bValid = bValid && checkMessage(message,"message"); 
		
					
					if (bValid) {
					   var messageDelay = 4000; //durée d'apprition du message e milliseconde  
					   var form_data = {sujets : $('#sujet').val(),messages : $('#messager').val(),destinataires : $('#destinataire').val()
			                   };
                $.ajax({
                    url: $('a.ajax').attr('alt'),
                    type: 'POST',
                    async : false,
                    data: form_data,
                    success: function(msg) {
					            if(msg='1'){
								$(this).dialog('close');
					            response = 'Votre message est bien parti';
                                $('#successMessage').html(response);
	                            $('#successMessage').fadeIn().delay(messageDelay).fadeOut();
                                }
								else{
								response = $.trim(msg);
                                $('#successMessage').html(response);
	                            $('#successMessage').fadeIn().delay(messageDelay).fadeOut();
                                }
								}
                });

                return false;
					}
					
				},
				Cancel: function() {
					$(this).dialog('close');
				}
			}
            });
            // load remote content
            dialog.load(
                url, 
                {}, // omit this param object to issue a GET request instead a POST request, otherwise you may provide post parameters within the object
                function (responseText, textStatus, XMLHttpRequest) {
                    // remove the loading class
                    dialog.removeClass('loading');
                }
            );
            //prevent the browser to follow the link
            return false;
        });
			
        });


J'espère que je ne vous trouble pas le dimanche mais bon dimanche.
Modérateur
bonjour, as-tu des erreurs dans ta page?

Sinon, tu as cette ligne

$(this).dialog('close');


là, en français, tu dis: ferme la boite de dialogue qui est dans ça. Quel est le ça? la méthode ajax? le callback success? Attention, la valeur de this évolue tout le temps...

au passage


if(msg='1'){
}

à mon avis, msg pourra toujours prendre la valeur '1', et le résultat sera invariablement true...
Merci en ajout avec tes rectifications faites,j'ai découvert le problème. Il s'agissait du nom conteneur div au niveau de la page html: ca devrait être #successMessage et non #successMessage1.J'ai eu du mal pour une stupide erreur.Merci encore