Zur Navigation

jquery show() geht nur im Firefox

1 Horst_Braun

Hallo,

ich nutze zum Einblenden eines "Ladebildes" (.dvLoading) die jquery Funktion show().

Das geht perfekt, aber nur im Firefox. Im IE oder Chrome erscheint da nichts.

Im Netz habe ich schon viel gelesen. z.B. show(slow) statt show() oder css("display", "block") statt show()

Alles ohne Erfolg. Hat hier jemand eine Idee. So sieht die js Funktion dazu aus:
function ajaxSave()
        {                  
           $('#login_status_flag').val('Login');
          
            $.ajax({
                type: "POST",
                async:false,
                url: "<?php echo $cnfg["sitebasefolder"]; ?>/Customimages/richeditorAjaxSave/",
                data: $("#Customimage").serialize(),
                dataType : 'json',
                beforeSend: function(request){
                    $(".dvLoading").show();
		   $(".dvLoading").fadeOut(3000);
                },
                success: function(response){
                    $(".dvLoading").show();
                       setTimeout(function(){ $("input[type=submit]").removeAttr("disabled");  },1000);     
                    switch(response.requestedFor){
                        case 'rotate':
                            $(".dvLoading").show();
			    window.location.href = "<?php echo $cnfg["sitebasefolder"]; ?>/Customimages/" + response.nextUrl;
                            break;
                        case 'save':   
                             $(".dvLoading").show();
			     $(".dvLoading").fadeOut(3000);
                              $('#savImgId').val(response.lastId);
                              $('#edit_id').val(response.lastId);
                            break;
                        case 'order':
                            $(".dvLoading").show();
			    $(".dvLoading").fadeOut(3000);
                            $('#savImgId').val(response.lastId);
                            $('#edit_id').val(response.lastId);
                            break;
                        default:    
                            alert('Sorry An error occurred. Please try again.');
                            break;
                    }
                }
            });

Vielen Dank für jede Anregung.

13.03.2015 21:19

2 Jörg

Welches von den im Code befindlichen $(".dvLoading").show(); funktioniert nicht - das in der beforeSend Callback-Funktion?

Geben Chrome und der IE Fehlermeldungen in der JavaScript-Konsole aus?

Wird an der betreffenden Stelle ein alert('Test'); ausgeführt?

13.03.2015 23:32

3 Horst_Braun

Es funktioniert gar keins. Außer im Firefox. Da gehen alle.

Die JavaScript-Konsole zeigt keine Fehler und jedes Alert vor den show() erscheinen korrekt.

Ich hab auch schon
$(".dvLoading").show();

ganz oben in die Funktion gesteckt. Geht auch nicht.

13.03.2015 23:58

4 Jörg

Das hast du ja auch schon ohne Erfolg probiert:

$(".dvLoading").css("display", "block");

Ich nehme an, im CSS ist so etwas definiert:

.dvLoading {
display:none;
}

Wie verhalten sich Chrome und der IE wenn du diese Definition testweise auskommentierst:

.dvLoading {
/*display:none;*/
}

Zeigen die das Bild dann an?

14.03.2015 09:04

5 Horst_Braun

Da hatte ich schon probiert. Ändern nichts.
$(".dvLoading").css("display", "block");

Das ist mein CSS:
#dvLoading {
	height: 150px;
	width: 200px;
	text-align: center;
	position: fixed;
	z-index: 1000;
	left: 53%;
	top: 45%;
	margin: -25px 0 0 -25px;
	display: none;
}

Wenn ich das display: none auskommentiere, dann kommt das Bild.

MfG

14.03.2015 20:41 | geändert: 14.03.2015 20:47

6 Jörg

Du verwendest einmal den Klassen-Selektor ".dvLoading" und einmal den ID-Selektor "#dvLoading". Wenn im HTML so was steht:

<img id="dvLoading" src="..." alt="" />

... dann ist klar, warum das Bild nicht eingeblendet wird. Firefox vollzieht da möglicherweise eine Fehlerkorrektur, indem es bei einer nicht existenten Klasse die gleichnamige ID nimmt.

14.03.2015 20:54 | geändert: 14.03.2015 20:55

7 Horst_Braun

Naja. Das div sieht so aus:
<div id="dvLoading" class="dvLoading">
	<p style="color: #999999;">Speichere... Bitte warten</p>
	<img src="<?php echo $cnfg["sitebasefolder"];?>/img/loadinfo.gif" />
</div>

Also stimmt das dann wieder, oder?

14.03.2015 20:59

8 Jörg

Du hast dann für das Element zwei Definitionen:

#dvLoading {
display:none;
}
.dvLoading {
display:block;
}

Die Frage, welcher Selektor hier Vorrang hat, beantworten die Browser möglicherweise unterschiedlich

Auf der sicheren Seite bist du denke ich, wenn du denselben Selektor verwendest. Dann wird die Definition einfach überschrieben.

14.03.2015 21:09

9 Horst_Braun

OK. Ich hab also aufgeräumt:

HTML:
<div id="dvLoading">
	<p style="color: #999999;">Speichere... Bitte warten</p>
	<img src="<?php echo $cnfg["sitebasefolder"];?>/img/loadinfo.gif" />
</div>

CSS:
#dvLoading {
	height: 150px;
	width: 200px;
	text-align: center;
	position: fixed;
	z-index: 1000;
	left: 53%;
	top: 45%;
	margin: -25px 0 0 -25px;
	display: none;
}

im JS:
$("#dvLoading").css("display", "block");
bzw.
$("#dvLoading").show();

Ergebnis ist genau gleich.

14.03.2015 22:42

10 Jörg

Ein alert('Test'); an gleicher Stelle funktioniert aber?

Was passiert, wenn du das anschließende fadeout() weglässt?

Hast du die Browser-Caches von Chrome / IE zwischendurch mal gelöscht?

Ansonsten wäre es gut, wenn man sich das Problem mal live anschauen könnte - könntest du dazu eine Demo-Seite online stellen?

16.03.2015 10:23 | geändert: 16.03.2015 10:25