getJSON update not updating

Question

Hi guys,

On this site: http://www.rent-turkey-property.com/

I have it set so that when you select a region from the dropdown (left box) it pulls in the towns for the town menu using jQuery.getJson

My code worked when it was in the head of each page but seems to have broken when moved into an external file (or maybe another change broke it, sure I checked it after transfer to external)

The trouble is everything seems to be working fine. Firebug is telling me I have the data, but it won't update select#town

Driving me insane.

UPDATE:

Update

I have now found that it is an error with the JSON (parsererror Invalid JSON) but it worked fine before and I haven't changed it.

The only thing I have changed, that I haven't been able to reverse for testing is upgrading to the latest version of jQuery, has JSON standard changed in latest version (1.4.2).

Here is my JSON:

<?php
if ($_GET['region'] == "Aegean") {
  echo <<<HERE_DOC
[ 
{optionValue: 'Altinkum', optionDisplay: 'Altinkum'},
{optionValue: 'Bodrum', optionDisplay: 'Bodrum'},
{optionValue: 'Cesme', optionDisplay: 'Cesme'},
{optionValue: 'Dalaman', optionDisplay: 'Dalaman'},
{optionValue: 'Dalyan', optionDisplay: 'Dalyan'},
{optionValue: 'Fethiye', optionDisplay: 'Fethiye'},
{optionValue: 'Icmeler', optionDisplay: 'Icmeler'},
{optionValue: 'Gocek', optionDisplay: 'Gocek'},
{optionValue: 'Kusadasi', optionDisplay: 'Kusadasi'},
{optionValue: 'Marmaris', optionDisplay: 'Marmaris'},
{optionValue: 'Oludeniz', optionDisplay: 'Oludeniz'}
]
HERE_DOC;
} else if ($_GET['region'] == "Mediterranean") {
  echo <<<HERE_DOC
[
{optionValue: 'Alanya', optionDisplay: 'Alanya'},
{optionValue: 'Antalya', optionDisplay: 'Antalya'},
{optionValue: 'Belek', optionDisplay: 'Belek'},
{optionValue: 'Kalkan', optionDisplay: 'Kalkan'},
{optionValue: 'Kas', optionDisplay: 'Kas'},
{optionValue: 'Kemer', optionDisplay: 'Kemer'},
{optionValue: 'Saklikent', optionDisplay: 'Saklikent'},
{optionValue: 'Side', optionDisplay: 'Side'}
]
HERE_DOC;
} else if ($_GET['region'] == "Istanbul") {
  echo <<<HERE_DOC
[{optionValue: 'Istanbul', optionDisplay: 'Istanbul'}]
HERE_DOC;
}?>

Answer 1

Try changing the content type of your ajax responses to application/json instead of text/html.

Answer 2

Didn't work? Moved function to head of page and made it a full ajax call, set both contentType and dataType now select#the_town is being updated, but with all undefineds

Answer 3

Use "json" instead of "application/json" in the dataType option in your call to $.ajax().

The problem is that jQuery isn't converting the HTTP response content to JSON, so your success function is iterating through a string.

Also, your iteration function is referring back to the original array, not the current item. Either use resp[index], this, or add an element argument to the function.

success: function(resp){
    var options = '';
    $.each(resp,function(index) {
        options += '<option value="' + this.optionValue + '">' + this.optionDisplay + '</option>';
    }

Answer 4

Sorry, tried that, even added a content-type header to the php file, still won't update. The JSON is coming back as a perfectly formed response, just won't go into html.

Answer 5

You need to wrap your keys in quotes:

[ 
{'optionValue': 'Altinkum', 'optionDisplay': 'Altinkum'},
{'optionValue': 'Bodrum', 'optionDisplay': 'Bodrum'},
{'optionValue': 'Cesme', 'optionDisplay': 'Cesme'},
// ... other entries ...
]