Ajax request is getting failed

Question

var x;

function addtoDom() {
    console.log("Adding to DOm");
    $("#capt").html('<div id="mduit"><img src="captcha1.jpg"></div>');
}

function request() {
    $.ajax({
        url: "mudit.php",
        type: "GET",
        success: function (data) {
            console.log(data);
            x = data;
            addtoDom();
        }
    });
}

request();

Mudit.php goes here

<?
// header("Content-type:image/jpeg");

session_start();
$img = imagecreate(150,60);
imagecolorallocate($img,200,255,200);
$abc = rand();

while ($abc < 10000) {
    $abc = rand();  
}

$_SESSION['Captcha_num'] = $abc;
imagettftext($img,35,0,0,40, 89,"abcd.ttf", $abc);
imagejpeg($img,"captcha1.jpg",65);
echo $abc;
?>

here the code is working fine in chrome but not working in firefox. ie while refresing the image on click refresh button .. captcha refreshes in chrome but not in firefox.

Answer 1

This is probably caching issue. Try this:

function addtoDom() {
    $("#capt").html('<div id="mduit"><img src="captcha1.jpg?' + +new Date() +  '"></div>');
}

Here captcha1.jpg will be forced to refresh due to new GET parameter on every click.

Also don't do this:

echo $abc;

it doesn't make sense, since it's secret and you don't want to provide client with this value.