jquery load method

Question

I am using mscaptcha image and trying to only reload the captcha image on button click. Seems like the captcha image is being loaded twice sometimes.

 <script type="text/javascript">
        $(document).ready(function() {
            $('#btnSubmit').click(function() {
                $('#dvCaptcha').load('default.aspx #dvCaptcha');                
            });
        });
  </script>

<div id="btnDiv">
    <asp:Button ID="btnSubmit" runat="server" Text="Submit" />
</div>

<div id="dvCaptcha">
    <cc1:CaptchaControl ID="ccJoin" runat="server" CaptchaBackgroundNoise="none"  CaptchaLength="5" CaptchaHeight="60" CaptchaWidth="200" CaptchaLineNoise="None" CaptchaMinTimeout="5" CaptchaMaxTimeout="240"  />
</div>

Any ideas?

Answer 1

I'm not all too familiar with asp, but from the top of my head I can think that maybe if you add a "return false" will keep the browser from doing anything unexpected.

Try this:

$('#btnSubmit').click(function() {
    $('#dvCaptcha').load('default.aspx #dvCaptcha');
    return false;     
});

Hope this helps!

Answer 2

If the problem is related to clicking the submit button more than once, then disable it until the response is received:

 <script type="text/javascript">
        $(document).ready(function() {
            $('#btnSubmit').click(function() {
                $(this).attr("disabled", "disabled");
                $('#dvCaptcha').load('default.aspx #dvCaptcha', function() {
                    $('#btnSubmit').removeAttr("disabled");
                });   
                return false;             
            });
        });
  </script>