Slideshow Ajax c#

Hello:
I'm new to ajax and found some slideshow code which I modified to be data driven.
My problem is that I'm trying to get the code to provide a data driven image title/caption also and I'm having some difficulty getting it to work properly.  When it hits the data loop; I'm assigning the image caption to a session variable at the same time that I assign the image path.  Image path is working fine ; image caption never changes; even though in debug mode you can clearly see the value of the session variable changing.  Any help would be greatly appreciated.  I think its something basic like I'm not understanding the postback process or something to that effect.

Here is the html page:
<body>
    <form id="form1" runat="server">
    <div>
    <table>
        <tr>
            <td align="center">ASP.NET2 Slide Show<hr />
            </td>
        </tr>
        <tr>
            <td align="center">
                <img id="photo" src="" runat="server" border="0" />
                <br />   
            </td>
        </tr>
    </table>
    </div>
 
    <script type="text/javascript">
        //A timer will be fired in 5 seconds to call getNextImage()
        var c_interval = 5000;
        window.setTimeout("getNextImage()", c_interval);
        
        function getNextImage()
        {
            //Send the request to server with the current image url as the argument
 
            CallServer(document.getElementById("photo").src, "");
 
//Note that this alert never changes; although in debug mode I can see that the session variable changed.
            alert('<%=Session["Address"] %>')
//This is the update that should be adjusting the caption
document.getElementById("myText").value = '<%=Session["Address"] %>';
            //<%=Session["Address"] %>
            
        }
                  
        function ReceiveServerData(rValue)
        {
            //Receive server's response of a string rValue, which is prepared in the server's function
            //GetCallbackResult()
            var wds = rValue.split(";");
            //Assign the transition effect
            document.getElementById("photo").style.filter = wds[1];
            //Preload the image file from server.  When finishing download, imageLoaded function will be called
            //with the img object as the argument                           
            var img  = new Image();
            img.onload = function(){ imageLoaded(this); }
            img.onerror = function(){ imageError(this); }
            img.onabort = function(){ imageError(this); }
            img.src = wds[0];
      //here   document.getElementById("myText").value = '<%=Session["Address"] %>';
 
                   
        }
        function imageError(img)
        {
            //If image download errors occur, this function will be called.
            window.setTimeout("getNextImage()", 1000);
        }
        function imageLoaded(img)
        {
            var photo = document.getElementById("photo");   //Find the image control object
            photo.filters[0].apply();                       //Apply the transition effect
            photo.filters[0].play();                        //Play the effect and display the new image
            photo.src = img.src;                            //Assign the image to the image control
            
            window.setTimeout("getNextImage()", c_interval);//Initiate the next request
        }
    </script>
 
    <input type='text' id='myText' value="" name="myText" />
    <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
    </form>
 
    </body>
 
 
 
//c# code
 
 
	
public partial class _Default : System.Web.UI.Page, System.Web.UI.ICallbackEventHandler
{
    
    string m_lastFileName = "none";
     
    protected void Page_Load(object sender, EventArgs e)
    {
 
        if (Session["Counter"] == null)
         {
        Session["Counter"] = 1;
         }
 
        if (IsPostBack)
            return;
        
        photo.Src = GetNextImageUrl();
        
        //Register Ajax client script to client's browsers.  This has to be hard coded.
        string cbReference = Page.ClientScript.GetCallbackEventReference(this, "arg", "ReceiveServerData", "context");
        string callbackScript = "function CallServer(arg, context)" + "{ " + cbReference + "} ;";
        Page.ClientScript.RegisterClientScriptBlock(this.GetType(), "CallServer", callbackScript, true);
    }
 
    public void RaiseCallbackEvent(string eventArgument)
    {
        //This is first place to receive the callback from client's browser.  The parameter 'eventArgument'
        //is the parameter passed from the Javascript's call 'CallServer()'.  In this example, it is the
        //last image url.
        m_lastFileName = Path.GetFileName(eventArgument);
    }
 
    public string GetCallbackResult()
    {
        //This is the second call triggled by the 'CallServer()' and it is the place to prepare and return a string
        //to the client.  Here the returned string is the image url and the transition effect.
        return GetNextImageUrl() + ";" + GetNextTransition() + ";" + GetNextAddress();
    }
 
