ダイナミックなPHPページをjqueryのアコーディオンの "アクティブ"セクションに入れる方法

Question

私は自分のサイトをやり直しており、いつでも80-120台の車がデータベースに一意の在庫番号で識別されています。私は車を一覧表示するjQueryのアコーディオンを使用しています： http://www.login.carcityofdanbury.com/New/?cat=01

アコーディオンがオープンしたら、私は、オープンアコーディオンのdiv要素にedit.php?stock=__STOCK__を埋め込むにはどうすればよいですか？ ちょうどHTML <embed>タグを使ってみましたが、ページの読み込みが非常に遅くなっています。

私は、jQuery、Ajax、コーディングのすべてを初めて勉強していて、完全に自己学習しているので、デモ、チュートリアルや例が素晴らしいでしょう。

Answer 1

あなたはここにいくつかの助けを得ることができる： http://api.jquery.com/jQuery.ajax/

例：

$.ajax({ 
     url: "yourPage.php", 
     success: function(data){ 
     $("#youarea").text(data); 
     } 
    }); 

Answer 2

をあなたはjQueryの.LOAD機能（http://api.jquery.com/load/）の組み合わせとjQuery UIアコーディオン変更イベント（http://jqueryui.com/demos/accordion/#event-change）これを使用することができますアコーディオンスライドが開かれた後にトリガーされます。

$(document).ready(function(){ 

    $("#listVehicles").accordion({ 
     collapsible: true, 
     active: false, 
     autoHeight: false, 
     change: function(event, ui){ 
      ui.newContent.load('edit.php', { stock: __STOCK__ }); 
     } 
    }); 

});​ 

changeイベントがトリガされ、edit.phpファイルがAJAXを使用してロードされ、HTMLが開いたアコーディオンスライドにドロップされます。

Answer 3

jQuery load() functionを使用することをお勧めします。具体的にはこのために設計されています。あなたはそれに要素とurlを与え、要素に内容をロードします。

ので、あなたのアコーディオン処理コードには、次を配置することをお勧めします：

$('#elementToLoadInto').load('edit.php?stock='+id'); 

そこから、あなたのPHPページ、サーバーアップ（必要な場合、または複数）の単一<div>の要素をすべきでありません完全なHTMLページ。そのコンテンツは、それがコード化されたのとまったく同じように、正確に#elementToLoadIntoに配置されます。

jQueryもload only a piece of the pageです。他の理由で完全なHTMLページを返す必要がある場合は、その機能を利用することもできます。