0

オーバーレイとバリデーターの 2 つの jQuery ツールを組み合わせました。どちらも別々にうまく機能します。しかし、それらを組み合わせると...（コンタクトフォームを外部ロードでオーバーレイにロードする）、バリデーターAPI（またはインスタンス）に到達できず、バリデーターが部分的に機能します。しかし、onSucces イベントに到達できず、すべてが検証される前にフォームを送信できません。

私を助けてください。

これはバリデータ読み込みスクリプトです:

$("#frm_contact").validator({api:true}).submit(function(e) {
                e.preventDefault();
                e.stopPropagation();
                api = $("frm_contact").data("validator");
                // use API to assign an event listener
                api.onSuccess(function(e, els) {
                alert("prima");
                pageTracker._trackPageview('/ContactSubmit');
                         $.ajax({
                              type:'POST', 
                              url: 'process.php', 
                              data:form.serialize(), 
                              cache: false,
                              beforeSend: function(){
                                $('.contentWrap').html("<br /><br /><br /><h3 class=\"contact\">Processing your request...</h3>").fadeIn('slow');
                              }, 
                              error:function(xhr, status, errorThrown) { 
                                //alert(errorThrown+'\n'+status+'\n'+xhr.statusText); 
                              },
                              success: function(response) {
                                $('.contentWrap').html(response).fadeIn('slow', function(){
                                    $('.contentWrap').delay(5000).fadeOut('slow', function(){   
                                        overlayElem.overlay().close();
                                    });
                                });
                              },
                         });

                return false;               
                });          
            });

            $.tools.validator.localize("en", {'[required]'    : '* Required'});

これはoverlay-element内にロードされ、これをコード全体にします:

$(function(){   
    $("#ctactbtn").live('click', function (e) {
    e.preventDefault(); //prevent default link action
    e.stopPropagation();

    overlayElem = $(this); 
    $(this).overlay({
        mask: 'silver',
        api: true,
        load: true,
        onBeforeLoad: function() {
             pageTracker._trackPageview('/contact');

            // grab wrapper element inside content
            var wrap = this.getOverlay().find(".contentWrap");
            $(".contentWrap").fadeIn();
            // load the page specified in the trigger
            wrap.load(this.getTrigger().attr("href"));
        },
        onLoad: function() {
            lastCountry = "";
            $('#countries').change(function () { 
                var option = $("#"+$(this).val()).attr('option');
                if(lastCountry != null){
                    $(lastCountry).fadeOut(500, function() {if(option == "CC"){ $(".contentWrap").animate({height: '400'},500);$(".cWbg").animate({height: '400'},500);}});
                }
                if(option == "CC_Details" | "Details" ){
                    huidig = $("#"+$(this).val());
                    $(".cWbg").animate({height: '460'},500);
                    $(".contentWrap").animate({height: '460'}, 500, function(){ huidig.fadeIn(); });
                }
                if(option == "CC_Details" | "CC" ){
                    $('#CC').val($("#"+$(this).val()).attr('email'));
                } else {
                    $('#CC').val("");
                        if(lastCountry != null){
                            $(lastCountry).fadeOut(500, function() {$(".contentWrap").animate({height: '400'},500);$(".cWbg").animate({height: '400'},500);});
                        }
                }
                lastCountry = "#"+$(this).val(); 
            }).change();


            $("#frm_contact").validator({api:true}).submit(function(e) {
                e.preventDefault();
                e.stopPropagation();
                api = $("frm_contact").data("validator");
                // use API to assign an event listener
                api.onSuccess(function(e, els) {
                alert("prima");
                pageTracker._trackPageview('/ContactSubmit');
                         $.ajax({
                              type:'POST', 
                              url: 'process.php', 
                              data:form.serialize(), 
                              cache: false,
                              beforeSend: function(){
                                $('.contentWrap').html("<br /><br /><br /><h3 class=\"contact\">Processing your request...</h3>").fadeIn('slow');
                              }, 
                              error:function(xhr, status, errorThrown) { 
                                //alert(errorThrown+'\n'+status+'\n'+xhr.statusText); 
                              },
                              success: function(response) {
                                $('.contentWrap').html(response).fadeIn('slow', function(){
                                    $('.contentWrap').delay(5000).fadeOut('slow', function(){   
                                        overlayElem.overlay().close();
                                    });
                                });
                              },
                         });

                return false;               
                });          
            });

            $.tools.validator.localize("en", {'[required]'    : '* Required'}); 


        },
        onBeforeClose: function(){
            $("#frm_contact").data("validator").reset();
            $('.error').hide(); $('.error').empty();
        }
    });
});



});
4

1 に答える 1

0

私は最近似たようなことに出くわしました。次の 3 つのライブラリ間で共有される依存コードがあるようです。

  • 日付入力/日付入力.js
  • 範囲入力/範囲入力.js
  • バリデーター/validator.js

私は自分のプロジェクトでバリデータのみを使用していますが、正しく機能させるには、JQuery UI サイトから JS ファイルを生成するときに、3 つの関連ライブラリすべてへの参照を含める必要がありました。

于 2012-07-10T22:27:15.727 に答える