How to load JSON data with jQuery, PHP and MySQL

Question

I want to create a dynamic dropdown menu that one select is based on the value of another select. I tried so many times and failed. I have the code as follows. Anyone can help me to find out what the problem is.

//template:

<script type="text/javascript">  

$(function(){ 
  getSelectVal(); 
  $("#grouptypes").change(function(){ 
      getSelectVal(); 

  }); 
});

function getSelectVal(){ 
    $.getJSON('<?php echo url_for('group_utilization/GroupModification') ?>', {'grouptypes':$("#grouptypes").val()},function(data){ 
        var groups = $("#groups"); 
        $("option",groups).remove(); 
        $.each(json,function(index,array){ 
            var option = "<option value='"+array['id']+"'>"+array['title']+"</option>"; 
            select.append(option); 
        }); 
    }); 
} 

</script>

GroupType: <select id="grouptypes">

  <?php foreach($grouptypes as $type) : ?>

  <?php echo "<option value='" . $type->name . "'>" .$type->name. "</option>"; ?>

  <?php endforeach ?>

</select><br />
<br />Result:<span id="list-of-groups"></span>

<br />
Group: <select name="group" id="groups">

</select><br />

Another file for returning database returned value:

if(isset($_GET["grouptypes"])){
 $grouptypes = $_GET["grouptypes"];

 $query = "SELECT g.name FROM groups g INNER JOIN group_types gt ON(gt.id = g.group_type_id AND gt.name = ?)";

 $groups = $db->getResultsForQuery($query, $grouptypes);
 echo json_encode($groups);
 }

When you say you failed, what do you mean? Do you have any error messages you could post? — Crashspeeder
– Crashspeeder, Commented Feb 1, 2012 at 21:47
Are there any script errors? You seem to be referring to an uninitialized variable json $.each(json,function(index,array){ — Matt Esch
– Matt Esch, Commented Feb 1, 2012 at 21:50
As well as the json variable, the select variable is not being initialized in the code you have posted. — Jasper
– Jasper, Commented Feb 1, 2012 at 21:51
Notice: Undefined variable: grouptypes in /Users/alexhu/Work/menagerie/trunk/apps/utilities/modules/group_utilization/actions/actions.class.php on line 47 — 庆峰扈
– 庆峰扈, Commented Feb 1, 2012 at 23:12

djleop · Accepted Answer · 2012-04-27 12:23:55Z

1

Does your PHP Script sends the appropriate headers for JSON ?

try to put this juste before "echo json_encode($groups);". Eventually put an exit call to avoid extra output.

$groups = $db->getResultsForQuery($query, $grouptypes);
header('Content-type:application/json;charset=utf-8');
echo json_encode($groups);
exit();

edited Apr 27, 2012 at 12:23

answered Mar 9, 2012 at 8:29

djleop

6974 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Kory Hodgson · Accepted Answer · 2012-02-01 21:47:48Z

0

Should the top block of code actually be:

$(document).ready(function(){ 
  getSelectVal(); 
  $("#grouptypes").change(function(){ 
      getSelectVal(); 

  }); 
});

answered Feb 1, 2012 at 21:47

Kory Hodgson

7901 gold badge5 silver badges15 bronze badges

1 Comment

Jasper Over a year ago

$(document).ready(function(){}); is the exact same thing as $(function () {});. Here are the docs: api.jquery.com/ready

ron tornambe · Accepted Answer · 2012-02-01 23:48:31Z

0

You need to reference the tag with jQuery var before appending:

function getSelectVal(){ 
  var select = $("#grouptypes");

  $.getJSON('<?php echo url_for('group_utilization/GroupModification') ?>', {'grouptypes':$("#grouptypes").val()},function(data){ 
    var groups = $("#groups"); 
    $("option",groups).remove(); 
    $.each(data,function(index,array){ 
        var option = "<option value='"+array['id']+"'>"+array['title']+"</option>"; 
        select.append(option); 
    }); 
  }); 
}

edited Feb 1, 2012 at 23:48

answered Feb 1, 2012 at 21:51

ron tornambe

10.8k8 gold badges38 silver badges61 bronze badges

2 Comments

庆峰扈 Over a year ago

Hi, Ron. thanks for your answer, but it doesn't work either. It is not able to get the value passed by Json and isset($_GET["grouptypes"]) is false. I am confused

ron tornambe Over a year ago

Don't you want to use the passed "data" argument instead of "json" in $.each(json... - I changed to answer above to reflect this change. Hopefully this will resolve the "isset" operation.

Mickey Mouse · Accepted Answer · 2012-02-13 20:20:19Z

0

You might have problem with the way url_for() function as it might not be able output your link properly for getJSON to use. For example if I fiddle with something close to your code (BTW, are you using Symphony?)

 $.post("<? echo 'server.php';?>", function(data) {
                    aler(data);

                    });

            });

I get this link in my JS code

http://dev.wonderland/%3C?%20echo%20'server.php'?%3E

which is obviously not the link I am trying to reach to. Also, make sure to add a semicolon at the end of your PHP code up there and try it again.

answered Feb 13, 2012 at 20:20

Mickey Mouse

1,7713 gold badges24 silver badges41 bronze badges

Collectives™ on Stack Overflow

How to load JSON data with jQuery, PHP and MySQL

4 Answers 4

Comments

1 Comment

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

1 Comment

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related