    private string GetNextImageUrl()
    {
        SqlDataReader rdr = null;
        SqlConnection con = null;
        SqlConnection con2 = null;
        SqlCommand cmd = null;
        SqlCommand cmd2 = null;
        SqlDataReader rdr2 = null;
        //Open connection to the database
        string ConnectionString = "server=";
        con = new SqlConnection(ConnectionString);
        con.Open();
 
 
        con2 = new SqlConnection(ConnectionString);
        con2.Open();
 
        //Set up a command with the given query and associate
        //this with the current connection.
 
        //set total counter to determine how many properties we have to loop through
 
        string CommandText2 = "SELECT * from dbo.Featured_Property where Sequence=" + (int)Session["Counter"];
        cmd2 = new SqlCommand(CommandText2);
 
        cmd2.Connection = con2;
 
        // Execute the query
        rdr2 = cmd2.ExecuteReader();
        rdr2.Read();
        Session["image"] = rdr2["ImagePath"];
        Session["Price"] = rdr2["Price"];
        Session["Address"] = rdr2["Address"];
 
 //   Response.Write(rdr2["Address"]);
 
        
        
        Session["Counter"] = (int)Session["Counter"] + 1;
 
 
        if ( Session["Counter"] is int && (int)Session["Counter"] == 3 )
            Session["Counter"] = 1;
 
 
        // code to try to write the session variable info back to the text box caption - not working
        TextBox1.Text = (string)Session["Address"];
 
 
                return (String)Session["image"];
 
 
    }
 
 
 
 
    private string GetNextAddress()
    {
        TextBox1.Text = (string)Session["Address"];
 
 
        return (String)Session["Address"];
    }
 
    
    
    private string GetNextTransition()
    {
        //Randomly pick a transition effect.  Note some of the effects only work in IE.
        int n = (int)((new Random().NextDouble()) * 5);
        switch (n)
        {
            case 0:
            case 1:
                n = (int)((new Random().NextDouble()) * 22);
                return "revealTrans(duration=2,transition=" + n.ToString() + ")";
            case 2:
            case 3:
                if (Request.Browser.Browser == "IE")
                {
                    n = (int)((new Random().NextDouble()) * 8);
                    switch (n)
                    {
                        case 0:
                            return "progid:DXImageTransform.Microsoft.RandomDissolve()";
                        case 1:
                            return "progid:DXImageTransform.Microsoft.Pixelate(MaxSquare=20, Duration=2, Enabled=false)";
                        case 2:
                            return "progid:DXImageTransform.Microsoft.RadialWipe(wipeStyle='clock')";
                        case 3:
                            return "progid:DXImageTransform.Microsoft.Wheel(spokes=4)";
                        case 4:
                            return "progid:DXImageTransform.Microsoft.Stretch(stretchStyle='spin')";
                        default:
                            return "progid:DXImageTransform.Microsoft.Stretch(stretchStyle='push')";
                    }
                }
                else
                    return "blendTrans(duration=2)";
            default:
                return "blendTrans(duration=2)";
        }
    }
}

Open in new window

sny23vpbAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

carlnorrbomCommented:

Hi,

I don't have access to my dev box at the moment, but what happens if you change Your script code to:

        function ReceiveServerData(rValue)
        {
            var wds = rValue.split(";");
            document.getElementById("photo").style.filter = wds[1];
            var img  = new Image();
            img.onload = function(){ imageLoaded(this, wds[2]) }
            img.onerror = function(){ imageError(this); }
            img.onabort = function(){ imageError(this); }
            img.src = wds[0];
        }

        function imageLoaded(img, txtAddr)
        {
            var photo = document.getElementById("photo");
            photo.filters[0].apply();
            photo.filters[0].play();
            photo.src = img.src;
            document.getElementById("myText").value = txtAddr;            
            window.setTimeout("getNextImage()", c_interval);
        }

Not sure but it should do the trick since You are already passing the address as the third argument to the "ReceiveServerData" function? Give it a go and let me know.

/Carl.
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
sny23vpbAuthor Commented:
This is exactly what I needed.  Thank you. I will assign points.

One question; if I wanted to capture even more fields;
Would I change this to img.onload = function(){ imageLoaded(this, wds[2], wds[3]) }

        function imageLoaded(img, txtAddr, anotherfield)
and simply add another line here:
    document.getElementById("anotherfield").value = anotherfield;    
0
carlnorrbomCommented:
Hi,
Yes, that's the idea!
/Carl.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
.NET Programming

From novice to tech pro — start learning today.