how to reload a div with form content using jquery ajax

Question

I am working on creating an online visitor chat software using PHP and MySQL. What am i trying to do is load the page on clicking the submit button

• id for submit button: send
• id for visitor:vid
• id for chat:cid

Below is the code snippet for Ajax request made by the code but it is not working. I have put few alerts within the codes to test whether the function is working fine or not and the function is not working.

Please help me out. Any other method is also accepted

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$("#send").click(function() {
var cid = $("#cid").val();
var vid = $("#vid").val();
var usermsg = $("#usermsg").val();
var  submitmsg = $("#submitmsg").val();

var dataString = 'cid='+ cid + '&vid=' + vid + '&usermsg=' + usermsg;
alert(datastring);  
$.ajax({
type: "POST",
url: "chat.php",
data: dataString,
success:function(result){
    alert(result);
}});

});
</script>

Answer 1

Wrap your click function under

jQuery(document).ready(function($){
  // your click event here
});

Answer 2

Change your code to:

<script type="text/javascript">
    $(document).ready( function() {
    $("#send").click(function() {
    var cid = $("#cid").val();
    var vid = $("#vid").val();
    var usermsg = $("#usermsg").val();
    var  submitmsg = $("#submitmsg").val();

    var dataString = 'cid='+ cid + '&vid=' + vid + '&usermsg=' + usermsg;
    alert(datastring);  
    $.ajax({
        type: "POST",
        url: "chat.php",
        data: dataString,
        success:function(result){
            alert(result);
        }});

    });
});
</script>