up vote 2 down vote favorite

Hey I have a script that is creating and echoing a JSON encoded array of magento products.

I have a script that calls this script using jQuery's ajax function but I'm not getting a proper response. When the GET request is performed firebug displays

GET http://localhost.com/magento/modules/products/get.php 200 OK then a **red cross** then 361ms

This is the script that creates the array:

 // Load product collection
 $collection = Mage::getModel('catalog/product')->getCollection();
 $collection->addAttributeToSelect('name');
 $collection->addAttributeToSelect('price');

 $products = array();

 foreach ($collection as $product){
     $products[] = array("price" => $product->getPrice(),
                         "name" => $product->getName() );
 }

 header('Content-Type: application/x-json; charset=utf-8');
 echo(json_encode($products));

Here is my jQuery:

<script type="text/javascript">
        $(document).ready(function() {
            $.ajax({
                type: "GET",
                url: "http://localhost.com/magento/modules/products/get.php",
                    success: function(products)
                    {
                        $.each(products,function()
                        {
                            var opt = $('<option />');
                            opt.val(this.name);
                            opt.text(this.price);
                            $('#products').append(opt);
                        });
                    }
            });
        })
</script>

I'm getting a response from this but I'm not seeing a any JSON. I'm using firebug. I can see there has been a JSON encoded response but the response tab is emtyp and my select boxes have no options.

Can anyone see and problems with my code?

Here is the response I should get (and do get when I run the script manually via the browser):

[{"price":"82.9230","name":"Dummy"},{"price":"177.0098","name":"Dummy 2"},{"price":"76.0208","name":"Dummy 3"},{"price":"470.6054","name":"Dummy 4"},{"price":"357.0083","name":"Dummy Product 5"}]

Thanks,

Billy

share|improve this question
What you recive when you just open localhost.com/magento/modules/products/get.php as page < – SergeS Feb 14 '11 at 14:31
my scipt is returning JSON correctly. I run that script and get a JSON encoded array of products – iamjonesy Feb 14 '11 at 14:32
your JSON may have errors. try copying get.php output and pasting it after var a= in firebug – naugtur Feb 14 '11 at 14:38
check my edited answer? – benhowdle89 Feb 14 '11 at 14:39
I have added my JSON response when I open the script directly – iamjonesy Feb 14 '11 at 14:43
feedback

4 Answers

up vote 0 down vote

use cache: false, as one of your AJAX parameters...

I know when i used JSON in AJAX, i had to do this:

                    success: function(data) {
                      $(".custName, .projectDesc").empty();
                      for(var x in data) {
                         $(".custName").append(data[x].message1);
                         $(".projectDesc").append(data[x].message2);
                    }

I'm not sure if this will help you or not :)

share|improve this answer
Thanks but didn't make a difference :( – iamjonesy Feb 14 '11 at 14:35
feedback
up vote 0 down vote

The PHP you're returning is not an array of objects, which is the way you are treating it in your javascript.

Change your PHP to:

$products = array();
foreach( $collection as $product ) {
  $products[] = array( "price" => $product->getPrice(),
                       "name" => $product->getName() );
}

This should return JSON that looks like:

[{"price":"82.9230","name":"Dummy"},{"price":"177.0098","name":"Dummy 2"}, etc ]

jQuery.each should then be able to iterate over the returned array of objects:

success: function(products) 
{
  jQuery.each(products,function()
       {

       var opt = jQuery('<option />'); 
          opt.val(this.name);
          opt.text(this.price);
          jQuery('#products').append(opt); 
       });
  }
share|improve this answer
1  
Since when do you have to parse JSON response when the request type is set to JSON? I've never done that and it worked... – naugtur Feb 14 '11 at 14:37
1  
I second that response. – benhowdle89 Feb 14 '11 at 14:37
OK, edited to remove that. – Chris Hogan Feb 14 '11 at 15:21
Updated my answer based on JSON that was posted. – Chris Hogan Feb 14 '11 at 16:51
Hi I've updated my code based on your answer but still no luch. My GET request seems to be fine though – iamjonesy Feb 28 '11 at 13:03
show 6 more comments
feedback
up vote 0 down vote 
$.each(products,function(index, arr)
{
      var opt = $('<option />');
      opt.val(arr[name]);
      opt.text(arr[price]);
      $('#products').append(opt);
});

I hope it helps you

share|improve this answer
It's the response that's the problem, I'm getting the correct response when I access the controller directly but when the ajax request is run I get the proper headers returned but the response is empty :( – iamjonesy Mar 4 '11 at 10:37
feedback
up vote 0 down vote

Try to add data type property on $.ajax configuration object:

<script type="text/javascript">
    $(document).ready(function() {
        $.ajax({
            type: "GET",
            url: "http://localhost.com/magento/modules/products/get.php",
            dataType : 'json',
            success: function(products) {
                $.each(products,function() {
                    var opt = $('<option />');
                    opt.val(this.name);
                    opt.text(this.price);
                    $('#products').append(opt);
                });
            }
        });
    })
</script>

Maybe, $.ajax function doesn't know the response data type...

share|improve this answer
unfortunately hasn't made a difference :( – iamjonesy Mar 7 '11 at 11:48
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.