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

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

possible duplicate of [ajax sub page to communicate back to the parent page](http://stackoverflow.com/questions/23517861/ajax-sub-page-to-communicate-back-to-the-parent-page) — user692942, May 13 '14 at 11:34
This looks like an issue you posted recently [ajax sub page to communicate back to the parent page](http://stackoverflow.com/q/23517861/692942). As that question is still ongoing could you refrain from posting duplicates. Instead [edit your original question](http://stackoverflow.com/posts/23517861/edit) if your question isn't getting enough attention. — user692942, May 13 '14 at 11:36
I tried to delete that query as I wanted to have a fresh go at the question itself adding screenshots and explaining the situation properly, but it seems i do not have enough reputations to post screen shot and already i have been shot down. by someone saying it does not have enough research. — Vinod, May 13 '14 at 11:48
@Valamas-AUS the problem is how do i update the txtTicketNo with the new ID e.g. 1248 generated by the new page that gets called by AJAX. I tried a lot of things opener.document.NewTicket.txtTicketNo.value and also document.NewTicket.txtTicketNo.value nothing works out. — Vinod, May 13 '14 at 11:52
After I run the ajax portion, if i view source i cannot find the new objects which were created by the other page that got called. What am I missing here. Am New to this so still learning by fire (I mean trial). — Vinod, May 14 '14 at 03:06

score 0 · Accepted Answer · answered May 15 '14 at 12:46

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.

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

1 Answers1