Ankündigung

Einklappen
Keine Ankündigung bisher.

Ajax Loader funktioniert nicht im Crome

Einklappen

Neue Werbung 2019

Einklappen
X
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • Ajax Loader funktioniert nicht im Crome

    Hallo un guten Morgen an alle,

    ich habe ein Problem wo ich nun keinen Ansatz mehr weiß, ich habe im Crome den Debugger benutzt und da lief alles ab wie es soll. Ich habe das im Firefox getestet und da klappt das prima.

    Folgendes Szenario, ich drücke einen Button der eine Berechnung auf dem Server durchführen soll, dass klappt auch super. Als Result kommt ein JSON zurück mit der Berechnung. Das ganze passiert, na klar auf Ajax.

    So un der Zeit wo die Antwort noch nicht da ist, ergo die Berechnung noch auf dem Server läuft, soll das Datenblatt im Browser mit einem Ajaxloader blockiert werden. So das der Nutzer sichtbar sieht das was passiert.

    Und im Crome will der Ajaxloader einfach nicht einblenden.

    Hier mein Code.

    Code:
    calcBtn.on("click", function(event) {
    	$("#pane_south").append(object.table.ajaxLoader({
    		load : true,
    		blockElem : "#pane_south",
    		posTop : 50
    	}));
    	
    	var response = {};
    	
    	$.ajax({
    		url : fmLvTable.opts.ajaxUrl,
    		type : "POST",
    		dataType : "JSON",
    		contentType : "application/json; charset=utf-8",
    		data : JSON.stringify(params),
    		success : function(data) {
    			var result = JSON.parse(JSON.stringify(data));
    			
    			if (result != "") {
    				$("#p_lv_auftrag_calc").find(".row").remove();
    				response.p_lv_auftrag_calc = result;
    				object.table.tableMap().dataIsSaved();
    			}
    		},
    		async : false
    	});
    	
    	if (typeof response.p_lv_auftrag_calc != "undefined") {
    		object.table.tableMap().rowHandles("loadMap", "refreshMap", {
    			config : fmLvTable.opts,
    			result : response,
    			paginate : {
    				of : 1,
    				to : readCookieValue("rows")
    			}
    		});
    		
    		object.table.ajaxLoader({
    			load : false,
    			blockElem : "#pane_south"
    		});
    	}
    });
    Nach Button Klick soll der Loader eingeblendet werden.
    Wenn eine Antwort vom Server kommt, werden die alten Daten aus dem DOM entfernt.
    Ein Plugin Funktion wird angestoßen die den Tabellen DOM mit den neuen Daten erstellt.
    Der Ajax Loader soll ausgeblendet werden.

    So alles funktioniert, nur das einblenden nicht und das wie gesagt nur im Crome nicht.

    Hier noch die CSS.
    Code:
    .ajax_loader {
    	background-color: #c6c6c6;
    	opacity: 0.80;
    	-webkit-opacity: 0.80;
    	-moz-opacity: 0.80;
    	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
    	filter:alpha(opacity=50);
       	height: 360px;
       	z-index: 20000;
       	text-align: center;
       	display: table-cell;
       	vertical-align: middle;
    }
    Und die Ajax Loader Funktion im Plugin.

    Code:
    $this.ajaxLoader = function(settings) {
    					
    	if (typeof settings.load != "undefined" && settings.load == true) {
    		var elemObj = {
    			elem : $(settings.blockElem),
    			width : function() {
    				return this.elem.width();
    			},
    			height : function() {
    				return this.elem.height()}
    		};
    		
    		var loader = $("<div>");
    		var loadImg = $("<img src='" + $this.opts.pathToImages + "ajax-loader.gif' name='loader' alt='daten werden geladen' />");
    		loader.addClass("ajax_loader");
    		loader.append(loadImg);
    		
    		loadImg.css({
    			position : "relative",
    			top : ((elemObj.height() / 2) - ((typeof settings.posTop != "undefined") ? settings.posTop : 0))
    		});
    		
    		loader.css({
    			width : elemObj.width(),
    			height : elemObj.height(),
    			position : "absolute",
    			left : 0,
    			top : 0 
    		});
    		
    		return loader;
    	} else {
    		$(".ajax_loader").remove();
    	}
    };
    Habt ihr eine Idee was ich da tun kann?

    Vielen Dank für eure Hilfe. Gruß Litter
    Aus dem Dynamo Lande kommen wir. Trinken immer reichlich kühles Bier. Und dann sind wir alle voll, die Stimmung ist so toll. Aus dem Dynamo Lande kommen wir.
    [URL]http://www.lit-web.de[/URL]

  • #2
    Guten Morgen an alle,

    bitte entschuldigt den Push, aber es sind ja schon paar Tage vergangen seit dem Eröffnungspost und noch keine Antwort.

    Hat jemand eine Idee woran das liegen kann?

    Gruß der Litter
    Aus dem Dynamo Lande kommen wir. Trinken immer reichlich kühles Bier. Und dann sind wir alle voll, die Stimmung ist so toll. Aus dem Dynamo Lande kommen wir.
    [URL]http://www.lit-web.de[/URL]

    Kommentar


    • #3
      Kannst du bitte ein Fiddle anlegen?

      Kommentar


      • #4
        Zitat von coolio Beitrag anzeigen
        Kannst du bitte ein Fiddle anlegen?
        In dem Falle leider nicht, weil das AJAX abhängig ist und ich das lokal teste.

        Das Problem tritt auch nur im Crome auf.
        Aus dem Dynamo Lande kommen wir. Trinken immer reichlich kühles Bier. Und dann sind wir alle voll, die Stimmung ist so toll. Aus dem Dynamo Lande kommen wir.
        [URL]http://www.lit-web.de[/URL]

        Kommentar


        • #5
          Kannst du denn kurz ein minimales Sample als zip packen und irgendwo hochladen?
          [QUOTE=nikosch]Macht doch alle was Ihr wollt mit Eurem Billigscheiß. Von mir aus sollen alle Eure Server abrauchen.[/QUOTE]

          Kommentar


          • #6
            Hallo,

            also das Problem zieht sich immer weiter.

            Ich habe nun für eine neue Anwendung eine Anmeldung. Kurz dazu gesagt, die Anwendung kann im allgemeinen nur nach einem erfolgreichen Login bedient werden. Auf dem Server läuft ne Java Anwendung und im Client eben Javascript.

            Hier der Code.

            Code:
            if (typeof $response.state != "undefined" && $response.state == false) {
            				$loginError.text("Die Anmeldedaten waren nicht korrekt!");
            			} else if (typeof $response.state != "undefined" && $response.state == true) {
            				$loginError.text("");
            				application.globals.isLogin = true;
            				
            				if (application.globals.isLogin == true) {
            					$("#application-login").css("display", "none");
            					$("#application-load").css("display", "block");
            					
            					$.ajax({
            						url : application.globals.serviceUrl + "app/build",
            						type : "GET",
            						dataType : "JSON",
            						contentType : "application/json; charset=utf-8",
            						data : "",
            						success : function(data) {
            							console.log(data);
            						},
            						async : false
            					});
            				}
            			}
            Kurz erklärt. War eine Anmeldung erfolgreich, dann soll ein Loader eingeblendet werden und es wird eine Action Methode aufgerufen die nun alles was für die Anwendung benötigt wird als großen JSON String zurück gibt. Bis dieser Json String als Response da ist soll eben dieser Loader im Display zu sehen sein.

            Das passiert aber nicht, der Loader wird erst eingeblendet wenn die Antwort vom Server da ist und das ist natürlich zu spät.

            Komisch das es im FF aber reibungslos funktioniert, nur im Crome nicht.
            Aus dem Dynamo Lande kommen wir. Trinken immer reichlich kühles Bier. Und dann sind wir alle voll, die Stimmung ist so toll. Aus dem Dynamo Lande kommen wir.
            [URL]http://www.lit-web.de[/URL]

            Kommentar


            • #7
              Das kannst du alles direkt in der ajax funktion machen, Stichwort: beforeSend

              Code:
              $.ajax({
              	url : application.globals.serviceUrl + "app/build",
              	type : "GET",
              	dataType : "JSON",
              	contentType : "application/json; charset=utf-8",
              	data : "",
              	beforeSend: function() {
              		// zeige den loader an ... wie auch immer, ob als overlay oder mit irgendeiner funktion oder einem plugin ... 
              	},
              	success : function(data) {
              		// blende hier den loader wieder aus ...
              		console.log(data);
              	},
              });
              http://api.jquery.com/jquery.ajax/

              Kommentar


              • #8
                Also langsam weiß ich ehrlich gesagt nicht wirklich weiter. Ich kann eben auch nichts sinnvolles in jsfiddle vorbereiten.

                Folgender Code funktioniert in FF einwandfrei. Im Crome, Opera und IE 10 jedoch funktioniert es nicht. Da wird der Loader übersprungen.

                Code:
                if (application.globals.isLogin == true) {
                					$applicationData = {};
                					
                					$.ajax({
                						url : application.globals.serviceUrl + "app/build",
                						type : "GET",
                						dataType : "JSON",
                						contentType : "application/json; charset=utf-8",
                						data : "",
                						beforeSend : function() {
                							$("#application-login").css("display", "none");
                							$("#application-load").css("display", "block");
                						},
                						success : function(data) {
                							$applicationData = data;
                						},
                						async : false
                					});
                					
                					if (Object.keys($applicationData).length > 0) {
                						$("#application-load").css("display", "none");
                						$("#application").css("display", "block");
                					}
                				}
                Aus dem Dynamo Lande kommen wir. Trinken immer reichlich kühles Bier. Und dann sind wir alle voll, die Stimmung ist so toll. Aus dem Dynamo Lande kommen wir.
                [URL]http://www.lit-web.de[/URL]

                Kommentar


                • #9
                  Da wird der Loader übersprungen.
                  Was meinst du denn damit genau? Setz doch mal breakpoints und schau dir das im Debugger an. Wieso ist der ajax-call eigentlich synchron?

                  Wenn du die App ein wenig entkoppeln willst, wirf mal nen Blick hierauf: http://softwareas.com/automagic-event-registration/ Damit kriegste leichter eine lose Kopplung der Module hin ohne groß umschreiben zu müssen.
                  I like cooking my family and my pets.
                  Use commas. Don't be a psycho.
                  [URL="http://jscouch.de"]Blog[/URL] - [URL="http://coverflowjs.github.io/coverflow/"]CoverflowJS[/URL]

                  Kommentar

                  Lädt...
                  X