[PHP/JQUERY/JSON] JSON string gebruiken in jquery/ajax

[SoeperKees]

Wat ik wil is de waardes die ik terug krijg gebruiken om een checkbox aan te vinken. 1 of meerdere.

PHP bestand waar jquery data naar heen stuurt.

PHP:

    $user_id=$_SESSION['user_id'];
    $pakket_id=$_POST['pakket_id'];
    $bericht=array();

    $teller=0;

    $sBepalingenQ = "SELECT bepaling_id , pakket_id FROM pakket_bepalingen WHERE pakket_id = ? ";

    if ($stmt = mysqli_prepare($database_connection, $sBepalingenQ)) 
    {

        mysqli_stmt_bind_param($stmt, "s", $pakket_id);
        
        mysqli_stmt_execute($stmt);

        mysqli_stmt_bind_result($stmt, $bepaling_id, $pakket_id);
        
        
        /* fetch values */
        while (mysqli_stmt_fetch($stmt)) {
        
        $tt=array(
        "bepaling_nummer" => $bepaling_id
        );
        $bericht[$teller]=$tt;
        $teller++;
        
        }
        printf(json_encode($bericht));
        //echo json_encode($bericht);
        mysqli_stmt_close($stmt);
        //header("Content-Type: application/json", true);
        //var_dump($bericht);
        
    }

jquery stuk

Java:

    //Selecteer de bepalingen die bij het Pakket horen
    $(".select_pakket_knop").click(function() {
        var pakket_id = $(this).attr("id");
        var bepalingen_checkbox = new Array();
        
        if(pakket_id !== '') {
            $.ajax( {
                type: "POST",
                url: "bepalingen_selecteren.php",
                //dataType: 'json',
                data: { pakket_id: pakket_id }, //pakket_id wordt hier naar php gestuurd als _POST['pakket_id']
                cache: false,
                success: function(data) {
                    //var data = jQuery.parseJSON(data);
                    //console.log(data[0],data[1]);
                    //var test = (data[0],data[1]);
                    var test= new Array();
                    var test = data;
                    
                    for (var i = 0; i < test.length; i++) {
                        console.log(test[i]);
                        $(".checkboxes").each(function() {
                            //console.log( index + ": " + $( this ).val() );
                            bepalingen_checkbox = ($(this).val());
                            //console.log(bepalingen_checkbox);
                            if(test[i]==bepalingen_checkbox) {
                                $(this).prop("checked", true);
                                //alert('test');
                            }

                        });

                    }

                    $('.succes_melding').html(data).fadeIn().fadeOut(3500);
                    $(".checkboxes").each(function() {
                        //console.log( index + ": " + $( this ).val() );
                        bepalingen_checkbox = ($(this).val());
                        //console.log(bepalingen_checkbox);
                        if(data==bepalingen_checkbox) {
                            $(this).prop("checked", true);
                        }

                    });
                },
                error : function () {
                   alert("error");
                }
            });
        }return false;    

    });

Wat ik hier van terug krijg ik dit:

[{"bepaling_nummer":7},{"bepaling_nummer":2}]

Als ik dat door de jsonlint haal, krijg ik een Valid JSON.

Als ik dataType: json aanzet, krijg ik dit in chrome console:
Object {bepaling_nummer: 7}
Object {bepaling_nummer: 2}

Maar verder zou ik niet weten hoe ik deze moet gebruiken in de rest van het script....

Hoe krijg ik het voor elkaar om de bepaling_nummer's, 7 & 2 in dit geval, te gebruiken in == geval op de checkbox's value?

[BasieP]

ik begrijp dat je een stuk code gecopy paste hebt?

Je genereerd (netjes) een json string, maar snapt vervolgens niet hoe je hem moet gebruiken?

ik begrijp niet met de code die je post dat je dit vraagt, maargoed.

Ik mis je DOM in je TS, maar ik neem aan dat elke checkbox een id heeft die er ongeveer zo uitziet:

HTML:

<form>
  <input id="bepaling_id_1" type="checkbox"><label for="bepaling_id_1">Optie 1</label>
  <input id="bepaling_id_2" type="checkbox"><label for="bepaling_id_1">Met extra gratis extra's</label>
  <input id="bepaling_id_3" type="checkbox"><label for="bepaling_id_1">En gratis verzending</label>
</form>

Dan krijg je zoiets als succes function (de onderste helft van je code is dubbel, dus heb die weggelaten):

JavaScript:

success: function(data) { 
  for (var i = 0; i < data.length; i++) { 
    $('#bepaling_id_' + data[i].bepaling_nummer).prop("checked", true);
  }
  $('.succes_melding').html(data).fadeIn().fadeOut(3500); 
}

Evt. kun je ook checkboxes pakken op value, maar ik vraag me af of dat de bedoeling is van checkboxes

wordt dan zoiets:

JavaScript:

$('input[type="checkbox"][value="' + data[i].bepaling_nummer + '"]').prop("checked", true);

[ Voor 27% gewijzigd door BasieP op 06-12-2013 11:22 ]

[DJMaze]

Het is ook verstandig om JSON anders aan te leren:

PHP:

<?php
    $user_id=$_SESSION['user_id'];
    $pakket_id=$_POST['pakket_id'];
    $bericht = array("bepaling_nummers" => array());

    $sBepalingenQ = "SELECT bepaling_id FROM pakket_bepalingen WHERE pakket_id = ? ";

    if ($stmt = mysqli_prepare($database_connection, $sBepalingenQ)) 
    {

        mysqli_stmt_bind_param($stmt, "s", $pakket_id);
        
        mysqli_stmt_execute($stmt);

        mysqli_stmt_bind_result($stmt, $bepaling_id);
        
        
        /* fetch values */
        while (mysqli_stmt_fetch($stmt)) {

            $bericht["bepaling_nummers"][] = $bepaling_id;

        }

        header("Content-Type: application/json", true);
        echo json_encode($bericht);

        mysqli_stmt_close($stmt);
    }

JavaScript:

success: function(data) { 
    if (!data || !data.bepaling_nummers) { alert("error"); return; }

[SoeperKees]

BasieP schreef op vrijdag 06 december 2013 @ 11:09:
ik begrijp dat je een stuk code gecopy paste hebt?

Je genereerd (netjes) een json string, maar snapt vervolgens niet hoe je hem moet gebruiken?

ik begrijp niet met de code die je post dat je dit vraagt, maargoed.

Ik mis je DOM in je TS, maar ik neem aan dat elke checkbox een id heeft die er ongeveer zo uitziet:

HTML:

<form>
  <input id="bepaling_id_1" type="checkbox"><label for="bepaling_id_1">Optie 1</label>
  <input id="bepaling_id_2" type="checkbox"><label for="bepaling_id_1">Met extra gratis extra's</label>
  <input id="bepaling_id_3" type="checkbox"><label for="bepaling_id_1">En gratis verzending</label>
</form>

Dan krijg je zoiets als succes function (de onderste helft van je code is dubbel, dus heb die weggelaten):

JavaScript:

success: function(data) { 
  for (var i = 0; i < data.length; i++) { 
    $('#bepaling_id_' + data\[i].bepaling_nummer).prop("checked", true);
  }
  $('.succes_melding').html(data).fadeIn().fadeOut(3500); 
}

Evt. kun je ook checkboxes pakken op value, maar ik vraag me af of dat de bedoeling is van checkboxes

wordt dan zoiets:

JavaScript:

$('input\[type="checkbox"]\[value="' + data~[i].bepaling_nummer + '"]').prop("checked", true);

Hoe bedoel je copy past?
Ja hij genereert een valid json string. En ik weet niet hoe ik die verder kan afhandelen met de rest van het script. Dat ik dus, met de waardes die ik terug krijg, 7 & 2, de checkboxes met de value 7 & 2 aan kan laten vinken.

De JS wordt aangeroepen zodra de DOM klaar is. Maar dat heb ik er hier buiten gelaten.

Ja de checkboxen hebben idd een id. Heb ze zo.

PHP:

 '<li id="entry_' . $rKolomQ2['entry_id'] . '" class="ui-state-default"><input type="checkbox" class="checkboxes" name="bepalingen_checkbox[]" value="'.$rKolomQ2['bepaling_id'].'" /> ' .  $rKolomQ2['omschrijving'] . '</li>';

DJMaze schreef op vrijdag 06 december 2013 @ 12:17:
Het is ook verstandig om JSON anders aan te leren:

hoe bedoel je anders aan te leren? Wat doe ik fout? Ik ben nog niet zo bekend met java/jquery & json

[DJMaze]

SoeperKees schreef op zaterdag 07 december 2013 @ 15:12:
hoe bedoel je anders aan te leren? Wat doe ik fout? Ik ben nog niet zo bekend met java/jquery & json

Zie mijn voorbeeld code hierboven.
Je krijgt dan het volgende terug:

code:

{
    bepaling_nummers: [1,2,3,4,....]
}

Als PHP crasht stuurt het namelijk nog steeds een "200 OK" header.
Je ziet dus niet of wel/niet JSON terug krijgt, en of het de juiste JSON is.
Met bovenstaand voorbeeld kan je dus controleren of "bepaling_nummers" nummers bestaat.

Een ander voorbeeld is dat je dus ook een error kan terug sturen.

code:

if (json.error) {
    alert(json.error.message);
}

[BasieP]

DJMaze schreef op zaterdag 07 december 2013 @ 15:50:
[...]

Zie mijn voorbeeld code hierboven.
Je krijgt dan het volgende terug:

code:

{
    bepaling_nummers: [1,2,3,4,....]
}

Als PHP crasht stuurt het namelijk nog steeds een "200 OK" header.
Je ziet dus niet of wel/niet JSON terug krijgt, en of het de juiste JSON is.

sorry hier heb ik moeite mee.

Je wilt client side op basis van je inhoud gaan bepalen of je php gecrashed is?

1. php crashed niet, je eigen programmatuur bevat dan fouten. Die moet je in je code handelen. (try catch, juiste excepties etc.)
2. hoezo geeft php altijd 200 terug? je kan ook gewoon een 500 geven als er serverside iets niet goed gaat, en dat zou je dus ook moeten doen.
3. als je json juist is, is je begin object/lijst gesloten. Daarna kan niet nog een tweede object of lijst komen. Dus als je json clientside valideerd (uberhaupt geparsed kan worden) dan is ie correct. Je hoeft dus niet op inhoud te kijken.

Leer de TS nou geen rare dingen aan. Zijn php code is misschien niet zoals jij het zou bouwen, maar het is niet echt fout. Zijn probleem zit hem in de client kant, dus laten we alsjeblieft niet een "Alles opnieuw!" als advies geven, daar heeft niemand iets aan

[R4gnax]

SoeperKees schreef op zaterdag 07 december 2013 @ 15:12:
[...]

Ik ben nog niet zo bekend met java/jquery & json

We moeten het hier wel vaker roepen, maar : JavaScript != Java.

Dat is dus ook waar de copy&paste opmerking over ging: je weet waarschijnlijk bij god niet waar je mee bezig bent en je probeert dus via het overnemen en aanpassen van code van anderen iets 'werkends' te brouwen.

Dat gaat zonder zinnige basiskennis dus niet werken.

[SoeperKees]

DJMaze schreef op zaterdag 07 december 2013 @ 15:50:
[...]

Zie mijn voorbeeld code hierboven.
Je krijgt dan het volgende terug:

code:

{
    bepaling_nummers: [1,2,3,4,....]
}

Als PHP crasht stuurt het namelijk nog steeds een "200 OK" header.
Je ziet dus niet of wel/niet JSON terug krijgt, en of het de juiste JSON is.
Met bovenstaand voorbeeld kan je dus controleren of "bepaling_nummers" nummers bestaat.

Een ander voorbeeld is dat je dus ook een error kan terug sturen.

code:

if (json.error) {
    alert(json.error.message);
}

Maar waarom kreeg ik dan ongeveer het zelfde terug als jij met mn oude code als ik datatype; JSON uit had staan?
[{"bepaling_nummer":7},{"bepaling_nummer":2}]
Dit wordt ook geaccepteerd toch? Wel volgens jsonlint iig

R4gnax schreef op zondag 08 december 2013 @ 23:06:
[...]


We moeten het hier wel vaker roepen, maar : JavaScript != Java.

Dat is dus ook waar de copy&paste opmerking over ging: je weet waarschijnlijk bij god niet waar je mee bezig bent en je probeert dus via het overnemen en aanpassen van code van anderen iets 'werkends' te brouwen.

Dat gaat zonder zinnige basiskennis dus niet werken.

Wees gerust, ik weet heus wel dat het geen java is maar javascript.
Maar als dit het enige is wat je hier komt posten....mag je dat van mij ook wel achterwege laten. Help me liever zoals BasieP & DJMaze dat doen. Dat helpt mij tenminste voorwaarts.

[DJMaze]

BasieP schreef op zondag 08 december 2013 @ 21:38:
sorry hier heb ik moeite mee.

Je wilt client side op basis van je inhoud gaan bepalen of je php gecrashed is?

1. php crashed niet, je eigen programmatuur bevat dan fouten. Die moet je in je code handelen. (try catch, juiste excepties etc.)
2. hoezo geeft php altijd 200 terug? je kan ook gewoon een 500 geven als er serverside iets niet goed gaat, en dat zou je dus ook moeten doen.
3. als je json juist is, is je begin object/lijst gesloten. Daarna kan niet nog een tweede object of lijst komen. Dus als je json clientside valideerd (uberhaupt geparsed kan worden) dan is ie correct. Je hoeft dus niet op inhoud te kijken.

Leer de TS nou geen rare dingen aan. Zijn php code is misschien niet zoals jij het zou bouwen, maar het is niet echt fout. Zijn probleem zit hem in de client kant, dus laten we alsjeblieft niet een "Alles opnieuw!" als advies geven, daar heeft niemand iets aan

Het is niet verkeerd of raar, het is gewoon anders.
Er zijn situaties waarbij de header 200 is en niet 500 (parse errors bijvoorbeeld).
Dat je moet controleren of de data die je terug krijgt inderdaad JSON is, heb je wel gelijk in.

[DJMaze]

SoeperKees schreef op maandag 09 december 2013 @ 11:31:
Maar waarom kreeg ik dan ongeveer het zelfde terug als jij met mn oude code als ik datatype; JSON uit had staan?
[{"bepaling_nummer":7},{"bepaling_nummer":2}]
Dit wordt ook geaccepteerd toch? Wel volgens jsonlint iig

Dat komt omdat jQuery niet naar de headers kijkt, maar alleen naar de inhoud.
Dat jouw code word geaccepteerd is ook correct, het is ook niet fout.

Als je de header('content-type') wel meestuurt, zie je in Firefox Firebug een JSON tab in de console en kan je goed debuggen

[ Voor 11% gewijzigd door DJMaze op 09-12-2013 12:00 ]

[SoeperKees]

Ah! Duidelijk bedankt

[R4gnax]

DJMaze schreef op maandag 09 december 2013 @ 11:58:
[...]

Dat komt omdat jQuery niet naar de headers kijkt, maar alleen naar de inhoud.

Uhm, nee hoor. jQuery gebruikt gewoon de Content-Type header om te bepalen welke data converter er aangeroepen gaat worden: https://github.com/jquery...b/master/src/ajax.js#L152

Dit gedrag kun je overriden door expliciet een dataType mee te geven aan een jQuery.ajax call. Die mogelijkheid bestaat juist vanwege bagger geschreven server-side code die niet de juiste Content-Type header terug stuurt.

SoeperKees schreef op maandag 09 december 2013 @ 11:31:
Help me liever zoals BasieP & DJMaze dat doen. Dat helpt mij tenminste voorwaarts.

/me wijst naar eerste helft van deze post
Bij deze.

Bovenstaande had je overigens gewoon uit de jQuery API documentatie kunnen lezen, waar het gewoon vermeld staat. Je weet wel; wat je als eerste halte tegen had moeten komen als je mijn advies ter harte zou hebben genomen en eerst eens was gaan lezen over waar je mee bezig bent...

[ Voor 35% gewijzigd door R4gnax op 10-12-2013 07:41 ]

[BasieP]

@DJMaze ik weet dat je het goed bedoeld, maar je loopt wel een beetje onzin uit te kramen..

DJMaze schreef op maandag 09 december 2013 @ 11:55:
[...]

Het is niet verkeerd of raar, het is gewoon anders.
Er zijn situaties waarbij de header 200 is en niet 500 (parse errors bijvoorbeeld).

Nee als het goed is heb je die niet. Een parse error kun je gewoon opvangen en een 500 returnen.
zie ook: http://www.php.net/register_shutdown_function

DJMaze schreef op maandag 09 december 2013 @ 11:58:
[...]

Dat komt omdat jQuery niet naar de headers kijkt, maar alleen naar de inhoud.

Dit doet jQuery juist heel goed.


De header toevoegen is idd iets wat wel echt moet. Soms werkt het soms ook, maar met is altijd beter.

@TS: heb je uberhaupt mijn vorige post gelezen? ik heb gewoon concreet een antwoord getypt.

Ik hoop dat je het probleem inmiddels opgelost hebt?

[SoeperKees]

Nou nee niet echt.
Via de console in firebug zie ik dat de POST wel degelijk data bevat. Dit : {"bepaling_nummer":[7,2]}
Maar hij wil niet door de for loop heen lopen lijkt het. Oftewel de data lijkt leeg te zijn?

JavaScript:

for (var i = 0; i < data.length; i++) {
    $('#bepaling_id_' + data[i].bepaling_nummer).prop("checked", true);
    console.log("test");
}

Als test wilde ik een console bericht laten zien, maar die laat hij niet zien. Hij slaat de for loop over en gaat door.

Je hoeft data niet als new Array(); aan te maken na success: stuk ?

[mbarie]

Je gaat nu door je data array heen terwijl je data een object is. In deze case geeft data.length de waarde 'undefined'. Daarop wordt de loop overgeslagen.

Je for-loop verwacht input als volgt: [{"bepaling_nummer":7},{"bepaling_nummer":2}]. Dat komt niet overeen met hoe de data die je aanlevert er nu uit ziet, zodoende werkt de loop niet.

Het is belangrijk te beseffen dat alles in je JSON tussen brackets [] een array is in PHP. Alles in haakjes {} is een associatieve array of een instantie van een object in je PHP code.

Als je wilt dat je for-loop gaat werken zijn er 2 mogelijke oplossingen:
1. De manier waarop je nu de JSON uitleest sluit niet aan op de aangeleverde data. Allereerst moet de data gehaald worden uit data.bepaling_nummer[i] en zal de lengte van je for-loop bepaald worden door data.bepaling_nummer.length.
2. De JSON data die aangeleverd wordt dusdanig aanpassen dat het format overeen komt met [{"bepaling_nummer":7},{"bepaling_nummer":2},etc]

[ Voor 3% gewijzigd door mbarie op 10-12-2013 11:08 ]

[SoeperKees]

Hij kreeg wel de juiste data aangeleverd, maar ik gebruikte de for loop inderdaad verkeerd.

JavaScript:

for (var i = 0; i < data.bepaling_nummer.length; i++) { 
    $('#bepaling_id_' + data.bepaling_nummer[i]).prop("checked", true);
    console.log("test");
}

Zo werkt ie helemaal goed
Bedankt iedereen

[ Voor 4% gewijzigd door SoeperKees op 10-12-2013 14:10 ]