Ajax $.ajax({...}) Funktion wir nicht ausgeführt

messmar

messmar

Erfahrenes Mitglied
Hallo zusammen,

ich habe die folgende Ajax-Funktion innerhalb eines Plugins und sie wired gar nicht ausgeführt bzw. der
Code wird übersprungen.

Ich habe es mit
Code: 
alert();
und
Code: 
console.log();
versuchte zu debuggen, aber es kommt
nichts bzw. weder alert noch console kommen... alles andere funktioniert einwanfrei.

jQuery Code:

Code: 
(function($) {
    
  ;$.fn.getFormData = function(userOptions){
      ....
      
      return this.each(function() {
        
      
               
          $.fn.getFormData.Pin = function pinCode(obj){
                var obj = $(obj);
                
                var input = obj.find(':input[type="text"]').not(':input[type="hidden"]');
                var storePin = obj.find(':input[type="submit"]');
                
                input.keydown(function(e) {char(e);});
                input.keyup(function(){if ($($(this)).val() !== '') {$($(this)).next('input').focus();}}); 
                input.blur(function(){return getValue(this);});
                
                storePin.click(function(){
                    alert('xxxxx');
                    var dataString = $('input[name=grpattr_codeuser]').val(); 
                    alert(dataString);
                    $('.Pin_Txt').css(tmp); 
                    var uCode = $('.userCode').attr('value');
                    return (uCode === '' || uCode.length < 4) ? false : true;
                    alert('U CODE' + uCode);
                    /* Send the data using post and put the results in a div */
                    $.ajax({
                        type: 'POST',
                        url: 'http://localhost:8080/core/my_html_5/public/ownPlugins/ajax/checkPinCode.jsp',
                        data: dataString,
                        //data: values,
                        beforeSend:function(){
                            if( console && console.log ) {
                                console.log('XXXXXX');
                            }
                        },
                        success: function(){
                            console.log("success");
                            $('.Pin_Txt').html('submitted successfully');
                        },
                        complete: function() {
                            console.log(1);
                        },
                        error:function(){
                            console.log("failure");
                            $('.Pin_Error').html('there is error while submit');
                        }   
                    });
                });
                return obj;
         };

      });

   };

})(jQuery);
$('form[name="formStoreCode"]').getFormData.Pin('#formStoreCode');

Kleiner Hinweis und zwar die folgenden drei Code-Zeilen:
Code: 
    ...
    input.keydown(function(e) {char(e);});
    input.keyup(function(){if ($($(this)).val() !== '') {$($(this)).next('input').focus();}}); 
    input.blur(function(){return getValue(this);});
    ....

rufen einfach andere Funktionen, die ich im Laufe des Plugins erstellt habe und die funktionieren... ich wollte nur
hier nicht so viel Code posten, um den Überblick zu behalten.

HTML Code:
Code: 
   <fieldset class="Enter_Pin_Form">
            <form name="formStoreCode" id="formStoreCode" method="post">
            <input type="hidden" name="mail" value="" />
            <input type="hidden" name="Storing_Code" value="true" />
            <input type="hidden" name="grpattr_codeuser" class="userCode" value="" />
            <span class="Pin_Txt">Bitte hier Ihre Zahlenkombination eingeben.</span>
            
                <label class="label_PinError">
                    <span class="Pin_Error"></span>
                    <span class="Pin_Txt"></span>
                </label>
                <input type="text" name="Code_01" id="Code_01" class="Code_01" value="" maxlength="1" />
                <input type="text" name="Code_02" id="Code_02" class="Code_02" value="" maxlength="1" />
                <input type="text" name="Code_03" id="Code_03" class="Code_03" value="" maxlength="1" />
                <input type="text" name="Code_04" id="Code_04" class="Code_04" value="" maxlength="1" />
                <input type="submit" name="" value="" class="ConfirmCode" />
            </form>
     </fieldset>

Mir ist es aufgefallen, wenn ich die Ajax Funktion:
Code: 
$.ajax({...})
nicht dem EventHandler:
Code: 
click(fucnito(){..})
zuweise, dann reagiert der code und die
Funktion wird ausgeführt... !!

Irgendeine Idee bitte, woran es genau liegen könnte... ich bekomme auch gar keinen Error (über fireBug auch nichts)?

Danke und Gruß
Messmar
 
Zuletzt bearbeitet:
Fehler in deinem Skript, die schon weh tun: ersten definierst du diese Funktion bei jedem Schleifendurchlauf neu – Aua; du gibt einen Wert zurück bevor du überhaupt die Abfrage startest – da kann dir auch nichts zurückgegeben werden; wenn du bereits ein jQuery-Objekt hast, dann musst du dieses nicht noch einmal in $( ... ) packen – du tust dies allerdings an mehreren stellen, und zwar zweimal ineinander.
 
Hi,

