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

Popular posts from this blog

magento2 - Magento 2 admin grid add filter to collection -

Android volley - avoid multiple requests of the same kind to the server? -

Combining PHP Registration and Login into one class with multiple functions in one PHP file -