jQuery v 1.9.0
ページが読み込まれると、2 つの関数 (get_month() と get_todays_events()) が起動され、カレンダーと今日のイベントの HTML が返されます。
ページを更新すると、以下に示すように、今日のイベントが 2 回表示され、カレンダー (月) が表示されないことがあります。
以下に示すように、半分の時間は問題なく動作します。
firebug コンソールにエラーはありません。スタンドアロン アプリとしては問題なく動作しますが、Jasig の uPortal に組み込むと、めちゃくちゃになります。
次に、ajax 投稿から返された html を削除しようとしたところ、get_todays_events(); に気付きました。が原因かもしれませんが、まだ原因がわかりません。
物事をつまずかせている可能性のあるhtmlに何かがありますか、それともget_month();の後にその関数を起動するのを遅らせる必要がありますか? 火災？
$.noConflict();
jQuery(document).ready(function($) {
function get_month()
{
var url_month = jQuery("#days_for_month_url").attr("href");
var form_data = { ajax : '1' };
jQuery.ajax({
type: "POST",
dataType: "html",
url: url_month,
crossDomain: true,
data: form_data,
success: function( default_month_msg ) {
jQuery('#display-month').html(default_month_msg);
} // end success
}); // end ajax
//return false;
}
function get_todays_events()
{
var url_todays_events = jQuery("#todays_events_url").attr("href");
var form_data = { ajax : '1' };
jQuery.ajax({
type: "POST",
dataType: "html",
url: url_todays_events,
crossDomain: true,
data: form_data,
success: function( default_month_msg ) {
jQuery('#display_todays_events').html(default_month_msg);
} // end success
}); // end ajax
//return false;
}
get_month();
console.log("display calendar");
get_todays_events();
console.log("display today's events");
jQuery(document).on('click', "a.view_events", function(e) {
e.preventDefault();
var date = jQuery(this).data('date');
// change if URL changes
var url_events = jQuery("#events_for_day_url").attr("href");
var form_data = {
year : jQuery(this).data('year'),
month : jQuery(this).data('month'),
day : jQuery(this).data('day'),
date : jQuery(this).data('date'),
ajax : '1'
};
jQuery.ajax({
type: 'POST',
dataType: 'html',
url: url_events,
data: form_data,
success: function( msg ) {
jQuery('#display-events').html(msg);
jQuery('#display-event_detail').html('');
jQuery('#display_todays_events').html('');
} // end success
}); // end ajax
return false;
}); // end on.click view-events
jQuery(document).on('click', "a.view_event_details", function(e) {
e.preventDefault();
var url_event_detail = jQuery("#event_detail_url").attr("href");
var form_data = {
event_id : jQuery(this).data('event_id'),
ajax : '1'
};
jQuery.ajax({
type: 'POST',
dataType: 'html',
url: url_event_detail,
data: form_data,
success: function( msg ) {
jQuery('#display-event_detail').html(msg);
jQuery('#display-events').html('');
jQuery('#display_todays_events').html('');
} // end success
}); // end ajax
return false;
}); // end on.click view_event_details
jQuery(document).on('click', "a.month_link", function(e) {
e.preventDefault();
jQuery('#display-events').html('');
var url_days_for_month = jQuery("#days_for_month_url").attr("href");
var form_data = {
month_url : jQuery(this).data('month_url'),
ajax : '1'
};
jQuery.ajax({
type: 'POST',
dataType: 'html',
url: url_days_for_month,
data: form_data,
success: function( msg ) {
jQuery('#display-month').html(msg);
jQuery('#display_todays_events').html('');
} // end success
}); // end ajax
return false;
}); // end on.click view-month
jQuery(document).on('click', "a.view_subscriptions", function(e) {
e.preventDefault();
var url_subscription = jQuery("#subscriptions_url").attr("href");
var form_data = {
ajax : '1'
};
jQuery.ajax({
type: 'POST',
dataType: 'html',
url: url_subscription,
data: form_data,
success: function( msg ) {
jQuery('#display-subscriptions').html(msg);
//jQuery('#display-subscriptions').toggle();
} // end success
}); // end ajax
return false;
}); // end on.click view-subscriptions
jQuery(document).on('click', "#update_subscriptions", function(e) {
e.preventDefault();
var url_update_subscription = jQuery("#update_subscriptions_url").attr("href");
var vals = []
jQuery('input:checkbox[name="calendar[]"]').each(function() {
if (this.checked) {
vals.push(this.value);
}
});
var form_data = {
ajax : '1',
calendar: vals,
};
jQuery.ajax({
type: 'POST',
dataType: 'html',
url: url_update_subscription,
data: form_data,
success: function( msg ) {
get_month();
jQuery('#display-subscriptions-update').html(msg).fadeOut(6000);
jQuery('#display-subscriptions').html('');
jQuery('#display-events').html('');
jQuery('#display_todays_events').html('');
} // end success
}); // end ajax
return false;
}); // end on.click view-subscriptions
}); // end document ready
get_todays_events() 関数が成功した場合に返される html は次のとおりです。
<h3>Today's Events</h3>
<p><a href="#" class="view_event_details" data-event_id="68">All About Heroin</a> - 12:30 pm</p>
<p><a href="#" class="view_event_details" data-event_id="67">African Storyteller - Ekow King</a> - 12:30 pm</p>
<p><a href="#" class="view_event_details" data-event_id="66">Men’s Basketball vs. Columbia-Greene Community College</a> - 6:00 pm</p>
更新: firebug でネット タブをチェックし、XHR を調べました。uPortal で使用すると、2 つの投稿要求と 2 つの取得要求が発生します。両方の POST リクエストは 0 バイトを返していましたが、GET リクエストは何かを返していました。ユーザーにデータの入力を実際に求めていなかったので、それらを GETS に変更しましたが、既にデータが含まれているリンク (イベントを表示したい日付) をクリックしたため、日付の値を URL に追加しました。 ajax get リクエストに渡された後、毎回正しく返されました。