0

mycontent.php をモーダル ダイアログ ボックスにロードするために ajax 呼び出しを使用しています。私は AJAX を使用していますが、モーダル ウィンドウにある場合、3 つの JavaScript タグが含まれていないか、mycontent.php に実行されていません。

eval ステートメントを試しましたが、うまくいかないようです。

これが私のコードです：

main.html

 <a class="dialog" title="testvideo" href="mycontent.php">
 <img class="imageleft" width="200" height="150" src="assets/images/photos/deya/thumbnail.jpg"></a>

modal.js

    $(document).ready(function() {                

       $('a.dialog').click(function (event) {
          if ($("body").hasClass("res-full")){
             event.preventDefault();
             $this = $(this);

             var URL     = $(this).attr('href');
             var dialogbox = document.getElementById('dialog');
             var dialogOptions = {
                        height: 'auto',
                        width: 'auto',
                        modal: true,

              //         open: function(event, ui){

              //         },

                       close: function(event, ui){
                            $('#dialog').empty(); 
                       }
          };

       if(dialogbox==null) {
          $this.after("<div id=\"dialog\"></div>");
       }

       jQuery('#dialog').load(URL + " #content", function() {eval($('script').html())}).dialog(dialogOptions);


      }            
      });


    });

mycontent.php

   <div id="content">
       <div id="VidPlayerPlaceholder_7001_wrapper">
        <object id="VidPlayerPlaceholder_7001" width="100%" height="100%" type="application/x-shockwave-flash" data="video/player/player6.swf" bgcolor="#000000" name="VidPlayerPlaceholder_7001" tabindex="0">
        <div id="VidPlayerPlaceholder_7001_jwpsrv" style="position: absolute; top: 0px; z-index: 10;"></div>
   </div>
   <script type="text/javascript" src="http://www.mycompany.com/video/player/js/jwplayerv6.js"></script>
   <script type="text/javascript">jwplayer.key="jCz8k6TcT9i6M5vRXEI474+6dfNf9a7gHBbRfA==";</script>
   <script type="text/javascript">
          jwplayer('VidPlayerPlaceholder_4029').setup({ 
                    flashplayer: "http://www.company.com/video/player/player6.swf",
                    html5player: "http://www.company.com/video/player/js/jwplayer.html5.js",
                    playlist: [
            { image: "http://pciture.jpg", file: "rtmp://DEYA/video3.m4v"}
        ],
        width: '505',
        height: '430',
        stretch: 'uniform',
        autostart: 'false',
        repeat: 'false',

        logo: {
            file: 'http://ccopyright.png',
            link: 'http://www.mycompany.ca',
            hide: '',
            position: 'top-left'
        },
        rtmp: {
            bufferlength: '5'
        },
        primary: 'html5'
        });
        jwplayer('VidPlayerPlaceholder_4029').setVolume(50);
        if(0 > 0){
            jwplayer('VidPlayerPlaceholder_4029').stop();       
            jwplayer('VidPlayerPlaceholder_4029').seek(0);      
            if('false' == 'false'){
                jwplayer('VidPlayerPlaceholder_4029').pause();
            }
    }
</script>

誰かが助けてくれれば、それはありがたいです。

4

3 に答える 3

1

コメントで述べたように、この方法で試してみることができます。私は Rocket Hazmat の回答に基づいて作成しましたが、フラグメント div を jquery が load() に使用する実装に #fragmentdiv パラメータで置き換えました。

また、成功関数 (done()) 内で jwplayer を呼び出し、php ファイルから持っている jwplayer セットアップ (インライン JS) の JS を、コメントされているように done() 関数に貼り付けます。以下-それが機能するかどうかを確認してください。

(function($) { //wrap to local scope
    $(document).ready(function() {
        var fragment_div = '#content';
        var $target_div = '#dialog';

        $.ajax({
            url: url,
            dataType: 'html' //IE can be buggy on the jquery intelligent guess
        }).done(function(data) {
            var content = $('<div>').append($.parseHTML(data)).find(fragment_div);
            $('#dialog').html(content);

            //try
            $target_div.html($data.filter('script'));
            //or
            $target_div.html($('<script>').append($.parseHTML(data)).find('script');

           //try moving your jwplayer setup code here for testing, you can use bind() and trigger()
           //to create a custom event if you want to keep the js as you have it now in mycontent.php
           jwplayer('VidPlayerPlaceholder_4029').setup({ /*..etc */ });

           // Open dialog
           $('#dialog').dialog(dialogOptions);
        });
    });
})(jQuery);

編集.php に余分なコンテンツはありますか? そうでない場合は、 #fragment パラメータなしで .load() を使用できます。これにより、JavaScriptもロードされます。

于 2013-10-08T20:18:13.833 に答える
1

で呼び出しloadていURL + " #content"ます。URL の後にセレクターを追加すると、jQuery はページのその部分だけを使用し、残りは無視します。そのため、<script>タグが DOM に読み込まれることはなく、コールバックで使用することもできません。

$.getを使用してページ全体を取得してから、各ピースを所属する場所に配置してみてください。

$.get(url, function(html){
    // Parse HTML response
    var $data = $(html);

    // Add content to DOM
    $('#dialog').html($data.filter('#content').html());

    // Run scripts
    $data.filter('script').each(function(){
        // http://stackoverflow.com/a/12201713/206403
        var scriptTag = document.createElement('script');
        scriptTag.text = $(this).html();
        document.body.appendChild(scriptTag);
    });

   // Open dialog
   $('#dialog').dialog(dialogOptions);

}, 'html');
于 2013-10-08T16:19:34.260 に答える