-
March 22nd, 2007, 08:24 PM
#1
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.
-
March 22nd, 2007, 08:46 PM
#2
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,2010
In theory, there is no difference between theory and practice; 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
-
March 22nd, 2007, 09:05 PM
#3
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.
-
March 23rd, 2007, 09:03 AM
#4
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
-
March 23rd, 2007, 09:09 AM
#5
Re: Updating image button with AJAX
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.
-
March 23rd, 2007, 10:51 AM
#6
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.
-
March 23rd, 2007, 11:38 AM
#7
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?
-
March 23rd, 2007, 05:31 PM
#8
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.
-
March 26th, 2007, 08:20 AM
#9
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.
-
March 26th, 2007, 08:55 AM
#10
Re: Updating image button with AJAX
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.
-
March 26th, 2007, 06:52 PM
#11
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>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="btnReset" EventName="Click" />
</Triggers>
</asp:UpdatePanel>
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" />
<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>
-
March 26th, 2007, 09:07 PM
#12
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.
-
March 28th, 2007, 06:43 PM
#13
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
-
Forum Rules
|
Click Here to Expand Forum to Full Width
|