CODEWITHSUNDEEP
phpjavascriptjquery
ranthegreat
ranthegreat

Reputation: 31

Populating select list from AJAX JSON result data

Hello stackoverflow developer, First of all, sorry if I couldn't find a solution, but I've been trying for a while now. I'm not sure if my approach is the best one, so, if there's an alternative to AJAX and/JSON, please feel free to suggest it.

I'm creating a tourist guide website where registered users will include their resorts, restaurants and tourist attractions according to region and state. I'm using Joomla! and Seblod for this (with some custom PHP, MySQL, Javascript and AJAX). Since I don't want to manually create 27 dynamic selects, I've been trying selecting the list of registered beaches (to which resorts and tourist attractions must be related to) with PHP/AJAX/JSON/JQuery.

Everything works except populating the beach list, and I don't know what the problem is. I've tried multiple ways to append, create or add the options but nothing happens. The PHP/JSON result is :

`
    [{"id":"17","title":"Porto+de+Galinhas"},{"id":"18","title":"Serrambi"},{"id":"19","title":"Tamandar%E9"}]

`

It's the result of this PHP script:

`

    if($_GET['q'] == 'beaches'){
        $praiaSQL = sprintf("SELECT * FROM vp_content AS c LEFT JOIN vp_cck_store_item_content AS v ON c.id = v.id WHERE c.catid = 10 AND v.cck = 'praia' AND v.venue_state = '%s' ORDER BY c.title ASC;", $_GET['s']);
        $query = mysqli_query($connection, $praiaSQL);
        $praia = array();
        while($results = mysqli_fetch_assoc($query)){
            array_push($praia, array('id' => $results['id'], 'title' => urlencode($results['title'])));
        }
        echo json_encode($praia);
    }

`

I also need a solution to handle accented characters. I'm trying urlencode here and decode in the JQuery, but may be the problem. When I left it as the original data, when there were accented characters the result item was empty.

This is the relevant JQuery that handles the result (where x = the select and u = the URL to get the AJAX JSON result - I've commented where the problem is in the code):

`

    function setBeachList(x,u){
            var theDiv = "#cck1r_" + x;
            var theSelect = "#" + x;
            $j(theSelect).children("option:not(:first)").remove();

            $j.ajax({
                url: u,
                contentType: "application/json;charset=UTF-8",
                success: function(data){
                    if(data.length){
                         /****
                           This is where I'm stuck, as I can't find a way to make sure the 
                           data is actually being treated/handled.
                           I've tried alerts and all sorts of other options to populate the
                           select.
                           I know it's being called because the before: and after: functions 
                           are working.
                         *****/
                        /*
                        $j.each(data, function(k, v){
                            var o = new Option();
                            var newTitle = urldecode(v.title);
                            $j(o).html(newTitle).val(v.id);
                            $j(theSelect).append(o);
                        });
                        */
                        var htm = '';
                        for (var i = 0; i '+urldecode(data[i].title)+'';
                        }

                        $j(theSelect).html(htm);
                    }
                },
                beforeSend: function(){
                    $j(theDiv).hide();
                },
                complete: function(){
                  $j(theDiv).show();  
                },
                dataType: 'json',
            });
        }

`

Thank you for the time and patience, I'm not an expert at any of this (not exactly a newbie, but close...).

Upvotes: 1

Views: 1875

Answers (3)

ranthegreat
ranthegreat

Reputation: 31

To answer my own question: Since I'm not and AJAX/JSON expert, I don't know if it's the expected behavior, but the responding page, which generates the AJAX result, cannot have different data than the one expected. Since I had left a regions' output, the requesting page had problems dealing with it somehow. Once I removed the unnecessary data, the select list got updated fine.

That was something I forgot to mention in my post, because I assumed that it was fine to have more than one result in the page. Using Firebug to check the code, the request was being brought fine.

Thank you all for your time, and sorry for the inconvenience...

I had to add htmlentities to the responding page, as accents returned null, although I explicitly have UTF-8 on every file...

Upvotes: 0

Ricardo Souza
Ricardo Souza

Reputation: 16468

This is a common JSON parsing silent error.

If the JSON is not well formatted, the ajax request will fail silently.

The second most common cause of this problem is the encoding. Make sure you are using UTF-8 in the page you're calling the AJAX and on the script that returns the data.

Your problem with accented data can be resolved by not encoding the data on the server side, thus not needing to unenconde on the client side.

Upvotes: 1

Okan Kocyigit
Okan Kocyigit

Reputation: 13441

urldecode is not a javascript function, you can use decodeURIComponent instead of it.

it's working when you change it,

http://jsfiddle.net/MzMPK/1/

UPDATE:

I think your problem is about trying to encode accented chars, It should work without encoding them, if your all encodings are set as UTF-8.

Upvotes: 2

Related Questions