лучший дизайн для Ajax заменить div другим div

Question

Я новичок в Ajax. У меня есть шаблон, который имеет «имя» и кнопку. Когда нажата кнопка, имя и кнопка будут заменены на некоторые сообщения. Мой код работает отлично. Ajax:

$('#fulfillButton').bind('click',function() { 
     $.ajax({ 
      type : "GET", 
      contentType : "application/json; charset=utf-8", 
      url : "/order/${orderID}", 
      dataType : "json", 
      cache: false, 
      timeout: 12000, 

      success: function (data) { 
        alert("success"); 
      }, 

      error: function (data,textStatus) { 
       if(textStatus == "timeout") 
       { 
        $('#main-panel').replaceWith('<div class="error-message">' + "Timeout, please clcik the button beblow to scan again!" + '</div>'); 
       } 
       else 
       { 
        var responseText = data.responseText; 
        var jsonErrorMessage = JSON.parse(responseText); 
        $('#main-panel').replaceWith('<div class="error-message">' + jsonErrorMessage["body"] + '</div>'); 
       } 
      }, 
     }); 

Html:

 <div id="main-panel"> 
     <div class="full-name"> 
      ${name} 
     </div> 
     <div id 
     <button id="fulfillButton" type="button" class="action-button shadow animate fulfill-button-color"> 
      FulFill 
     </button> 
    </div> 
    <button id="goBackButton" type="button" class="go-back-button"> 
     Go Back 
    </button> 

Но теперь я в поисках лучшей конструкции. Как вы можете видеть

$('#main-panel').replaceWith('<div class="error-message">' + jsonErrorMessage["body"] + '</div>'); 

Но я хочу, чтобы избежать пересыпая просмотр элементы с логикой (не ставить Диво щество здесь). Я хочу поместить DIV в HTML или использовать существующий DIV с стилем «error_message», применяемым в JS? Если да, то как я мог написать код?

Answer 1

Почему вы не добавить сообщения об ошибке дивы в вашем HTML (внутри main-panel, дать им идентификаторы, позволяет сказать Error1, Error2), как скрытые <div class="error-message" id="someID' hidden>...</div>, а затем, когда вы получите сообщение об ошибке, вместо replace просто позвоните

error: function (data,textStatus) { 
    $('#main-panel').find('*').not('.error-message').remove();//Remove everything except from the error-message divs 
    if(textStatus == "timeout") 
    { 
     $('#error1').html('Timeout, please clcik the button beblow to scan again!'); 
     $('#error1').show(); 
    } 
    else 
    { 
     var responseText = data.responseText; 
     var jsonErrorMessage = JSON.parse(responseText); 
     $('#error2').html(jsonErrorMessage["body"]); 
     $('#error2').show(); 
    } 
}, 

Answer 2

Вы можете иметь много решений. Я даю вам два:

Первое решение (см. Javascript) полезно для мелочей (например, вашего сообщения об ошибке).

Во-вторых, это хорошо для лаггера, например, при создании формы динамически. Это называется шаблоном.

// Solution 1 
 

 
$('#fulfillButton').bind('click',function() { 
 
    $('#main-panel').replaceWith($('<div />').addClass('error-message').html('Some content here. This is added by dynamically creating the div, adding error message class and adding content'));  
 
}); 
 

 
// Solution 2 
 
$('#fulfillButton2').bind('click',function() { 
 
    $('#main-panel').replaceWith($("#error-message-template").clone().removeClass('hidden').html('Some content here 2. This is added by cloning an existing hidden div, removing the hidden class and replacing the content.'));  
 
});

.error-message{ 
 
    border: 1px solid #f00; 
 
} 
 

 
#main-panel{ 
 
    border: 1px solid #cccccc; 
 
} 
 

 
.hidden 
 
{ 
 
    display: none 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="main-panel"> 
 
     <div class="full-name"> 
 
      ${name} 
 
     </div> 
 
     
 
     <button id="fulfillButton" type="button" class="action-button shadow animate fulfill-button-color"> 
 
      
 
      FulFill 
 
     </button> 
 
    <button id="fulfillButton2" type="button" class="action-button shadow animate fulfill-button-color"> 
 
    Fulfill 2 
 
    </button> 
 
    </div> 
 
    <button id="goBackButton" type="button" class="go-back-button"> 
 
     Go Back 
 
    </button> 
 

 
<div id="error-message-template" class="error-message hidden"> 
 
</div>