2

私のウェブサイトには、PHP、jQuery/JavaScript、Colorbox - jQuery ライトボックス プラグイン、Smarty などを使用しています。現在、Colorbox プラグインを使用してポップアップにデータを表示しています。ポップアップのスクリーンショットを添付します。このポップアップには、いくつかのチェックボックスがあります。これらのチェックボックスのOnChange イベントで、Javascript 関数を呼び出していますが、呼び出されません。これについて多くの調査を行い、「Colorbox の onComplete コールバック」について知りました。これを試しましたが、まだ JavaScript 関数を呼び出していません。ポップアップは AJAX と jQuery を使用して作成されます。ポップアップを生成するコードは次のとおりです (このコードは、Checkbox の onChange イベントで実行されます)。

function get_subject_topics(sheet_type, subject_id, sheet_id) { 

    var field_id = sheet_type+'_subject_'+subject_id;   
    var chk = document.getElementById(field_id).checked;

    if($.active > 0) { 
    request_inprogress(); 
    $('#'+chk).attr('checked', false);
    $('#topics_'+subject_id).remove();   
    } else {

      if(chk==true) {
        if(sheet_type=='practice') {
         GetSubjectTopicsForPracticeSheet(sheet_type, subject_id, sheet_id);
         $("#view_"+subject_id).show(1000);
       } 
    } else {
      remove_request('#practice_sheet_loader');
      $('#topics_'+subject_id).remove();
      $("#view_"+subject_id).hide(1000); 
    }
    }
}

カラーボックス ポップアップにデータを表示する AJAX 関数 (GetSubjectTopicsForPracticeSheet() という名前) は次のとおりです。

function GetSubjectTopicsForPracticeSheet(sheet_type, subject_id, practice_sheet_id) {
  $.colorbox({});
  $.ajax({ 
    type: "POST",
    url: "practice_sheet.php",
    data: {'request_type':'ajax', 'op':'get_subject_topics_list', 'subject_id':subject_id, 'sheet_type':sheet_type, 'practice_sheet_id':practice_sheet_id},  
    success: function(data) {
        remove_request('#practice_sheet_loader');
        $('#subjects_topics_container').append(data);
        $.colorbox({inline:true, href:'#topics_'+subject_id, width:'80%'});

        $('.mini').prop("disabled", true);
        /*$.colorbox({onComplete:function(){
    alert("Hello");
}});*/


    }
  });

}

Colorboxポップアップ内に作成されたチェックボックスのOnChangeイベントで次のJavaScript関数を呼び出したいのですが、この関数を呼び出すことができません。

function enable_topic_ques(sheet_type, subject_id, topic_id) { 

    var field_id = sheet_type+'_'+subject_id+'_'+topic_id;  
    var chk = document.getElementById(field_id).checked;
    //alert(chk);

    if(chk==true) {
        if(sheet_type=='practice') {
          $('#'+sheet_type+'_'+subject_id+'_'+topic_id+'_'+1).removeAttr("disabled");
          $('#'+sheet_type+'_'+subject_id+'_'+topic_id+'_'+2).removeAttr("disabled");
          $('#'+sheet_type+'_'+subject_id+'_'+topic_id+'_'+3).removeAttr("disabled");
        } 
    }
    else {
        if(sheet_type=='practice') { $('#someid').attr('name', 'value');
          $('#'+sheet_type+'_'+subject_id+'_'+topic_id+'_'+1).attr('disabled', 'true');
          $('#'+sheet_type+'_'+subject_id+'_'+topic_id+'_'+2).attr('disabled', 'true');
          $('#'+sheet_type+'_'+subject_id+'_'+topic_id+'_'+3).attr('disabled', 'true');
        } 
    }  
}

最後に、上記の関数を呼び出すための smarty テンプレートのコードは次のとおりです。

<input type="checkbox" class="custom-check" name="{$sheet_type}_topics_{$subject_topic_data.subject_id}[]" id="{$sheet_type}_{$subject_topic_data.subject_id}_{$topic_diff_level_data.topic_id}" value="{$topic_diff_level_data.topic_id}" onChange="enable_topic_ques('{$sheet_type}', '{$subject_topic_data.subject_id}', '{$topic_diff_level_data.topic_id}'); return false;">

また、firebug のコンソールにエラーは表示されません。カラーボックスポップアップからチェックボックスのOnChangeイベントでJavascript関数(関数enable_topic_ques()という名前)を呼び出すのを手伝ってくれませんか? 前もって感謝します。 ここに画像の説明を入力

4

2 に答える 2

0

カラーボックスのウェブサイト: http://www.jacklmoore.com/colorbox/ いくつかのパブリック メソッドがあります。おそらく $.colorbox.element() が適しています。それを親の js コードに割り当てると、それを処理できます。

または、Callbacks onLoad API を使用して enable_topic_ques() 関数を呼び出すこともできます

私はそれをテストします。コードは遅れていますが、チェックボックスの変更に関するコードはうまく機能しています。コードは他の位置のケースの問題かもしれません。

スライスhtmlを追加

<input type="submit" class="test-button">

js 関数を追加してコードをテストする

function enable_topic_ques(sheet_type, subject_id, topic_id) {

                        // this is my add, it see it works normal
            alert('test');
            var field_id = sheet_type+'_'+subject_id+'_'+topic_id;  
            var chk = document.getElementById(field_id).checked;
            //alert(chk);

            if(chk==true) {
                if(sheet_type=='practice') {
                  $('#'+sheet_type+'_'+subject_id+'_'+topic_id+'_'+1).removeAttr("disabled");
                  $('#'+sheet_type+'_'+subject_id+'_'+topic_id+'_'+2).removeAttr("disabled");
                  $('#'+sheet_type+'_'+subject_id+'_'+topic_id+'_'+3).removeAttr("disabled");
                } 
            }
            else {
                if(sheet_type=='practice') { $('#someid').attr('name', 'value');
                  $('#'+sheet_type+'_'+subject_id+'_'+topic_id+'_'+1).attr('disabled', 'true');
                  $('#'+sheet_type+'_'+subject_id+'_'+topic_id+'_'+2).attr('disabled', 'true');
                  $('#'+sheet_type+'_'+subject_id+'_'+topic_id+'_'+3).attr('disabled', 'true');
                } 
            }  
        }

// this is my add

        $(".test-button").colorbox({inline:true, href:'.custom-check', width:'80%'});
于 2013-09-19T15:33:26.083 に答える