jQuery / PHP и многоязычные окна подтверждения / оповещения - PullRequest
Новая
       22

jQuery / PHP и многоязычные окна подтверждения / оповещения

0 голосов
/ 07 августа 2009

Как раз, когда я собирался опубликовать этот вопрос, я придумал простое решение своего рода решение.

Проблема заключалась в том, что мне требовались подтверждающие сообщения на нескольких языках, в зависимости от выбранного пользователем языка. Так как я всегда получаю определенную информацию из HTML, я пытался сделать это таким образом, но застрял вокруг этого пункта:

Вот простая кнопка удаления для пользователя, использующая атрибут title с правильным сообщением (в данном примере это просто текст; в коде это переменная, содержащая правильный перевод): 

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

А затем я извлекаю эту строку с помощью jQuery и отображаю ее в окне подтверждения, например: 

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

Однако это все равно будет означать, что элемент ввода имеет заголовок, который отображается при наведении мыши, что мне не нравится. Удалить его на самом деле не вариант, потому что отмена поля подтверждения и повторное нажатие кнопки приведет к пустому сообщению.

В любом случае, весь этот подход просто не работал для меня, чтобы получить простую строку текста. Затем я подумал о $ .get () & mdash; и я не знаю, почему я не подумал об этом раньше, потому что я использую это все время в других сценариях.

Так что я думаю, что это в целом довольно хорошее решение для прямого ввода правильных текстов в JavaScript без необходимости работать с HTML и считывать заголовки или другие атрибуты. 


$("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...
});


ОБНОВЛЕНИЕ
Хорошо, теперь я снова превращаю это в вопрос о последней части скрипта jQuery. Похоже, что $.get() нужно время, чтобы получить информацию. Вероятно, это совсем немного времени, но это немного, и в то же время, форма уже отправляется. return false внизу решает это частично, потому что это первое, что возвращается. Но затем, когда следует return confirm, нажатие OK ничего не изменит, поскольку return false уже остановило действие кнопки по умолчанию.

Итак ... мой вопрос: есть ли способ получить текст, используя $.get(), и таким образом, что отправка формы ожидает, пока не загрузится return confirm?

Ответы [ 2 ]

1 голос
/ 18 августа 2009

То, что я хотел бы предложить, это то, что поначалу стоило бы вам немного больше времени, но я считаю, что долгосрочная выгода принесет вам пользу.

У меня есть проект, который также настроен на многоязычность, поэтому одним из первых действий, которые я делаю на странице, является загрузка текста, который мне понадобится для этой страницы.

Я сохраняю свой текст в простом XML-файле (сейчас у меня действительно не так много текста, но вы, очевидно, можете сделать это в базе данных, TXT-файле, что хотите), а затем просто загружаю его $.ajax (с async, установленным на false, чтобы вы знали, что весь текст загружен, прежде чем пытаться его вызвать) сразу. Я настроил это как мой language объект, который принимает код языка в качестве параметра. Поэтому, позвонив language = new language('en-us'); в начале своей страницы, я могу легко получить любой текст, не зависящий от языка, когда мне это понадобится. Например, если вы применили это к своему проекту, это было бы так просто: 

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

Редактировать : Я также хотел бы сказать, что это хорошо работает и с PHP, поскольку вы можете читать один и тот же XML-файл из PHP и jQuery, тем самым сохраняя весь ваш текст в одном централизованном месте.

Если вам не нравится этот подход, я бы указал на два других подхода HTML, похожих на те, которые вы пробовали. Первый - просто использовать поле input[type=hidden]. Таким образом, у вас не будет эффекта наведения мыши, который вам не нравится. Тогда вы можете просто сделать что-то вроде этого: 

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

Однако я думаю, что это довольно грубо, если честно, и не очень семантически. Другой вариант - использовать атрибут data-, но он открыт только для вас, если вы используете HTML5 (что вы можете легко сделать - просто измените ваш тип документа). Это будет работать так: 

<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'));
});

Из всех этих вариантов я определенно считаю, что первый - лучший, поскольку вас интересуют лучшие практики и семантика. Попытка хранить случайные данные в нерелевантных атрибутах HTML или скрытых полях просто не кажется мне очень семантической. Надеюсь, это поможет!

0 голосов
/ 07 августа 2009

Я думаю, что ваше решение может использовать немного больше настроек. Делая это таким образом, вы создаете (возможно) много запросов ajax, которые на самом деле не нужны.

Вы можете просто использовать атрибут rel: 

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

А потом 

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

Еще лучше, вы можете сохранить ключ в атрибуте rel, например rel='confirmation.delete'. И тогда есть переводчик, такой как: 

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;
}

Использование: 

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')) );
});
...