Displaying mysql records in jQuery Flexbox plugin

Question

        <script type="text/javascript">  
            $(function() {
$('#jo').flexbox({  
        "results": [  
            { "id": "1", "name": "002155" },  
            { "id": "2", "name": "002155" },
            { "id": "3", "name": "asdasdasd" }
        ]}, 
    {  
showArrow: false  
});
            });  
        </script>

This code at top is the records that will suggest by the flexbox, for example ill type 00 it has two suggestion the 002155 and 002155, but the problem is the result of the word suggested is static, i read some code coming from this site that they link a php page to be use as the database. here is the sample...

$("#suggest").flexbox('back/search.php', {

this code above is from:jquery flexbox ? i try to make some alternative to be able to use mysql as the result of the word suggestion;

        <script type="text/javascript">  
            $(function() {
$('#jo').flexbox({  
        "results": [  
    <?php
        $con = mysql_connect("localhost","root","");

        mysql_select_db("accom");
        $query = mysql_query("select * from myproject");
            while($i = mysql_fetch_array($query))
            {
                $ii++;
                print"{ id : ".$ii.", name: ".$i[per_name]." },";       
            }
    ?>
        ]}, 
    {  
showArrow: false  
});
            });  
        </script>

but it doesnt work ;-(, help me please, to make the source of the word suggestion is coming from a sql query, thank you guys..

by the way here is my table

myproject
per_id(int 100)auto_increment
per_name(varchar 100)

Mickael · Accepted Answer · 2013-02-09T02:32:24.703

Generated json is not valid.

In fact, parameter don't include second parameter (since you close object with '}') and names values are strings, so you probably need to add quote.

    <script type="text/javascript">  
        $(function() {
            $('#jo').flexbox({  
                "results": [  
                    <?php
                        $con = mysql_connect("localhost","root","");
                        mysql_select_db("accom");
                        $query = mysql_query("select * from myproject");
                        while($i = mysql_fetch_array($query))
                        {
                            $ii++;
                            print"{ id : ".$ii.", name: '".$i[per_name]."' },";       
                        }
                    ?>
                ], 
                showArrow: false  
             });
        });  
        </script>

Be careful, you should need to espace name values in case name contains quote characters.

how about if the mysql_query page is in seperate another page? — Robert John Concepcion, Feb 09 '13 at 06:18

score 0 · Answer 2 · answered Feb 11 '13 at 14:44

Best practise would be to have a php call, json get the data you need then load it.

<script type="text/javascript">  
$(function() {
$.getJSON("search.php", function(data){
    $('#jo').flexbox({  
        "results": data, 
        showArrow: false  
    });
}); 
});  
</script>

Then in your search.php you do the following:

$con = mysql_connect("localhost","root","");
mysql_select_db("accom");
$query = mysql_query("select * from myproject");
$data = array();
while($i = mysql_fetch_array($query))
{
    $data[] = array('id' => $ii, 'name' => $i[per_name])       
}
echo json_encode($data); die();

So now when the page is done loading it calls your php search function, gets the data in json format and you just assign it to your flexbox.

Displaying mysql records in jQuery Flexbox plugin

2 Answers2