[JS/Ajax] 3 Probleme -> Arbeit mit Bildern und Formularen & Dialogfelder

[evident]

Hallo,

ich arbeite derzeit an einem kleinen Projekt namens StyliX. Damit soll man seine Kleidungsbestände verwalten können. Teilweise funktioniert schon alles. Schaut es euch einfach mal an:

www.wilde-jungs.net/stylix

Um etwas Brauchbares zu sehen und um zu meinem Problem zu gelangen, macht bitte Folgendes:
Laden Vom Server Laden Das erste Profil wählen (Flori Bäthge Kleiderschrank.dat) Bestätigen Kleidungsstücke bearbeiten

Dann solltet ihr ein Formular sehen, links die einzelnen Felder, rechts ein Thumbnail (welches nicht geladen wird) und unten dann Buttons zum Speichern und zum Wechseln zwischen den Einträgen.

Ihr könnt ja mal ein wenig nach links und rechts springen und es testen. Das "Änderungen speichern" funktioniert auch schon, allerdings kann man die gesamte Datei noch nicht speichern.

Nun treten bei mir 3 Probleme auf (Das erste ist wohl etwas komplexer, die anderen beiden sicher nicht):

1. Problem - Anzeigen der Thumbnails:
Rechts im Bild wird ja ein Thumbnail angezeigt. Dieses möchte ich gerne dynamisch anzeigen lassen, sobald die Eingabe im Bildlink-Feld verändert wurde. Also sobald jemand den Link dort verändert hat und mit dem Zeiger das Feld verlassen hat, soll das neue Bild rechts angezeigt werden. Falls das Bild nicht geladen werden kann soll folgendes Bild angezeigt werden (images/img_nopreview.gif). (Siehe 3. Eintrag im Formular, wo noch alles leer ist)

Ist das möglich? Und wenn ja, wie? Was muss ich machen, damit das Bild aus dem Link von links rechts gleich angezeigt wird? Notfalls könnte ich das Editfeld auch noch etwas kleiner machen und rechts daneben einen Button anbringen. Wenn man dann auf diesen klickt, soll das Bild von links angezeigt werden. Ich möchte allerdings nicht gleich die ganze Seite neu laden, also nur das Bild verändern lassen.

Ich hoffe, ihr versteht was ich meine. Ich würde mich über jede Hilfe freuen! (wenn möglich, ausführlich)



2. Problem - Link zurück zur Startseite (siehe unten im Bild): ---> GELÖST! Danke strolch00
Da, wenn man auf diesen Link klickt, die Session geleert wird und somit der Kleiderschrank geschlossen wird (was nicht fest gespeichert ist, geht also verloren), möchte ich die Benutzer vorwarnen.

Dazu würde ich gern mit JavaScript ein Abfragefeld aufrufen lassen. Dies sollte in etwa so sein:

confirm("Beim Aufrufen der Startseite wird der Kleiderschrank geschlossen und ungespeicherte Daten könnten verloren gehen!\n Willst du die Seite wirklich verlassen?");

Wenn auf "Ja" geklickt wird, soll zur index.php weitergeleitet werden, wenn nicht, dann soll einfach nichts passieren -> nur das Fenster schließen.

Aber wie kriege ich das am Besten hin? Ich kenne mich mit JS wirklich so gut wie nicht aus und das Nachlesen auf SelfHTML hat nicht sehr viel geholfen. Könntet ihr mir da mal schnell helfen?

Ich denke mal, da muss man eine Funktion erstellen und die per onClick aufrufen lassen, oder? Aber wie muss die aussehen? Wie gesagt, kenne mich kaum aus.



3. Problem - Wechseln zwischen Einträgen:
Das dritte und vorerst letzte Problem habe ich mit dem Wechsel zwischen den Einträgen. Wenn man zwischen den Beiträgen wechselt und vorher nicht speichert, gehen geänderte Informationen verloren. Ich möchte daran nichts ändern, würde aber auch hier gern eine Abfrage per JS einbinden.

Also ich habe die verschiedenen Variablen aus der Session (die für das Formular verwendet werden). Nun möchte ich, wenn jemand auf den "rechts" oder "links" Button klickt, überprüfen, ob dort etwas verändert wurde. Falls etwas verändert wurde, soll ein Feld kommen, was fragt, ob man wirklich ohne zu Speichern zum nächsten Eintrag wechseln möchte. Wenn ja, dann soll es weiterleiten, wenn nicht, dann soll nichts gemacht werden.


Ich hoffe, ihr könnt mir helfen!

-Flori-

 

[strolch00]

zu deinem 2. Problem

hier ein lösungsansatz

function DeleteButton(link,id)
{
    check = window.confirm('Sicher das dieser Button mit der ID '+id+' gelöscht werden soll???');
    if(check == true)
    {
        location.href = link;
    }
    else
    {
        return false;
    }
}

aufrufen der funktion im link per onClick="" und die Werte der funktion übergeben fertig

bzw kannst du auch

<a href="javascript:DeleteButton(link,zweite vars)">weiter</a>

machen

 

[evident]

Gut, Problem 2 habe ich gelöst! Nun sind nur noch 1 und 3 übrig!

Ich habe die neue Version hochgeladen, damit man sehen kann, was draus geworden ist. Werde jetzt wohl noch einbauen, dass das Feld nicht kommt, wenn man schon auf der index.php ist. Aber das kriege ich so hin!

Hat einer von euch einen Vorschlag, wie ich das erste Problem lösen könnte?
Es wäre echt nett, wenn ihr mir da helfen könntet, denn es ist mir wichtig, das irgendwie praktisch zu lösen!

-Flori-

 

[tleilax]

