[Ajax] Div-Inhalt wird nicht geändert

saila · 05.01.2011

AW: [Ajax] Div-Inhalt wird nicht geändert

Hi,

du verwendest doch sicherlich Firefox und das Plugin Firebug? Wenn nicht - lade das Firebug-Plugin als Add nach.

Danach teste deine Seite und sehe dir mal an, was da in der Konsolenansicht alles mitgeteilt wird.
Darin kannst du unter anderem sehen, welche Daten wie übergeben werden (GET/POST) und du kannst letztlich auch die Antwort sehen.

greenthunder · 05.01.2011

AW: [Ajax] Div-Inhalt wird nicht geändert

saila schrieb:
Hi,

du verwendest doch sicherlich Firefox und das Plugin Firebug? Wenn nicht - lade das Firebug-Plugin als Add nach.

Danach teste deine Seite und sehe dir mal an, was da in der Konsolenansicht alles mitgeteilt wird.
Darin kannst du unter anderem sehen, welche Daten wie übergeben werden (GET/POST) und du kannst letztlich auch die Antwort sehen.

Hallo,

ich habe in meinem Beitrag schon geschrieben, dass im Firebug nichts angezeigt wird. Im HTML-Quelltext ist der Kalender aber auch nicht zu finden.

saila · 05.01.2011

AW: [Ajax] Div-Inhalt wird nicht geändert

dann schreibe in die jeweilige javascript-funktion vor dem aufruf "console.log(datas);" wobei datas dem objekt oder variablen entspricht, welche du per ajax senden willst. Und für den Request schreibe ebenfalls vor dem Bereich, welchen du mit html füllen willst ebenfalls "console.log(request);", wobei request wiederum dem Rückgabeobjekt entspricht, welches du als antwort erwartest.

greenthunder · 06.01.2011

AW: [Ajax] Div-Inhalt wird nicht geändert

Ok, danke! Das Ergebnis was ausgegeben werden soll ist richtig.

PHP:

<div class="calender">
    <div class="pagination">
        <a href="#" rel="1265410800" class="last" id="lastyear">|&laquo;</a> 
        <a href="#" rel="1294268400" class="last" id="lastmonth">&laquo;</a> 
        <span>Februar 2011</span>
        <a href="#" rel="1299366000" class="next" id="nextmonth">&raquo;</a>
        <a href="#" rel="1328482800" class="next" id="nextyear">&raquo;|</a>  
    </div>
    <div class="day headline">Mon</div>
<div class="day headline">Die</div>
<div class="day headline">Mit</div>
<div class="day headline">Don</div>
<div class="day headline">Fri</div>
<div class="day headline">Sam</div>
<div class="day headline">Son</div>
<div class="day before">30</div>
<div class="day normal">01</div>
<div class="day normal">02</div>
<div class="day normal">03</div>
<div class="day normal">04</div>
<div class="day normal">05</div>
<div class="day current">06</div>
<div class="day normal">07</div>
<div class="day normal">08</div>
<div class="day normal">09</div>
<div class="day normal">10</div>
<div class="day normal">11</div>
<div class="day normal">12</div>
<div class="day normal">13</div>
<div class="day normal">14</div>
<div class="day normal">15</div>
<div class="day normal">16</div>
<div class="day normal">17</div>
<div class="day normal">18</div>
<div class="day normal">19</div>
<div class="day normal">20</div>
<div class="day normal">21</div>
<div class="day normal">22</div>
<div class="day normal">23</div>
<div class="day normal">24</div>
<div class="day normal">25</div>
<div class="day normal">26</div>
<div class="day normal">27</div>
<div class="day normal">28</div>
<div class="day after"> 01 </div>
<div class="day after"> 02 </div>
<div class="day after"> 03 </div>
<div class="day after"> 04 </div>
<div class="day after"> 05 </div>
<div class="day after"> 06 </div>
    <div class="clear"></div>
</div>

Ich nehme an, dass die Rückgabe an das Dokument nicht richtig funktioniert.

PHP:

$('#cal').html(result);

Ich hab jetzt mal die Funktion load benutzt, damit sollte es ja auch funktionieren, aber der gleiche Effekt.

Von der ganzen Ausgabe oben wird nur

PHP:

<div class="calender">

im Quelltext angezeigt.

Die Load-Funktion:

PHP:

$("#nextmonth").click(function() {
        var timestamp =  $("#nextmonth").attr('rel');
        $('#cal').load("cal.php?timestamp="+timestamp);
 });

saila · 06.01.2011

AW: [Ajax] Div-Inhalt wird nicht geändert

Bei der üblichen ajax-Methode von jQuery läuft das wie folgt:

Code:

$('.xy').click( function() {
    
    var datas = 'cases='+ $(this).attr('rel');
    console.log(datas);
    if(datas.length > 7) {
        $.ajax({
            TYPE: 'POST',
            url: 'dieUrlZumPhpScript',
            data: datas,
            success: function(data) {
                console.log(data);
                if(data != null && $('#dieElementId_welcheResultErhält')) {
                    $('#dieElementId_welcheResultErhält').html(data);
                } else {
                    alert('Fehler: Request enthält keine Daten');
                }
            },
            error: function(msg) {
                alert(msg);
            } 
        });
    } else {
        alert('Kein Parameter zur Übergabe vorhanden');
    }
});

