Insert record using jQuery after ajax call doesn't work

1
votes

I have an insert and load record (jQuery & PHP) script working fine without using AJAX. but after the AJAX call, insert (jQuery) doesn't work.

This is my code:-

    $(".insert").live("click",function() {

        var boxval = $("#content").val();
        var dataString = 'content='+ boxval;
        if(boxval==''){
            alert("Please Enter Some Text");
        }
        else{
            $.ajax({
                type: "POST",
                url: "demo.php",
                data: dataString,
                cache: false,
                success: function(html){
                    $("table#update tbody").prepend(html);
                    $("table#update tbody tr").slideDown("slow");
                    document.getElementById('content').value='';
                }
            });
        }
        return false;
    });

    $(".load").live("click",function() {
        $.ajax({
                type: "POST",
                url: "test.php",
                success: function(msg){
                    $("#container").ajaxComplete(function(event, request, settings){
                        $("#container").html(msg);
                    });
                }
            });
    });
});
4
phpjquery
use firebug to inspect what is going on with your request. – Senad Meškin
In my jQuery AJAX script using json we have to specify the IDs of the fields like $.('#input1').val(); so jQuery knows what it is submitting. This is going into the AJAX call after the cache property is specified. I don't have working code on me right now but if you're still stuck later I can post what I have it. – Ryan
Thanks for your reply, in firebug response is <tr class="first"> <td class="id">name</td> </tr> which is ok – Zoran

4 Answers

0
votes

Definitely recommend using your browsers dev tools to examine the exact request that is submitted and see if there is a problem there first.

You might also want to change the way you pass the dataString to the ajax request.

If your boxval has a "&" in it then you'll end up with an incorrectly formatted string. So, try initialising data instead as:

var data = {};
data.content = boxval;

This will ask jQuery to escape the values for you.

0
votes

I'd be curious to see your form markup and your back-end PHP code; it may provide a clue.

Often I'll have a form variable called 'action', just to tell the PHP code what I want it to do (especially if that PHP script is a controller for many different actions on an object). Something like <input type="hidden" name="action" value="insert"/> or even multiple <input type="submit" name="action"/> buttons, each with a different value. In the PHP code I'll have something like:

switch ($_POST['action']) {
    case 'insert':
        // insert record and send HTML
    break;
    // other actions
}

If you've done something like this, perhaps the PHP is looking for the presence of a variable that doesn't exist.

Without being able to look at your code, I'd highly recommend the incredibly handy jQuery Form Plugin http://jquery.malsup.com/form/ . It allows you to turn a form into an AJAX form, formats your data properly, and doesn't forget the data from any of your form elements (except <input type="submit"/> buttons that weren't clicked on, which is the same behaviour that a non-AJAX form exhibits). It works just like the standard $.ajax() method.

0
votes

I solved the problem

I replaced this code

$("#container").ajaxComplete(function(event, request, settings){
    $("#container").html(msg);
});

with

$("#container").html(msg);

Thank you very much for your answers

0
votes
<!--
To change this template, choose Tools | Templates
and open the template in the editor.
-->  
<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>

<script type="text/javascript">
           $(document).ready(function() {
     $('.clicker').click(function(){
         var fname = $('.fname').val();
         var lname = $('.lname').val();
     var message=$('.message').val();   
  $.ajax({
    type:"POST",
    url: "submit.php",
     cache:false,
    data: "fname="+fname+"&lname="+lname+"&message="+message,
    success: function(data){
            $(".result").empty();
             $(".result").html(data);
        }
    });
   return(false);
         });
   });
        </script>
    </head>
    <body>
        <div>Data Form</div>
       <form id="form1" name="form1" method="post" action="">
    <input name="fname" type="text" class="fname" size="20"/><br />
    <input name="lname" type="text" class="lname" size="20"/><br />
    <div class="result"><textarea name="message" rows="10" cols="50" class="message">    </textarea></div>
        <input type="button" value="calculate" class="clicker" />
    </form>
    </body>
</html>

submit.php 

<?php
$con=mysql_connect("localhost","root","");
mysql_select_db("ajaxdb",$con);

$fname=$_REQUEST['fname'];
$lname=$_REQUEST['lname'];
$message=$_REQUEST['message'];

$sql="insert into person(fname,lname,message) values('$fname','$lname','$message')";
mysql_query($sql) or die(mysql_error());

echo "The data has been submitted successfully.";
?>