CODEWITHSUNDEEP
ajaxhtmlrefresh
JochemQuery
JochemQuery

Reputation: 1547

Ajax div refreshing

I have a problem with AJAX , I cant find a good solution to refresh only my div "chatwindow" every second. I have tried many posts from stackoverflow and from google. Can someone help me... to make this. So far my code

<!DOCTYPE HTML>
<?php
    include 'config.php';
?>
<html>
<head>
    <title>JavaScript Chat</title>
    <link href="style.css" rel="stylesheet" type="text/css"/>


</script>
</head>
<body>
    <div class="container">
        <div id="chatwindow">
            <?php
                $result = mysql_query("select * from Message");
                while($row = mysql_fetch_array($result))
                {
                    echo '<p>' . $row['username'] . " : " . $row['message'] . '</p>';
                }
            ?>  
        </div>

        <div class="inputMessage">
            <form method="post">
                <hr></hr>
                <textarea name="message" rows="1" cols="55"></textarea><br/>Fill username here<br/>
                <input type="submit" value="verstuur" name="submit"/>
                <input type="text" value="" name="username" />
            </form>
        <?php
            if(isset($_POST['submit'])) 
            {
                if (!empty($_POST['username']))
                {
                    if(!empty($_POST['message']))
                    {
                        $message =  mysql_real_escape_string(htmlentities($_POST['message']));
                        $username =  mysql_real_escape_string(htmlentities($_POST['username']));
                        $query = "INSERT INTO Message (`username`,`message`) VALUES ('".$username."','".$message."')";
                        mysql_query($query);
                    }
                    else
                    {
                         echo '<script type="text/javascript">alert(\'Je kan niet niks sturen\')</script>'; 
                    }
                }
                else
                {
                    echo '<script type="text/javascript">alert(\'Vul een gebruikresnaam in!\')</script>';
                }
            }
            ?>      
        </div>
    </div>
</body>
</html>


  [1]: http://chaotix.nl/chat/ "chat"

Upvotes: 0

Views: 2014

Answers (3)

Ravi Bhandari
Ravi Bhandari

Reputation: 4698

Try this one

<html>  
<head>  
    <script langauge="javascript">  
        var counter = 0;  
        window.setInterval("refreshDiv()", 5000);  
        function refreshDiv(){  
            counter = counter + 1;  
            document.getElementById("test").innerHTML = "Testing " + counter;  
        }  
    </script>  
</head>  
<body>  
    <div id="test">  
        Testing  
    </div>  
    <div id="staticBlock">  
        This is a static block  
    </div>  
</body>

Upvotes: 0

MAK
MAK

Reputation: 291

first you have to download latest jquery file from http://code.jquery.com/jquery-1.7.1.js

put this 

<script type="text/javascript" src="jquery-1.7.1.js"></script>

under the head section

now put below code after <script type="text/javascript" src="jquery-1.7.1.js"></script>

<script type="text/javascript">
$(document).ready(function(){

window.setInterval(function(){

 $.ajax({
   url: 'chat.php',
   type: "POST",
   data: "",
   cache: true,
   success: function(response){
       $("#chatwindow").html(response);           
   }

}, 1000);


});
</script>

Upvotes: 3

kjurkovic
kjurkovic

Reputation: 4104

you should extract php code form chatwindow div into another file and call it with AJAX and setInterval function every second.. if you wish to do it in this way.

This would be chat.php

<?php
            $result = mysql_query("select * from Message");
            while($row = mysql_fetch_array($result))
            {
                echo '<p>' . $row['username'] . " : " . $row['message'] . '</p>';
            }
        ?>

Then you would have your main file from which you would call ajax and refresh div:

        <!DOCTYPE HTML>
    <?php
        include 'config.php';
    ?>
    <html>
    <head>
        <title>JavaScript Chat</title>
        <link href="style.css" rel="stylesheet" type="text/css"/>


    </script>
    </head>
    <body>
        <div class="container">
            <div id="chatwindow">

            </div>

            <div class="inputMessage">
                <form method="post">
                    <hr></hr>
                    <textarea name="message" rows="1" cols="55"></textarea><br/>Fill username here<br/>
                    <input type="submit" value="verstuur" name="submit"/>
                    <input type="text" value="" name="username" />
                </form>
            <?php
                if(isset($_POST['submit'])) 
                {
                    if (!empty($_POST['username']))
                    {
                        if(!empty($_POST['message']))
                        {
                            $message =  mysql_real_escape_string(htmlentities($_POST['message']));
                            $username =  mysql_real_escape_string(htmlentities($_POST['username']));
                            $query = "INSERT INTO Message (`username`,`message`) VALUES ('".$username."','".$message."')";
                            mysql_query($query);
                        }
                        else
                        {
                             echo '<script type="text/javascript">alert(\'Je kan niet niks sturen\')</script>'; 
                        }
                    }
                    else
                    {
                        echo '<script type="text/javascript">alert(\'Vul een gebruikresnaam in!\')</script>';
                    }
                }
                ?>      
            </div>
<script type="text/javascript">
  $(document).ready(function(){
    setInterval ( "get()", 1000 );
  });
  function get(){
     $.ajax({
       type: 'GET',
       url: 'chat.php',
       success: function(data){
         $("#chatwindow").html(data);
       }
     });
  }
</script>
        </div>
    </body>
    </html>

Upvotes: 0

Related Questions