jQueryは初めてで、これを機能させることはできません。jQuery $ .ajax()を使用してMYSQLデータベースからコンテンツを取得しました。その部分は機能します。そのコードは、以下のonBeforeLoadイベントで確認できます。
このコンテンツをjQueryToolsオーバーレイにロードしたいと思います。そのコンテンツをID「contentWrap」のブロックにダンプしました。
jQueryToolsオーバーレイのドキュメントには、onBeforeLoadイベントを使用して外部ページをオーバーレイにロードする例がありますが、そのコードを自分の目的に適合させることができませんでした。http://jquerytools.org/demos/overlay/external.htmlからの例を次に示します。
onBeforeLoad: function() {
// grab wrapper element inside content
var wrap = this.getOverlay().find(".contentWrap");
// load the page specified in the trigger
wrap.load(this.getTrigger().attr("href"));
}
オーバーレイ呼び出しのonBeforeLoadイベントにajaxコードを入れようとしましたが、機能しませんでした。では、コンテンツをオーバーレイに直接ロードするにはどうすればよいですか?
さて、いくつかの変更の後、これが実際に実行されているコードですが、まだ機能していません:
JQUERY:
$("a.noteref[rel]").overlay({
mask: {
color: '#000',
loadSpeed: 100,
opacity: 0.7
},
closeOnClick: true,
fixed: false,
onBeforeLoad: function() {
$.ajax({
url: 'api.php',
data: "ID=" + $(this).attr('id').replace('#', ''),
type: 'post',
dataType: 'json',
success: function(data) {
var id = data[0];
var vtype = data[1];
var vcontent = data[2];
var vlink = data[3];
var data
$('#contentWrap').html(vcontent);
}
});
var wrap = this.getOverlay().find("#contentWrap");
wrap.load();
}
});
HTML:
<a hef="http://www.example.com/" class="noteref" id="cite01">Example</a>
<div class="overlay">
<div id="contentWrap"></div>
</div>