4

私はjsfiddleで正常に動作している次のコードを持っています - http://jsfiddle.net/darkajax/FHZBy/

コードを使用する必要があるページにコードを転送し、関数に正しい ID 番号を割り当てました。これが機能するページです。

http://mtpassemblies.com/cs-cart/index.php?dispatch=products.view&product_id=29821

ユーザーがオプションを選択すると、部品番号ボックスが入力されるはずですが、これはライブ バージョンでは発生せず、エラー メッセージも表示されません。エラーメッセージが表示されないので、どこから問題が発生しているのかを確認するためにどこから始めるべきかわかりません。

私の元のメッセージに加えて、CS Cart は Smarty フレームワーク上に構築されているようですが、これが問題に関係しているかどうかはわかりません。

サイトのjQueryは次のとおりです。

<script type="text/javascript">// <![CDATA[
$(function() {
var sku1 = sku2 = sku3 = sku4 = sku5 = sku6 = length = '';
$("#opt_29821_746").change(function(){

    switch($(this).val()){
        case "3134":
             sku1 = 'TB';
        break;
        case "3135":
             sku1 = 'LT';
        break;
        case "3154":
            sku1 = 'LTR';
        break;
        case "3136":
             sku1 = 'BO';
        break;
        case "3138":
             sku1 = 'MC';
        break;
        case "3139":
             sku1 = 'NC';
        break;
        case "3183":
              sku1 = 'STA';
        break;
    }
    $('#option_29821_798').val(sku1+sku2+sku3+sku4+sku5+sku6+length);
});
$("#opt_29821_742").change(function(){
    switch($(this).val()){
        case "3111":
              sku2 = 'LC';
        break;
        case "3110":
             sku2 ='LCA';
        break;
        case "3112":
             sku2 ='E2000';
        break;
        case "3113":
             sku2 ='E2A';
        break;
        case "3114":
             sku2 ='FC';
        break;
        case "3115":
             sku2 ='FCA';
        break;
        case "3116":
             sku2 ='ST';
        break;
        case "3117":
             sku2 ='SC';
        break;
        case "3118":
             sku2 ='SCA';
        break;
    }
    $('#option_29821_798').val(sku1+sku2+sku3+sku4+sku5+sku6+length);
});
$("#opt_29821_744").change(function(){
    switch($(this).val()){
        case "3175":
              sku3 = '2';
        break;
        case "3121":
             sku3 ='4';
        break;
        case "3122":
             sku3 ='6';
        break;
        case "3123":
             sku3 ='8';
        break;
        case "3124":
             sku3 ='12';
        break;
        case "3125":
             sku3 ='16';
        break;
        case "3126":
             sku3 ='24';
        break;
        case "3176":
             sku3 ='48';
        break;
    }
    $('#option_29821_798').val(sku1+sku2+sku3+sku4+sku5+sku6+length);
});

$("#opt_29821_745").change(function(){
    switch($(this).val()){
        case "3127":
              sku4 = 'OS12';
        break;
        case "3182":
             sku4 ='G657A1';
        break;
        case "3128":
             sku4 ='OM1';
        break;
        case "3129":
             sku4 ='OM2';
        break;
        case "3130":
             sku4 ='OM3';
        break;
        case "3131":
             sku4 ='OM4';
        break;
    }
    $('#option_29821_798').val(sku1+sku2+sku3+sku4+sku5+sku6+length);
});

$("#opt_29821_748").change(function(){
    switch($(this).val()){
        case "3142":
              sku5 = 'LC';
        break;
        case "3143":
             sku5 ='LCA';
        break;
        case "3144":
             sku5 ='E2000';
        break;
        case "3145":
             sku5 ='E2A';
        break;
        case "3146":
             sku5 ='FC';
        break;
        case "3147":
             sku5 ='FCA';
        break;
        case "3148":
             sku5 ='ST';
        break;
        case "3149":
             sku5 ='SC';
        break;
        case "3150":
             sku5 ='SCA';
        break;
    }
    $('#option_29821_798').val(sku1+sku2+sku3+sku4+sku5+sku6+length);
});

$("#opt_29821_749").change(function(){
    switch($(this).val()){
        case "3151":
              sku5 = 'LZSH';
        break;
        case "3177":
             sku5 ='PE';
        break;
    }
    $('#option_29821_798').val(sku1+sku2+sku3+sku4+sku5+sku6+length);
});

$('#opt_29821_753').change(function(){
    length = $(this).val();
    $('#option_29821_798').val(sku1+sku2+sku3+sku4+sku5+sku6+length);
});
});
// ]]></script>

アップデート

さらに調査し、さまざまな人々と話し合った後、onchangeCS Cart に組み込まれているインライン イベントが、私が作成した jQuery と衝突することが問題の原因であると思われます。

したがって、問題は、インラインコーディングによって起動されている関数と一緒にコードを動作させることは可能ですか?

4

4 に答える 4

4

