2014-01-14 3 views
1

Прежде всего: Я относительно новым для JQuery, поэтому, пожалуйста, быть нежным;)Jquery не обновляет TEXTAREA

То, что я пытаюсь достичь: У меня есть сервер Java (бэкэнд), который делает текст синтаксический анализ и предлагает API-интерфейс REST. С другой стороны (передняя часть) у меня есть HTML-файл с формой и несколькими строками кода jQuery.

<html> 
<body> 
    <form id="form"> 
    <table> 
     <thead> 
     <tr> 
     <th>Code</th> 
     <th>&nbsp;</th> 
     <th>Code</th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr> 
     <td><textarea id="input" name="input" cols="100" rows="50" type="text" placeholder="Input your code here..."></textarea></td> 
     <td> 
      <button id="btnTranslate" type="submit">Translate -&gt;</button> 
     </td> 
     <td><textarea id="output" name="output" cols="100" rows="50" type="text" placeholder=" "></textarea></td> 
     </tr> 
     </tbody> 
    </table> 
    </form> 

<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script> 
<script type="text/javascript"> 
    $('#btnTranslate').click(function() { 
     var valueOfTextArea = $('textarea#input').val(); 
     $.post("/parse", $('textarea#input').val(), 
       function (data) { 
        alert("Data Loaded: " + data); 
        $('#output').val("" + data); 
        $('#input').val(valueOfTextArea); 
       } 
    ); 
    }); 
</script> 
</body> 
</html> 

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

Я искал Google много и пробовал почти все предложения на этом сайте. Пока не повезло.

Что мне не хватает? Что я делаю не так?

+1

Это странно. Я бы предложил вам открыть консоль javascript и запустить две команды с соответствующим значением. Работает ли предупреждение? –

ответ

0
  1. Что вы имеете в виду, говоря «в прокручиваемых никогда не обновляются правильно»?
  2. У вас нет ошибок в консоли?
  3. Убедитесь, что вы используете сценарий на сервере, потому что ваш браузер может блокировать запросы.
  4. Попробуйте добавить методы резервного копирования. Начните с чего-то вроде этого:

    valueToSend = $("#input").val(); 
    var request = $.post("/parse", valueToSend, function() { 
        alert("success"); 
    }) 
        .done(function() { 
        alert("second success"); 
        }) 
        .fail(function() { 
        alert("error"); 
        }) 
        .always(function() { 
        alert("finished"); 
    }); 
    
+0

Спасибо, это было действительно полезно. Таким образом, я узнал, что Chrome терпит неудачу с ошибкой, тогда как IE этого не делает. – Zasch

+0

Удивительный, рад, что я мог бы помочь. Какую ошибку вы испытываете с Chrome? – chuckfinley

+1

Просто предупреждение «ошибка», но это привело меня к чему-то еще, с чем я мог бы работать. Я отвечу на вопрос с помощью решения, как только мне позволено это сделать. – Zasch

1

Возможным решением, как я узнал в loooooong сессии отладки с одним из моих коллег, это:

$('#btnTranslate').click(function (event) { 
     var valueOfTextArea = $('textarea#input').val(); 
     event.preventDefault(); 
     $.post("/parse", valueOfTextArea, function (data) { 
      $('#output').val(data); 
      $('#input').val(valueOfTextArea); 
     }); 
    }); 

Так что вам нужно, чтобы предотвратить дефолт click-action, так как он вызывает «статус 0» в XMLHttpRequest. Я все еще не получаю всю картину, но, по крайней мере, она работает сейчас.

Благодарим вас за ввод.

Смежные вопросы