a called page to update a text box in caller page using ajax

StackOverflow https://stackoverflow.com/questions/23629909

  •  21-07-2023
  •  | 
  •  

Question

I am doing this work in classic asp using webmatrix utilising the SQL CE built in DB.

I have a page that has a text box lets say txtTicketNo. Now this text box is on the caller page which will have the ajax code.

Upon ajax call, the called page will update the DB and get the new record ID which i store in a hidden text box called my_tID. I want the new record ID to be updated in the txtTicketNo text box in the caller when the Ajax call completes.

my existing codes are as below

<script>
function pushTrade(tID) {

    var tDate, secID, iBuy, iShares, iPrice;
    var a = [];
    document.getElementById("TradeDetails").innerHTML = "";
    a.push(tID);                                                        //a(0) = tID
    tDate = document.NewTicket.txtTrDate.value; a.push(tDate);          //a(1) = tDate
    secID = document.dTable.Security;
    iBuy = document.dTable.Buy;
    iShares = document.dTable.Shares1.value; a.push(iShares);           //a(2) = iShares
    iPrice = document.dTable.Price1.value; a.push(iPrice);              //a(3) = iPrice
    var myMsg = a.length ? a.join(',') : 0;

    if (window.XMLHttpRequest) {
        xmlhttp = new XMLHttpRequest();
    }
    else {
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }
    xmlhttp.onreadystatechange = function () {
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
            document.getElementById("TradeDetails").innerHTML = "";
            document.getElementById("TradeDetails").innerHTML = xmlhttp.responseText;
        }
    }
    xmlhttp.open("GET", "NewTicket-AJAX-SubPage.asp?myMsg=" + myMsg, true);
    xmlhttp.send();
}
</script>
<body>
<form name="NewTicket" method="POST" action="NewTicket-AJAXErr-Test.asp">
    <input name="txtTicketNo" placeholder="Ticket #"  type="text" value="<%Response.Write(tID)%>" class="textbox" id="txtTicketNo">
    <input name="txtExtRef"   placeholder="Ext. Ref." type="text" value="<%Response.Write(sExtRef)%>" class="textbox" <%if dCheckerSent = "" then response.write " readonly"%>>
    <input name="sID" type="hidden" value="<%Response.Write(sID)%>" id="sID">
    <input name="txtTrDate" id="txtTrDate1" placeholder="Tran Date(ClickHere)" type="text" value="<%Response.Write(tDate)%>" readonly="readonly" class="textbox">
</form>
<form name="dTable">
<div id="DataTable">
<TABLE id="dataTable" width="100%" border="1">
        <TR>
            <TD></TD>
            <TD>B/S</TD>
            <TD>Security</TD>
            <TD>Shares</TD>
            <TD>Price</TD>
        </TR>
        <TR>
            <td><INPUT type="checkbox" name="chk"/></td>
            <td><select name='Buy' ID='Buy1'><option value='1'>Buy</option><option value='0'>Sell</option></select></td>
            <td><select name='Security' ID='S1' data-placeholder="Select Security(s)">
                <option value="000"></option>
                <option value="1">One</option>
                <option value="2">Two</option>
                <option value="3">Three</option>
                </select></td>
            <td><input type='text' name='Shares1' id='Shares11' class='textbox'></td>
            <td><input type='text' name='Price1' id='Price11'   class='textbox'></td>
        </TR>
    </TABLE>
</div>
<div id="TradeDetails"></div>
    </form>
</body>

and my called page has this

<%
dim arrArgs         'arguments received 
arrArgs = Split(request.querystring("myMsg"),",")

response.expires=-1

if arrArgs(0) = "" then                    'insert new Record
    sQuery = "Select max(tID)+1 from Trades"
    Set oRS = oConn.Execute (sQuery)
    if Not (oRS.EOF and oRS.BOF) then
        arrArgs(0) = oRS(0)
    end if
    oRS.Close
    response.write arrArgs(0)
end if%>
<div id="dt_Div">
<TABLE id="ShowDataTable" width="100%" border="1">
<thead>
<tr>
    <TD></TD>
    <TD>B/S</TD>
    <TD>Security</TD>
    <TD>Shares</TD>
    <TD>Price</TD>
</tr>
</thead>
<tr>
    <td><INPUT type="checkbox" name="chk"/><input type="hidden" name="my_tID" id="sub_tIDi" value="<%=arrArgs(0)%>"></td>
    <td><select name='Buy' ID='Buy1'><option value='1' <%if int(arrArgs(9))=1 then Response.write "Selected"%>>Buy</option><option value='0' <%if int(arrArgs(9))=0 then Response.write "Selected"%>>Sell</option></select></td>
    <td><select name='Security' ID='S1' class="chosen-select" data-placeholder="Select Security(s)">
            <option value="000"></option>
                <option value="1">One</option>
                <option value="2">Two</option>
                <option value="3">Three</option>
        </select></td>
    <td><input type='text' name='Shares1' id='Shares11' class='textbox' value="<%=arrArgs(2)%>"></td>
    <td><input type='text' name='Price1' id='Price11'   class='textbox' value="<%=arrArgs(3)%>"></td>
</tr>
</TABLE>
</div>

appreciate all your assistance/help.

Regards

Vin

Was it helpful?

Solution

Solved.

All i had to do was edit the xmlhttp.onreadystatechange part of the code.

so the corrected code should look like this.

xmlhttp.onreadystatechange = function () {
    if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
        document.getElementById("TradeDetails").innerHTML = "";
        document.getElementById("TradeDetails").innerHTML = xmlhttp.responseText;
        **document.getElementById("txtTicketNo").value = document.getElementById("sub_tIDi").value;**
    }
}
xmlhttp.open("GET", "NewTicket-AJAX-SubPage.asp?myMsg=" + myMsg, true);
xmlhttp.send();

and that solved all my problems.

was writing the right code all along but the challenge was to grasp the asynchronous nature of the code. when I move the code to the right section (i.e. xmlhttp.onreadystatechange) all was well.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top