How to reload an image using ajax

Question

Here is my captcha.php script: (it creates an image)

// creating a image in this script and set its value on the session

Also I have a <img> in the contact_us.php file for showing that captcha image:

<img src="http://localhost/captcha.php" class="captcha_pic" alt="Captcha">

Also I have an ajax code for submiting that form in the contact_us.js (this file is atteched to contact_us.php):

$("#f_contact_form").on("submit", function (e) {
   e.preventDefault(e);
   $.ajax({
      url:  $("#f_contact_form").attr("action"),
      type: 'POST',
      data: $("#f_contact_form").serialize(),
      dataType : 'JSON',
      success: function (contact) {
        $(".contact_message").html(contact.message);

        // here I need to reload that image url for changing the captcha image

      }
   });
});

It should be noted that when I change the url of that image using [inspect element] (in the static) and then I write the correct name, the image will be changed. for example I replace the current image url with src=".../captcha.ph" and then I write the correct name src=".../captcha.php", then the page will be changed (exactly what I want).

Now there is any solution for reloading captcha image?

Try and see if any cache buster works(ex: appending time as query string) — , Oct 03 '15 at 15:11
can't inject image file contents directly into the dom , image must be in `` tag. Look into how to use base64 encoded image url — charlietfl, Oct 03 '15 at 15:23

score 2 · Accepted Answer · edited May 23 '17 at 12:30

You need to reload your image with a unique query string attached to it, in order to prevent your browser from caching the image. The easiest way is to just append the current time. Since you are already using jQuery, here's one way you can do it.

var unique = $.now();
$('.captcha_pic').attr('src', 'http://localhost/captcha.php?' + unique);

However, some people may recommend against this solution as it can fill up your cache. Although the alternative will require that you send cache control headers.

score 2 · Answer 2 · answered Oct 03 '15 at 16:20

There's a lot of solution for there. Here are some of your options.

Remove your images , then create a new one.

  $("#images").remove();
  $("div").html("<img src='http://localhost/captcha.php' class='captcha_pic' alt='Captcha'>")

Using unique to avoid cache.

 $("#f_contact_form").on("submit", function (e) {
 e.preventDefault(e);
    $.ajax({
       url:  $("#f_contact_form").attr("action"),
       type: 'POST',
       data: $("#f_contact_form").serialize(),
       dataType : 'JSON',
       success: function (contact) {
         $(".contact_message").html(contact.message);
         $('.captcha_pic').attr('src', 'http://localhost/captcha.php?' + new Date().getTime());
       }
    });
 });

Thanks. +1 upvote fore you. However your first solution does not work for me. — Shafizadeh, Oct 03 '15 at 16:39

score 0 · Answer 3 · answered Nov 27 '20 at 13:10

0

$.now() has been deprecated in jQuery 3.3. Correct way based on accepted answer:

var unique = Date.now();
$('.captcha_pic').attr('src', 'http://localhost/captcha.php?' + unique);

answered Nov 27 '20 at 13:10

Roman Khoroshev

1

How to reload an image using ajax

3 Answers3

Linked