Refresh a div on Ajax success

JavaScript
1

Hi,

I am basically trying to make a feed.

When I click “submit”, I want my script to load the latest post without refreshing the whole page. So far I only could find a sloppy way to do it, I hope I can get a proper answer.

When I post something, I want it to appear in the top of the news div rather than removing and loading the whole div, like Twitter or Facebook.

I hope you got my point.

home.php
new post section & feed is here, posts are shown in a div called news.

Here’s my form. (newpost.js is included at the bottom of the page)

<form id="new" action="/modules/feed/process.php" role="form" method="POST" enctype="multipart/form-data">
<div id="top-status"> <i class="fa fa-pencil fa-2x textalign lefty"><span class="text-cl"><br/>Text</span></i>
<input type="submit" id="submitstatus" name="all-status" class="postitnow" value="Share">

<div id="rand"></div>
<div id="news">
<?php require_once($root . "template.php"); ?> // my template that populates latest user posts.
</div>

process.php. In this file, I add new posts into database

newpost.js

$(document).ready(function () {
    $(function () {
        $('#new').submit(function (e) {
            e.preventDefault();
            var form = $(this);
            var formData = form.serialize();
            $.ajax({
                type: 'POST',
                url: '/modules/feed/process.php', // the url where we want to POST
                data: formData, // our data object
                success: function () {
                    $("#news").fadeOut("fast"); // I remove old div
                    $("#rand").load("feed" + " #news"); // I load #news inside of the #rand. It's a very wrong solution, that's the part I want to change.
                }
            });
        });
    });
});

process.php (I’m using a mysqli class)

// get user id.
$db->where("user_name", $username);
$user = $db->getOne("users");    
$new_status = $_POST['statustext'];
date_default_timezone_set('Europe/Istanbul');
$now_date = date("Y-m-d H:i:s");

$new_status = $_POST['statustext'];
$status = Array(
  "user_id" => $user['user_id'],
  "status" => $new_status,
  "status_date" => $now_date
);
$id = $db->insert('user_status', $status); // status added to the database.
2

You’re probably looking for .prepend().

http://api.jquery.com/prepend/

success: function(data) {
    var _newData = $('<div>').html(data);
    $('#news').prepend(_newData);
}

Also, $(function() { //stuff }); is actually shorthand for $(document).ready(), so there’s no reason to include it twice.

1 Like
3

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.