jquery duplicating dynamically created content

Question

im building a phone app using html5, jquery and php and database. I have a messaging system im trying to develope and have an issue with jquery dynamically creating buttons. I have code that creates a message subject div and message content div using details from the database called using ajax and json, I have then created a delete message button that should get the messageid that will allow the user to delete message from the database once read. The present issue is in dynamic creation of the delete button jquery is duplicating the button, so i need to get jquery to just create the button with the id of the message only, then use a jquery ajax function to delete the message. Following is my code and you can view the live process here http://newberylodge.co.uk/webapp/message.html

page code

<link href="styles/pages.css" rel="stylesheet" type="text/css">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> 
<script type="text/javascript">

$(document).ready(function() {//READY FUNC   

        $.getJSON("http://newberylodge.co.uk/webapp/includes/messageRetrieve.php",function(data)  {//JSON

           $.each(data, function(key, val) {//iterate each data
               var id = val.id;
               var messageId = val.messageId;
               var messageSubject = val.messageSubject;
               var messageContent = val.messageDetail;

             $('#serverData').append('<div id="' + id + '" class="messageAlert">' + messageSubject + '</div>');
             $('#serverData').append('<div id="' + messageId + '" class="messageContent">' + messageContent + '</div>');
             $('.messageContent').append('<input id="' + messageId + '" type="button" class="deleteButton" value="Delete Message" />');

                        });//iterate each data

            });//JSON       

});//READY FUNC
</script>

</head>

<body class="body">

  <div class="top">
    <div class="logoSmall"></div>
    <a href="menu.html"><div class="menuIcon"></div></a> 

</div>
  <div class="pageBan3"></div>
  <div id="whiteBox" class="whiteBox">
    <div id="serverData"></div>
  </div>
<div class="l-a"></div>
<div class="tagLine1">Little minds with big ideas</div>  


<script>
             $(document).ready(function() {
    $("#serverData").on("click", ".messageAlert", function() {
        $(this).next(".messageContent").toggle();
    });

        $("#serverData").on("click", ".messageContent", function() {
        $(this).before().toggle();
    });
             })
</script>
</body>
</html>

json code for dynamic creation

<script type="text/javascript">

$(document).ready(function() {//READY FUNC   

        $.getJSON("http://newberylodge.co.uk/webapp/includes/messageRetrieve.php",function(data)  {//JSON

           $.each(data, function(key, val) {//iterate each data
               var id = val.id;
               var messageId = val.messageId;
               var messageSubject = val.messageSubject;
               var messageContent = val.messageDetail;

             $('#serverData').append('<div id="' + id + '" class="messageAlert">' + messageSubject + '</div>');
             $('#serverData').append('<div id="' + messageId + '" class="messageContent">' + messageContent + '</div>');
             $('.messageContent').append('<input id="' + messageId + '" type="button" class="deleteButton" value="Delete Message" />');

                        });//iterate each data

            });//JSON       

});//READY FUNC
</script>

Any help would be greatfully appreciated

codegaze · Accepted Answer · 2015-04-11 13:39:02Z

1

You are adding your delete buttons in one container not in each container.

try this.

<script type="text/javascript">

$(document).ready(function() {//READY FUNC   

        $.getJSON("http://newberylodge.co.uk/webapp/includes/messageRetrieve.php",function(data)  {//JSON

           $.each(data, function(key, val) {//iterate each data
               var id = val.id;
               var messageId = val.messageId;
               var messageSubject = val.messageSubject;
               var messageContent = val.messageDetail;

             $('#serverData').append('<div id="' + id + '" class="messageAlert">' + messageSubject + '</div>');
             $('#serverData').append('<div id="' + messageId + '" class="messageContent">' + messageContent + '</div>');
             $('#'+messageId).append('<input id="' + messageId + '" type="button" class="deleteButton" value="Delete Message" />');

                        });//iterate each data

            });//JSON       

});//READY FUNC
</script>

This $('#'+messageId) adds your delete button in each message container.

In addition to this, i think you should add something more descriptive to your ids.

answered Apr 11, 2015 at 13:39

codegaze

7557 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Tiny Over a year ago

@idiotque Blimey, now you have changed that i can see the logic. Thankyou so much

Tiny Over a year ago

at the moment this is just a prototype, and I realise some of my id's and class names are not what they could be. Just trying to get it to work so I can present it as a roughly working prototype. But I am greatful for the constructive comment

Collectives™ on Stack Overflow

jquery duplicating dynamically created content

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related