JavaScript jquery eigenartige Reihenfolge bei Eventeintritt

[-fl0w-]

Hey,
ich habe ein Jquery Event auf ein Button gelegt, welches eine Suchfunktion aufruft. Die Suche erfolgt per AJAX (async = false) und das Ergebnis wird in per .append eingefügt. Nun möchte ich vor dem AJAX Request einen Ladescreen einblenden und danach wieder ausblenden( siehe Code). Aber das "Loading..:" wird nicht angezeigt. Falls ich das ".remove" entferne wird das "loading" auch erst zusammen mit den Suchergebnissen angezeigt... Ideen? Es scheint mir als ob zuerst die "fulltext()" Funktion ausgeführt wird und danach erst der "loading" Teil eingeblendet(und direkt wieder ausgeblendet) wird... Hat hier jemand eine Lösung dafür?

Event Handler:

$("#gosearch").on("click", function () {
    $('#searchfield').after('<p class="primary alert loadfield">loading...</p>'); 
    magic.search.fulltext();
    $('.loadfield').remove(); 
});

Suchfunktion:

fulltext: function() {        
                $('#searchresults').html('');
                var sName = $("#searchinput").val();
                var request = $.ajax({
                    url: "/index.php/search/searchName/"+sName,
                    dataType:"json",
                    async: false
                }).responseText;

                var searchRes = $.parseJSON(request);
                for(i=0;i<searchRes.length;i++){
                    $('#searchresults').append('<div class="centered eight columns default alert">\n\
                        <div class="three columns image rounded" >\n\
                            <img src="http://magicrepo.co.nf/img/'+searchRes[i][1]+'/'+searchRes[i][3]+'.full.jpg" />\n\
                        </div>\n\
                        <div class= "centered five columns>\n\
                            <p class="">'+searchRes[i][0]+'</p><p class="">'+searchRes[i][2]+'</p><p class="small">'+searchRes[i][8]+'</p>\n\
                        </div>\n\
                    \n\
                    </div>').fadeIn(8000);
                }
                
            }

Problem gelöst. dataType = "json" muss durch dataType = "text" ersetzt werden sonst interpretiert er ein schon erhaltenes JSON nochmals als JSON und hat dann Probleme beim parsen!

 

[Hancock]

Machs asynchron, dann sollte es funktionieren.

 

[-fl0w-]

Habe ich dann bekomme ich: "Unexpected Token A" bei parseJSON... aber vorher gings... alert(data) gibt noch die richtigen Daten aus. Danach kommt der Fehler. Daten werden mit encode_JSON im PHP Skript konvertiert..

Code:

ajaxFulltext: function() {        
                $('#searchresults').html('');
                var sName = $("#searchinput").val();
                $.ajax({
                    url: "/index.php/search/searchName/"+sName,
                    dataType:"json",
                    beforeSend: function() {
                        $('#searchfield').after('<p class="primary alert loadfield">loading...</p>');
                    },
                    complete: function() {
                        $('.loadfield').remove();
                    },
                    success: function(data) {
                        magic.search.addResultsToDom(data);
                    },
                    error: function (xhr, ajaxOptions, thrownError) {
                        alert(xhr.status);
                        alert(thrownError);
                    }
                });  
            },
            addResultsToDom: function(data) {
                alert(data);
                var searchRes = $.parseJSON(data);  
                for(i=0;i<searchRes.length;i++){
                    $('#searchresults').append('<div class="centered eight columns default alert">\n\
                        <div class="three columns image rounded" >\n\
                            <img src="http://magicrepo.co.nf/img/'+searchRes[i][1]+'/'+searchRes[i][3]+'.full.jpg" />\n\
                        </div>\n\
                        <div class= "centered five columns>\n\
                            <p class="">'+searchRes[i][0]+'</p><p class="">'+searchRes[i][2]+'</p><p class="small">'+searchRes[i][8]+'</p>\n\
                        </div>\n\
                    \n\
                    </div>');
                }
            }
        }

 

[Hancock]

Bist du dir sicher, dass Data nicht schon das geparste JSON ist (also schon Object)?
http://api.jquery.com/jQuery.ajax/ dataType="json": Evaluates the response as JSON and returns a JavaScript object.

 

[-fl0w-]

ja ist es wenn datatype = json, da ich aber schon ein json bekomme versucht er es nocheinmal in ein json zu konvertieren und das geht nicht

 

[Spike S.]

Entweder dataType raus (oder auf "text" stellen) ODER parseJSON raus. Beides geht nicht. Durch ein alert(typeof data) in der success-Funktion wird man das sehen. Wenn es leer oder undefined ist, liefert PHP keinen validen JSON String.

 

[-fl0w-]

Danke, ich habe auch auf dataType "text" umgestellt, wie direkt darüber beschrieben! Nur hatte ich das vorher nich im Blick da bei async = false dies trotzdem funktioniert hat.. aber das ist ja acuh noch deprecated und der Code vorher war auch schlecht .. Ich versuche diesen kontinuierlich besser zu machen