CODEWITHSUNDEEP
jquerymysqlajax
Radolino
Radolino

Reputation: 1844

how to append div to list after adding to mysql db with ajax and jquery

I am trying to write some data in a mysql database with jquery and ajax. The query works successfully but I am unable to append the data in a div array.

EDITED:

$(document).ready(function(){

    $("#sub").click( function() {
      $.ajax({
            type: "POST",
            url:  "insert.php", 
            dataType: 'json',
            data: $("#myForm :input").serializeArray(),
            success: function(data) { 
                data = $.parseJSON(data);
                $("#data").append("<div class=\"row\">"
                           +data.position+"  "   //this section must be changed to 
                           +data.text+"  "       // something but I dont know what
                           +data.id+"  "
                           +data.date_added+"  "
                           +"</div>"); 
            },
            error:function (xhr, ajaxOptions, thrownError){
            $("#error").html(thrownError);
            }
     })
     return false;
    });

    //disable form redirection
    $("#myForm").submit( function() {
      return false; 
    });

    //clear input fields
    function clearInput() {
    $("#myForm :input").each( function() {
       $(data).val('');
    });
    }

    update();


}); 

function update() {
     $.ajax({
            type: "POST",
            url:  "fetch.php", 
            dataType: 'json',
            success: function(data) {
                $.each(data, function(){
                    $("#data").append("<div class=\"row\">"
                                       +this['position']+"  "
                                       +this['text']+"  "
                                       +this['id']+"  "
                                       +this['date_added']+"  "+
                                      "</div>");

                })
            },
            error:function (xhr, ajaxOptions, thrownError){
            $("#error").html(thrownError);
            }
     });
     return false;
};

How I am going to show the data posted AFTER the query was successful ?

EDIT:

<body>
        <div class="navbar navbar-inverse">
          <div class="navbar-inner noRadius">
            <a class="brand" href="#">toDo</a>
            <ul class="nav">
              <li class="active"><a href="#">Home</a></li>
              <li><a href="#">Home</a></li>
            </ul>
          </div>
        </div>

        <div id="main" class="container">

        <div id="data"> </div>

            <form id="myForm" action="insert.php" method="post">
                Task: <input class="input-large" type="text" name="text" />
                <br />
                <button class="btn" id="sub">Save</button>
            </form>

            <span id="error"></span>

        </div>

        <!-- Including our scripts -->
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
        <script type="text/javascript" src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
        <script type="text/javascript" src="script.js"></script>

        <link href="library/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
        <script src="library/js/bootstrap.min.js"></script>
        <!--<script src="library/js/ajaxy.js"></script>-->

    </body>

fetch.php

<?php
    include_once('db.php');


    $sql = mysql_query("SELECT * FROM todo");
    $tasks = array();

    while( $row = mysql_fetch_assoc($sql) ){
        $tasks[] = $row;
    }

    echo json_encode($tasks);
?>

insert.php

<?php

    include_once('db.php');

    $text = $_POST['text'];
    $query=mysql_query("INSERT INTO todo(text) VALUES('$text')");
    if($query){
        echo "Data for $text inserted successfully!";
        }
    else{ 
        echo "An error occurred!"; 
        }

?>

I am trying to build a simple todo application.

I updated insert.php because I was going to insert data into the db with select. I am a beginner and I am trying hard ! Please help me unstuck !

Upvotes: 1

Views: 2779

Answers (2)

Radolino
Radolino

Reputation: 1844

I needed to echo json data from a SELECT after persisting data to the database

if($query){
        $data=mysql_query("SELECT * FROM todo WHERE text = '$text'");
        $tasks[]=mysql_fetch_assoc($data);
        echo json_encode($tasks);
        }

Upvotes: 0

Sushanth --
Sushanth --

Reputation: 55740

Move the append to inside the success callback.. AJAX is asynchronous. SO the way you have written the code , the data object is being accessed before the response is populated with the data. So any processing that is to be handled on the response object much be moved to success callback.

$("#sub").click( function() {
      $.post( $("#myForm").attr("action"), 
              $("#myForm :input").serializeArray(), 
              function(data) { 

               $("#result").html(data);
               $("#data").append("<div class=\"row\">"
                           +data[0]+"  "   //this section must be changed to 
                           +data[1]+"  "   // something but I don't know what
                           +data[2]+"  "
                           +data[3]+"  "
                           +"</div>");
      });
});

And the this[0] should be data[0] assuming that the response is in the form of an array.

It might change based on the response that you expect.

Upvotes: 1

Related Questions