CODEWITHSUNDEEP
phpjquerymysql
PHP User
PHP User

Reputation: 2422

How to merge php-mysql data with jquery to fade data

I'm having a simple select statement using php-mysql and I have this script to change text with another.

<script type="text/javascript">
    $(document).ready( function() {
       $('#deletesuccess').delay(500).fadeOut(function(){
          $('#deletesuccess').html("text2");
          $('#deletesuccess').delay(500).fadeIn("slow");
       });
    });
</script>

<div id=deletesuccess > text1 </div>

Trying to display data from table using php-mysql and jquery above script but it's displaying only the last row the loop is not working

$getTextQ = "select * from text";
$getTextR = mysql_query($getTextQ);
while($row = mysql_fetch_array($getTextR)){
?>
        <script type="text/javascript">
     $(document).ready( function() {
    $('#deletesuccess').delay(500).fadeOut(function(){
         $('#deletesuccess').html("<?php echo $row['desc']; ?>");
          $('#deletesuccess').delay(500).fadeIn("slow");
    });
  });
</script>

<?php

   }

But couldn't use it with the above PHP code to display data one by one.

Upvotes: 0

Views: 720

Answers (3)

Ariful Islam
Ariful Islam

Reputation: 7675

You can do this easily by using jQuery ajax. 

<script type="text/javascript">
    $(document).ready( function() {
        $.ajax({
            url: 'getData.php',
            dataType: 'json',
            type: 'POST',
            success: function(data) {
                $('#deletesuccess').delay(500).fadeOut(function(){
                    $.each(data,function(key, value){
                        $('#deletesuccess').html(value);
                        $('#deletesuccess').delay(500).fadeIn("slow");
                    });
                });
            }
        });
    });
</script>

Now in getData.php page you need to do query and echo json_encode data. That means the getData.php file should contain the following code:

<?php
    $getTextQ = "select * from text";
    $getTextR = mysql_query($getTextQ);
    $json     = '';
    while($row = mysql_fetch_array($getTextR)){
       $json .= $row['desc']; 
    }
    echo json_encode($json);
?>

Upvotes: 2

albanx
albanx

Reputation: 6333

Attention, you have not a clear difference between php and javascript code execution. The php code will make an echo of that javascript code, and after php has finish execution(on document ready) the javascript code will be executed at istant, so the last echo of javascript will have effect in the execution. try to separate the codes.

Upvotes: 2

Andreas Stokholm
Andreas Stokholm

Reputation: 1687

The problem is that you overwrite your JavaScript each time the loop runs. Instead you should make it like this:

<script type="text/javascript">
    var php_results = '';
</script>

<?php
$getTextQ = "select * from text";
$getTextR = mysql_query($getTextQ);
while($row = mysql_fetch_array($getTextR)){
?>
    <script type="text/javascript">
        php_results += "<?php echo $row['desc']; ?> | ";
    </script>

<?php
}
?>

<script type="text/javascript">
    $(document).ready( function() {
        $('#deletesuccess').delay(500).fadeOut(function(){
            $('#deletesuccess').html(php_results);
            $('#deletesuccess').delay(500).fadeIn("slow");
        });
    });
</script>

Of course this would have to be cleaned up to make it pretty, but it should work. I added the pipe as a separator between the different descriptions from the database.

Upvotes: 1

Related Questions