zurück zur Startseite
  


Zurück XHTMLforum > Webentwicklung (außer XHTML und CSS) > Javascript & Ajax
Seite neu laden JQuery: Alternative zu location.reload();?

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 20.09.2012, 12:48
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 02.05.2011
Beiträge: 5
JackCimberly befindet sich auf einem aufstrebenden Ast
Standard JQuery: Alternative zu location.reload();?

Hallo zusammen.

Hänge mal wieder fest ... bräuchte Eure Hilfe ...
Habe einen Button mit einer Hintergrundgrafik und klar, mit farblichen Text.
Wenn man auf diesem klickt, dann wird eine Änderung in SQL geändert. Klappt super.

PHP-Code:
    $('.activated').live("click", function(){
    var 
parentList = $(this).parents("ul");
    
offersID = $(parentList).find("input[name='offersID']").val();
    
ajax=$.ajax({
    
type"POST",
    
url"includes/widgets/offers_action.php?go=activ",
    
data'offersID='offersID '&aktiv=' 0,
    
cachefalse,
    
success: function(html){
    if(
html=='true') {
    $(
".block-jquery").css("display","block");
                     $(
"#send-message").fadeIn("slow").delay(2800).fadeOut("slow").removeClass("error-message").addClass("done-message").html("Angebot erfolgreich deaktiviert!");
    
//$("#DIVoffers-list-items").html(data);
    
} else {
    $(
".block-jquery").css("display","block");
    $(
"#send-message").fadeIn("slow").delay(2800).fadeOut("slow").removeClass("done-message").addClass("error-message").html("Ein unbekannter Fehler ist aufgetreten!");
    }
    },
    
beforeSend: function(html){
    $(
"#send-message").fadeIn("slow").addClass("done-message").html("Lade...");
    }
    });
    return 
false;
    }); 
Sobald die Speicherung abgeschlossen ist, kommt die Meldung (wichtig; mit diesem Effekt).
Nun sollte sich der Button mit der Hintergrundgrafik ändern ... sprich; ein reload.

Habe es schon mit
HTML-Code:
location.reload();
probiert. Klappt wunderbar, aber dann ist dieser Effekt weg.
Animation/Effekt:
HTML-Code:
$("#send-message").fadeIn("slow").delay(2800).fadeOut("slow").removeClass("error-message").addClass("done-message").html("Angebot erfolgreich deaktiviert!");
Button ist:
HTML-Code:
<span class="activated">aktiviert</span>
Jemand eine Idee, wie man location.reload(); nutzen, ohne das der Effekt / die Animation nicht beeinträchtigt wird?
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 20.09.2012, 14:34
Benutzerbild von fox
fox fox ist offline
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 11.09.2006
Beiträge: 1.008
fox sorgt für eine eindrucksvolle Atmosphärefox sorgt für eine eindrucksvolle Atmosphäre
Standard

Nur um den Button farbig zu machen musst du die Seite nicht neu laden. Den Button kannst du genauso mit Javascript (bzw. jQuery) färben oder das Bild ändern oder oder oder. Wenn das Bild/die Farbe abhängig von der neuen Einstellung ist, kannst du das entsprechende neue Bild auch vom Server zurückgeben lassen.

.css() – jQuery API - aber das verwendest du ja bereits.
Vielleicht habe ich deine Frage auch nicht richtig verstanden.
__________________
:)
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 20.09.2012, 18:33
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 02.05.2011
Beiträge: 5
JackCimberly befindet sich auf einem aufstrebenden Ast
Standard

Hm ....
Schwierig zu erklären.

Ja, die .css() nutze ich bereits.
Aber das langt nicht - zumindest für dieses Beispiel nicht.

Ich habe jetzt mal das so geändert:

PHP-Code:
        $('.activated').live("click", function(){
           
            var 
parentList = $(this).parents("ul");
            
offersID = $(parentList).find("input[name='offersID']").val();
                       
            
ajax=$.ajax({
                
type"POST",
                
url"includes/widgets/offers_action.php?go=activ",
                
data: {offersidoffersIDaktiv0},
                
datatype"json",
                
cachefalse,
                
success: function(data){
                    
                        if(
data=='true') {
                            $(
".block-jquery").css("display","block");
                            $(
"#send-message").fadeIn("slow").delay(2800).fadeOut("slow").removeClass("error-message").addClass("done-message").html("Angebot erfolgreich deaktiviert!");
                            $(
"#status-true").attr("id""status-false").html('<span class="notactivated">deaktiviert</span>');
                        } else {
                            $(
".block-jquery").css("display","block");
                            $(
"#send-message").fadeIn("slow").delay(2800).fadeOut("slow").removeClass("done-message").addClass("error-message").html("Ein unbekannter Fehler ist aufgetreten!");
                        }
                    
                },
                
beforeSend: function(data){
                    $(
".block-jquery").css("display","block");
                    $(
"#send-message").fadeIn("slow").addClass("done-message").html("Lade...");
                }
            
            });
            return 
false;
        }); 
