ajax form handling an array

Question

am trying to handle an array comes from php file after submitting the form data , the value of data after submitting the form is = ARRAY but i cant use this array in any way , any idea how can i handle this array !!!!

Javascript :

   $('#file').live('change',function(){
       $('#preview').html('');
       $('#preview').html('<img src="loader.gif" />');
       $('#data').ajaxForm(function(data){
               $(data['toshow']).insertBefore('.pic_content').hide().fadeIn(1000);

       }).submit();

  });

PHP :

....
....etc
echo json_encode(array('toshow'=>somedata,'data'=>somedata));

JSON String come from server

{"toshow":"\r\n\t\t\t\t\r\n\t\t<table class=\"out\">\r\n\t\t\t<tr ><td class=\"img\"><a title=\"2012-06-02 01-22-09\" rel=\"prettyPhoto\" href=\"img\/2012-06-02 01-22-09.284.jpg\"><img  src=\"img\/thumb\/2012-06-02 01-22-09.284.jpg\"\/><\/a><\/td><\/tr>\r\n\t\t\t\r\n\t\t\t<td>\r\n\t\t\t\t<table cellSpacing=\"1\" cellPadding=\"0\">\r\n\t\t\t\t\t<tr><td class=\"data\"><span class=\"click\">2012-06-02 01-22-09<\/span><\/td><\/tr>\r\n\t\t\t\t\t<tr><td class=\"data\"><span class=\"click\">Download<\/span><\/td><\/tr>\r\n\t\t\t\t\t<tr><td class=\"data\"><a href=\"img\/2012-06-02 01-22-09.284.jpg\"><span class=\"click\">View<\/span><\/a><\/td><\/tr>\r\n\t\t\t\t<\/table>\r\n\t\t\t<\/td>\r\n\t\t\t<\/tr>\r\n\t\t<\/table>","span":"<span class='text'><img src='greencheck.png'\/>2012-06-02 01-22-09 Uploaded ,File Size =152Kb <\/span>"}

Answer 1

better to convert array to json format using json_encode($array) . json data can easily be handled by Javascript

Answer 2

You can't echo array directly, it will output Array only.

You need to use json_encode .

echo json_encode($your_array);

Answer 3

You can handle the array via PHP also with jQuery

for jQuery use - jQuery each

for PHP use - foreach or for loop

or try

echo '<pre>';
print_r($array);
echo '</pre>';

Answer 4

In your PHP side you have to insert json_encode($array) AND in the JS side instead of using data['toshow'] use data.toshow .

Hope it helps!

Answer 5

Send out a JSON response, like this from PHP:

<?php
echo json_encode($yourarray);
?>

Then to adapt your AJAX function, do this:

  $('#file').live('change',function(){
       $('#preview').html('');
       $('#preview').html('<img src="loader.gif" />');
       $('#data').ajaxForm(function(data){
               var jsonData = jQuery.parseJSON(data);
               //acess it like
               alert(jsonData.toshow); //alert for your testing
               $(jsonData.toshow).insertBefore('.pic_content').hide().fadeIn(1000);

       }).submit();

  });

• EDIT * Changes, update according the plug-in docs.

Having never used the .ajaxForm jQuery plug-in, I went after the documentation, I'm going to put the code here, as clear as possible from what I read, I'm even letting the plug-in parse the response automatically into json.

I didn't see any .ajaxForm().submit(), and there's no need to it according to the docs.

$('#file').live('change',function(){
    $('#preview').html('');
    $('#preview').html('<img src="loader.gif" />');
        $('#data').ajaxForm({ 
            dataType:  'json',
            success:   function(data){
                alert("json string response from php: "+ data.toshow);
                $(data.toshow).insertBefore('.pic_content').hide().fadeIn(1000);    
            }
        }); 
});

dataType makes the plugin parse the response to json alone. and the success: function(data) happens if there was a response from PHP only. Implement it carefully, and give link if you still didn't get it right.