Schlagwort: javascript

jQuery – Seitennavigation abbrechen

Fast jedes Programm weißt den Benutzer darauf hin, wenn es ungespeicherte Änderungen gibt, sobald man das Programm verlassen will.
Im Browser gibt es sowas standardmäßig nicht, aber dank JavaScript ist das kein Problem. Und mit jQuery wird die ganze Sache sogar noch einfacher.

Und zwar kann man sich an das „beforeUnload“-Event hängen. Hier wird der zu erscheinene Text hinterlegt. Weiteren Einfluss auf die Gestaltungsmöglichkeit hat man nicht, dies hängt vom Browser ab.

$("form").one("change", ":input", function() {
    // einen Hinweis anzeigen (wer es möchte)
    $('#saveInfo').show();

    // Bevor die Seite verlassen wird, wird der folgende Text angezeigt.
    $(window).on('beforeunload', function (e) {
            return "Es gibt ungespeicherte Änderungen.";
    });

    // Verhindern, dass ein Submit-Button (also z.B. "Speichern") auch den Hinweis hervorruft.
    $(this).parents("form:first").find(":submit").click(function() { $(window).off("beforeunload"); });
});

In dem Beispiel überwache ich alle Eingabefelder („:input„) innerhalb meiner Form. Sobald ein Feld geändert wird das „beforeunload“-Event scharf gemacht. Achtet auch auf die letzte Zeile, sollte ich über einen Submit-Button kommen („:submit„), wird das Event wieder aufgehoben. Schließlich will ich ja beim Klick auf „Speichern“ nicht den Hinweis bekommen.

Webseite in diversen Versionen testen

Vor einigen Tagen wollte ich eine Webseite in einer älteren Version vom IE testen. Dies stellte sich allerdings schwieriger raus als gedacht. Auf meinem Rechner (dienstlich) läuft Windows Server 2003 mit dem Internet Explorer 8, testen musste ich die Seite aber im IE7. Nun hat man folgende Optionen zur Auswahl:

BrowserShots und ähnliches:
Diese Seiten haben den Vorteil, eine Vielzahl an Browsern in den unterschiedlichsten Versionen abzudecken. Sind nur leider vorrangig für visuelle Tests gedacht. Da es in meinem Test rein um JavaScriptfunktionalität ging, war es leider ungeeignet. Da man zudem nur eine URL angeben kann, schied diese Option auch aus, da die Testversion der Seite nur auf meinem lokalen Rechner lief.

Internet Explorer 7 Standalone installieren:
Es gibt im Netz einige Installer, die einen vollwerten Internet Explorer 7 auf dem Rechner versprechen. Meine Erfahrungen waren leider nicht so gut, mal abgesehen, dass „meine“ Version nur Fehlermeldungen verursacht hat, sie hat auch dafür gesorgt, dass ich meine Favoriten nicht mehr im 8er Client öffnen konnte. Erst eine Deinstallation des 7er Clients, die Deinstallation des 8er Clients sowie anschließende Neuinstallation des 8er Clients haben mein System wieder in den Ursprungszustand versetzt. Absolut nicht akzeptabel.

Virtuelle Maschinen:
Microsoft bietet bereits fertig konfigurierte virtuelle Maschinen, diverse Windows Version mit unterschiedlichen Versionen des Internet Explorers. Die Windows Versionen sind nur eine begrenzte Zeit lauffähig, daher ist keine Lizenz notwendig.

IETester
Ein kleines aber feines Programm. Es simuliert alle IE Versionen seit der Version 5.5. Sogar die aktuelle 10er Preview (sofern man es installiert hat).

Für mich hat sich das letzte Tool bewährt, zumindest für meine kleinen Funktionstests, ob ich separate Fallbacks für Javascript-Funktionen benötige.

(ich bezog mich nur auf den IE, da man sonst eigentlich alle Browser separat installieren kann, der IE ist dafür allerdings zu stark im System verankert, gerade bei Windows 2003)

Palm Pre

Ich habe mir vor ein paar Tagen habe ich mir ein Palm Pre bestellt. Das ist echt ein nettes Smartphone. Aktuell schau ich mir die SDK sowie das Webtool Ares an. Mit diesen ist es möglich, eigene Anwendungen zu entwickeln.
Das Palm Pre selbst basiert auf WebOS und es ist möglich, seine Anwendungen mithilfe von HTML5, CSS und Javascript zu entwickeln.
Die erste „Hello World“ App habe ich auch schon entwickelt, nun sehe ich mal weiter 🙂
Mir fehlen immer ein wenig die Ideen, wenn ich ehrlich bin.

HowTo: Bilder mit CKEditor und ASP.NET MVC hochladen

Ich hatte gerade das Problem, dass ich mit dem WYSIWYG-Editor CKEditor Bilder hoch laden möchte, um sie direkt in meinen Text einzupflegen.
Dazu wird irgendwo im View der Editor definiert:

  <script type="text/javascript">
      window.onload = function() {
          CKEDITOR.replace('ckEditor', {
            skin: 'office2003',            
            filebrowserUploadUrl: '<%=Url.Action("UploadImage") %>'
      });
  };
  
</script>

Wichtig ist hier der Parameter „filebrowserUploadUrl“. Dies ist der Pfad, wohin das Bild beim Upload gesendet wird.
Im Controller wird das ganze nun verarbeitet:

        [AcceptVerbs(HttpVerbs.Post)]
        public string UploadImage()
        {
            // Datei speichern
            var identifier = Guid.NewGuid();
            string[] fileExt = Request.Files[0].FileName.Split('.');
            string safeFile = identifier + "." + fileExt[fileExt.Length - 1];
            Request.Files[0].SaveAs(Path.Combine(HostingEnvironment.MapPath("~/UploadedImages/"), safeFile));
            
            // Daten an CKEditor zurück geben
            string result = "<script type=\"text/javascript\">";
            result += "window.parent.CKEDITOR.tools.callFunction(" + Request.QueryString["CKEditorFuncNum"] + ", \"" +
                      Path.Combine(Url.Content("~/UploadedImages/"), safeFile) + "\",\"\");</script>";
            return result;
        }

Erst speicher ich das Bild irgendwo und gebe dann den Pfad per Javascript zurück. Da ich nur das JS ausführen lassen muss, gebe ich kein komplettes View zurück. Die Url wird dann korrekt an CKEditor übergeben (siehe Screenshots). Der letzte Parameter des callFunction()-Aufrufes kann für Fehlermeldungen genutzt werden, Bild zu groß o.ä.
Mich hat dieser kleine Aufruf bestimmt eine Stunde gekostet!

CKEditor - Datei auswählen, Hochladen CKEditor - Datei hochgeladen und Pfad übergeben

Nützlich: wwwsqldesigner

Heute mal ein kleines, aber feines Tool. Ich brauchte etwas, um meine SQL Datenbank zu designen. Damit man auch alle Beziehungen schön im Überblick hat.
Da bin ich auf wwwsqldesigner gestoßen. Läuft sofort und ohne Installation. Das ganze basiert auf JavaScript.
Wer das Ding auf nen PHP fähigen Server schiebt, kann seine Datenbank-Designs auch in einer Datenbank speichern. Ansonsten kann man sich entweder den MSSQL / MySQL Befehl ausgeben lassen, um die Datenbank wie gewünscht zu erstellen oder aber den XML Code, mit dem das Design später wieder geladen und bearbeitet werden kann.

Sehr schönes Tool, läuft aber nicht im IE 8!