Habe jetzt mal die .attr() und .html() Funktionen von JQuery genutzt, somit spare ich mir location.reload();.

Ich erkläre mal kurz wie das Ganze von statten geht:

Button:
HTML-Code:
<li id="status-true"><span class="activated">aktiviert</span></li>
- Ausgabe von Daten via SQL (untereinander)
- Ein Button (Text: aktiviert, Hintergrundgrafik: pic) -> klickt man auf diesen, wird an die o.g. PHP Daten gesendet. Dort ausgewertet und in die Datenbank geschrieben. Übernimmt auch die offersID, die man angeklickt hat. Klappt tadellos.
- Nun soll sich der Button ändern, ABER:

Tut er zwar, aber nicht den Button, den ich angeklickt habe, sondern den ersten in der Liste, der id="status-true" als Eigenschaft hat.

Wie kann ich JQuery beibringen, dass auch der Button bearbeitet wird, den ich angeklickt habe? Vielleicht die LIST mit der offersID ausstatten ... aber weiter weiß ich dann auch nicht mehr ....

Mit Zitat antworten
  #4 (permalink)  
Alt 21.09.2012, 09:15
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 13.07.2006
Beiträge: 414
Maxefix ist ein sehr geschätzer MenschMaxefix ist ein sehr geschätzer MenschMaxefix ist ein sehr geschätzer Mensch
Standard

Innerhalb deiner Funktion ist "this" das angeklickte Element. Das kannst du direkt mit jQuery verwenden:
Code:
$(this).css(...)
Außerdem übergibt jQuery der Funktion als ersten Parameter das Event-Objekt.

http://docs.jquery.com/Events/jQuery.Event

Darin ist die Eigenschaft "currentTarget" enthalten. Die könntest du auch verwenden. Vorteil: Das funktioniert auch, wenn der Callback in einem anderen Context ausgeführt wird, z.B. über jQuery.proxy().

Gruß,
Max

Geändert von Maxefix (21.09.2012 um 09:25 Uhr)
Mit Zitat antworten
  #5 (permalink)  
Alt 21.09.2012, 18:00
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 02.05.2011
Beiträge: 5
JackCimberly befindet sich auf einem aufstrebenden Ast
Standard

Hi Maxefix.

Danke Dir.
$(this) habe ich schon probiert gehabt. Nichts.
Habe this mal im alert(); ausgegeben, um zu überprüfen, was angezeigt wird:
[object Object]

Also konnte ich nicht mit dieser Funktion weiterarbeiten.
Den Vorschlag, den Du gemacht hast, kapiere bis jetzt noch nicht.
Habe mir schon ein Buch über JQuery bestellt, um mich da einzulesen.

Habe das jetzt wie folgt gelöst:

Button:
HTML-Code:
<li id="option-list-item"><span id="oID'.$offers_item['offersID'].'" class="activated">aktiviert</span></li>
Habe hier die LI-ID geändert. SPAN-Tag (eigentliche Button) die ID hinzugefügt, die ich dann via JQuery anspreche.

PHP-Code:
$(".block-jquery").css("display","block");
$(
"#send-message").fadeIn("slow").delay(2800).fadeOut("slow").removeClass("error-message").addClass("done-message").html("Angebot erfolgreich deaktiviert!");
$(
"#oID" offersID).removeClass("activated").addClass("notactivated").html('deaktiviert'); //entscheidende Zeile 
So klappt es jetzt wunderbar ...
Danke Euch trotzdem ...
Mit Zitat antworten
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Das jQuery UI Accordion Plugin ohne jquery kenntnisse nutzen? papalapap Javascript & Ajax 8 13.08.2012 23:00
jQuery (coda slider) und prototype (Lightbox) konflikt computernerd Javascript & Ajax 3 21.09.2011 20:04
jQAPI - Alternative jQuery Documentation zeji Ressourcen 2 29.09.2010 11:50
Hover Problem bei JQuery charlie Javascript & Ajax 2 03.01.2009 08:01
JQuery + Wordpress VoinG Javascript & Ajax 0 29.12.2008 17:03


Alle Zeitangaben in WEZ +2. Es ist jetzt 10:45 Uhr.