2

I have been trying to create dynamic textboxes on button click for each row generated from a database. But on click of add(+) button, the boxes are getting appended after all the rows of the db, instead of where I click after each row. Here is what I tried so far.

//Jquery function 

$('#f2 .add-box').click(function(){

var box_html = $('<p class="text-box"><label for="box">Subtask</label> <a href="#" class="remove-box btn-sm btn-primary btn-remove"><span class="glyphicon glyphicon-remove"></span></a> <input type="text" name="boxes[]" class="form-control" value=""> </p>');
        box_html.hide();
       $('#f2 p.text-box').append(box_html);
        box_html.fadeIn('slow');
        return false;
    });

//php code 

 while($row =mysqli_fetch_array($res))
            {   
                echo "<div class='rowDiv' id='" . $row['id'] ."' contenteditable='true'>" . $row['desc'] . "</div>";
                echo " <p class='text-box'> <a class='add-box' href='#' rel='" . $row['id'] ."' ><span class='glyphicon glyphicon-plus'></span></a></p><br/>";

          }

Any help is much much appreciated.

apoo
  • 23
  • 8

2 Answers2

0

The problem you're encountering is caused by invalid HTML markup.

In your code you're nesting <p> tags inside one another and that's not allowed in HTML.

A simple fix is to change your <p> tags into <div>

Check out this question and answer for more details: Nesting <p> won't work while nesting <div> will?

Community
  • 1
  • 1
Ethnar
  • 657
  • 4
  • 10
  • Thank you so much for the suggestion, I changed all my

    to div tags, gave them unique ids too. But when i click on add button, text box gets created after echoing all rows of db, not after each row.

     – apoo Dec 30 '15 at 10:40
  • One more issue I see in your code now and technically it shouldn't be working at all in this form. The div#f2 doesn't actually contain .add-box nor .text-box - as they are both included after that div is closed. Can you post example HTML output and verify that the JS included here is your latest version? – Ethnar Dec 30 '15 at 12:07
  • Good stuff, all clear now. I've updated the fiddle: https://jsfiddle.net/Lfh6qoov/1/ Check out the line 8. $(this) refers to the button that was clicked. I've replaced `.after()` with `.before()` so that order of subtasks is more logical and the "+" ends up where the subtasks are being added. The issue was that your selector was refering to the `text-box` class and there was exactly one instance of it, so it ended up adding the items after the entire HTML block with the inputs. – Ethnar Dec 30 '15 at 13:00
  • Oh my!! Thanks a million...I realized the error after you pointed it out. Thanks so much for your help :) – apoo Dec 30 '15 at 13:02
  • Happy to help, and welcome to Stack Overflow. If this answer solved your issue, please mark it as accepted. :) – Ethnar Dec 30 '15 at 13:09
0

Thanks Ethnar for the answer. The final fiddle is found here
jsfiddle.net/Lfh6qoov/1

Check out the line 8. $(this) refers to the button that was clicked. I've replaced .after() with .before() so that order of subtasks is more logical and the "+" ends up where the subtasks are being added. The issue was that your selector was refering to the text-box class and there was exactly one instance of it, so it ended up adding the items after the entire HTML block with the inputs

apoo
  • 23
  • 8