Ajax request is not working when it called image handler

Question

My buttons click event handler is like this;

$(".imgRefreshContact").click(function () {
       $.ajax({
             url: "/Presentation/Site/Handlers/RefreshCaptcha.ashx",
             type: "POST",
             cache: false,
             async: true,
             success: function () { }
            });
       $("#imgCaptcha").attr('src', '/Presentation/Site/Handlers/CreateCaptcha.ashx');
 });

RefreshCaptcha handler;

public void ProcessRequest(HttpContext context)
    {
        context.Session["CaptchaMetin"] = ConfirmCode.GenerateRandomCode();
    }

CreateCapthca handler;

public void ProcessRequest(HttpContext context)
    {
        ConfirmCode cc = new ConfirmCode(context.Session["CaptchaMetin"].ToString(), 136, 36);

        context.Response.Clear();
        context.Response.ContentType = "image/jpeg";

        cc.Image.Save(context.Response.OutputStream, System.Drawing.Imaging.ImageFormat.Jpeg);

        cc.Dispose();
    }

When I clicked an img button, it's working perfect in Chrome and Firefox but fails in IE 9 Debugger enters into RefreshCaptcha handler but not enters into CreateCaptcha handler. So, IE makes ajax request once, not second time.

What is the problem with IE and ajax request

Do you need to have two .ajax calls maybe? One for RefreshCaptcha and another for CreateCaptcha — Andrew Walters, Apr 18 '13 at 13:16
Unfortunately yes. I use them for different purposes in another pages. — Mehmet Ince, Apr 18 '13 at 13:21
Ooo, I see. You're dynamically setting the source property on an img tag :-) — Andrew Walters, Apr 18 '13 at 13:38
I tried to replicate the issue but wasn't having any luck in IE10 sadly. If you don't change the image src on the fly would the captcha load? Maybe you can preload a handful of capchas and then just show/hide them. Kind of a work around but probably my best guess for a solution — Andrew Walters, Apr 18 '13 at 13:50
Show/Hide is a good solution but I need to refresh Captcha, because of users sometimes can not read current captcha text :) — Mehmet Ince, Apr 18 '13 at 14:01
If you have a failure limit you could preload 5-10 captcha images. just throwing out some ideas — Andrew Walters, Apr 18 '13 at 15:54
@AndrewWalters, I learned the issue. That was caching problem of IE. Then I used Math.Random() as QueryString to prevent caching and it worked :) — Mehmet Ince, Apr 19 '13 at 06:59

score 2 · Accepted Answer · answered May 29 '13 at 08:44

2

Use IE developer tools (F12) to debug the request. IE usually caches the request and if you don't change anything it just returns 304 status code (Not modified). To prevent this, add a random query string parameter to your ajax call. Something like:

url: "/Presentation/Site/Handlers/RefreshCaptcha.ashx?rnd=" + Math.Random()

answered May 29 '13 at 08:44

Kamyar

18,639
9
97
171

Thank you, it worked great! But I have another question, will IE cache every request by created using Math.Random()? Does this cause performance or memory issue? – Mehmet Ince May 29 '13 at 08:50
1

If you send a request without changing any parameter, IE returns 304 (not modified). By adding `Math.Random()` every request you send has a new `rnd` query string value. This forces IE to send the request (Because from IE's perspective, this is a different request). I have used this approach in an enterprise solution with no problem. So AFAIK, this does not have any performance/memory issue. – Kamyar May 29 '13 at 12:23

Ajax request is not working when it called image handler

1 Answers1