Link to home
Start Free TrialLog in
Avatar of clintfield
clintfieldFlag for United States of America

asked on

AJAX dropdownlist without refresh or updatepanels

I have a page where a person can use a dropdownlist to choose employees.  If the employee is not found in the dropdownlist, then I provide a popupbox where they can add the new employees information.  After they close this box, I would like the new employee data to show up in the dropdownlist without the page refreshing.  Im using Visual Studio 2005, but my company has not approved any of the AJAX toolkit stuff so I cant use update panels for this.  What is the easiest way to do this considering my limitations?
ASKER CERTIFIED SOLUTION
Avatar of Aaron Jabamani
Aaron Jabamani
Flag of United Kingdom of Great Britain and Northern Ireland image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of clintfield

ASKER

Hmmm...let me play with this some and see what happens.  I'll post back here in a couple of hours.
apeter:
I like the example...but Im a little slow as to how to adapt it for my example.  My user will have a popup where they enter new employee information.  When they click the save button or close the pop up, how do I force the opener window to modify its contents without a refresh?  Ive done similar stuff in javascript where the pop up can refresh the opener, but how do I get the pop up to refill the dropdownlist on the opener?
1. So on close of the the pop up window, u can call the parent javascript fuction "LookUpStock()" as in example.
2. This will invoke the server side code behind method "RaiseCallbackEvent". Here you set the return value to new employee name.
3. Next framework invokes "GetCallbackResult" to send result to javascript funtion "ReceiveServerData", and here you to have populate the drop down.
3. Methods(RaiseCallbackEvent, GetCallbackResult) in code behind are the methods of interface "ICallbackEventHandler" that you have implement since you have inhertied it.

Below link has many more details.
http://www.codeproject.com/KB/aspnet/clientcallback.aspx

Let me know if you need any more info.
Ok.  Thanks.  Give me some time to experiment with the concept.
apeter:
I like this concept, but Im having some trouble with populating a dropdownlist.  Could you possibly give an example where a textbox field has its contents dynamically added to the dropdown contents?
Sorry for being obtuse, but this is pretty new to me.  I like the way it works though and it seems more powerful than using regular AJAX xmlhttp stuff.
Kindly let me know which step Number is giving problem ? We can then elborate on that.
This is what i tried with the sample.
Take a value from one textbox and assign to another textbox(you can upgrade to dropdown)  by clicking a button.

Let me know further details.
ASPX File: Code behind is below
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WebApp35._Default" %>
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>Untitled Page</title>
    <script language="javascript">
        //set the destination texbox value.  
        function ServerFeeding(args,  context)
           {
             var s = document.getElementById('DestTextBox');
             s.value = args
           }
           //calls the server side method
           function callServer()
            {
              args = document.getElementById('SrcTextBox').value;
              callBack (args,"ClientContext");
              return false
            }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:Button ID="CallDupSvc" runat="server" Text="Call Dup Svc" 
            onclick="CallDupSvc_Click" />
        <asp:TextBox ID="TextBox1" runat="server" TextMode="MultiLine"></asp:TextBox>
    </div>
    <asp:Label ID="Label1" runat="server" Text="Enter name"></asp:Label>
    <asp:TextBox ID="SrcTextBox" runat="server"></asp:TextBox>
    <asp:Button ID="Button1" runat="server" Text="Move Src to Dest" OnClientClick="return callServer();" />
    <asp:TextBox ID="DestTextBox" runat="server"></asp:TextBox>
    </form>
</body>
</html>
 
--------------CODE BEHIND------------
public partial class _Default : System.Web.UI.Page, ICallbackEventHandler
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            
            string callBackInitiater = Page.ClientScript.GetCallbackEventReference(this, "args", "ServerFeeding", "context");
 
            
            string Jsblock = "function callBack(args, context){" + callBackInitiater + "}";
 
            
            Page.ClientScript.RegisterClientScriptBlock(this.GetType(),
                                 "callBack", Jsblock, true);
 
 
        }
 
 
        #region ICallbackEventHandler Members
        //calls the event handler in the javascript
        public string GetCallbackResult()
        {
            //the value to be sent is set in below method
            return _enteredValue;
        }
        string _enteredValue;
        //this funtion is called first with the valued enter there.
        public void RaiseCallbackEvent(string eventArgument)
        {
            //update to database 
            //set the value which has to be sent to the eventhandler method in javascript
            _enteredValue = eventArgument as string;
        }
 
        #endregion
    }

Open in new window

Id really like an example with a dropdownlist if possible.  I appreciate the direction youve given, but some interaction with a db call and a dropdown would be very helpful.