CODEWITHSUNDEEP
asp.net-mvc-3jquery
Nil Pun
Nil Pun

Reputation: 17373

Refresh Captcha Image on JQUERY Dialog

I've a jquery model dialg box below. When user clicks on one of the link on page, the dialog box appears with Captcha. When user enters the invalid captch the captch image should be refreshed and should show new text. But this is not happening. Below is the code snippet:

<div id="model">   
    <img id="captchaImage" src="@Url.Content("~/CaptchaImage.ashx?text=" + ViewBag.EncryptedCaptcha)" />  
    <input id="captchText" type="text" value="" />
    <a href="#"id="verfiyCaptcha">Validate</a>
</div>

When user clicks on Validate, the text is sent to MVC controller via $.getJSON. The controller returns back isCpatchValid and encryptedText wrapped in JSON object Captcha. I've a done below if the captcha text is not valid:

$("#captchaImage").attr("src", "~/CaptchaImage.ashx?text=" + Captcha.encryptedText);

On Chrome debugger I can see the controller is returning a correct encrypted text. But this line above doesn't deem to fresh the captch image. I suspect this is due to async call.

COuld someone please help me with how to refresh the captcha image on Jauery Dialog box.

Upvotes: 0

Views: 1318

Answers (1)

Joe Enos
Joe Enos

Reputation: 40393

You can't use the "~" feature in javascript. That's a .NET thing. You'll need to wrap it around a .NET call, like:

attr("src", "@Url.Content("~/CaptchaImage.ashx")?text=" + Captcha.encryptedText)

Or if this JS is in a separate file, you can define a variable back on the view, then use it in the JS file, like:

** in the view **
var CAPTCHA_IMAGE_URL = "@Url.Content("~/CaptchaImage.ashx")";

** in the JS file **
attr("src", CAPTCHA_IMAGE_URL + "?text=" + Captcha.encryptedText)

Upvotes: 1

Related Questions