Ajaxのより良いデザインはdivを別のdivに置き換えます

Question

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を配置しないでください）を散在させることを避けたいと思います。私はDIVをHTMLに入れたいのですが、JSで "error_message"スタイルを適用して既存のDIVを使うことはできますか？もしそうなら、私は実際にコードを書くことができますか？ 隠さ<div class="error-message" id="someID' hidden>...</div>として

Answer 1

は、なぜあなたはエラー・メッセージがあなたのhtmlでdivを追加しません（彼らにいくつかのIDを与え、main-panel内、ERROR1、ERROR2を言うことができます）、その後、あなたがエラーを取得する代わりに、 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

あなたは多くの解決策があります。私はあなたに2つを与えます：

最初の解決策（javascriptを参照）は小さなもの（エラーメッセージなど）には適しています。

第2は、フォームを動的に作成するなど、遅れをとる場合に適しています。これはテンプレート作成と呼ばれます。

// 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>