Microsoft переводчик AJAX API, выпадающий, чтобы изменить язык на язык и с? - PullRequest
Новая
       11

Microsoft переводчик AJAX API, выпадающий, чтобы изменить язык на язык и с?

2 голосов
/ 06 ноября 2011

Я пытаюсь написать переводчик для моего сайта.До сих пор я смог получить рабочий код из учебника: 

<input id="ori" type="text" />
<button onclick="translate();">Translate</button>
<div id="trans"></div>

<script>
var languageFrom = "en";
var languageTo = "fr";

function translate() {
document.getElementById('trans').innerHTML="Translating... please wait";
var text= document.getElementById('ori').value;
window.mycallback = function(response) {
document.getElementById('trans').innerHTML=response;
}

var s = document.createElement("script");
s.src = "http://api.microsofttranslator.com/V2/Ajax.svc/Translate?oncomplete=mycallback&appId=<MY-APP-ID>&from=" + languageFrom + "&to=" + languageTo + "&text=" + text;
document.getElementsByTagName("head")[0].appendChild(s);
}
</script>

(Сценарий отсюда: http://wizardsoweb.com/microsoftbing-translator-ajax-example/2011/05/?wpmp_switcher=desktop)

По сути, как только я заполнил свой APPID, онпереведет текст в текстовом поле ori на французский. Конечно, все это работает нормально, но вот что я пытаюсь сделать:

Я хочу, чтобы было два выпадающих меню.заполните переменную languageFrom указанным языком и другое раскрывающееся меню, в котором переменная languageTo заполнится указанным языком.

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

http://jsfiddle.net/charlescarver/hk2bJ/1/

(я включил свой ключ API, чтобы с ним было легче работать)

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

Я думаю, что это можно исправить, вызывая скрипт при нажатии кнопки, а не при загрузке страницы.Как это можно сделать?Поддержка Microsoft плохо документирована, и я не могу найти решение там или в Google.Вот ссылка на документацию API: http://msdn.microsoft.com/en-us/library/ff512385.aspx

1 Ответ

2 голосов
/ 08 ноября 2011

Вы пытаетесь прикрепить обработчики событий к объектам (выберите1 и выберите 2) , которые по существу еще не существуют (глядя на ваш пример jsfiddle) - что разбивает остальныевашего сценария, поскольку вы на самом деле ничего не можете прикрепить.

Так что вам нужно сделать что-то вроде этого (не самое большое из соглашений, но оно демонстрирует смысл) 

window.onload = function()
{
    document.getElementById("select1").onchange = function() {
        languageFrom = this.value;
    }
    document.getElementById("select2").onchange = function() {
        languageTo = this.value;
    }
}

(что означает, что вы будете прикреплять события только после того, как все будет загружено и доступно)

Что-то, что вы также можете сделать встроенным в свои HTML-элементы, как показано ниже: 

From: <select id="select1" onchange="languageFrom=this.value">
<option value="en">En</option>
<option value="fr">Fr</option>
</select>

To: <select id="select2" onchange="languageTo=this.value">
<option value="en">En</option>
<option value="fr">Fr</option>
</select>

Или, в качестве альтернативы, сделайте все внутри вашей функции перевода (что означает, что вам не нужно ничего привязывать к выпадающим спискам или определять глобальные переменные) 

function translate() {
    document.getElementById('trans').innerHTML="";
    var text= document.getElementById('ori').value;
    window.mycallback = function(response) {
    document.getElementById('trans').innerHTML=response;
    }

    var languageFrom = document.getElementById("select1").value;
    var languageTo = document.getElementById("select2").value;
    var s = document.createElement("script");
    s.src = "http://api.microsofttranslator.com/V2/Ajax.svc/Translate?oncomplete=mycallback&appId=8B841CA7C1A03443682C52AD07B7775A7BD5B3AA&from=" + languageFrom + "&to=" + languageTo + "&text=" + text;
    document.getElementsByTagName("head")[0].appendChild(s);
}
...