SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    I Never Give Up roosevelt's Avatar
    Join Date
    May 2005
    Posts
    515
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    jQuery Help, AJAX Image Loading...

    Hi,
    I have a captcha system in my website, and I am using full ajax for this.

    Here's basically how the script works.

    1) captcha.php - outputs a image with random texts in it.

    2) form.html - Outputs the form, and here's the part where the captcha image is loaded:

    HTML Code:
          	<div id="CaptchaCode">
          		<img src="[SiteUrl]/ajax/captcha.php" id="CaptchaCodeImage" />
          	</div>[<a href="javascript:void(null);" id="RefreshCaptcha">Click to Refresh</a>]
    The Click to Refresh link, suppose to reload the Div with a new Captcha Image.

    My jQuery function is:

    HTML Code:
    $.fn.image = function(src, f)
    {
    	return this.each(function()
    	{
    		var i = new Image();
    		i.onload = f;
    		i.src = src;
    		this.appendChild(i);
    	});
    }
    
    function RefreshCaptcha()
    {
    	$("#RefreshCaptcha").click(function()
    	{
    		$("#CaptchaCode").empty();
    		$("#CaptchaCode").image("http://localhost/ajax/captcha.php", 
    								 function()
    								 {
    								 	alert("It's working...");
    								 });
    	});
    }
    But when i click, it does alert me saying It's working... but the div doesn't update with a new image

    FF Error console doesn't show any javascript errors either.

    Any ideas?

  2. #2
    SitePoint Wizard bronze trophy
    Join Date
    Jul 2008
    Posts
    5,757
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    CaptchaCode vs CaptchaCodeImage

  3. #3
    I Never Give Up roosevelt's Avatar
    Join Date
    May 2005
    Posts
    515
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Hmm.. if you are implying that I should switch the variables, then I tried it already.

    For whatever reason, it just doesn't update the div with a new captcha image.

  4. #4
    SitePoint Wizard bronze trophy
    Join Date
    Jul 2008
    Posts
    5,757
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Bah, I didn't see the parent div with id CaptchaCode.

    I'm not familiar with the image() method, but assuming you're using it right, you may have a browser caching issue. Make sure the php script sets proper http headers to prevent caching. Alternatively, append a unix timestamp to the url to make it unique.

  5. #5
    Function Curry'er JimmyP's Avatar
    Join Date
    Aug 2007
    Location
    Brighton, UK
    Posts
    2,006
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Try this:

    Code JavaScript:
    $.fn.image = function(src, f){
        return $(this).each(function(){
            var i = new Image();
            i.onload = f;
            i.src = src;
            $(this).append(i);
        });
    }
     
    function RefreshCaptcha(){
        $("#RefreshCaptcha").click(function(){
            $("#CaptchaCode").empty();
            $("#CaptchaCode").image("http://localhost/ajax/captcha.php", 
                function(){
                    alert("It's working...");
                }
            );
        });
    }
    James Padolsey
    末末末末末末末末末末末末末末末末末末末
    Awesome JavaScript Zoomer (demo here)
    'Ajaxy' - Ajax integration solution (demo here)


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •