dcsimg
www.webdeveloper.com
Results 1 to 2 of 2

Thread: AJAX - Using value returned from ASP as button click attribute

  1. #1
    Join Date
    Jun 2005
    Posts
    97

    AJAX - Using value returned from ASP as button click attribute

    I have a page in which a user may choose to add an item to a list. When they click the + button to add the item, I then want to have an ASP page add the item to the database and send back the id for this new item. I want to create another button in the new list item that allows them to delete the previously added item. This button, when clicked, needs to send the id of the list item to a javascript function. What I can't figure out is how to get the value that's returned from the ASP page. Once an item is added to the DB, the id's value is printed on the page.
    In the code below, I am getting the correct value from the ASP page. However, I'm not sure how to save that value for use in the button's onclick event. Can someone please help me?

    HTML Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html>
    <head>
        <title>Cable Editing Form</title>
        <script type="text/javascript">
            function addCN() {
                var newCN;
                var newID
                if (Number(document.getElementById("ecpID").value)>0) {
                    if (document.getElementById("newCN").value=="") {
                        alert("Please enter the Change Notice number before clicking the '+' button.");
                    } else {
                        if (document.getElementById("ecpID").value!="") {
                            newCN = document.getElementById("newCN").value;
                            document.getElementById("cnNum").value=newCN;
                            newID = ajaxFunction("a");
                            alert("newID btn="+newID);
                            var tableRef = document.getElementById('myTable');
                            var rowCount = tableRef.getElementsByTagName("TR").length-1;
                            var newRow = tableRef.insertRow(rowCount);
                            var newCell = newRow.insertCell(0);
                            var newText = document.createTextNode(newCN+" "+newID);
                            newCell.appendChild(newText);
                            var newBtn = document.createElement("input");
                            newBtn.type = "button";
                            newBtn.id="delete";
                            newBtn.value = "-";
                            //****Need to include newID in function call****
                            newBtn.onclick=function(){removeCN(newID,this.parentNode.parentNode.rowIndex);}
                            newCell.appendChild(newBtn);
                        }
                    }
                } else {
                    alert("You must add a new ECP before adding Change Notice numbers.");
                }
            }
            function removeCN(id, row) {
                var rowNum;
                var CN_id;
                alert(id);
                CN_id = id;
                rowNum = row;
                var tableRef = document.getElementById('myTable');
                tableRef.deleteRow(rowNum);
                ajaxFunction("d", CN_id);
            }
            function ajaxFunction(addDel, id) {
                var xmlhttp;
                var newId, cnNum;
                if (window.XMLHttpRequest) {
                    // code for IE7+, Firefox, Chrome, Opera, Safari
                    xmlhttp=new XMLHttpRequest();
                } else if (window.ActiveXObject) {
                    // code for IE6, IE5
                    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
                } else {
                    alert("Your browser does not support XMLHTTP!");
                }
                xmlhttp.onreadystatechange=function() {
                    if (xmlhttp.readyState==4) {
                        document.getElementById("newCN").value="";
                        newId = xmlhttp.responseText;
                        //*****ID is correct here ****
                        alert("id="+newId);
                        return newId;
                    }
                }
                if (addDel=="a") {
                    cnNum = document.getElementById("cnNum").value;
                    ecpID = document.getElementById("ecpID").value;
                    url = "ECD_CNAdd.asp?ad=a&cnNum="+cnNum+"&ecpID="+ecpID;
                } else {
                    var CNID = id;
                    if (CNID!=null) {
                        ecpID = document.getElementById("ecpID").value;
                        cnNum = document.getElementById("cnNum").value;
                        url = "ECD_CNAdd.asp?ad=d&cnID="+CNID+"&ecpID="+ecpID;
                    }
                }
                xmlhttp.open("GET", url, true);
                xmlhttp.send(null);
            }
        </script>
    </head>
    <body>
        <form id="form1" action="ECD_propsCNSub.asp" method="post">
            <input type="hidden" name="id" id="id" value="" />
            <input type="hidden" id="ecpID" name="ecpID" value="2143" />
            <table id="myTable">
                <tr>
                    <td><b>Associated<br />Change Notices</b></td>
                </tr>
                <tr>
                    <td><u>CN Number</u></td>
                </tr>
                <tr>
                    <td valign="middle">CN00001&nbsp;<input type="button" id="delete" onclick="javascript:removeCN(1463,this.parentNode.parentNode.rowIndex)" value="-" /></td>
                </tr>
                <tr>
                    <td valign="middle">CN66&nbsp;<input type="button" id="delete" onclick="javascript:removeCN(1465,this.parentNode.parentNode.rowIndex)" value="-" /></td>
                </tr>
                
                  <div id="newVals"></div>
                  <input type="hidden" name="cnNum" id="cnNum" />
                  <tr>
                    <td><input type="text" id="newCN" value="" size="3" class="text" />&nbsp;<input type="button" onclick="javascript:addCN()" id="add" value="+" /></td>
                  </tr>
            </table>
        </form>
    </body>
    </html>

  2. #2
    Join Date
    Feb 2003
    Location
    Michigan, USA
    Posts
    5,774
    The "newID" variable is made available to the button onclick because you create a function closure. The problem lies with the newID variable itself: All of the onclick's refer to the same newID variable, meaning the value passed to the removeCN function for each button is always the value returned from the last call to ajaxFunction, not the Id corresponding to that button.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles