Discussion :

[netlink1987]

bonjour à tous.

Alors voila. J'ai un petit formulaire qui demande à entrer un numéro:

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<div class="col-lg-10 col-md-10 mx-auto">
<div class="well" style="margin-top: 0%;margin-left: 10%">
                <label for="tournid"  class="h6"><span class="badge badge-warning badge-pill">Tournament ID</span></label>
                <form class="form-inline" id="lm2sformtournid">
                <input type="number" class="form-control-number-sm" type="number" id="tournid" placeholder="TournId" required data-error="Error">
 
        <button type="submit"  id="form-submit-ticker" class="btn-xs btn-success">SUBMIT</button>
        </form>
        <div class="col-sm mx-auto">
        <form id="lm2sformcourt">
        <div id="displaycourt"></div>
        </form>
        </div>
        </div>
        </div>

Le résultat de la requête renvoie une réponse en JSON via un script cgi:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

[{"COURT":"Court A"},{"COURT":"Court B"},{"COURT":"Court C"},{"NULL":""}]

Puis la div "displaycourt" qui contient un formulaire devrait proposer les valeurs reçues en JSON:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
$("#displaycourt" ).html('<select id="lm2sformcourt">'
                        + '<option value="">Court list</option>'
                        + '<option value='
                        + data
                        + '>Court A</option>'
                        + '<option value='
                        + data
                        + '>Court B</option>'
                        + '<option value='
                        + data
                        + '>Court C</option>'
                        + '</select>'
                        //+ '<div class="btn-group" role="group" aria-label="Basic example">'
                        + '<button type="submit" id="form-submit-court" class="btn-xs btn-success">SUBMIT</button>'
                        + '</div>');

Voici le code complet de la partie JS/JQUERY:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
function tournid(){
        var tournid = $("#tournid").val();
 
    $.ajax({
        type: "GET",
        url: "http://192.168.1.38:2929/cgi-bin/ticker.cgi",
        dataType: "json",
        data: "tournid=" + tournid ,
        success: function( data ){
        var COURT = JSON.stringify(data) ;
 
       $("#displaycourt" ).html('<select id="lm2sformcourt">'
                        + '<option value="">Court list</option>'
                        + '<option value='
                        + COURT
                        + '>Court A</option>'
                        + '<option value='
                        + COURT
                        + '>Court B</option>'
                        + '<option value='
                        + COURT
                        + '>Court C</option>'
                        + '</select>'
                        //+ '<div class="btn-group" role="group" aria-label="Basic example">'
                        + '<button type="submit" id="form-submit-court" class="btn-xs btn-success">SUBMIT</button>'
                        + '</div>');
 
   }
     });
}

Mais voila, c’a ne fonctionne pas pour des raisons qui vont pour vous être évidentes (pas pour moi vu
mon faible niveau dans ce domaine .... la réponse obtenue est toujours : [{"NULL":""}].

Auriez vous une suggestion ?

D'avance merci

[Toufik83]

Bonjour,

Ce que tu reçois dans success est un objet JSON, donc il va falloir le parcourir pour extraire ses valeurs :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
 
success:function(data){
    //var COURT = JSON.stringify(data) ; supprimes cette ligne
   // Vider le div #displaycourt pour ensuite le remplir avec un select vide
    $('#displaycourt').html('<select id="lm2sformcourt"></select>');
    //Parcourir l'objet json
    $.each(data,function(k,v){
       if(v.COURT)
	   $('#displaycourt select')
	   .append('<option value="'+v.COURT+'">'+v.COURT+'</option>');
    });
}

[netlink1987]

merci toufik pour ta réponse.

Le select fonctionne bien, ou je place le bouton submit ds ton code ?

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<button type="submit" id="form-submit-court" class="btn-xs btn-success">SUBMIT</button>

[Toufik83]

juste avant le each :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
 
$('#displaycourt').html('<select id="lm2sformcourt"></select><button type="submit" id="form-submit-court" class="btn-xs btn-success">SUBMIT</button>');
$.each(....);

[netlink1987]

nickel, tu es le king de jquery toufik !

merci beaucoup , je cloture