danke schon mal für den Hinweis! in der Tat habe ich gerade zwei Funktionen außerhalb der each-Schleife... das war nen Denkfehler bzw. wenn ich das sosagen darf, einfahc übersehen.

Aber bzgl. der Funktion hier:
Code: 
$.fn.getFormData.Pin= function pinCode(obj){...}

ist doch ne anoynme Funktion bzw. namespace Funktion und würde ich auch sagen, dass sie auch nicht innerhalb den Each-Schleife gehört. Nur wenn ich sie dann außerhalb der:
Code: 
return this.each(function() {...})
dann die so aufurufe:
Code: 
$('form[name="formStoreCode"]').getFormData.Pin('#formStoreCode');

heißt es genauer bei FireBug:
TypeError: $(...).getFormData.Pin is not a function
Zum Vergrößern anklicken....

Danke!

Messmar
 
Kann ich nicht nachvollziehen. Was ich mir allerdings vorstellen könnte, ist, dass this keine Referenz mehr auf das jQuery-Element ist. Daher eher so etwas machen:
Javascript: 
(function ( $ ) {
  $.fn.getFormData = function ( options ) {
    var $this = $( this );
    $this.__options = options;
    return $this;
  };
})( jQuery );
 
Morgen!

ich glaube, dass die fehlenden Teile des Codes, die ich Anfang hier für nicht relevant gehalten habe, müssen doch irgendwie erwähnt werden.

Und um den Aufbau des Plugins besser zu verdeutlichen, poste ich hier die genaue Struktur, wie ich sie bei mir habe....

Danke!

Code: 
(function($) {
    ;$.fn.getFormData = function(userOptions){ 
           var defaults = {property_1: "xxxx", value_1: "yyyyyy", etc.}
           var newParams = $.extend(true, {}, defaults, userOptions);
           
           .....
           return this.each(function() {
               var base = $(this);
               ...
               ...

               // validate ist hier so zusagen eine public Methode, dieaußehalb des
               // Plugins erreichbar ist z.B.
               // $('.object').getFormData.validate('.object');

               $.fn.getFormData.validate = function(elem) {
                     .......
                     ....... 
               };
               
               // hier das gleiche wie bei der validate Methode/Funktion 
               // Pin ist hier so zusagen eine public Methode, dieaußehalb des
               // Plugins erreichbar ist z.B.
               // $('.object').getFormData.validate('.object'); 

               $.fn.getFormData.Pin = function pinCode(obj){
                    .....
                    .....
               }

          });
           
          function getValue(eL) {.....}
          function char(e) {.....}
    };
})(jQuery);

$('body').getFormData();
$('form[name="formGetData"]').getFormData.validate('#formGetData');
$('form[name="formStoreCode"]').getFormData.Pin('#formStoreCode');

Wenn ich aber das hier außerhlab der each-Schleife, die sich auf das angesprochene Element bezieht:
Code: 
    $.fn.getFormData.Pin = function pinCode(obj){
                    .....
    }

erhalte ich wie gesagt:
TypeError: $(...).getFormData.Pin is not a function
Zum Vergrößern anklicken....

Grüße
Messmar
 
Zuletzt bearbeitet:
Hallo zusammen,

@einfach nur crack: danke schon Mal für Deine Hinweise!

Ich habe kleine Änderungen vorgenommen und es funktioniert jetzt... nichtsdestotrotz, würde ich mich auf Verbesserungsvorlschläge sehr sehr freuen!!

Code: 
          storePin.bind({
                    click: function() {
                        var uCode = $('.userCode').attr('value');
                        ajFalg = true;
                        
                        if(uCode === '' || uCode.length < 4){
                            $('.Pin_Txt').css(tmp);
                            return false;
                        }else{
                            data = $('input[name=grpattr_codeuser]').val();
                            path = encodeURIComponent('ajax/checkPinCode.jsp?grpattr_codeuser=');

                            $.ajax({
                                type: 'POST',
                                url: 'ajax/checkPinCode.jsp?grpattr_codeuser=' + data,

                                beforeSend:function(){
                                    if( console && console.log ) {
                                        console.log('URL: ' + path + 'DATA: ' + data);
                                    }
                                },
                                success: function(json){
                                    if (json.pinCode === 'Ok') {
                                        console.log("success");
                                        $('.AjaxResponse').html('submitted successfully');
                                        $('.Pin_Error').html('');
                                    }
                                    $('form').submit();
                                },
                                complete: function() {
                                    console.log(1);
                                },
                                error:function(){
                                    console.log("failure");
                                    $('.Pin_Error').html('Der eingegeben Code:<span style="color:#ff0000;">' + uCode + '</span> ist falsch');
                                    input.val('');
                                    $('.userCode').val('');
                                    ajFalg = false;
                                }   
                            });
                        }
                        return ajFalg ? false : true;
                    }
          });

Grüße
Messmar
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück