如何在PHP while循环中通过jQuery运行附加数据？

Question

ill try my best to explain my issue very clearly, ive been working with ajax and im having some troubles appending data inside a while loop using jquery.

this is my loop that displays the title of the post and checks if the title has any comments. if non, it will just show no comments

<ul class="title">
<?php $result = getTitles();
      while ($row = $result->fetch_assoc()) { ?>
      <li> <?php echo $row['title']; ?>  </li>
        <ul class="comments">
           <?php $comments = getComments();
                while (...) { ?>
           <li> <?php //get comments associated to the title posts ?>
           <?php } ?>
        <input box>
        </ul>
<?php  } ?>
</ul>

so it displays like this

title 1
  |- comment 1
  |- comment 2
  |- <input> box

title 2
  |- comment 1
  |- <input> box

title 3
  |- <b>no comment </b>
  |- <input> box

then i have this jQuery that fetches the value from a <textarea id="title"> and append the result into <ul class="title">

/* AJAX - submit status */
$(function() {
    $(document).on('click','.submit', function () {
        var title= $('#title').val().trim();
        if (title.length == 0 ) { //some code } 

        $.post('insert_post.php', {title: title});
        $("<li>" + title + "</li>").prependTo('.title');

    });
});

currently, when i append the data, it justs posts the title without running it inside my while loop.

the way i wanted it to happen is, to run the appended data inside the loop, so when being displayed, it will included all the necessary elements associated to my while loop

one of the elements are the <input> box, each title has their own <input> box. in the case of appended data via jQuery, it only posts the title and not the elements that must be included for every title

Answer 1

Your HTML is invalid — the only valid children of a <ul> element is <li>, and not other elements. Reformat your HTML as follow:

<ul class="title">
<?php $result = getTitles();
    while ($row = $result->fetch_assoc()) { ?>
    <li title="<?php echo $row['title']; ?>">
        <?php echo $row['title']; ?>
        <ul class="comments">
        <?php $comments = getComments();
            while (...) { ?>
            <li> <?php //get comments associated to the title posts ?>
        <?php } ?>
            <li>
                <form>
                    <textarea></textarea>
                    <input type="submit" />
                </form>
            </li>
        </ul>
    </li>
<?php  } ?>
</ul>

Your DOM will look like this:

• Title 1
  • Comment 1
  • Comment 2
  • Input
• Title 2
  • Comment 1
  • Input

In order to fetch the title when you are doing an AJAX call, simply get the title attribute of the parent of the <ul class="comments"> element:

$(function() {
    $(document).on('click','.submit', function () {
    // Alternate:
    // $(document).on('submit', '.comments form', function() {
        // Travel up DOM tree to get the title, from the <li> element with the title attribute specified
        var title = $(this).parents("li[title]").attr("title");

        // Do rest of the AJAX call
    });
});

As attached here is a barebones JSFiddle demo that you can travel up the DOM tree to search for the right title: http://jsfiddle.net/teddyrised/jyMYY/