JQuery load（）とcolorbox（）を一緒に使用する

Question

jQueryロード関数を使用してページの一部を読み込み、colorboxを使用して表示しようとしています。現在使用中です

 $(document).ready(function() 
     { 
      $(".rest-menuitem a").click(function(event) 
      { 
       event.preventDefault(); 
       var elementURL = $(this).attr("href"); 
       $.colorbox({ html: $.load(elementURL+ " .product") , width:'1000px',height:'80%', href: finalURL); 
}); 
}); 

ロード機能のセレクタが必要なため、これは機能しません。負荷を使って私の問題を解決する方法はありますか？そうでない場合は、別の解決策がありますか？

Answer 1

あなたが見ているのは.get()の方法だと思います。指定されたurlからデータをロードし、データが利用可能なときにコールバックを実行します。受信したhtmlを自分でフィルタリングし、colorboxプラグインを使用することができます。

このような何か：

$(document).ready(function() { 
    $(".rest-menuitem a").click(function(event) { 
     event.preventDefault(); 
     $.get($(this).attr("href"), function(data) { 
      $.colorbox({ 
       html: $(data).find('.product'), 
       width: '1000px', 
       height: '80%', 
       href: finalURL); 
      }); 
     });; 
    }); 
}); 

Answer 2

ajax情報が返される前または後で、colorboxを開くことができます。おそらくユーザーのためのより多くの意味があります前に、後にあなたのコードを適応させることが容易である：

$(document).ready(function() 
{ 
    $(".rest-menuitem a").click(function(event) 
    { 
     var elementURL = $(this).attr("href"); 
     var $html = $('<div />'); 
     $.when($html.load(elementURL+ " .product")).done(function(){ 
      $.colorbox({ html: $html.html() , width:'1000px',height:'80%', href: finalURL); 
     }); 
     event.preventDefault(); 
    }); 
}); 

をクリックすると、これはDOMに取り付けられていないのdivに、あなたのコンテンツでAJAXます。そのAjaxが完了すると、カラーボックスが発生し、ホームレスdivの内容が入力されます。雄弁ですか？いいえ。しかし、それはあなたがすでにやっていることに最も近い解決策です。

Answer 3

それはあなたがカラーボックスに外部のページの一部をロードしようとしていることを、あなたの質問から、のように見えます。私は$ .get（）で可能だとは思わなかった。

私はクライアントのためにこれをしなければならなかった、これは私が思いついたのソリューションです：$の.LOAD（）関数で必要とされる。これは、自動的に、URL内の要素を分離する

$('.popup-link').click(function(e) { 
    e.preventDefault(); 

    var url = $(this).attr('href').replace('#', ' #'); 

    $('body').append('<div id="ajax-load-element-wrapper" style="display:none;"><div id="ajax-load-element" style="padding: 20px;"></div></div>'); 

    $('#ajax-load-element').load(url, function() { 
     $.colorbox({ 
      href: '#ajax-load-element', 
      width: 600, 
      height: 400, 
      inline: true, 
      opacity: .7 
     }); 
    }); 
}); 

。

これは、あなたのタグでは、このようなURLを使って優雅な劣化を維持できることを意味します$ .LOAD（）で必要とされるJS以来

/test.html#div 

は自動的に、#divの前にスペースを追加します。