Display database dynamic content using php mysql and jquery

Question

Recently, i am working with jquery for my mini-project.

I took a code from this resource. http://unwrongest.com/projects/airport/

My code works fine, and here is my code

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
    <script src="../jquery.airport-1.1.source.js"></script>
    <script type="text/javascript">

    $(document).ready(function() {
    $('#div1').airport([ 'user1', 'user2', 'user3' ]);
    });
    </script>

My html body tag looks lik this

    <div id="div1"></div>

Now, i have a table called "users"(with fields 'id' and 'username') and i want to display the username dynamically from the table and not the hardcoded value in the above script (ie $('#div1').airport([ 'user1', 'user2', 'user3' ]); )

How can i achieve this?

Answer 1

<script type="text/javascript">

$(document).ready(function() {
    var imp_username = $('#implode_username').val();
    $('#div1').airport([ imp_username ]);
    });

</script>

<?php 

// Retrieve username the data from the "users" table
$result = mysql_query("SELECT `username` FROM users")
or die(mysql_error());  

// store the record of the "users" table into $row
$row = mysql_fetch_array( $result );
$implode_var = implode(",",$row['username']);
?>

<input type ="hidden" id ="implode_username" value="<?php echo $implode_var;?>" >

Answer 2

Your PHP code:

<?php
$sql = 'SELECT username FROM users';
$run = mysql_query( $sql, $link );

$users = array();
if( $run && mysql_num_rows( $run ) ) {
    while( ( $fetch = mysql_fetch_assoc( $run ) ) !== false ) {
        $users[] = $fetch[ 'username' ];
    }
}

// return string
echo $users = implode( ',', $users );
?>

Your Javascript code:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="../jquery.airport-1.1.source.js"></script>
<script type="text/javascript">
var users = [];
$.get('getData.php', function(data) {
  users = data.split(',');
});

$(document).ready(function() {
$('#div1').airport( users );
});
</script>

Hope this helps..