Обновление текстового поля с javascript

Question

У меня возникли проблемы с некоторым javascript и как он может управлять текстовым полем html.

Во-первых, вот что у меня есть; JavaScript:

function UpdateOrder() 
{ 
    // enable/disable appropriate buttons 
    document.getElementById("reset").disabled=false; 
    document.getElementById("add").disabled=false; 
    document.getElementById("submit").disabled=false; 
    document.getElementById("edit").disabled=false; 
    document.getElementById("update").disabled=true; 

    // Show display box, 'DispCurOrder' 
    document.getElementById('all_labels').disabled=true; 
} 

function EditOrder() 
{ 
    // enable/disable appropriate buttons 
    document.getElementById("reset").disabled=true; 
    document.getElementById("add").disabled=true; 
    document.getElementById("submit").disabled=true; 
    document.getElementById("edit").disabled=true; 
    document.getElementById("update").disabled=false; 

    document.getElementById('all_labels').disabled=false; 
} 

Идея проста ... У меня есть некоторые кнопки и входы для создания «линии» текст, который получает сбрасывал в-х инвалидов текстового поля. Если оператор замечает, что они сделали тип-o или что-то захочет что-то изменить, он нажимает «изменить порядок» и отключает все обычные кнопки и включает текстовое поле и кнопку «Обновить». Кнопка «порядок обновления» отменяет это.

Теперь, когда я просто использую строки добавления в текстовое поле, все работает хорошо. Вы можете видеть, что каждая строка добавляется в текстовое поле (есть еще одна функция java, которая выполняет проверку ошибок и т. Д.), Но суть в том, что она занимает содержимое текстового поля, анализирует его на «\ n» на массив, а затем добавляет новую строку текста, то он принимает массив и помещает все это в качестве новой строки и помещает его обратно в текстовом поле Вот та часть, не проверив все ошибки вещей,..

function AppendOrder() 
{ 
    // let's set up an error flag. 
    var AppendError=""; 
    var str1=document.forms["MyForm"].DataEntry1.value; 
    var str2=document.forms["MyForm"].DataEntry2.value; 

    if(/* checking variable str1 for errors */) 
    { 
     AppendError="Error in str 1 here"; 
    } 

    if(/* checking variable str1 for errors */) 
    { 
     AppendError=AppendError+"Error in str 2 here"; 
    } 

    // Display the error message, if there are no errors, it will clear what was there. 
    $('#AppendStatus').html(AppendError); 

    if(AppendError=="") 
    { 
     // it's all good, update the display 
     // create line of text 
     curEntry=str1 + " -- " + str2; 

     // let's get the current order into a list 
     str=document.getElementById('all_data').innerHTML; 

     if(str1=="Empty") 
     { 
      // make curOrder = to 1 element array of curEntry 
      var curOrder=[curEntry]; 
     } 
     else 
     { 
      // parse str1 into an array and parse it to curOrder. 
        // Then push curEntry on the end. 
      var curOrder=str1.split("\n"); 
      curOrder.push(curEntry); 
     } 

     // now we should have an array called 'curOrder[]'. Let's show it 
      // on the web page. 
     $('#all_labels').html(curOrder); 
    } 
} 

Теперь проблема в том, что после добавления строки или двух (или более) на дисплей с помощью кнопки «добавить», а затем перейдите в режим «редактирования» (там, где текстовое поле включено) и Я делаю все свои изменения, кнопка «добавить» не работает.

Странно достаточно, когда я нажимаю кнопку «сброса» (которая является только кнопкой сброса), она показывает все добавления, которые я сделал после редактирования, и отредактированные материалы исчезли.

Теперь ... на вопрос ... есть ли что-то, что я не понимаю в текстовом поле? Есть ли какой-то трюк, который мне нужно сделать, чтобы заставить его работать? Неужели я все это делаю неправильно? Должен ли я использовать другой инструмент для этого, кроме «текстового окна»?

Любая помощь очень ценится !!

Грегло

Answer 1

Обнаружена опечатка в категории your jsFiddle.

Первое, что я сделал, чтобы добавить:

alert('hi there'); 

на самом верху скрипта, внутри $(document).ready() обертки. Обратите внимание, что на jsFiddle вы не можете увидеть обложку document.ready, она невидимо включена, поэтому просто поставьте предупреждение поверх блока javascript, как я сделал (ссылка на мой новый jsFiddle находится внизу ответа)

Далее, я заметил, что вы включаете/выключаете несколько элементов управления, ссылаясь на них индивидуально по идентификатору. Вы можете ссылаться на несколько элементов управления одновременно, если они имеют один класс, поэтому я придумал class="orderentry" и добавил этот атрибут к каждому из этих элементов управления. Это удалило 8 строк кода, что упростило устранение неполадок.

Затем я начал удаление/удаление. Сначала я удалил все в панели javascript, кроме alert('hi there');, и запустил jsFiddle. Появилось предупреждение. Отлично. Поэтому я использовал Ctrl + z, чтобы восстановить все. Затем я выбрал все EXCEPT следующего блока кода и удалил выделение. Я запустил jsFiddle, и снова появилось предупреждение.

Я продолжал удаление/удаление, пока не узнал, где предупреждение перестало работать - и это показало нарушение кода. Просто нужно был тщательно изучить синтаксис в этой конкретной области и обнаружил ошибку:

$('#txtOrder').attr({'disabled':'disabled')}; <== ERROR: note final parentheses 

вместо

$('#txtOrder').attr({'disabled':'disabled'}); <== CORRECT: note final parentheses 

Надеется, что это помогло, удач на остальной часть вашего проекта.

Здесь the corrected jsFiddle

Answer 2

Вы не поделиться HTML, поэтому я сделал предположение о том, что ваша разметка выглядит.

Working jsFiddle here

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

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

В частности, вы можете увидеть, как я сначала отключить управление текстовой:

$('#txtArea').attr({'disabled':'disabled'}); 

Re с поддержкой управления текстовой для редактирования, а также скрывает кнопку Edit и отображая кнопку Сохранить:

$('#txtArea').removeAttr('disabled'); 
$('#btnSave').show(); 
$(this).hide(); 

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

var ord = 'Requested By: ' + $('#txtReq').val() + '\r\n'; 

Скорее всего, вы уже знаете много (большинство?) о том, что я указываю, но я понятия не имею, что вы знаете, опять же, сохраняйте одну или две вещи, которые вы считаете полезными, и игнорируйте остальные. Я только надеюсь, что мне удалось ударить по бит, который у вас был в тупике.

---

Я очень редко рекомендую w3schools ни за что, но look here for their excellent summary/reference of jQuery selectors, events, methods. (Продолжайте пробивать Next Chapter, чтобы просмотреть все страницы этой справки).