www.webdeveloper.com
Results 1 to 11 of 11

Thread: AJAX post without refresh

  1. #1
    Join Date
    Jul 2014
    Posts
    6

    AJAX post without refresh

    Hi,

    I'm trying to make this comment box text post to PHP without a page refresh. It posts 100% but it doesn't display on the page until I refresh it, is there a way to make it post without a refresh? Many thanks

    The textarea
    Code:
    <h3>Add Comment</h3> 
    <?php if ($isLoggedIn) { ?> 
    <form name="commentform" id="commentform" onSubmit="return false;"> 
    <textarea name="comments" id="comments" rows="5" style="width:100%"></textarea> 
    <br /> <button id="commentbtn" onClick="com()">Comment</button> 
    <span id="status"></span> 
    </form> .......
    The PHP
    Code:
    if (isset($_POST["comment"])){ 
    $comment = ($_POST['comment']); 
    ($visitor == $blogauthid){ 
    $divType = '<div class="blogAuthor">'; 
    } else { $divType = '<div class="blogVisitor">'; } 
    if ($comment != "")
    { $sql = "INSERT INTO blog_comments (blog_id, poster_id, poster_name, comment, datetime, divstart) VALUES('$blogid','$visitor','$visitorName','$comment',now(),'$divType')"; 
    $query = mysqli_query($db_conx, $sql); 
    echo "comment_success"; 
    exit(); }
    The AJAX
    Code:
    function com(){ 
    var c = _("comments").value; 
    var status = _("status"); 
    if(c == ""){ _("status").innerHTML = "You can't post an empty comment tuttut"; 
    } else { _("commentbtn").style.display = "none"; 
    _("status").innerHTML = 'please wait ...';  
    var ajax = ajaxObj("POST", "blog.php?blPid=<?php echo $blPid; ?>"); 
    ajax.onreadystatechange = function() { if(ajaxReturn(ajax) == true) { 
    if(ajax.responseText != "comment_success")
    { _("status").innerHTML = "Comment post unsuccessful, please try again."; 
    _("commentbtn").style.display = "block"; 
    } else { window.location = "index.php"; 
    } 
    } 
    } ajax.send("comment="+c);
     } 
    }
    THANKS

  2. #2
    Join Date
    Aug 2014
    Posts
    3
    hello,

    you'll must insert the comment with an issert into the DOM tree of the page.

    the easyest way to do this is to use a function like this :

    Code:
    function insertCom(){
        var container = document.createElement("div");
    
        //if you want to display the pseudo of the user
        var userName = document.createElement("h5");
        var para = document.createElement("p");
    
        var userNameText = document.createTextNode( pseudo_of_user_that_post );
        var paraText = document.createTextNode(_("comments").value);
    
        //insert the textual node into the tags
        userName.appendChild(userNameText);
        para.appendChild(paraText);
    
        //insert the internal tags into the container
        container.appendChild(userName);
        container.appendChild(para);
    
        //I assumed that the comment block is contained into a div tag with id like "commentContainer" :
        var masterContainer = document.getElementById("commentContainer");
        masterContainer.appendChild(container);
    }
    To use this function, it's justified to call it on AJAX's callback.

  3. #3
    Join Date
    Mar 2009
    Posts
    501
    Have you considered simply having the comment form in an iframe? That wouldn't require any javascript and it would not refresh the entire page only the comment --only the iframe would change to indicate success.

  4. #4
    Join Date
    Jul 2014
    Posts
    6
    @Tcobb
    How would I go about setting that up??

  5. #5
    Join Date
    Mar 2009
    Posts
    501
    How would I go about setting that up??
    1. Have a separate page on your website which just contains the form for making comments. Ex. http://mySite.com/comments.html. Have it send the information upon submission to the PHP script that handles these comments. Ex. http://mySite.com/comments.php

    2.In your main HTML page, have an element '<iframe src="comments.html"></iframe>'

  6. #6
    Join Date
    Mar 2012
    Posts
    1,639
    Surely the question is: why is your form page so slow loading that using an IFrame makes a difference???

  7. #7
    Join Date
    Jul 2014
    Posts
    6
    @Tcobb - thank you
    @jedaisoul - it's not slow, just thought it would be better to post the comment without a page refresh. I managed to get it working with AJAX; seems better than the standard old way of just a form-php post haha

  8. #8
    Join Date
    Aug 2014
    Posts
    3
    Just a question about IFrame usage :
    use an IFrame will need to reload the IFrame's content to display the new comment. But the comment's data are already exist into the current page. So, why reload the IFrame after post event?

  9. #9
    Join Date
    Mar 2012
    Posts
    1,639
    Quote Originally Posted by BOER View Post
    @Tcobb - thank you
    @jedaisoul - it's not slow, just thought it would be better to post the comment without a page refresh. I managed to get it working with AJAX; seems better than the standard old way of just a form-php post haha
    But if the IFrame has to refresh, where is the benefit? Particularly if you use PHP include files to cache the common page elements (headers, footers and nav bars), only the form updates anyway!

  10. #10
    Join Date
    Jul 2014
    Posts
    6
    Quote Originally Posted by jedaisoul View Post
    But if the IFrame has to refresh, where is the benefit? Particularly if you use PHP include files to cache the common page elements (headers, footers and nav bars), only the form updates anyway!
    How would you go about doing it?

  11. #11
    Join Date
    Aug 2014
    Posts
    3
    Quote Originally Posted by jedaisoul View Post
    But if the IFrame has to refresh, where is the benefit? Particularly if you use PHP include files to cache the common page elements (headers, footers and nav bars), only the form updates anyway!
    The utility of IFrame usage in this context is to reload only the comments display. All of other elements doesn't need to be reload. But the benefit will be truncate because a reload will be use to display all the comment in major effect, and in minor a new IFrame will apears after reload to create a new form.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles