up vote 1 down vote favorite

I am using jQuery, AJAX and PHP to update the contents of a drop down box on an event. My code currently triggers the event and uses AJAX to call a PHP function which goes to the database and gets the records associated with each member of the drop down.

I can currently return this 2-dimensional array (an array of records with an array of columns in each one) back to my jQuery function but I am at a loss as to how to convert the array into something which I can use.

jQuery code to call AJAX:

    var element= $('select[name=elementName]');
    var data = 'inData=' + element.val();

    // Call AJAX to get the info we need to fill the drop downs by passing in the new ID
    $.ajax(
    {
        type: "POST",
        url: "ops.php",
        data: "op=getInfo&" + data,
        success: 
        function(outData) 
        {   
            // WHAT DO I DO HERE TO CONVERT 'outData' INTO A 2-DIMENSIONAL jQUERY ARRAY??
        },
        error:
        function()
        {

        }
    });

PHP code:

$sqlResults= mysql_query("SELECT data FROM table WHERE id='".$_POST['inData']."'"); 

$outData = array();

// Fill the data array with the results
while ($outData[]= mysql_fetch_array($sqlResults));

// echo the data to return it for use in the jQuery file
echo $outData;

The code posted is working fine - I just don't know how to read 'outData' in jQuery.

Thanks in advance for any help!!

share|improve this question
43% accept rate
feedback

4 Answers

up vote 1 down vote

Have you looked at json_encode?

echo json_encode($outData);

This will convert it into a json object that can be read by jQuery.

share|improve this answer
feedback
up vote 1 down vote

your looking for json

//php
echo json_encode($outData);

//javascript
$.ajax({
    type: "POST",
    url: "ops.php",
    data: "op=getInfo&" + data,
    dataType: "json",
    success: function(outData) {   
        console.log(outData); //this will be an object just like 
                              //your php associative array
    },
    error: function() {

    }
});
share|improve this answer
Thanks for the answer. Looks good but doesn't seem to work for me. When I make those changes (even without doing console.log(outData) nothing happens at all, for instance if I have an alert in both the success and error functions neither gets called. Do I have to add any includes or do anything else to make this work? – Starky Jul 6 '11 at 21:06
is it making the ajax request? – locrizak Jul 7 '11 at 12:03
feedback
up vote 0 down vote

jQuery can not read the echo of a PHP array. Use json_encode before you output it: 

 echo json_encode($outData);

That's a format jQuery actually can parse as the response.

share|improve this answer
feedback
up vote 0 down vote

JSON can do the trick, but why not look at it from another angle?

If you're pinging PHP to get updated info, just have PHP output the option values you want in your select box. Then use the HTML return of jQuery AJAX to .html() the result into your select element.

There's a couple of different ways to skin a cat, and I would submit that this much easier approach is going to gain you extra time to do more jQuery wizardry.

share|improve this answer
Thanks for the suggestion. I'm new to using PHP/jQuery with AJAX, previously I have used ASP.NET technologies. I am working on an existing system rather than starting from scratch and it has seperate php and jQuery files. Right now I am using an event on the page to call this function which will do a getElementByID to get the drop down box which needs to be changed. It then puts the length to 0 to clear it and will individually add each new option parsed from the data returned from the PHP call. Not sure if I could just fire the HTML straight in there, what do you think? – Starky Jul 6 '11 at 21:08
I have quite a few of these in my PHP applications. I just get the onclick event as you do, fire an ajax query which goes over to my PHP class, does the query, and assembles the results (from an array) into option values via a foreach loop. Using the ajax success callback I get HTML, which in the case of the select box would be all the option values that I want in the select box. Simply .html() this content into your select box and you're golden. If you're still stuck on this, I can update my answer with an example. – bpeterson76 Jul 7 '11 at 15:16
feedback

Your Answer

 
or
required, but never shown
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.