CODEWITHSUNDEEP
phpjquerymysqlrefresh
Phillip
Phillip

Reputation: 33

jQuery/PHP Hide Div, Update Information from MySQL, Show Div New Information

jQuery:

$(document).ready(function(){

    $(".reload").click(function() {
        $("div#update").fadeOut("fast")
        .load("home.php div#update").fadeIn("fast")
    });
});

PHP:

function statusUpdate() {

    $service_query = mysql_query("SELECT * FROM service ORDER BY status");
    $service_num = mysql_num_rows($service_query);

    for ($x=1;$x<=$service_num;$x++) {
    $service_row = mysql_fetch_row($service_query);

    $second_query = mysql_query("SELECT * FROM service WHERE sid='$service_row[0]'");
    $row = mysql_fetch_row($second_query);

    $socket = @fsockopen($row[3], $row[4], $errnum, $errstr, 0.01); 
    if ($errnum >= 1) { $status = 'offline'; } else { $status = 'online'; }

    mysql_query("UPDATE service SET status='$status' WHERE sid='$row[0]'")
    or die(mysql_error());

    ?>

    <ul><li style="min-width:190px;"><?php echo $row[1]; ?></li>
    <li style="min-width: 190px;" title="DNS: <?php echo $row[2]; ?>">
    <?php echo $row[3] . ':' . $row[4]; ?></li>
    <li class="<?php echo $status; ?>" style="min-width:80px;"><div id="update">
    <?php echo $status; ?></div></li></ul> 

    <?php

    } 
}

?>

<?php statusUpdate(); ?>

I have a button which I press (refresh) and that will then refresh the #update id to hopefully fadeOut all the results, and then fade in the new results... issue is it fades them out okay, but when it brings them back, it's just div on div and div and looks really messy - does not do what it's meant to do (would have to upload a picture to give further information).

In the short, what I want to happen is when you hit the update, they will all fade and then fade in with updated values from the php... I made the php/mysql into a function so then I could call it when i hit that refresh button, thinking that would work, but I don't know how to do that...

Thank-you in advance,

Phillip.

Upvotes: 1

Views: 2097

Answers (4)

daniel
daniel

Reputation: 1

Just for the reference, it will be better to add an additional page in the same directory (eg: phpcode.php) and then put your php code also in there! then try this:

var $data = $('div#update');
$data.fadeOut('slow', function() { 
    $data.load('phpcode.php div#update', function() { 
        $data.fadeIn('slow'); 
    }); 
});

Upvotes: 0

Praveen Prasad
Praveen Prasad

Reputation: 32117

Javascript 

 $(document).ready(function(){

        $(".reload").click(function() {
            $("div#update").fadeOut("fast");
            $.ajax({
                 url:'home.php',
                 data:{type:'getStatus'},
                 type;'post', 
                 success:function(data){
                    $('div#update').html(data).fadeIn('fast');
                 }
            });       
        });
    });

php page format

<?php
$type= $_POST['type'];
if($type=="getStatus")
{
    //get statuses from data base and return only formatted statuses in html
}
else
{
   //your page codes here
   //like tags <html>,<body> etc, all regular tags
   //<script> tags etc
}
?>

Upvotes: 1

Wasim Karani
Wasim Karani

Reputation: 8886

Try this

var $data = $('div#update');
$data.fadeOut('slow', function() { 
    $data.load('home.php div#update', function() { 
        $data.fadeIn('slow'); 
    }); 
});

Upvotes: 0

JohnP
JohnP

Reputation: 50019

.load("home.php div#update").fadeIn("fast")

That's wrong. You need to use,

$('div#update').load('home.php', function(data) {
  $('div#update').html(data).fadeIn("fast");
});

Make sure your PHP file works properly by calling it directly and confirming that it returns the results properly.

Reference : http://api.jquery.com/load

Upvotes: 1

Related Questions