gpt4 book ai didi

jquery - ajax 发布并返回 html 以在 div 中显示

转载 作者:太空宇宙 更新时间:2023-11-04 13:29:02 24 4
gpt4 key购买 nike

jQuery 1.9.0

当页面加载时,我触发了两个函数(get_month() 和 get_todays_events()),它们返回日历和今天的事件 html。

有时我刷新页面时,它会显示两次今天的事件并且不显示日历(月份),如下所示。

enter image description here一半时间工作正常,如下所示:

enter image description here

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&rsquo;s Basketball vs. Columbia-Greene Community College</a> - 6:00 pm</p>

更新:检查了firebug中的net选项卡并检查了XHR,在uPortal中使用时,它会触发两个post请求和两个get请求。两个 POST 请求都返回 0 字节,但是 GET 请求返回了一些东西。我将它们更改为 GETS,因为我并不是真的要求用户输入数据,而是单击一个已经有数据的链接(即他们想要查看事件的日期),所以我将日期值附加到我的 URL正在传递到 ajax get 请求,然后它每次都正确返回它。

最佳答案

尝试将 ajax 调用参数添加到 async=false(将其添加到所有 ajax 调用)。

例如:

 jQuery.ajax({
type: "POST",
dataType: "html",
url: url_todays_events,
crossDomain: true,
data: form_data,
async:false,
success: function( default_month_msg ) {

jQuery('#display_todays_events').html(default_month_msg);

} // end success

});

关于jquery - ajax 发布并返回 html 以在 div 中显示,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14717501/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com