javascript - DOM not updating until page is refreshed -

i have asynchronous method calls web api retrieve json data.

i use json data fill in few `' boxes. however, values not appear in text boxes until refresh page?

the html:

<form>     <h1 id="ordernameheader"></h1>      <div class="dataitemdiv">         <p class="dataitemlabel">quantity:</p>         <input id="quantitytb" type="text" readonly="readonly" class="dataitemtextbox" />     </div>      <div class="dataitemdiv">         <p class="dataitemlabel">delivery date:</p>         <input id="deldatetb" type="text" readonly="readonly" class="dataitemtextbox" />     </div> </form>  

the javascript:

function searchorder() {     var ordername = document.getelementbyid("searchtextbox").value;     var frurl = 'order/getbyname/' + ordername;     var api = new getjson(frurl);     var obj;     obj = api.callapi().done(function (data) {         //alert('quantity: '+data.quantity +' & delivery date: ' + data.deliverydate);         var onh = document.getelementbyid("ordernameheader");             onh.title = data.ordername;         document.getelementbyid("quantitytb").value = data.quantity;         document.getelementbyid("deldatetb").value = data.deliverydate;     });  } 

its worth noting @ point line: alert('quantity: '+data.quantity +' & delivery date: ' + data.deliverydate); works fine?

do have manual refresh of page in javascript or there else missing

update:

just add information, i've done more debugging , can see neither data.~ or element i'm trying modify undefined, both have values.

tested on major browsers (minus safari).