Question

jQuery v 1.9.0

当页面加载时，我会触发两个函数（get_month（）＆amp; 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中的网络标签并检查了XHR，当在uPortal中使用时，它会触发两个发布请求和两个get请求。两个POST请求都重新调整了0字节，但GET请求返回了一些内容。我将它们更改为GETS，因为我并没有真正要求用户输入数据，而是单击已经包含数据的链接（即他们想要查看事件的日期），所以我将日期值附加到URL I传入ajax get请求，然后每次都正确返回。

Answer 1

尝试添加到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

});

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

1 个答案: