title: Javascript and ASP MVC - refreshing an image
body: <p>I have a page that contains a captcha.  whenever the user enters the captcha incorrectly the form will submit and they will move on.  If not, i want to refresh the captcha image so that the user has to enter the new number.  this code currently works in Chrome, but the image wont refresh in firefox. does not work in IE either. </p>
  
  <p>javascript method: </p>
  
  <pre><code>function CheckCaptcha() {
      var UserInput = $("#Captcha").val();
  
      $.ajax({
          type: "POST",
          url: "/Messaging/CheckUserCaptcha",
          data: { userCaptcha: UserInput },
          success: function (data) {
              //alert("SUCCESS: " + data.success);
              //alert("SUCCESS2: " + data.message);
              var correct = data.success;
              if (correct == true) {
                  document.forms[0].submit();
              } else {  THIS IS WHERE I NEED TO REFRESH THE CLASS
                  alert(data.message);
                  $(".captchaImage").attr("src", "&lt;%= Url.Action("CaptchaImage", "Messaging", new {prefix = "CaptchaImage"}) %&gt;");
              }    
          }
      });
      return false;
  }
  </code></pre>
  
  <p>this is what the HTML looks like</p>
  
  <pre><code>    &lt;img src="/Messaging/CaptchaImage?prefix=CaptchaImage" class="captchaImage"&gt;&lt;/img&gt;
  </code></pre>