how to run an appended data via jQuery in a PHP while loop?

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

You do know what PHP is a server-side language, while JS is a client-side language, right? Basically, you can't run a JS script in a PHP while loop. In addition, your markup is invalid — you have nested a <ul> and <input> element in the <ul class="title">. The only valid children of <ul> elements are <li>. — Terry
– Terry, Commented Oct 16, 2013 at 15:28
sorry, if my explanations were a bit unclear. i just realized that theres no way i could insert the appended data into a while loop. i just thought maybe there's a way to do this in jquery. as ive just recently learned that framework. — bobbyjones
– bobbyjones, Commented Oct 16, 2013 at 15:39
Also, where exactly do you want to insert the title? You haven't made it clear, because you have two levels of nesting. — Terry
– Terry, Commented Oct 16, 2013 at 15:39
in my <ul class="title"> thats the place where i put my title. each title has its own comments, thats why i have a sub <ul> where i list down my comments. — bobbyjones
– bobbyjones, Commented Oct 16, 2013 at 15:40
Why would yo want to prepend/append the title when it's already there? — Terry
– Terry, Commented Oct 16, 2013 at 15:47

Terry · Accepted Answer · 2013-10-16 15:46:45Z

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/

Collectives™ on Stack Overflow

how to run an appended data via jQuery in a PHP while loop?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related