CODEWITHSUNDEEP
javascriptphpjqueryajax
Bradly Spicer
Bradly Spicer

Reputation: 2318

How to reload a PHP Query with Jquery (Included Page)

I have a small snippet which is a comment system. I am trying to make it so when I press submit, the form itself will refresh and so will the comments.

I have tried using AJAX but I can't see anything actually initiating when I press "Submit". My frontpage.php includes each element of the player. and here is the core for the player_comments.php:

    <script>

$(document).ready(function() { 
    var options = {
        url: '',
        target: '#comment-text', // target element(s) to be updated with server response
        type: 'post' // 'get' or 'post', override for form's 'method' attribute
    }; 

    // bind form using 'ajaxForm' 
    $('#song-comment-form').ajaxForm(options); 
}); 

</script>

<?
}
if(isset($userId)) {
    /* logged in only */
}

$iComments = 0;
$qComments = $db->query("
SELECT songs_comments.*, user.id AS uId, user.username AS uName, user.avatar AS uAvatar
FROM songs_comments LEFT JOIN user ON songs_comments.userid_from = user.id
WHERE songs_comments.songid = '".$rSong->id."' ORDER BY songs_comments.id DESC");
while ($rComments = $qComments->fetch_object()) {
    $showComments .= '
    <img src="../'.makeAvatar($rComments->uId,$rComments->uAvatar,50).'" class="avatar float-left" alt>
    <div class="comment">
        <div class="comment-text">'.$rComments->text.'</div>
        <div class="comment-footer">
            <a href="/">'.$rComments->uName.'</a> on '.dateStamp($rComments->time).'
        </div>
        <br style="clear:both;">
    </div>
    ';
    $iComments++;
} ?>
<div id="player-song-comments-wrap">
    <div id="player-song-comments-heading"><img src="template/images/icons/comments.png" alt> Comments</div>
    <div id="player-song-comments-sub-heading">
        <?=isset($userId)?'<a href="/" id="show-song-comment-form" class="float-right">Add comment</a>':'<a href="/register.php" class="modal float-right">Add comment</a>'?>
        <span id="song-comments-num"><?=$iComments?></span> comments for "<span id="song-comments-title"><?=$rSong->title?></span>"
        by <span id="song-comments-artist"><?=$rSong->artist?></span>
    </div>
    <hr>
    <form id="song-comment-form">
        <input type="hidden" value="<?=$rSong->id?>" class="song-id">
        <textarea class="editor" id="song-comment-textarea"></textarea><br>
        <input type="submit" value="Submit"><input type="button" value="Cancel" id="hide-song-comment-form">
        <hr>
    </form>
    <div id="player-song-comments">
        <?=$showComments?>
    </div>
</div>

How do I make it so that when I click submit, everything inside this include is reloaded?

Upvotes: 0

Views: 152

Answers (1)

Niklesh_Chauhan
Niklesh_Chauhan

Reputation: 657

here your ajax call code 

<script>
        $(document).ready(function(){


            $("#submit_data").on('click',function(e){
                $.ajax({
                type:'POST',                   
                url:"player_comments.php",

                success:function(data){
                    console.log(data);
                    $("#player-song-comments-wrap").html(data)
                 }
            });
            });
        });
</script>
<form id="song-comment-form">
   <input type="hidden" value="<?php echo $rSong->id ?>" class="song-id">
   <textarea class="editor" id="song-comment-textarea"></textarea><br>
   <input type="submit" value="Submit" id="submit_data"><input type="button" value="Cancel" id="hide-song-comment-form">
   <hr>
</form>
 

<div id="player-song-comments-wrap">
  
</div>

here your player_comments.php code which call in ajax url

<?php
if(isset($userId)) {
    /* logged in only */
}

$iComments = 0;
$qComments = $db->query("
SELECT songs_comments.*, user.id AS uId, user.username AS uName, user.avatar AS uAvatar
FROM songs_comments LEFT JOIN user ON songs_comments.userid_from = user.id
WHERE songs_comments.songid = '".$rSong->id."' ORDER BY songs_comments.id DESC");
while ($rComments = $qComments->fetch_object()) {
    $showComments .= '
    <img src="../'.makeAvatar($rComments->uId,$rComments->uAvatar,50).'" class="avatar float-left" alt>
    <div class="comment">
        <div class="comment-text">'.$rComments->text.'</div>
        <div class="comment-footer">
            <a href="/">'.$rComments->uName.'</a> on '.dateStamp($rComments->time).'
        </div>
        <br style="clear:both;">
    </div>
    ';
    $iComments++;
} 


?>

Upvotes: 1

Related Questions