Dynamisch Bild ändern src mit Jquery funktioniert nicht in IE und Firefox

Question

Ich bin ein Captcha für eine E-Mail implementieren. Wenn Sie auf linkEmail klicken, wird die Schaltfläche E-Mail Modal geöffnet. dort muss ich Captcha-Bild von einem Handler (CaptchaGenerator.ashx) erzeugt, klicken Sie auf linkEmail Schaltfläche klicken. Hier ist der Code dafür.

$(".linkEmail").click(function() { 
    //Load captcha image 
    $('.imgCaptcha').attr('src', '/Custom/AppCode/Utilities/CaptchaGenerator.ashx'); 
    $('#emailModal').modal(); 
}); 

Above Code funktioniert gut in crome aber nicht in IE und Firefox funktioniert. Obwohl ich versucht habe, folgt es kein Glück.

HTML:

<p id="captchacontainerp" class="captchacontainer"></p> 
------------------------------------------------------------- 
$('#captchacontainerp').prepend($("<img id='imCaptcha' class='imgCaptcha' src='/Custom/AppCode/Utilities/CaptchaGenerator.ashx'></img>")); 
------------------------------------------------------------- 
var img = $('<img id="imCaptcha" class="imgCaptcha">'); 
img.attr('src', '/Custom/AppCode/Utilities/CaptchaGenerator.ashx'); 
$('#captchacontainerp').empty(); 
img.appendTo('#captchacontainerp'); 
--------------------------------------------------------------- 
$('#captchacontainerp').empty(); 
$('#captchacontainerp').append($("<img id='imCaptcha' class='imgCaptcha' src='/Custom/AppCode/Utilities/CaptchaGenerator.ashx'></img>")); 

Answer 1

IE alle Anforderung GET das Caching, so einen Zeitstempel auf Ihre Anfrage URL zB hinzufügen:

$(".linkEmail").click(function() { 
    //Load captcha image 
    $('.imgCaptcha').attr('src', '/Custom/AppCode/Utilities/CaptchaGenerator.ashx?'+new Date().getTime()); 
    $('#emailModal').modal(); 
}); 

Answer 2

Haben Sie das Attribut src versucht Einstellung 'auf', bevor es wieder zu ändern ? Auch, was sind die Caching-Einstellungen Sie verwenden (sowohl lokal und auf dem Server)

Answer 3

Wenn Sie Inline-Stil-Attribut, Höhe oder Breite angeben wie,

<img src="themes/images/01.png" height="100" width="100" /> 
<img src="themes/images/01.png" style="height:100px; width=100px;" /> 

dann es zuerst entfernen und versuche es erneut.

Auch wenn Sie extern angeben Stil Stil-Tag,

#imageId{ 
    height : 100px; 
    width : 100px; 
    } 

dann entfernen sie auch zuerst und versuchen. Nachdem Sie das Stilattribut aus den Bildern entfernt haben, wird das Bild angezeigt.

Höhenattribut ist möglicherweise mit IE arbeiten, aber Breite Attribut funktioniert nicht.

Wenn die obige Lösung nicht funktioniert, dann: Manchmal werden PNG-Dateien nicht angezeigt. Versuchen Sie also, ihr JPG-Bild zu verwenden.

Answer 4

Ich hatte das gleiche Problem beim Versuch, re Captcha-Taste aufzurufen. Nach einigem Suchen, arbeitet jetzt Funktion in fast allen bekannten Browsern (Chrom, Firefox, IE, Rand, ...):

function recaptcha(theUrl) { 
    $.get(theUrl, function(data, status){}); 
    document.getElementById("captcha-img").src = ""; 
    setTimeout(function(){ 
    document.getElementById("captcha-img").src = "captcha?"+new Date().getTime(); 
    }, 0); 
} 

‚THEURL‘ verwendet wird, neue Captcha Bild zu machen und kann ignoriert werden in Ihrem Fall. Der wichtigste Punkt ist das Erzeugen einer neuen URL, die FF und IE zwingt, das Bild erneut zu rendern.