[Javascript] ajax, Maximum call stack size exceeded

[regtur2]

Met behulp van Maplace.js (google maps plugin voor jquery) probeer ik een kaart van google maps met daarop markers te laden. Dit gaat goed als ik een "statische" variabele gebruik voor de locaties, maar zodra ik dit probeer te doen via ajax werkt het niet. Zie onderstaande deel van de code:

JavaScript:

var LocsB = [
    {
        lat: 52.9,
        lon: 4.9,
        title: 'Huis 1',
        html: '<h3>Content A1</h3>',
        icon: 'http://maps.google.com/mapfiles/markerA.png',
        animation: google.maps.Animation.DROP
    },
    {
        lat: 51.5,
        lon: -1.1,
        title: 'Huis 15',
        html: [
            '<h3>Content C1</h3>',
            '<p>Lorem Ipsum..</p>'
        ].join(''),
        zoom: 8,
        icon: 'http://maps.google.com/mapfiles/markerC.png'
    }
];

    
        var datahtml = '<div id="gmap-big" style="width:100%;height:600px;"></div>';
                $('.itembar').html(datahtml);
                
                bigdata = new Maplace({
                map_div: '#gmap-big',
                show_infowindows: false,
                locations: LocsB,
                shared: {
                    zoom: 8,
                    html: '%index'
                }
                });   

Tot hier gaat het goed. De kaart met markers wordt geladen. Als ik vervolgens met ajax dezelfde data wil laden, werkt het niet.

JavaScript:

    
        $.ajax({
        url: '<?php echo $locationhost; ?>/functions/results.php?datatype=geojson',
        type: 'post',
        data: $('#filterform').serialize(),
        
        success: function(datageo) {   
        
            $('.wrap_controls').remove();
            
            \\ Hier gaat het fout.
            bigdata.SetLocations(datageo);

            bigdata.Load();
            }       
        }); 

Wanneer ik datageo bij bigdata.SetLocations vervang door LocsB (of andere variabele met daarin geodata), werkt het wel. De json die daadwerkelijk ontvangen wordt, bevat precies hetzelfde als de variabele LocsB.

JavaScript:

[
    {
        lat: 52.9,
        lon: 4.9,
        title: 'Huis 1',
        html: '<h3>Content A1</h3>',
        icon: 'http://maps.google.com/mapfiles/markerA.png',
        animation: google.maps.Animation.DROP
    },
    {
        lat: 51.5,
        lon: -1.1,
        title: 'Huis 15',
        html: [
            '<h3>Content C1</h3>',
            '<p>Lorem Ipsum..</p>'
        ].join(''),
        zoom: 8,
        icon: 'http://maps.google.com/mapfiles/markerC.png'
    }
];

Zoektocht op internet levert op dat de melding (uit Opera en Chrome) 'Uncaught RangeError: Maximum call stack size exceeded' weinig specifiek is. In combinatie met maplace kwam ik meldingen tegen waarbij de coordinaten niet goed geschreven waren. De werkende variabele LocsB komt echter overeen met de ontvangen json dus dat kan het niet zijn.

[Soultaker]

Pro-tip: gebruik [code=javascript][/code]-tags om je code te formatteren, i.p.v. quote-tags.

Post ook eens een (deel van) de stack trace; die geeft meer informatie over waar het mis gaat.

Is datageo in de success-callback een geparset JavaScript object, of nog gewoon een string? In het laatste geval moet je 'm eerst nog met JSON.parse() parsen.

[regtur2]

Volgens mij is dit de stack trace:

(anonymous function) (main.js:13)
setTimeout (async)
lD.(anonymous function).k (VM2311:193)
(anonymous function) (main.js:13)
setTimeout (async)
lD.(anonymous function).k (VM2311:193)
(anonymous function) (main.js:13)
setTimeout (async)
lD.(anonymous function).k (VM2311:193)
(anonymous function) (main.js:13)
setTimeout (async)
lD.(anonymous function).k (VM2311:193)
(anonymous function) (main.js:13)

Volgens mij is datageo gewoon een string. Ik zal eens met JSON.parse() aan de slag gaan.

edit:
Ik heb het wel de hele tijd over json, maar is het eigenlijk wel een json?

[ Voor 7% gewijzigd door regtur2 op 21-04-2015 14:51 ]

[regtur2]

Voor nu heb ik een andere oplossing bedacht. Ik voeg de datageo inclusief script-tags en variabele resultLocations toe aan een div.
$('#variable').html(datageo);

Vervolgens bigdata.SetLocations(resultLocations);

[R4gnax]

regtur2 schreef op dinsdag 21 april 2015 @ 14:59:
Voor nu heb ik een andere oplossing bedacht. Ik voeg de datageo inclusief script-tags en variabele resultLocations toe aan een div.
$('#variable').html(datageo);

Vervolgens bigdata.SetLocations(resultLocations);

Lekker efficient...

Een veel betere oplossing is om de dataType optie van jQuery.ajax te gebruiken en deze op "json" in te stellen.

De echte oplossing is dat stomme excuus voor een web platform dat PHP heet zo aansturen dat het de JSON data met het correcte content-type (nl. application/json) terug stuurt, zodat jQuery dit automatisch als JSON interpreteert.

(Oh en btw; XmlHttpRequests vinden tegenwoordig volgens web standaarden altijd en alleen in UTF-8 plaats. Het is niet mogelijk om een andere character set te gebruiken. Dus als je nog gebruik maakt van PHP: veel plezier met het slechte excuus voor Unicode ondersteuning...)

[ Voor 21% gewijzigd door R4gnax op 21-04-2015 21:27 ]