Question

I have a form I submit through ajax:

 $(function() {
 $(".submit").click(function() {
var listid = $("#listid").val();
var itemid = "<?=$id?>";
var userid = "<?=$_SESSION['user_id']?>"; 

 var dataString = 'listid=' + listid + '&userid=' + userid + '&itemid=' + itemid;


 $.ajax({
 type: "POST",
 url: "join.php",
 data: dataString,
 success: function(){
 $('#content_error').fadeIn(200).show();
 }
 });

 return false;
 });
 });

This works perfectly. The ajax function calls join.php:

  <? session_start();

require_once("include/database.php");
$Db = new Database();

 if($_POST['listid'] && $_POST['itemid'] && $_POST['userid']) {

            $list_id = $_POST['listid'];
            $user_id = $_POST['userid'];
            $item_id = $_POST['itemid'];

            $sql = "SELECT *
                    FROM items_list
                    WHERE list_id = '".$list_id."'
                    AND user_id = '".$user_id."'
                    AND item_id = '".$item_id."'
                    ORDER BY item_id DESC LIMIT 1";
            $result = $Db->sQuery($sql);
            $row = mysql_fetch_array($result);

            if(mysql_num_rows($result) > 0){

                $error = "You've already saved this";   

            }else{

            $sql = "INSERT INTO items_list (list_id, user_id, item_id) 
                    VALUES('$list_id', '$user_id', '$item_id')";
            $Db->uidQuery($sql);

            $sql = "SELECT count(item_id) as itemm
                    FROM items_list 
                    WHERE item_id = '".$item_id."'
                    GROUP BY item_id";          
            $result = $Db->sQuery($sql);
            $Db->closeConnection();
            $tel2 = mysql_fetch_array($result);

            ?>
                <span class="bubble_itemm"><?=$tel2['itemm']?></span>


            <?
                $success = "Sucessfully";

            }
        }

?>

After a success I call a span with the class bubble_itemm. This span also exists in the main page. I want the “new” span to replace the “old” span in the main page with a fadein.

How do I do this?

Answer 1

Form page:

<script type="text/javascript">
$(function() {
    $(".submit").click(function() {
        var listid = $("#listid").val();
        var itemid = "<?=$id?>";
        var userid = "<?=$_SESSION['user_id']?>"; 

        var dataString = 'listid=' + listid + '&userid=' + userid + '&itemid=' + itemid;


        $.ajax({
            type: "POST",
            url: "join.php",
            data: dataString,
        }).done(function( result ) {
            myresult(result);
        });

        return false;
    });
});

function myresult(result) {
    var result_lines = result.split("<splitter>");    
    if (result_lines[0] == '1') { 
        $('.bubble_itemm').html('<span class="error">' + result_lines[1] + '</span>').fadeIn(500);
    } else if (result_lines[0] == '2') { 
        $('.bubble_itemm').html('<span class="success">' + result_lines[1] + '</span>').fadeIn(500);
    }
    return true;   
}

</script>

join.php script:

<?php 

require_once("include/database.php");
$Db = new Database();

if($_POST['listid'] && $_POST['itemid'] && $_POST['userid']) {

    $list_id = $_POST['listid'];
    $user_id = $_POST['userid'];
    $item_id = $_POST['itemid'];

    $sql = "SELECT *
            FROM items_list
            WHERE list_id = '".$list_id."'
            AND user_id = '".$user_id."'
            AND item_id = '".$item_id."'
            ORDER BY item_id DESC LIMIT 1";
    $result = $Db->sQuery($sql);
    $row = mysql_fetch_array($result);

    if(mysql_num_rows($result) > 0){
        echo "1<splitter>"; // here to identify message status
        echo "You've already saved this"; // return message

    }else{

        $sql = "INSERT INTO items_list (list_id, user_id, item_id) 
                VALUES('$list_id', '$user_id', '$item_id')";
        $Db->uidQuery($sql);

        $sql = "SELECT count(item_id) as itemm
                FROM items_list 
                WHERE item_id = '".$item_id."'
                GROUP BY item_id";          
        $result = $Db->sQuery($sql);
        $Db->closeConnection();
        $tel2 = mysql_fetch_array($result);

        echo "2<splitter>"; // here to identify message status
        echo $tel2['itemm']; // return message
        echo "Sucessfully"; // return message

    }
}
?>