Question

I have a webpage that uses jquery.load() to pull in html code populated with php values pulled from a database.

$(function() {
console.log("Starting .load");
$("#stream").append($("#slipp-container").load("includes/databaseslippsAJAXserverside.php .slipp-container"));
});

I want to be able to add comments to one slipp out of many, without refreshing the page.

Each slipp consists of basic information about the slipp, plus user comments that databaseslippsAJAXserverside.php loads separately.

The issue is for each slipp, there is also an “add comment” box, which is just a textarea with a submit button.
$value["ID"] is the unique ID of the slipp. I thought I could use a hidden field to pass the username, and the function call itself to pass the ID of the slipp, but I have no idea where to go from there.

<form id="<?php echo $value["ID"]; ?>">
<textarea rows="4" cols="30"></textarea>
<input type="hidden" value="<?php echo $_SESSION["user"]; ?>" name="formUser">
<input type="submit" value="Add Comment" class="commentbutton" id="CCB<?php echo $value["ID"]; ?>" action="javascript: addComment(<?php echo $value["ID"]; ?>)">
</form>

There could be upwards of 100 slipps on a page at any one time (Facebook style), so how do I have one function that submits the form data to the relevant php file for inclusion in the database, without refreshing the page?

I’m fairly certain that .load() basically discards all javascript it loads in, which is why I cannot simply have a unique, php generated javascript attached to each slipp.

Answer 1

1. add class to your form:

   <form id="<?php echo $value["ID"]; ?>" class="comments">
   <textarea rows="4" cols="30"></textarea>
   <input type="hidden" value="<?php echo $_SESSION["user"]; ?>" name="formUser">
   <input type="submit" value="Add Comment" class="commentbutton" id="CCB<?php echo $value["ID"]; ?>" action="javascript: addComment(<?php echo $value["ID"]; ?>)">
   </form>
   

2. in javascript set handler to form submit:

   $(function() {
    $('form.comments').submit(function(e) {
       $.post('myformhandler.php',data: $(this).serializeArray(),function(data) {
        /* Add an action here performed on success loading, 
           use data as returned value; */
        });
       return false;
    }
   );
   });