Teste mal über diesen Weg, wenn nicht schon erfolgt. Wenn die Rückmeldung und deren Inhalt korrekt sind, wird das Element entweder nicht gefunden, oder du hast es nicht korrekt benannt (als Element oder innerhalb des success.

greenthunder · 06.01.2011

AW: [Ajax] Div-Inhalt wird nicht geändert

Im Prinzip ist es ja die Funktion, die ich vorher hatte. Ich hab deine mal reinkopiert und angepasst. Gleicher Effekt. Ich kann es weiterhin nur einmal ausführen.

Hier mal mein Script:

Die Blätterfunktionen nach links sind mit deiner Funktion belegt, die nach rechts mit meiner load-Funktion.

saila · 06.01.2011

AW: [Ajax] Div-Inhalt wird nicht geändert

Ok, jetzt ist mir auch klar warum. Du füllst ja den kompletten div und nicht nur den Kalender selbst

Sprich - der neue Inhalt ist für den "normalen" click-event nicht vorhanden, da er ja nach der erstellung des DOM eingebunden wird.

Gut dann wäre dein Click-Event anzupassen.

Du hast sicherlich bisher

Code:

$('#pagination a').click( function() {/*....*/});

Das wäre zu ändern in:

Code:

$('#pagination a').die('click');
$('#pagination a').live('click', function() {/*....*/});

Oder alternativ gibst du dem Event die jQuery-Methode "delegate" bzw. "undelegate". Teste zuerst die erste Anpassung.

das die() verhindert die Mehrfachausführung des click beim ersten Laden der Seite. Wird später "neuer" Content per ajax nachgeladen, ist der click-event auch für diese Bereiche gültig.

greenthunder · 06.01.2011

AW: [Ajax] Div-Inhalt wird nicht geändert

Super, .die und .live funktionieren. delegate hätte auch geklappt, aber immer nur beim zweiten Klick.

Vielen Dank und ich melde mich wieder.

greenthunder · 17.03.2011

AW: [Ajax] Div-Inhalt wird nicht geändert

greenthunder schrieb:
Vielen Dank und ich melde mich wieder.

Hallo, ich hatte es ja angedroht, dass ich wieder mit einem Problem komme und wollte dafür nicht wieder einen neuen Thread öffnen.

Allerdings habe ich zwei Probleme, wobei ich erstmal mit dem wohl etwas leichteren Anfange.
Ich habe nun ein kleines Script geschrieben, mit dem man Zahlenwerte per Klick in Einerschritten hinauf bzw. heruntersetzen kann. Dies geschieht mit einer Ajax-Funktion, welche vielleicht nicht die eleganteste ist, aber sie funktioniert. Das Problem ist nun das Speichern der Werte in einer DB. Dazu hab ich ebenfalls eine Ajax-Funktion, die eine weitere Datei aufruft und die Werte per GET übergibt. Allerdings klappt dies nur, wenn die Zahlen vorher einmal per Klick verändert wurden. Macht man das nicht, will also die Standardwerte speichern, dann bleibt die entsprechende GET-Variable leer.

Ajax-Funktion zum Ändern des Wertes

PHP:

$(document).ready(function() {
	$(".pfeil_up_wert1").die('click');		
	$(".pfeil_up_wert1").live('click',function() {
		var value = $("#wert1").html();
		var newValue = parseInt(value)+ 1;
		$("#wert1").html(newValue);
	});		
	$(".pfeil_down_wert1").die('click');		
	$(".pfeil_down_wert1").live('click',function() {
		var value = $("#wert1").html();
		var newValue = parseInt(value)- 1;
		$("#wert1").html(newValue);
	});

Zugehörige PHP-Datei

PHP:

<div class="werte">
      <img src="img/pfeil_up.png" alt="Pfeil_up" class="pfeil_up_wert1"/><br />
      <span id="wert1">
            get_Temp($date,"wert1");} else {echo "-18";} ?>
      </span>&deg;<br />
      <img src="img/pfeil_down.png" alt="Pfeil_down" class="pfeil_down_wert1" />
       
    </div>

Ajax-Script zur Übergabe an Speicherdatei

PHP:

$(document).ready(function() {
	$('#save').die('click');							   
   	$("#save").live('click',function() {
	 var wert1= $("#wert1").html();
	 $("#temp").load("inc/tempsave.inc.php?wert1="+wert1);
    });
});

Kann mir jemand helfen?

greenthunder · 23.03.2011

AW: [Ajax] Div-Inhalt wird nicht geändert

Leider bin ich bei diesem Problem noch nicht weiter. Das Problem scheint aber in folgender Funktion zu liegen.

PHP:

$(document).ready(function() {
    $('#save').die('click');                               
       $("#save").live('click',function() {
     var wert1= $("#wert1").html();
     $("#temp").load("inc/tempsave.inc.php?wert1="+wert1);
    });
});

Wenn ich vor dem $("#temp").load... mit alert den wert1 ausgeben lasse zeigt er mir den richtigen Wert an. Im load-Aufruf wird der Wert aber nicht angezeigt. :uhm:

Edit:
Problem hat sich gelöst. Es waren Leerzeichen in wert1. Jetzt geht es.