1.11M Members

how to use a json callback function to fill a selection box??

 
0
 

i am having problem filling a selection box with json data. here my php code

<script src="jquery.js"></script>
<script src="jquery.jCombo.js"></script>
<style type="text/css">
</style>

<?php
$directory = opendir("C:/xampp/htdocs/xml");

$storeFilesIntoArray[] = "please select XML to load";

while (($fileName = readdir($directory)) !== false)
{
 $getLastFourDigitsOfFile = substr($fileName,-4); 

 if($getLastFourDigitsOfFile == ".xml")
 {
  #echo "filename is " . $fileName . "<br/>";
    $storeFilesIntoArray[] = $fileName;
 }
}
$json = json_encode($storeFilesIntoArray);
echo $json;
closedir($directory);

?>

</script>

which give me this when i load that page on to a webpage

 ["please select XML to load","cd_catalog.xml"]

but i cant give to fill a dropbox with the data above because unsure how to use the json call to fill a selection box; here my code for the json call back function so far;

<script type="text/javascript">

$(document).ready(function(){
    $.ajax({
        url: "dropdown.php",
        data: data_str,
        type:POST,
        dataType: 'json',
        success: function(d)
        {
            alert();
        }

    });

<body>
<select name="list1" id="list1"></select><br><br>
</body>
 
0
 

If it intrests you, I do something similar except with a database:

html:

<div id="fa"></div>

php:

myfun: function()
    {

        $j.ajax({  // Start AJAX function                                     
            url: 'mysqlcall.php',                  //script that gets the data     
            async: false,                           //for me it had to be async
            data: "pam="+varpam,                        //url argumnets here to pass
                                            //for example "id=5&parent=6"
            dataType: 'json',                //data format      

            success: function(data)          //on recieve of reply
                { //start success function

               var selecthtml='Dropdown: <select name="dd" id="dd">'

                    for (var i=0;i<data.length;i++)
                        {    //start for  

                            var row = data[i];          
                            var name = row[0]; 


                            var coo = row[1]; 

                            selecthtml=selecthtml+'<option value="'+coo+'">'+name+'</option>';



                        }  //end for
                        selecthtml=selecthtml+'</select>';
                           $j('#fa').append(selecthtml);



                        } //end success


    },

Hope it gives you some ideas.

 
0
 

Slightly? Completely.

Not really, somebody posted some code with the following line:

async: false,                           //for me it had to be async

If the OP decides to use said code, then they should be made aware of the fact that this is not recommended - ergo my link.

 
0
 

Not really, somebody posted some code with the following line:

....??? I posted it :P Only three people have posted in this thread and you couldnt see it was me?

 
0
 

Only three people have posted in this thread and you couldnt see it was me?

Regardless. I read your last comment and just replied - your first comment was 'above the fold' and I just quoted it without looking at the name. It should be avoided if possible.

No big deal though. Code as you wish.

 
0
 

Hi welshly_201,

The data you recieved are parsed as an array. You can use it like this:

$(document).ready(function(){
    $.ajax({
        url: "dropdown.php",
        data: data_str,
        type: "POST", // You should put the type inside double or single quotes
        dataType: 'json',
        success: function(d)
        {
            // Alert shows "please select XML to load"
            alert(d[0]);

            // Alert shows "cd_catalog.xml"
            alert(d[1]);
        }
    });

With regards to the "async" config diafol and riahc3's talking about, it's better set to true, although it's aleady default to true. Having this to false will make your page, wait for the response before proceeding with the code. What it mean is this.

$.ajax({
   url: "HelloWorld.com/myService/",
   async: false,
    /******
        ... Other config ...
    ******/
});

// This will not be executed unless the ajax 
//  request above recieved a response
alert("Hi!");

ALthough depending on how you wanted the page to run or what strategy you'll be doing, it's best to use an async call to avoid unresponsive pages, or other mistakes in program executions pertaining to a synchronous flow.

Let me know if you have any other questions regarding JSON response parsing in JS and processing responses in php.

You
This article has been dead for over six months: Start a new discussion instead
Post:
Start New Discussion
Tags Related to this Article