Beim 1. wirst Du mit <input type="text" onchange="showImage(this.value);"/> und der passenden Funktion was erreichen können. Die Funktion könnte so aussehen:

function showImage(uri) {
  document.getElementById("previewImage").src = uri;
}

Dafür muss natürlich das <img/> schon auf der Seite vorhanden sein. Für das optionale "Nix vorhanden"-Image würde ich das Ganze in einen Div packen, dem den "Nix vorhanden"-Hintergrund geben und sobald 'n Input da ist, halt das Image drüberlegen und anzeigen lassen.

Beim 3. müsstest Du pro Seite/Reload/Refresh eine Variable changed auf false setzen und bei jeglicher Änderung eben auf true switchen. (Hoffe, Du hast Funktionen für alles verwendet. *g*)
Sobald die Seite dann verlassen/refresht wird und noch nicht gespeichert ist, muss dann die Abfrage kommen.

if (changed) {
  var confirmation = confirm("Wirklich?");
  if (confirmation) {
    doIt();
  } else {
    stayRightHere();
  }
}

Hope that helps...

 

[strolch00]

zu pkt. 3 kann er doch auch die values mit den session´s vergleichen oder

ich kann es leider net genau sagen hab die seite net angeschaut aber müsste doch funzten oder net teilax dann kann er sich das "changed" setzten sparen

 

[evident]

zu pkt. 3 kann er doch auch die values mit den session´s vergleichen oder

ich kann es leider net genau sagen hab die seite net angeschaut aber müsste doch funzten oder net teilax dann kann er sich das "changed" setzten sparen

So hatte ich es eigentlich auch vor. Ich habe in der Session ja die einzelnen Werte gespeichert...

Also ich denke jetzt ich müsste es so machen:

beim Klick zum Wechseln eine Funktion in JS starten.

Dort wird dann verglichen, ob der Session-Wert (also der ursprüngliche Wert) dem jetzigen im input-Feld entspricht, oder?

Wie mache ich das dann? Wie kann ich mit JS auslesen, was gerade im Feld steht?

this.value geht da ja nicht, oder?
Wie kriege ich z.B. den value des input-Felds mit nem Namen "name"?

Jedenfalls lasse ich dann vergleichen, ob der jetzige Wert gleich dem Session-Wert ist. Wenn nicht, kommt das confirm()...

Sehe ich das richtig?


@Tleilax:
Zu deinem Ansatz zu Problem 1:
Was, wenn ein ungültiger Link eingetragen wurde? Wird es dann trotzdem angezeigt, oder sieht man nur das Hintergrundbild?

-Flori-

 

[tleilax]

Für Problem 1 mal 'nen Ansatz:

<script type="text/javascript">
function loadImage(uri, id) {
  var img = new Image;
  img.onload = function() { document.getElementById(id).src = uri; };
  img.onerror = function() { document.getElementById(id).src = 'no-preview.gif'; };
  img.src = uri;
}
</script>
<input type="text" onchange="loadImage(this.value, 'picture');"/><br/>
<hr/>
<img src="" id="picture"/>

 

[strolch00]

@evident

das wird aber sehr komplex bei vielen inputs

wie gesagt ich kenne das ding net habs net angesehen weil ich kein js aktiviert habe

aber normal

onClick="funktion(vars1,vars2,vars3...)

und dann in der funktion

if(document.getElementById('name').value != vars1)
window.confirm.......

und das für dedes input

das ganze so verschatelt wie meine register.php die du kennst

if()
{
  if()
  {
     if()
     {
       dann dein wechsel auf ne andere seite 
     }
      else window confirm 
.....

so kannst dem user sogar mitteilen welches feld er gewechselt hat und er kann ntscheiden ob es sinnlos ist oder nicht

bzw sieht er dann nur das erste abgefragte fenster

wenn du es ihm genau mitteilen willst dann lasse das verschateln und speichere inner vars deine felder die geändert wurden und mache unter alles if dann

if(vars = false)
window.confirm

hoffe du verstehst wie ich das meine

 

[evident]

Gut, dass hilft mir sehr. Ich denke mal, ich kriege das jetzt so hin.

Für das erste Problem habe ich nun auch eine Lösung gefunden.

Klappt alles richtig gut.

Habe erste ein div genommen, welches als Hintergrund das no_preview.gif hat.
Darüber dann noch ein div, welches den Wert aus der Session drin hat.
Und darüber das Bild, welches sich ändert, wenn was anderes eingeben wurde bzw. bei einem Error das no_preview.gif anzeigt. Klappt alles super! Jetzt wird, wenn das erste Bild, das geladen werden soll, falls eins vorhanden ist, ja wenn es nicht geladen werden kann, als durchsichtig angezeigt, und das no_preview vom ersten div wird angezeigt. Dort könnte ich auch noch ein anderes Bild reinsetzen, so in etwa: "Kann Vorschau nicht laden".

Für das dritte Problem finde ich jetzt auch noch eine Lösung

Aber danke schonmal!

-Flori-


edit1:
Gut, ich habe es jetzt so hingekriegt, wie ich wollte! Es funktioniert alles! Ich lade gleich nochmal die neue Version hoch!

Danke an alle!

-Flori-


edit2:
Gut, ich habe nun alles hochgeladen. Sagt mir bitte, falls es nicht funktionieren sollte!



-Flori-

 

[veers]

Noch so als Tip, für das Arbeiten mit Ajax kann ich dir die prototype JavaScript Library empfehlen:
https://prototype.conio.net/

 

[evident]

Ok ich werde mir dieses Prototype mal ansehen!

Sorry für den Triplepost und danke fürs Ändern! Es hat sich beim Posten einfach so ergeben, dass es am Ende 3 Stück waren.

-Flori-