更好的Ajax設計替換div與另一個div

我是Ajax新手。我有一個具有「名稱」和一個按鈕的模板。當按鈕被點擊時，名稱和按鈕將被替換爲一些消息。我的代碼完美地工作。阿賈克斯：更好的Ajax設計替換div與另一個div

$('#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？如果是這樣，我怎麼能真正寫代碼？

來源

2016-07-28 user3369592

你爲什麼不加在你的HTML錯誤消息的div（內main-panel，給他們一些IDS，可以說ERROR1，誤差2）作爲隱藏<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(); 
    } 
},

來源

2016-07-28 14:05:37

我更新我的回答給定函數按照我的建議改變。 –

我真的可以刪除整個'＃主面板'併爲錯誤消息創建一個新的div（隱藏）嗎？ – user3369592

當然，你可以在'＃main-panel'之外添加隱藏的div。然後，當一個錯誤發生時調用'$（'＃main-panel'）。remove（）; $（'＃error1'）。show（）;'這是你想要的嗎？ –

您可以有多種解決方案。我給你兩個：

第一個解決方案（請參閱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>

來源

2016-07-28 14:13:15 beerwin

更好的Ajax設計替換div與另一個div

回答

相關問題