How do I use AJAX to update the javascript data?

fletchsod · Dec 29, 2009

I'm learning ASP.NET AJAX and I encountered this situation which I'm not sure how to handle. What I have here is checkboxes that are randomly changing, so does the javascript data. (Both of them are tie-in together). I'm able to get it working for a while until I added the 2nd button which broke this javascript. It had to do with how to use AJAX to update the data which I'm not sure how to handle.

To get the drift on what I'm talking about, I'm posting a simple testcase here. Step to follow...

1) Click on Vin-Decoding button (for checkboxes to show up).
2) Click on "MP3 (Multi CD)" checkbox.
3) Click on "MP3 (Single CD)" checkbox.
4) Repeat step 2 and step 3. As you can see it is what javascript does.
5) Click on Get-Carfax button.
6) Do step 2 and step 3 twice. As you can see, the javacript is no longer working.

The reason step 6 does not work is cuz the ASP.NET's label "lblJavaScriptRelationshipSetList" got overwritten which this Get-Carfax doesn't have the script to update that lablel.

I welcome some help. Source code below.

ASPX webpage

Code:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="zz5.aspx.cs" Inherits="ProgramSticker1" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">[/URL]

<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml">[/URL]
<head runat="server">
	<title></title>
	<script type="text/javascript">
	    //=========================================================================================
	    //08/31/2009 - Sarem and Jonathon requested that BIO automatically select/deselect the vehicle options...
	    //=========================================================================================
	    function ftnVehicleOptionChkBoxValidation(e, index_value) {
	        var oChkOptions = document.getElementById("<%=chkVehicleEquipmentList.ClientID%>");
	        var oChkBox1 = oChkOptions.getElementsByTagName("input");
	        //var oLabel1 = oChkBox1[index_value].parentNode.getElementsByTagName("label")[0].innerHTML;
	        var oLabel1 = oChkBox1[index_value].parentNode.getElementsByTagName("label");
	        var iChkBox1Length = oChkBox1.length;
	        var sValue1 = "";
	        var iConflictLength = 0;
	        var sTypeOfConflict = "";
	        var sChkBoxName = "";
	        var aTmpArray = new Array();
	        var sTmpString = "";

	        //Get name of checkbox's text value...
	        sValue1 = oLabel1[0].innerHTML;

	        //Stop getting Visual-Studio's internal javascript error repeatly cuz of AJAX random bugs...
	        if (typeof(aVO_ConflictLength) == "undefined") {
	            return;
	        }
            
	        //Check against JavaScript array...
	        iConflictLength = aVO_ConflictLength[sValue1];

	        //Run this script only when checkbox is clicked on and the conflict(s) is/are present...
	        if ((iConflictLength != undefined) && (oChkBox1[index_value].checked == true)) {
	            //Debug only...
	            //alert(iConflictLength);
	            //alert(aVO_Conflict[sValue1, 0]);
	            //alert(aVO_Conflict[sValue1, 1]);
	            //alert(aVO_Conflict[sValue1, 2]);

	            for (var y = 0; y < iConflictLength; y++) {
	                sTmpString = aVO_Conflict[sValue1][y];
	                aTmpArray = sTmpString.split("|");
	                sTypeOfConflict = aTmpArray[0];
	                sChkBoxName = aTmpArray[1];

	                for (var x = 0; x < iChkBox1Length; x++) {
	                    var oLabel2 = oChkBox1[x].parentNode.getElementsByTagName("label");

	                    if (sTypeOfConflict.toUpperCase() == "REQUIRES") {
	                        if (oLabel2[0].innerHTML == sChkBoxName) {
	                            if (oChkBox1[x].checked == false) {  //To prevent the javascript-function "ftnVehicleOptionChkBoxValidation" from being called repeatly, in order to speed up the web response time...
	                                oChkBox1[x].checked = true;
	                                break; //To speed up the web resposne time (x-loop only)...
	                            }
	                        }
	                    }
	                    else if (sTypeOfConflict.toUpperCase() == "CONFLICTSWITH") {
	                        if (oLabel2[0].innerHTML == sChkBoxName) {
	                            if (oChkBox1[x].checked == true) {  //To prevent the javascript-function "ftnVehicleOptionChkBoxValidation" from being called repeatly, in order to speed up the web response time...
	                                oChkBox1[x].checked = false;
	                                break; //To speed up the web resposne time (x-loop only)...
	                            }
	                        }
	                    }
	                }
	            }
	        }
	    }
	    //=========================================================================================
	</script>
