ajax-post-und-Rückgabe html-anzeigen in div
jQuery-v 1.9.0
Wenn die Seite geladen wird, ich bin brennen zwei Funktionen (get_month() & get_todays_events()) und jene zurückkehren, die Kalender und die heutigen Veranstaltungen html.
Manchmal, wenn ich die Seite aktualisieren, es zeigt die heutigen Ereignisse zweimal und nicht-Anzeige des Kalender(Monat), wie unten zu sehen ist.
Die Hälfte der Zeit funktioniert es ganz gut, wie unten gesehen:
Gibt es keine Fehler in die firebug-Konsole. Es funktioniert gut als stand-alone-app, aber wenn ich die Integration in Jasig ist uPortal, es vermasselt.
Dann habe ich versucht stripping der html-Code, der gesendet wird, zurück aus der ajax-Beiträge und mir ist aufgefallen das get_todays_events(); kann der Täter sein, aber ich weiß noch nicht, was es sein könnte.
Gibt es so etwas im html-Code, vielleicht stolpern die Dinge oder sollte ich eine Verzögerung bei den feuern, die Funktion nach der get_month(); feuert?
$.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 readyHier ist der html-Code, der zurückgegeben wird bei Erfolg für die get_todays_events () - Funktion
<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>UPDATE: überprüft die Netto-tab in firebug untersucht und XHR, wenn Sie in uPortal, es würde das Feuer aus zwei post-requests und zwei get-Anforderungen. Beide POST-requests waren wir wieder 0 byte, aber die Anfragen waren wieder etwas. Ich veränderte Sie zu KOMMT, da ich nicht wirklich den Benutzer zu Fragen, um Daten einzugeben, sondern klicken Sie auf einen link, der hatte die Daten bereits (das war der Zeitpunkt, zu dem Sie wollte zeigen Sie die Ereignisse für), also habe ich angehängt, die date-Wert an die URL-ich war vorbei, in die ajax-get-request, dann kehrte er es richtig jedes mal.
Hinzugefügt vergaß hinzufügen, dass es ursprünglich
wäre es möglich, die vollständige gerenderte Seite, bevor diese Anrufe sind gemacht, ich würde sagen, dass irgendwo in deinem Formular die falsche url platziert wird.
Es ist nicht eine form. Ich bin mit dem ajax-post an eine controller-Methode aufgerufen post_calendar() und post_todays_events () (gibt den entsprechenden html-Code. Es funktioniert die Hälfte der Zeit, wenn Sie in uPortal, wenn Sie direkt auf der Seite, es funktioniert jedes mal.
ja, aber Sie sind mit
jQuery("#events_for_day_url").attr("href") - Selektor, um die url für die AJAX, konnte ich nur annehmen, dass Sie einen bug irgendwo auf der controller-Seite die Rücksendung der falschen URL. wie ich schon sagte, Fiddler oder Firebug zu fangen, was wird tatsächlich an den client zurückgegeben
InformationsquelleAutor Brad | 2013-02-05
Du musst angemeldet sein, um einen Kommentar abzugeben.
Versuchen, hinzufügen, um den ajax-Aufruf Parameter async=false (fügen Sie diese zu allen ajax-aufrufen).
Beispiel:
InformationsquelleAutor Ron Fridman