javascript - better design for Ajax replace div with another div -
i new ajax. have template has "name" , button. wheni button clicked, name , button replaced messages. code works perfectly. 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 button beblow 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 </button>
but looking better design. can see
$('#main-panel').replacewith('<div class="error-message">' + jsonerrormessage["body"] + '</div>');
but want avoid interspersing view elements logic (to not put div tage here). want put div in html or can use existing div "error_message" style applied in js? if so, how write code?
why don't add error-message divs in html (inside main-panel
, give them ids, lets error1, error2) hidden <div class="error-message" id="someid' hidden>...</div>
, when error instead of replace
call
error: function (data,textstatus) { $('#main-panel').find('*').not('.error-message').remove();//remove except error-message divs if(textstatus == "timeout") { $('#error1').html('timeout, please clcik button beblow scan again!'); $('#error1').show(); } else { var responsetext = data.responsetext; var jsonerrormessage = json.parse(responsetext); $('#error2').html(jsonerrormessage["body"]); $('#error2').show(); } },
Comments
Post a Comment