Проблема с JQuery .append

Question

У меня есть этот HTML:

<div class="expand"> 
<div class="title" id="SectionTitle2">Academics</div> 
<input type="button" onclick="showTitleForm('2');" name="editTitle2" value="Edit Title"> 
<form id="titleForm2" method="POST" onsubmit="processTitle('titleForm2')" > 
    <div id="SectionTitle2-group" class="form-group"> 
     <input type="text" name="SectionTitle" /> 
    </div> 
    <div id="SectionID2-group" class="form-group"> 
     <input type="hidden" name="SectionID" value="2" /> 
    </div> 
    <input type="submit" value="Save" /> 
</form> 

Это мой JavaScript:

function processTitle(formID) { 

    $('.form-group').removeClass('has-error'); 

    var formData = { 
     'SectionTitle' : $('input[name=SectionTitle]').val(), 
     'SectionID'   : $('input[name=SectionID]').val() 
    }; 

    var id = formData['SectionID']; 
    var eg = formID; 


    // process the form 
    $.ajax({ 
     type      : 'POST', 
     url       : 'editTitle.php', 
     data      : formData, 
     dataType    : 'json', 
     encode     : true 
    }).done(function(data) { // using the done promise callback 
     // log data to the console 
     console.log(data); 

     // handle errors and validation messages 
     if (data.success === false) { 
      $('SectionTitle'+id+'-group').addClass('has-error'); // use CSS to make red input 
      $(eg).append('<div class="help-block">' 
               + data.errors.SectionTitle 
               + '</div>' 
               ); 
      $('SectionID'+id+'-group').addClass('has-error'); 
      $(eg).append('<div class="error-block">' 
               + data.errors.SectionID 
               + '</div>' 
               ); 
     } else { 
      $(eg).append('<div class="alert alert-success">Success!</div>'); 
      document.getElementById('SectionTitle'+id).innerHTML = formData['SectionTitle']; 
      hideAllForms(); 
     }  
    }); 

    event.preventDefault(); 
    return false; 

} 

Когда я нажимаю "сохранить", изменения названия, PHP работает точно, ошибок нет в консоли, но нет дополнительного div в конце моей формы. Любые подсказки?

спасибо.

Answer 1

Ваша переменная eg устанавливается в titleForm2 при вызове функции processTitle(), которая приведет к

$('titleForm2').append('<div class="alert alert-success">Success!</div>');

позже в вашем коде. Вы должны изменить его

var eg = '#' + formID; 

для того, чтобы получить

$('#titleForm2').append(...); 

, который в конечном счете добавить новый DIV в форме с id из #titleForm2

Answer 2

Вам нужно добавить символ фунта в свой селектор.

var eg = '#' + formID; 

Answer 3

var eg = formID; 

Здесь вы передаете formID в качестве аргумента функции processTitle.

В $(eg) вы забыли добавить # спереди.

должно быть $("#"+eg)

еще он должен быть:

var eg = "#"+formID; 

Answer 4

Я хотел бы предложить вам просто передать в сам элемент формы как this.

<form id="titleForm2" method="POST" onsubmit="processTitle(this)" > 

Тогда в JS

function processTitle(form){ 
    var $form = $(form);// more understandable variable name than `eg` 
    .... 
    $form.find('.form-group').removeClass('has-error'); 
    .... 

    /* processing code then */ 
    $form.append("....."); 

}