Ajax.Requests responseText wil niet in een keer in variabele - Softwareontwikkeling

vrijdag 27 maart 2009 15:29

Acties:

0 Henk 'm!

Topicstarter

Ik ben bezig met een webshop, laad hier de categorieen (niet op de layout/naamgevingen letten

) maar als ik in het menu een categorie (Petjes in dit geval, deze werkt zeker) aanklik, moet ik twee keer klikken.
Pas als ik twee keer klik, waar de tweede klik zit maakt niet uit, laat hij de producten zien uit de categorie.

Url: Webshop

Bij de eerste klik krijg ik bij de javascript-debugger: SyntaxError: Badly formed JSON string:, terwijl de json string correct is hier

JSON Validator

Wie ziet wat er fout zit...? Of heeft een andere oplossing.

JavaScript: ajaxscripts.js

// JavaScript Document

var jm = '';

function meuh()
{
  alert('meuh');  
}

//Draw all products in a category
function drawAllInCategory(cat)
{
  var url = './getAllFromCategory.php?cat=' + cat;  
  
    var ajax = new Ajax.Request(url,
                  {
                    method: 'get',
                    onSuccess: function(transport)
                    {
                      jm = transport.responseText;
                    }
                  });
  
  var jsonObject = jm.evalJSON();
  
  var table = '<table>\n';
  
  for(i = 0 ; i < jsonObject['products'].length ; i++)
  {
    table +=  '<tr onClick="drawProduct(' + jsonObject['products'][i].id + ')">\n' +
          '<td>' + jsonObject['products'][i].id + '</td>\n' +
          '<td>' + jsonObject['products'][i].name + '</td>\n' +
          '</tr>\n';    
  }
  
  table += '</table>';
  
  $('content_div').innerHTML = table;
}

Maak hier gebruik van ProtoType

vrijdag 27 maart 2009 15:32

Acties:

0 Henk 'm!

Verwijderd

Ken prototype niet zo goed maar denk dat dit je oplossing is: (async=false)

JavaScript:

var ajax = new Ajax.Request(url,
                  {
                    method: 'get',
                    async: false,
                    onSuccess: function(transport)
                    {
                      jm = transport.responseText;
                    }
                  });

vrijdag 27 maart 2009 15:38

Acties:

0 Henk 'm!

crisp

Devver

Pixelated

Wat Blues zegt. De enige reden dat het wel 'werkt' bij een tweede request is omdat je variabele jm niet lokaal definieert en dus de tweede keer wel gevuld is met de response van de eerste request.

Intentionally left blank

vrijdag 27 maart 2009 15:55

Acties:

0 Henk 'm!

gafietsuh

Topicstarter

Nou, als ik hem lokaal aanmaak (leeg of niet) dan kan hij er helemaal niks mee. Dan krijg ik de melding dat hij 'undefined' is.
Maar deze oplossing werkt ook niet...

vrijdag 27 maart 2009 16:00

Acties:

0 Henk 'm!

crisp

Devver

Pixelated

En als je het nu eens async laat en je hele handling in een aparte functie stopt:

JavaScript:

//Draw all products in a category
function drawAllInCategory(cat)
{
    var url = './getAllFromCategory.php?cat=' + cat;  

    var ajax = new Ajax.Request(
        url,
        {
            method: 'get',
            onSuccess: handleAjaxResponse
        }
    );
}

function handleAjaxResponse(transport)
{
    var jm = transport.responseText;
    var jsonObject = jm.evalJSON();

    var table = '<table>\n';

    for(i = 0 ; i < jsonObject['products'].length ; i++)
    {
        table +=   '<tr onClick="drawProduct(' + jsonObject['products'][i].id + ')">\n' +
        '<td>' + jsonObject['products'][i].id + '</td>\n' +
        '<td>' + jsonObject['products'][i].name + '</td>\n' +
        '</tr>\n';    
    }

    table += '</table>';

    $('content_div').innerHTML = table;
}

Intentionally left blank

vrijdag 27 maart 2009 16:02

Acties:

0 Henk 'm!

Apen-nootjes

aka Apen-klootjes

'k weet trouwens ook niet of het wel de bedoeling is dat er een HTML pagina van gemaakt wordt? Als ik namelijk de complete response bekijk dan ziet hij er zo uit:

JSON:

<html><head></head><body>{"products":[{"id":"119","product_id":"121","name":"Webshop Petje 1","specific_data":"Beschrijving petje 1"},{"id":"120","product_id":"122","name":"Webshop Petje 2","specific_data":"Beschrijving petje 2"},{"id":"121","product_id":"123","name":"Webshop Petje 3","specific_data":"Beschrijving petje 3"},{"id":"122","product_id":"124","name":"Webshop Petje 4","specific_data":"Beschrijving petje 4"},{"id":"123","product_id":"125","name":"Webshop Petje 5","specific_data":"Beschrijving petje 5"},{"id":"124","product_id":"126","name":"Webshop Petje 6","specific_data":"Beschrijving petje 6"},{"id":"125","product_id":"127","name":"Webshop Petje 7","specific_data":"Beschrijving petje 7"},{"id":"126","product_id":"128","name":"Webshop Petje 8","specific_data":"Beschrijving petje 8"}]}</body></html>

Misschien moeten de HTML tags weg? Geen idee verder hoor!

Edit: Als ik een F5 doe op de pagina en dan nogmaals de bron bekijk is ook de HTML er omheen weg... zeer raar! maar dat zou wel verklaren waarom het de 2e keer wel werkt...

[ Voor 7% gewijzigd door Apen-nootjes op 27-03-2009 16:04 ]

SmartDoDo: Ach, afhankelijk van je smaak kan het best een lekker geil ding zijn :P
You never had a date you couldn't inflate

vrijdag 27 maart 2009 21:55

Acties:

0 Henk 'm!

wboard

-=<wboard>=-

crisp schreef op vrijdag 27 maart 2009 @ 16:00:
En als je het nu eens async laat en je hele handling in een aparte functie stopt:

JavaScript:

//Draw all products in a category
function drawAllInCategory(cat)
{
    var url = './getAllFromCategory.php?cat=' + cat;  

    var ajax = new Ajax.Request(
        url,
        {
            method: 'get',
            onSuccess: handleAjaxResponse
        }
    );
}

function handleAjaxResponse(transport)
{
    var jm = transport.responseText;
    var jsonObject = jm.evalJSON();

    var table = '<table>\n';

    for(i = 0 ; i < jsonObject['products'].length ; i++)
    {
        table +=   '<tr onClick="drawProduct(' + jsonObject['products'][i].id + ')">\n' +
        '<td>' + jsonObject['products'][i].id + '</td>\n' +
        '<td>' + jsonObject['products'][i].name + '</td>\n' +
        '</tr>\n';    
    }

    table += '</table>';

    $('content_div').innerHTML = table;
}

dit werkt inderdaad!, wat ik niet begrijp is waarom je dat in een aparte functie zou moeten stoppen?

A smooth sea never made a skilled sailor

vrijdag 27 maart 2009 22:13

Acties:

0 Henk 'm!

Verwijderd

wboard schreef op vrijdag 27 maart 2009 @ 21:55:

dit werkt inderdaad!, wat ik niet begrijp is waarom je dat in een aparte functie zou moeten stoppen?

Omdat het asynchroon is. Het script blockt niet tijdens het opvragen van de gegevens. Er zouden allerlei andere dingen tegelijkertijd gedaan kunnen worden. De functie wordt pas aangeroepen zodra er een resultaat is.