イベントは.change()静的コンテンツに対してのみ発生します。あなたの場合、次の.on()ようなjQueryのイベントを使用する必要があります。

 $("#opt_29821_745").on('change', function() {
 ....
于 2012-03-26T08:27:54.297 に答える
1

javascriptコードの前にこれを追加してみてください。

jQuery.noConflict();

または、jqueryコードを次のようにラップします。

jQuery(document).ready(function($){
   // your code here
});

$または、すべてを次のように置き換えますjQuery

于 2012-03-26T09:34:43.480 に答える
0

<div/>ではなくにイベントを設定しているからだと思います<select/>。

$("#opt_29821_746").live('change', function(){

する必要があります

$("#option_29821_746").live('change', function(){

さらに、AJAXコールバックは、フィールドが入力されると返されるHTMLを設定するだけなので、コードが機能しても毎回リセットされるため、すべてのフィールドがリセットされるという問題があります。単純なリストを返し（JSONが私の選択です）、サーバー側でレンダリングするのではなく、クライアント側でオプションを設定することを検討してください。または、AJAXをそのまま使用する場合は、フィールドに入力するまでAJAXリクエストを延期することを検討してください（最初にフィールドに入力してから、AJAXリクエスト）。onclickAJAX呼び出しを行うのはインラインだと思います。これはそのままでは醜いので、私はそれを醜くすることを恐れません-jQueryonclickデータとして脇に保存し、次の行に置くことができます：

$('select[onchange]').each(function(i, el) { 
    el=$(el); 
    el.data('onchange', el.attr('onchange'));   // save previous event code aside
    el.attr("onchange",null);  // delete previous event code
    el.change(function() { 
        // you can actually add more code here to invoke before regular 'onchange' event
        var target=$(this);
        if (target.data("onchange")) {
            (new Function(target.data("onchange"))).apply(this, arguments);  }
    });
});

ただし、要素が置き換えられるため、各AJAX呼び出しの後にこれを行う必要があります。ここでもjQueryを使用できるかもしれませんがlive()、それは私が書くにはあまりにも醜いです。

最初の点に関しては、名前付き変数を使用することで問題を回避できたと思います。簡潔にするために、次の方法をお勧めします。

(function() { 

    // this isn't really ids but css selector; but for lack of a better name
    var el_id_map = {
        sku1: "#option_29821_746",
        sku2: "#option_29821_754",
        length: "#option_29821_753"
    };
    var el_ids = []; var sku_id="#option_29821_798";
    var sku1_map = { "3134": "TB", "3135": "LT" },
        sku2_map = { "3111": "LC", "3110": "LCA" };

    // map ids to array
    for (var key in el_id_map) { 
        if (el_id_map.hasOwnProperty(key)) el_ids.push(el_id_map[key]); 
    }

    $(el_ids.join(",")).live("change", function(){

        $(sku_id).val([
            sku1_map[$(el_id_map["sku1"]).val()],
            sku2_map[$(el_id_map["sku2"]).val()],
            $(el_id_map["length"]).val()].join(""));
    });

})()

live()ここで、コメントなどを配置した最初のコードのハンドラー内にコードを配置add more code hereできます。ただし、イベントハンドラーを更新するには、各AJAX要求の後にコードが実行されることを確認する必要があります。

繰り返しますが、サーバーからJSONを返すだけです。

私はすでに完全で実用的な例を作ることに決めた努力をしたので、編集してください。ページ上でそのまま動作するはずですが、デバッグする必要があります:)

(function() {
    // you might want to generate the list using the same
    // server-side data that generates the elements
    var el_id_map = {
        sku1: "#option_29821_746",
        sku2: "#option_29821_754",
        // put rest of skus here
        length: "#option_29821_753"
    };
    var sku_id = "#option_29821_798";
    var sku1_map = { "3134": "TB", "3135": "LT" },
        sku2_map = { "3111": "LC", "3110": "LCA" };
    // put rest of skus here

    var el_ids = []; 
    for (var key in el_id_map) { 
        if (el_id_map.hasOwnProperty(key)) {
            el_ids.push(el_id_map[key]); 
        }
    }
    function change_handler() {
        $(sku_id).val([
            sku1_map[$(el_id_map["sku1"]).val()],
            sku2_map[$(el_id_map["sku2"]).val()],
            $(el_id_map["length"]).val()].join(""));
    }
    function hijack_changes(change_handler) {
        $(el_ids).each(function(i, el) { 
            el = $(el); 
            el.data('onchange', el.attr('onchange')); // save inline event
            el.attr("onchange", null); // remove inline event
            el.change(function() { 
                change_handler.apply(this, arguments);

                var target=$(this);  
                if (target.data("onchange")) {
                    var handler = new Function(target.data("onchange"));
                    handler.apply(this, arguments);  
                }
            }); 
        });
    }

    function hijack_ajax() {
        var old_fn_post_process_form_files = window.fn_post_process_form_files;
        window.fn_post_process_form_files = function() {
            hijack_changes(change_handler);
            old_fn_post_process_form_files.apply(this, arguments);
        }
    }
    hijack_ajax();
    hijack_changes(change_handler);

})();
于 2012-04-04T11:19:53.433 に答える
0

同様の問題がありました.javascriptの日付ピッカーに接続されたテキストボックスです。onchange イベントを使用して、選択した日付を別のフィールドの日付と比較したかった (これは開始日/終了日のようなものであり、開始日が終了日より前であることを確認したかった - そうでない場合はそれらを切り替える)

onchange だけが起動しません。解決策は、onchange イベントと onproperty change イベントの両方を使用することです。

私が持っているコントロールで：

<input id='mytext' name='mytext' type='text' onchange='doSomething();' onpropertychange='isDoSomething(event);' />

私の isDoSomething は次のようになります。

function isDoSomething(eventobj) {
if ("propertyName" in eventobj) { // Older browsers might not have this property
    if (eventobj.propertyName == 'value') // Check if the property that was changed was the value
        dosSomething();
}
else // on older browsers can't  check what property was changed so just do your thing
    doSomething();
}

これが私のために働いたものです-それが役立つことを願っています

あなたの例を使用して： set .change 関数だけでなく .propertychange も

于 2012-04-04T09:02:06.680 に答える