</head>
<body>
    <form id="form1" runat="server">
    <div>

        <!-- ASP.NET AJAX Script Only... -->
        <asp:ScriptManager ID="ScriptManager1" runat="server" />

        <asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
            <ContentTemplate>

			    <asp:label id="lblJavaScriptRelationshipSetList" runat="server"></asp:label>

			    <div>
		            <asp:Button id="btnVinDecoding" runat="server" Text="Decode VIN" OnClick="ftnBtnVinDecoding_ServerClick" UseSubmitBehavior="false"></asp:Button>
                </div>
                                            
                <hr />
                
                <div>
                    <!-- AutoPostBack will break the javascript's auto select/deselect option, so set it to false for it to work properly... -->
                    <asp:CheckBoxList id="chkVehicleEquipmentList" runat="server" AutoPostBack="false" RepeatDirection="Vertical"></asp:CheckBoxList>
                </div>
			    
			    <hr />
			    
		        <div>
                  <asp:Button ID="btnCarfax" runat="server" Text="Get CARFAX" OnClick="ftnBtnCarfax_ServerClick" UseSubmitBehavior="false"></asp:Button>
			    </div>
			    
            </ContentTemplate>
            <Triggers>
                <asp:AsyncPostBackTrigger ControlID="btnVinDecoding" EventName="Click" />
                <asp:AsyncPostBackTrigger ControlID="btnCarfax" EventName="Click" />
            </Triggers>
        </asp:UpdatePanel>
			
    </div>
    </form>
</body>
</html>

Code-Behind

Code:

using System;
using System.Collections;
using System.Configuration;
using System.Data;
using System.Linq;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Xml.Linq;

public partial class ProgramSticker1 : System.Web.UI.Page
{
    protected void ftnBtnCarfax_ServerClick(object sender, EventArgs e)
    {
        //N/A...
    }
    protected void ftnBtnVinDecoding_ServerClick(object sender, EventArgs e) 
    {
        //Initialize variables...
        Int32 x = 0;
        Int32 xLength = 0;
        string sConflict = "";

        //Clear the form first before anything else...
        this.chkVehicleEquipmentList.Items.Clear();

        //Autoselct Style & Trim if data exists and matched...
        this.chkVehicleEquipmentList.Items.Add("Moon Roof");
        this.chkVehicleEquipmentList.Items.Add("Sun Roof");
        this.chkVehicleEquipmentList.Items.Add("MP3 (Multi CD)");
        this.chkVehicleEquipmentList.Items.Add("MP3 (Single CD)");

        ScriptManager.RegisterStartupScript(this.lblJavaScriptRelationshipSetList, this.lblJavaScriptRelationshipSetList.GetType(), System.Guid.NewGuid().ToString(), "", true);
        //#ScriptManager.RegisterStartupScript(this.UpdatePanel1, this.UpdatePanel1.GetType(), "JsForVehicleOptCheckboxes", "", true);

        if (this.chkVehicleEquipmentList.Items.Count != 0)
        {
            //Add the OnClick attribute to the checkboxes...
            x = 0; //Reset counter...
            xLength = this.chkVehicleEquipmentList.Items.Count;
            while (x < xLength)
            {
                this.chkVehicleEquipmentList.Items[x].Attributes.Add("OnClick", "ftnVehicleOptionChkBoxValidation(this, '" + Convert.ToString(x) + "');");

                x += 1;
            }

            sConflict = "";

            sConflict += " aVO_Conflict = new Array();\n";
            sConflict += " aVO_ConflictLength = new Array();\n";

            sConflict += "aVO_Conflict = new Array();\n";
            sConflict += "aVO_ConflictLength = new Array();\n";
            sConflict += "aVO_Conflict[\"MP3 (Single CD)\"] = {\"0\":\"ConflictsWith|MP3 (Multi CD)\"};\n";
            sConflict += "aVO_ConflictLength[\"MP3 (Single CD)\"] = \"1\";\n";
            sConflict += "aVO_Conflict[\"MP3 (Multi CD)\"] = {\"0\":\"ConflictsWith|MP3 (Single CD)\"};\n";
            sConflict += "aVO_ConflictLength[\"MP3 (Multi CD)\"] = \"1\";\n";

            ScriptManager.RegisterStartupScript(this.lblJavaScriptRelationshipSetList, this.lblJavaScriptRelationshipSetList.GetType(), System.Guid.NewGuid().ToString(), sConflict, true);
            //#ScriptManager.RegisterStartupScript(this.UpdatePanel1, this.UpdatePanel1.GetType(), "JsForVehicleOptCheckboxes", sConflict, true);
        }
    }
    protected void Page_Load(object sender, EventArgs e)
    {
        if (Page.IsPostBack == false) {
            //#this.lblJavaScriptRelationshipSetList.Text = "";
            ScriptManager.RegisterStartupScript(this.lblJavaScriptRelationshipSetList, this.lblJavaScriptRelationshipSetList.GetType(), System.Guid.NewGuid().ToString(), "", true);
            //#ScriptManager.RegisterStartupScript(this.UpdatePanel1, this.UpdatePanel1.GetType(), "JsForVehicleOptCheckboxes", "", true);
        }
    }
}

Thanks...

fletchsod · Dec 30, 2009

P.S. - The point here is I'm not using the "ScriptManager.RegisterStartupScript" script properly. This is what I welcome some suggestion or help on.

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

How do I use AJAX to update the javascript data?

fletchsod

Programmer

fletchsod

Programmer

Similar threads

Part and Inventory Search

Sponsor