最初のjQueryプラグインの問題

StackOverflow https://stackoverflow.com/questions/624208

質問

皆さん、まずはImをjQuery noobとだけ言っておきましょう！ html select要素を自動入力する単純なプラグインを作成します。最初の要素では正常に機能しますが、2番目の要素を挿入するためにもう一度呼び出すと、何も追加されません。ここに#productと＃new-categoryがselect要素であるajaxタブでの私の呼び出しがあります：

$(function(){

    $("#product").popSelect("products");

    $("#new-category").popSelect("categories");

});

HTML：

><select id="product" name="product">
>     < option value="">Select Product</option>                 
></select >     
><select id="new-category" name="new-category">
>      < option value="">Select Category< /option>                  
></select >

そして、ここにプラグインがあります：

(function(jQuery){
jQuery.fn.popSelect = function(table) {

    return jQuery(this).each(function(){            

        var obj = jQuery(this); 

        if(this.nodeName.toLowerCase() == 'select'){
            jQuery.getJSON("../app/modules/ajax/json.php", { table:table },
                function(data){                 
                    var options = '';           
                    jQuery.each(data, function(i,item){                                        
                        options += '<option value="' + item.id + '">' + item.title + '</option>';                   
                    });                 
                    obj.append(options);                
                });     
        };
    });
};
})(jQuery);

2番目の関数呼び出しを変更すると奇妙なことに $（＆quot;＃new-category＆quot;）。popSelect（＆quot; categories＆quot;）; へ $（＆quot; [id ^ = 'new-category']＆quot;）。popSelect（＆quot; categories＆quot;）; 正常に動作しますが、セレクタに何か問題がありますか？

ご協力ありがとうございます！

役に立ちましたか？

解決

同様の質問に答えたところです。基本的には 2つの要素を持つことはできません同じページに同じIDを持つ場合、この正確な問題が発生します。クラスを使用するか、IDの1つを変更する必要があります。

他のヒント

直接的な回答はありませんが、2つのアクティブなAjax呼び出しが本質的に同時に未解決になり、奇妙なことにつながる可能性がありますか？

わかりました、このようなものですか？

(function($){
jQuery.fn.popSelect = function(table) {

    return $(this).each(function(){         

        var obj = $(this);  

        if(this.nodeName.toLowerCase() == 'select'){
            obj.queue("fx", function(){$.getJSON("../app/modules/ajax/json.php", { table:table },
                function(data){                 
                    var options = '';           
                    $.each(data, function(i,item){                                         
                        options += '<option value="' + item.id + '">' + item.title + '</option>';                   
                    });             
                    obj.append(options);                
                }); }); 
        };
    });};})(jQuery);

エラーは発生しませんが、IEで最初に選択した同じ応答にのみ入力されます。困惑、さらに「待機」を追加呼び出しの間に機能し、それは何もしませんでした。 idタグ== nameタグは大丈夫ですか？ ＆quot; id = 'new-category'＆quot;を置き換えて気づいたこと＆quot; id = 'newwcategory'＆quot;うまくいく！？ IDの＆quot;-＆quot;の問題はどうですか？

これまでのすべての助けに感謝します！

プラグインはタブなしでも完全に機能するため、これがjQuery UIタブの問題であることを確認しました！以前に選択したタブに同じ要素が含まれていた場合、現在選択されているタブの要素は読み込まれません id。例：

最初のタブ：

<select id="new_category" name="new_category">

     <option value="">Select Category</option>
</select>

2番目のタブ：

<select id="product" name="product">
      <option value="">Select Product</option>
</select>

<select id="new_category" name="new_category">
      <option value="">Select Category</option>
</select>

第3タブ：

<select id="product" name="product">
      <option value="">Select Product</option>
</select>

タブ1からタブ2に移動-製品は読み込まれますが、読み込まれません 新たなカテゴリー タブ2からタブ3に移動します-製品には入力されません...

i.e。前のタブに相当するidを持つ要素が存在する場合 現在のタブ、それは移入されず、（おそらく？）前のタブ 要素はロードされていないのでこれを見ることはできませんが。しました キャッシュをいじってみましたが、フォームIDを指定しても役に立ちません その親はこれを修正する必要がありますが、なぜそれが必要なのか、 タブは独立してはいけませんか？

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top