CODEWITHSUNDEEP
javascriptphpjqueryhtmlajax
Bluedayz
Bluedayz

Reputation: 599

Should I combine PHP with ajax to post data to the server?

Imagine the page always refreshes after submitting a comment form. That is annoying since the comments are at not at the top of the page and you always have to scroll to the bottom to see your comment and the other ones.

I thought it would be a lot better to use ajax to submit the form.

HTML

<form id="com-form" method="post">
    <textarea type="text" name="text" required=""></textarea>
    <input type="submit" value="Post"/>
</form>
<div id="com-refresh"></div>

jQuery 

$("#com-form").on('submit', function(e) {
    e.preventDefault();
    var form      = $(this),
        form_data = form.serialize();
    $.post('/php/comments/add.php', form_data, function(data) {
        $("#com-refresh").append(data);
    });
});

PHP

<?php
session_start();
require_once 'comment.class.php';           //require a class with methods
$text = $_POST['text'];
if($_SESSION['status'] == 'loggedin') {
    if(isset($text)) {
        $comment = new Comment();           //initialize the Comment object
        echo $comment->add_comment($text);  //safe the comment in the database and output it
    } else echo "Your comment is empty.";
} else echo "Please log in to post comments.";

I hope the code is understandable.

Do you think it is smart or a bad practice to use ajax to not refresh the page after submitting a form?

How should it be done? Do you have a better idea, a cleaner solution?

Upvotes: 1

Views: 1179

Answers (3)

Bluedayz
Bluedayz

Reputation: 599

The problem was the php code. I have rewritten the functions that generate the comments in OOP style which helped a lot. I edited the post know so it can be useful in the future.

To make it short:

  • Use ajax! Your website's user experience will be a lot better, because you are able to provide live updates, etc.
  • It is recommendable to use the built-in jQuery function .serialize() to safe data into a "text string in standard URL-encoded notation", that can make your work more simple.
  • I know there is a lot of discussions about OOP, but it really helps understanding, organizing and maintaining your code more easily

Upvotes: 0

fadeys.work
fadeys.work

Reputation: 499

You could simply do:

$(document).ajaxSuccess(function(e, xhr, settings) { 
    $(".mydiv").html(xhr.responseText);     
});

having your php file print what ever html you want to replace.

further reading: ajaxSuccess

example of what might be your solution

form file:

<form method="post">
    <textarea type="text" name="comment" id="com-area"></textarea>
    <input type="submit" id="com-submit"/>
</form>
<div id="com-refresh">
    <?php require_once "comments/build.php"; ?>
</div>
$(function() {
    $(".cmtx_form").submit(function(e) {
        e.preventDefault();
        var form = $(this);
        var text = $(".cmtx_textarea_field").val();
        $.ajax({
            type: 'POST',
            url: 'comments/add.php?ajaxCall=true',
            cache: false,
            data: { comment: text }
        });
     });
  });

$(document).ajaxSuccess(function(e, xhr, settings) { 
    $("#com-refresh").html(xhr.responseText);     
});

your add.php file should look somewhat like so:

// ... code code code...
if (isset($_GET['ajaxCall']) && $_GET['ajaxCall']) {
    include_once('/path/to/build.php');
}

Upvotes: 1

Manibharathi
Manibharathi

Reputation: 945

simply you can redirect the file from add.php to build.php after complete the process using header('location:comments/build.php'); or some other else, so second ajax call was unnecessary.

Upvotes: 0

Related Questions