1,105,644 Community Members

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

Member Avatar
welshly_2010
Newbie Poster
12 posts since Mar 2012
Reputation Points: 0 [?]
Q&As Helped to Solve: 0 [?]
Skill Endorsements: 0 [?]
 
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>
Member Avatar
riahc3
 
1,404 posts since May 2008
Reputation Points: 45 [?]
Q&As Helped to Solve: 14 [?]
Skill Endorsements: 18 [?]
Team Colleague
 
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.

Member Avatar
diafol
Where are my eyes?
12,977 posts since Oct 2006
Reputation Points: 1,821 [?]
Q&As Helped to Solve: 1,848 [?]
Skill Endorsements: 92 [?]
Moderator
Featured
Sponsor
 
0
 

Sorry slightly off-topic - avoid async: false. Here's a recommendation: http://stackoverflow.com/questions/6902174/tactics-to-avoid-using-asyncfalse-with-jquery

Member Avatar
riahc3
 
1,404 posts since May 2008
Reputation Points: 45 [?]
Q&As Helped to Solve: 14 [?]
Skill Endorsements: 18 [?]
Team Colleague
 
0
 

Sorry slightly off-topic - avoid async: false. Here's a recommendation: http://stackoverflow.com/questions/6902174/tactics-to-avoid-using-asyncfalse-with-jquery

Slightly? Completely.

Member Avatar
diafol
Where are my eyes?
12,977 posts since Oct 2006
Reputation Points: 1,821 [?]
Q&As Helped to Solve: 1,848 [?]
Skill Endorsements: 92 [?]
Moderator
Featured
Sponsor
 
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.

Member Avatar
riahc3
 
1,404 posts since May 2008
Reputation Points: 45 [?]
Q&As Helped to Solve: 14 [?]
Skill Endorsements: 18 [?]
Team Colleague
 
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?

Member Avatar
diafol
Where are my eyes?
12,977 posts since Oct 2006
Reputation Points: 1,821 [?]
Q&As Helped to Solve: 1,848 [?]
Skill Endorsements: 92 [?]
Moderator
Featured
Sponsor
 
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.

Member Avatar
gon1387
Posting Whiz in Training
242 posts since Jan 2011
Reputation Points: 22 [?]
Q&As Helped to Solve: 38 [?]
Skill Endorsements: 4 [?]
 
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 three months: Start a new discussion instead
Post:
Start New Discussion
Tags Related to this Article