Updating image button with AJAX
CodeGuru Home VC++ / MFC / C++ .NET / C# Visual Basic VB Forums Developer.com
Results 1 to 13 of 13

Thread: Updating image button with AJAX

  1. #1
    Join Date
    May 2001
    Location
    Mobile, AL.
    Posts
    64

    Updating image button with AJAX

    I just installed the new AJAX package from microsoft and I'm trying to update an existing program to AJAX. I added all the stuff to Config.web to make AJAX "work".

    My original program contained an image button, some radio controls, and another button. When the page loads, or when either button is clicked, the code draws a new bitmap and saves it. When the postback completes, the image button displays the new image. So far, so good.

    After my attempted conversion to AJAX, I added a script manager and put the image button inside an update panel. The other button is also used as a trigger for the same update panel.

    When I click the bitmap, it calls the Load and Click routines as before. The code draws the new bitmap and saves it. However, the bitmap on the client side doesn't change. I would have expected the contents of the update panel to be updated.

    When I click the other button, the Load and Click events are called, but nothing happens on the client side.

    I added an UpdateProgress to the page. It becomes "visible" when I click the bitmap, but nothing visibly happens when I click the other button. The code in the click events take a second or more to draw the new bitmap, since a lot of "number-crunching" is involved.

  2. #2
    Join Date
    Mar 2002
    Location
    NY, USA
    Posts
    12,097

    Re: Updating image button with AJAX

    You would need to post a minimal yet complete sample that reproduces the problem in order to accurately determine what you are doing wrong.
    TheCPUWizard is a registered trademark, all rights reserved. (If this post was helpful, please RATE it!)
    2008, 2009
    In theory, there is no difference between theory and paractice; in practice there is.

    * Join the fight, refuse to respond to posts that contain code outside of [code] ... [/code] tags. See here for instructions
    * How NOT to post a question here
    * Of course you read this carefully before you posted
    * Need homework help? Read this first

  3. #3
    PeejAvery's Avatar
    PeejAvery is offline Super Moderator Power Poster
    Join Date
    May 2002
    Posts
    10,870

    Re: Updating image button with AJAX

    I would highly suggest testing with Firefox. Under the Tools menu, you will find an Error Console. That will help greatly with debugging client-side errors. Start with that and then get back to us.
    If the post was helpful...Rate it! Remember to use [code] or [php] tags.

  4. #4
    Join Date
    May 2001
    Location
    Mobile, AL.
    Posts
    64

    Re: Updating image button with AJAX

    Here's the event code for loading the page, the imagebutton click and the buttonclick. They each draw the bitmap and save it to the url for the bitmap button. Before I used AJAX, each event updated the image during a postback. Now only the Load event shows the initial image, but the button clicks do not update the image. They DO fire the events, and the bitmap does get redrawn and saved, but nothing changes on the page. Although the imagebutton is inside the UpdatePanel, it still isn't getting updated.

    Code:
     
        Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
            If Not IsPostBack Then
                imgPath = Server.MapPath("~/images/Brot.bmp")
                w = ImageButton1.Width.Value
                h = ImageButton1.Height.Value
                siz = New Size(w, h)
                bmp = New Bitmap(w, h, fmt)
                hgr = Graphics.FromImage(bmp)
                rectF = New RectangleF(-2, -1.5, 3, 3)
                zoom = 1 / 4
                PlotBmp(bmp, siz, rectf, 2, 100)
                bmp.Save(imgPath)
                Session("rectf") = rectf
                Session("zoom") = zoom
    
            End If
        End Sub
        Protected Sub ImageButton1_Click(ByVal sender As Object, ByVal e As System.Web.UI.ImageClickEventArgs) Handles ImageButton1.Click
            Dim x, y As Double
            Dim imax As Integer
    
            rectF = Session("rectf")
            zoom = Session("zoom")
            imgPath = Server.MapPath("~/images/Brot.bmp")
            w = ImageButton1.Width.Value
            h = ImageButton1.Height.Value
            siz = New Size(w, h)
            bmp = New Bitmap(w, h, fmt)
            hgr = Graphics.FromImage(bmp)
            x = CDbl(e.X) * rectF.Width / CDbl(w) + rectF.Left
            y = rectF.Bottom - CDbl(e.Y) * rectF.Height / CDbl(h)
            rectF.Width *= zoom
            rectf.Height *= zoom
            rectF.X = x - rectF.Width / 2
            rectF.Y = y - rectF.Height / 2
            imax = 300.0 / rectF.Width
            PlotBmp(bmp, siz, rectF, 2, imax)
            bmp.Save(imgPath)
            Session("rectf") = rectf
        End Sub
        Protected Sub btnReset_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles btnReset.Click
            imgPath = Server.MapPath("~/images/Brot.bmp")
            w = ImageButton1.Width.Value
            h = ImageButton1.Height.Value
            siz = New Size(w, h)
            bmp = New Bitmap(w, h, fmt)
            hgr = Graphics.FromImage(bmp)
            rectF = New RectangleF(-2, -1.5, 3, 3)
            PlotBmp(bmp, siz, rectF, 2, 100)
            bmp.Save(imgPath)
            Session("rectf") = rectF
        End Sub

  5. #5
    PeejAvery's Avatar
    PeejAvery is offline Super Moderator Power Poster
    Join Date
    May 2002
    Posts
    10,870

    Re: Updating image button with AJAX

    Quote Originally Posted by bsaucer
    Although the imagebutton is inside the UpdatePanel, it still isn't getting updated.
    Could it be a cache problem?
    If the post was helpful...Rate it! Remember to use [code] or [php] tags.

  6. #6
    Join Date
    May 2001
    Location
    Mobile, AL.
    Posts
    64

    Re: Updating image button with AJAX

    Firefox shows no errors. I'm not getting any error messages. All of my server code is executing when it is supposed to. The updatePanel is just not updating the image button's image when it is supposed to.

  7. #7
    Join Date
    May 2001
    Location
    Mobile, AL.
    Posts
    64

    Re: Updating image button with AJAX

    I just added a label inside the update panel, and added code to update it within the load and click events. The label is getting updated properly, but the imagebutton is not. However, to verify that the image file itself is getting updated, I looked at it in a viewer, and it is getting updated by the code.

    Is there some way to "flag" the imagebutton so that it gets redrawn whenever the updatepanel is updated?

  8. #8
    PeejAvery's Avatar
    PeejAvery is offline Super Moderator Power Poster
    Join Date
    May 2002
    Posts
    10,870

    Re: Updating image button with AJAX

    Can you post the code that is supposed to handle the updating of the image on the clien't browser?
    If the post was helpful...Rate it! Remember to use [code] or [php] tags.

  9. #9
    Join Date
    May 2001
    Location
    Mobile, AL.
    Posts
    64

    Re: Updating image button with AJAX

    I assumed that updating the image is automatic in an update panel. I added a label to the update panel. I update the text in the label when I redraw the image. The label gets updated automatically, but the image does not.

    So far all the reading I've done seems to indicate a caching problem, but I don't know how to turn that off. Other people also have problems with certain controls not getting updated. I have the same issues in IE7, Firefox (latest) and both engines in Netscape browser.

  10. #10
    PeejAvery's Avatar
    PeejAvery is offline Super Moderator Power Poster
    Join Date
    May 2002
    Posts
    10,870

    Re: Updating image button with AJAX

    Quote Originally Posted by bsaucer
    So far all the reading I've done seems to indicate a caching problem
    Well, if you read my second post, you will see that I suggested that. You can fix it by adding headers.

    Code:
    <meta http-equiv="Cache-Control" content="no-cache" />
    <meta http-equiv="Pragma" content="no-cache" />
    <meta http-equiv="Expires" content="0" />
    If the post was helpful...Rate it! Remember to use [code] or [php] tags.

  11. #11
    Join Date
    May 2001
    Location
    Mobile, AL.
    Posts
    64

    Re: Updating image button with AJAX

    I tried adding that to the header. It still doesn't work.

    Here's my main html file:

    Code:
    <%@ Page Language="VB" AutoEventWireup="false" CodeFile="Mandelbrot.aspx.vb" Inherits="_Default" %>
    
    <%@ Register Assembly="System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"
        Namespace="System.Web.UI" TagPrefix="asp" %>
    
    <!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>Mandelbrot</title>
        <meta http-equiv="Cache-Control" content="no-cache" />
        <meta http-equiv="Pragma" content="no-cache" />
        <meta http-equiv="Expires" content="0" />
    </head>
    <body style="font-family: Times New Roman; background-color: silver">
        <form id="form1" runat="server">
        <div style="text-align: center">
            <strong><span style="font-size: 16pt"><em>
                <asp:ScriptManager ID="ScriptManager1" runat="server">
                </asp:ScriptManager>
                Explore the</em><br /></span><span style="color: brown">
                <span style="font-size: 48pt; font-family: Arial"><span style="color: sienna">MANDELBROT!</span></span><br />
            </span>
                <asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional" EnableViewState="False">
                    <ContentTemplate>
                    <asp:ImageButton ID="ImageButton1" runat="server" Height="400px" Width="400px" ImageUrl="~/images/brot.bmp" /><br />
                        <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>&nbsp;
                    </ContentTemplate>
                    <Triggers>
                        <asp:AsyncPostBackTrigger ControlID="btnReset" EventName="Click" />
                    </Triggers>
                </asp:UpdatePanel>
                &nbsp;&nbsp;&nbsp;Click picture to:<asp:RadioButton ID="rbZoomIn" runat="server" Checked="True" GroupName="Click" Text="Zoom in" />
                        <asp:RadioButton ID="rbZoomOut"
                            runat="server" GroupName="Click" Text="Zoom out" />
                        <asp:RadioButton ID="rbPan" runat="server" GroupName="Click" Text="Pan" />&nbsp;
                <br />
                        <asp:Button ID="btnReset" runat="server" Font-Bold="True" Text="Reset" Width="66px" /><asp:UpdateProgress ID="UpdateProgress1" runat="server" AssociatedUpdatePanelID="UpdatePanel1">
                            <ProgressTemplate>
                                Updating. Please wait...
                            </ProgressTemplate>
                        </asp:UpdateProgress>
                </strong></div>
        </form>
    </body>
    </html>

  12. #12
    PeejAvery's Avatar
    PeejAvery is offline Super Moderator Power Poster
    Join Date
    May 2002
    Posts
    10,870

    Re: Updating image button with AJAX

    Have you cleared your cache and then tried this code? If that doesn't work. Then it isn't a cache problem.
    If the post was helpful...Rate it! Remember to use [code] or [php] tags.

  13. #13
    Join Date
    May 2001
    Location
    Mobile, AL.
    Posts
    64

    Re: Updating image button with AJAX

    I finally figured out something that works:

    After redrawing the bitmap, I "change" the imageURL of the imagebutton to something different each time, by appending "?a=" followed by a number which gets incremented each time.

    Now I have one last problem (Should I start a new thread?): The ProgressTemplate control doesn't "show" itself when I click the reset button. The reset button is associated to the update panel, and does trigger an update. Clicking the image button does cause the ProgresTemplate to "show" itself after half a second.

Posting Permissions

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


Windows Mobile Development Center


Click Here to Expand Forum to Full Width

This is a CodeGuru survey question.


Featured


HTML5 Development Center