jQuery / PHP und mehrsprachige confirm / Alertbox

Question

Gerade als ich war über diese Frage zu stellen, kam ich mit einer einfachen Lösung Art-of-Lösung.

Das Problem war, dass ich Bestätigungsmeldungen in mehreren Sprachen benötigt wird, durch den Benutzer auf die gewählte Sprache abhängig. Da ich immer bestimmte Informationen aus dem HTML greifen, ich habe versucht, es so zu tun, werden aber um diesen Punkt fest:

Hier sind einfache Löschen-Taste für den Benutzer, ein Titel-Attribut mit der richtigen Nachricht (in diesem Beispiel ist es nur Text, in dem Code, es ist eine Variable, die die korrekte Übersetzung enthält):

<input type="submit" name="delete" value="Delete me" title="Are you sure?" />

Und dann rufe ich diese Zeile mit jQuery und es in dem Bestätigungsfeld angezeigt werden, etwa so:

$("input[type='submit'][name='delete']").click(function() {
  return confirm($(this).attr('title'));
});

Dies würde aber immer noch bedeuten, dass das Eingangselement einen Titel hatte, die mit einem Mouseover sichtbar ist, was Ich mag es nicht. Entfernen es nicht wirklich eine Option war, weil die Box bestätigen Cancelling und die Taste erneut würde, klicken Sie dann in eine leere Nachricht zur Folge haben.

Wie auch immer, dieser ganze Ansatz war einfach nicht für mich arbeiten für eine einfache Textzeile abzurufen. Dann dachte ich an $ .get (.) - und ich weiß nicht, warum ich nicht von dieser früheren dachte, weil ich es die ganze Zeit in anderen Szenarien verwenden

Also ich denke, das ist eine ziemlich gute Lösung für die direkt im Allgemeinen ist es, die richtigen Texte in JavaScript bekommen, ohne mit dem HTML beschäftigen und Titel oder andere Attribute ausliest.

$("input[type='submit'][name='delete']").click(function() {
    $.get('something.php', {
            action: 'getText',
            variable: 'confirm_delete'
        }, function(text) {
            return confirm(text); // doesn't return instantly...
      });
    return false; // breaks the form action...
});

UPDATE
Ok, jetzt diese in eine Frage, die ich zurückdrehen um den letzten Teil des jQuery-Skript. Es scheint, dass $.get() einige Zeit braucht die Informationen abzurufen. Es ist propably nicht viel Zeit überhaupt, aber es ist etwas, und in der Zwischenzeit, die Form bereits vorgelegt wird. Die return false am Boden löst dieses Problem teilweise, weil es das erste, was ist, die zurückgegeben werden. Aber dann, wenn die return confirm folgt, OK klicken, wird nicht viel von allem, da return false bereits die Standard-Schaltfläche Aktion gestoppt.

Also .. meine Frage ist: Gibt es eine Möglichkeit, den Text mit $.get(), und in einer solchen Art und Weise abzurufen, dass das Formular Vorlage wartet, bis die return confirm geladen wird

?

Answer 1

Was würde ich vorschlagen, ist etwas, dass Sie ein wenig mehr Zeit zunächst kosten würde, aber langfristig Ich glaube, Sie würden davon profitieren.

Ich habe ein Projekt, das auch mehrsprachig sein eingerichtet ist, so eines der ersten Dinge, die ich auf der Seite zu tun ist, den Text laden, die ich für diese Seite benötigen.

ich mein Text in einer einfachen XML-Datei (ich habe nicht wirklich so viel Text gerade jetzt, aber man konnte es offensichtlich tun in einer Datenbank, txt-Datei, was auch immer Sie möchten), und dann mit ich es einfach laden $.ajax (mit async zu false gesetzt, so dass Sie wissen, dass der Text alle geladen ist, bevor Sie versuchen, es zu nennen) sofort. Ich habe diesen Satz auf, als mein language Objekt, das einen Sprachcode als Parameter annimmt. So durch language = new language('en-us'); am Anfang meiner Seite aufrufe, kann ich einfach jeden sprachunabhängig Text greifen, wenn ich es brauche. Zum Beispiel, wenn Sie diese zu Ihrem Projekt angewandt, wäre es so einfach sein:

$("input[type='submit'][name='delete']").click(function() {
  return confirm(language.text('are_you_sure'));
});

Bearbeiten : Ich würde auch gerne nur sagen, dass dies auch mit PHP funktioniert auch, da Sie die gleiche XML-Datei von PHP und jQuery lesen können, damit alle Ihren Text an einem zentralen Ort zu halten .

Wenn Sie diesen Ansatz nicht mögen, ich möchte darauf hinweisen, zwei andere HTML nähert sich ähnlich denen, die Sie haben versucht. Die erste besteht darin, einfach ein input[type=hidden] Feld. Auf diese Weise werden Sie den Mouseover-Effekt haben, die Sie nicht mögen. Dann könnte man nur so etwas tun:

<input type="hidden" name="confirm_text" value="Are you sure?" />
$("input[type='submit'][name='delete']").click(function() {
  return confirm($('input[name=confirm_text]').val());
});

Aber ich denke, das ist ziemlich roh ist, um ehrlich zu sein, und nicht sehr semantisch. Die andere Option ist ein data- Attribut zu verwenden, aber das ist nur für Sie offen, wenn Sie mit HTML5 (die Sie leicht tun-können Ihre Doctype ändern). Das würde so funktionieren:

<input type="submit" name="delete" value="Delete me" data-confirmtext="Are you sure?" />
$("input[type='submit'][name='delete']").click(function() {
  return confirm($(this).attr('data-confirmtext'));
});

Von all diesen Möglichkeiten, denke ich auf jeden Fall die erste ist die beste, da Sie in Best Practices und Semantik interessiert sind. Zufallsdaten in irrelevante HTML-Attribute oder versteckte Felder nicht zu speichern versuchen, nur nicht so sehr semantische schlagen mich. Hoffe, das hilft!

Answer 2

Ich denke, Ihre Lösung ein wenig mehr Tuning verwenden kann. Doing es auf diese Weise erzeugt (möglich) viele AJAX-Anfragen, die nicht wirklich notwendig sind.

Sie könnten nur das rel-Attribut verwenden:

<input type="submit" name="delete" value="Delete me" rel="Are you sure?" />

Und dann

$("input[type='submit'][name='delete']").click(function() {
  return confirm($(this).attr('rel'));
});

Noch besser wäre es, könnte man einen Schlüssel in dem rel-Attribute speichern wie rel='confirmation.delete'. Und dann hat einen Dolmetscher wie:

var stringLibrary = {
    prompt: {
        foo: "Enter your foo:",
        bar: "How many bars?"
    },
    confirmation: {
        delete: "Are you sure you want to delete that?"
    },
    error: {
        codes: {
            324: "Oh no!",
            789: "Oh yes!"
        }
    }
};

var trans = function(key) {
    var result = stringLibrary;
    key = key.split(".");

    for ( var i in key ) {
        if ( result[ key[i] ] ) {
            result = result[ key[i] ];
        } else {
            return null;
        }
    }

    return result;
}

Verbrauch:

console.log(trans("prompt.foo"));
console.log(trans("confirmation.delete"));
console.log(trans("error.codes.324"));
console.log(trans("i.dont.exist"));

$("input[type='submit'][name='delete']").click(function() {
  return confirm( trans($(this).attr('rel')) );
});