0

mcDropdown jQuery Plug-in と呼ばれる JavaScript プラグインから派生した機能を備えたドロップダウン階層フィールドを含むフォームがあります。

実際のフォームはセカンダリ ページ (Test.php) にあり、カラーボックス ポップアップを介してメイン ページに表示されるように設定されており、フォームの送信時に結果もカラーボックスに表示されます。

JavaScript を削除すると (プレーンなドロップダウン ボックスを使用するだけで)、フォームが送信され、カラーボックスにネイティブの HTML 形式で正しく表示されます。

ただし、Javascript がフィールドの階層ドロップダウン構造を許可するフォームに実装されている場合、Colorbox を介してレンダリングされる場合、JS 機能はありません。

フォームが存在する実際のページ (Test.php) は Javascript で正常に動作するため、カラーボックスを介して JS をレンダリングする際に問題があるようです。

私の調査によると、これは、要素がドキュメントに読み込まれる前に要素にアクセスしようとしたことが原因である可能性があります。

Colorbox の Web サイトには、JavaScript を ColorBox の onComplete コールバックに移動することで解決できると記載されています。ただし、与えられた例でも、JSに関しては完全な初心者であるため、これを正しく行う方法を理解できません。

これは、フォームを持ち、外部プラグインに接続するセカンダリ ページのドロップダウン スクリプトです (このフォームには、この JS 階層構成を使用する 3 つのフィールドがあることに注意してください)。

<script type="text/javascript">             

         $(document).ready(function (){
            $("#category").mcDropdown("#categorymenu",
                {
                targetColumnSize: 3,
                }
            );
            $("#category1").mcDropdown("#categorymenu1",
                {
                targetColumnSize: 3,
                }
            );
        $("#category2").mcDropdown("#categorymenu2",
                {
                targetColumnSize: 3,
                }
            );

             });


</script>

カラーボックス ウィンドウでセカンダリ ページを開くメイン ページのカラーボックス スクリプトを次に示します。

<script type="text/javascript"> <!--<Check-Out Colorbox Script>-->

  jQuery(function(){

   jQuery('#link_content').colorbox({opacity:0.3, height:"100%", scrolling: false, onComplete: function(){
    link_content_submit();
  }});
   });
function link_content_submit()
{
  jQuery("#pre-process").submit(function(){
    jQuery.post(
      jQuery(this).attr('action'),
      jQuery(this).serialize(),
      function(data){
        jQuery().colorbox({html: data, onComplete: function(){
          link_content_submit();
        }});
      }
    );
    return false;
  });

  }
</script>

3 つの外部ファイルは、jquery.mcdropdown.js、jquery-1.2.6.min.js、および jquery.bgiframe.js です。

メイン ページのこの Colorbox スクリプトを変更して、Colorbox で表示したときにフォームの JS 機能が保持されるようにするにはどうすればよいですか?

この初心者のための詳細な回答を事前に感謝します。

4

1 に答える 1

0

答えは次のとおりです。

<script type="text/javascript"> <!--<Check-Out Colorbox Script>-->

  jQuery(function(){

   jQuery('#link_content').colorbox({opacity:0.3, height:"100%", scrolling: false, onComplete: function(){
    link_content_submit(), $('#category').mcDropdown('#categorymenu'),$('#category1').mcDropdown('#categorymenu1'),$('#category2').mcDropdown('#categorymenu2');
  }});
   });
function link_content_submit()
{
  jQuery("#pre-process").submit(function(){
    jQuery.post(
      jQuery(this).attr('action'),
      jQuery(this).serialize(),
      function(data){
        jQuery().colorbox({html: data, onComplete: function(){
          link_content_submit();
        }});
      }
    );
    return false;
  });

  }
</script>

JS フォームの各ドロップダウン ボックスのそれぞれの JavaScript 関数は、Colorbox onComplete: function() に統合されているため、これらの各フォーム要素は、Colorbox からアクセスされる前に読み込まれます。

于 2013-01-04T22:48:47.187 に答える