Question

Im making a contacts book, and with each new entry it generates a Div with all the information inside. I have gotten as far as giving each generated div a unique ID, and each button generated with the Div a unique ID, however I am having trouble associating the buttons with the div and allowing it to perform functions (such as toggling the visibility of the div).

Any help you can give is greatly appreciated, as I will soon be bald from frustration.

Updated Code with suggestions

The code that generates the DIV and Button:

 Contact.prototype.generateDiv = function(){

      divid = divid + 1;
      buttonid = buttonid + 1;
     var control = [];
     control[0] = divid;
     control[1] = buttonid;
     myControls.push(control);

var childDiv =
            "<div style='border-style:double;border-width:6px;background-color: #2f4f4f;margin-left:auto;max-width: 700px;margin-right: auto;text-shadow:-1px -1px 1mm #000,1px -1px 1mm #000,-1px 1px 1mm #000,1px 1px 1mm #000;'>" +
            this.firstName + " " + this.surname + "<button class='btnForDiv' style='color: black;' id='" + buttonid + "'" + "> Button </button>" +
            "<div  id='" +  divid  + "' " +  "style='margin-right: auto;margin-left :40px;width: 300px;border-right-style: double;border-right-width:3px;'>" +
            "<br>" + "Surname: "  +  this.surname + "<BR>" + "First Name:" + this.firstName + "<br>" +
            "Date Of Birth: " +  this.days + "/" +  this.months + "/" + this.years + "/" + "<br>" + "Telephone Number: " + this.phone +
            "<br>" + "Address: " + this.address + " " + this.post + "<br>" + "Email Address: " + this.email + "<br>" + "Group: " + this.group +
            "<br>" + "Days Until Birthday: " + this.daysUntil + "<BR>" +  "</div>" +  "</div>"


        return childDiv  ;

}

The entire code

var surnameField,firstNameField,birthdayField, phoneField, addressField, postField, emailField, groupField ;  //Declaring variables for the fields

var Contact = function(surname,firstName,date, phone , address , post, email, group){
    this.surname = surname ;
    this.firstName = firstName ;
    this.birthdayDate = new Date (date) ;
    this.phone = phone;
    this.address= address;
    this.email = email;
    this.post = post;
    this.group = group;
    this.selected = false ;

}

var contacts = [];
divid = 0;
buttonid = 1000;
myControls = [];

var getDate = function() {

    for (var i= 0, j=contacts.length;i<j;i++){
        var y = contacts[i].birthdayDate.getFullYear();
        var m = contacts[i].birthdayDate.getMonth();
       var d = contacts[i].birthdayDate.getDate();
        contacts[i].days = d;
        contacts[i].months = m + 1;
        contacts[i].years = y ;
        var today = new Date() ;
        var ty = today.getFullYear();
        contacts[i].bdThisYear = new Date(ty,m,d, 0 , 0 , 0);

    }
}

var daysUntilBirthday = function(){
    for (var i= 0, j=contacts.length;i<j;i++){
        var today = new Date() ;
            contacts[i].daysUntil = Math.round((contacts[i].bdThisYear - today ) /1000/60/60/24+1);
            if (contacts[i].daysUntil <= 0){
            contacts[i].daysUntil =  contacts[i].daysUntil + 365 ;
        }
    }
}

Contact.prototype.generateDiv = function(){

          divid = divid + 1;
          buttonid = buttonid + 1;
         var control = [];
         control[0] = divid;
         control[1] = buttonid;
         myControls.push(control);

    var childDiv =
                "<div style='border-style:double;border-width:6px;background-color: #2f4f4f;margin-left:auto;max-width: 700px;margin-right: auto;text-shadow:-1px -1px 1mm #000,1px -1px 1mm #000,-1px 1px 1mm #000,1px 1px 1mm #000;'>" +
                this.firstName + " " + this.surname + "<button class='btnForDiv' style='color: black;' id='" + buttonid + "'" + "> Button </button>" +
                "<div  id='" +  divid  + "' " +  "style='margin-right: auto;margin-left :40px;width: 300px;border-right-style: double;border-right-width:3px;'>" +
                "<br>" + "Surname: "  +  this.surname + "<BR>" + "First Name:" + this.firstName + "<br>" +
                "Date Of Birth: " +  this.days + "/" +  this.months + "/" + this.years + "/" + "<br>" + "Telephone Number: " + this.phone +
                "<br>" + "Address: " + this.address + " " + this.post + "<br>" + "Email Address: " + this.email + "<br>" + "Group: " + this.group +
                "<br>" + "Days Until Birthday: " + this.daysUntil + "<BR>" +  "</div>" +  "</div>"


            return childDiv  ;

}



var addContact = function(surnameField,firstNameField,birthdayField, phoneField, addressField, postField, emailField, groupField ){
        if(surnameField.value){
            a = new Contact(surnameField.value, firstNameField.value,birthdayField.value, phoneField.value, addressField.value, postField.value, emailField.value, groupField.value);
            contacts.push(a);
        }else{ alert("Please complete all fields")}

}

var clearUI = function(){
    var white = "#fff";
    surnameField.value = "";
    surnameField.style.backgroundColor = white;
    firstNameField.value = "";
    firstNameField.style.backgroundColor = white;
    birthdayField.value="";
    birthdayField.style.backgroundColor = white;
    phoneField.value = "";
    phoneField.style.backgroundcolor = white;
    addressField.value = "";
    addressField.style.backgroundcolor = white;
    postField.value = "";
    postField.style.backgroundcolor = white;
    emailField.value = "";
    emailField.style.backgroundcolor = white;
    groupField.value="";
    groupField.style.backgroundcolor = white;
}


var updateList = function(){
    divid = 0;
    buttonid = 1000;
    myControls = []
    var tableDiv = document.getElementById("parentDiv"),
        cDiv = "<BR>" +  "<div align='center'> Click a contact to expand</div>" ;

    for (var i= 0, j=contacts.length;i<j;i++){
        var cntct = contacts[i];
        cDiv += cntct.generateDiv();
    }

    tableDiv.innerHTML = cDiv;
    getDate();
    daysUntilBirthday();
    saveContacts();
}

var add = function(){
;
    addContact(surnameField,firstNameField,birthdayField, phoneField, addressField, postField, emailField, groupField);
    clearUI();
    daysUntilBirthday();
    getDate();
    updateList();
};

var saveContacts = function(){
    var cntcts = JSON.stringify(contacts);
    if (cntcts !==""){
        localStorage.contacts = cntcts;
    }else{
        alert("Could not save contacts");
    }
}

var loadContacts = function(){
    var cntcts = "";
    if(localStorage.contacts !== undefined){
        cntcts = localStorage.contacts;
        contacts = JSON.parse(cntcts);
        var proto = new Contact();
        for (var i=0; i<contacts.length; i++){
            var cntct = contacts[i]
            cntct.__proto__ = proto;
            cntct.birthdayDate = new Date(cntct.birthdayDate);
        }
    }
}

var clearContacts = function(){
    contacts = [];
    updateList();

}

//var periodUpdate = function(){
//    setInterval(updateList, 10000);
//}




window.onload = function(){
    loadContacts();
    updateList();
    surnameField = document.getElementById("surname");
    firstNameField = document.getElementById("firstName")
    birthdayField = document.getElementById("birthday");
    phoneField = document.getElementById("phone");
    addressField = document.getElementById("address");
    postField = document.getElementById("post");
    emailField = document.getElementById("email");
    groupField = document.getElementById("group");
    addButton = document.getElementById("addButton");
    addButton.onclick = add;
    delButton = document.getElementById("delButton");
    delButton.onclick = clearContacts;
    clearUI();
   // periodUpdate();
}

The HTML

<!DOCTYPE html>
<html>
<head>

    <script type="text/javascript" src="contacts.js"></script>
    <link rel="stylesheet" type="text/css" href="style.css">
    <script type="text/javascript" src="jquery-1.8.3.min.js">
    $(document).ready(function(){

        (".btnForDiv").on("click", function(){

    // get the ID of the button
    var id = $(this).prop("id");
    var divid;
    // now find the div Id related to this button
    for (var i = 0, len = myControls.length; i < len; i++){
    if (myControls[i][1] == id){
    divid = myControls[i][0];
    break;
    }
    }

    // you now have the div,so toggle it.
    $("#" + divid).toggle();

    });
    });
    </script>

    <div><title>Contacts Book</title></div>

</head>

<body>
<div class="information">
<heading><h1>Contacts Book</h1></heading>
</div>
<p><div class="information">Enter the contacts details below and click Add or select to view an existing contact.</div></p>
<hr>

<div class="entrydiv">
<table class="entryforms">
    <br>
    <tr>
        <td>Surname</td><td><input type="text" class="inputboxes"  id="surname" /></td>
    </tr>
    <tr>
        <td>First Name</td><td><input type="text" class="inputboxes"  id="firstName" /></td>
    </tr>
    <tr>
        <td>Birthday</td><td><input type="date" class="inputboxes" id="birthday" /></td>
    </tr>
    <tr>
        <td>Phone Number</td><td><input type="text" class="inputboxes" id="phone"></textarea></td>
    </tr>
    <tr>
        <td>Email Address</td><td><input type="text" class="inputboxes"  id="email" /></td>
    </tr>
    <tr>
        <td>Address</td><td><input type="text" class="inputboxes" id="address"/></td>
    </tr>
    <tr>
        <td>Postcode</td><td><input type="text" class="inputboxes"  id="post"  /></td>
    </tr>
    <tr>
        <td>Group</td><td><select class="inputboxes"  id="group"/>
        <option value="Business">Business</option>
        <option value="Educational">Educational</option>
        <option value="Friend">Friend</option>
    </td>
    </tr>
</table>

<br>
<button id="addButton">Add Contact</button>
<button id="delButton">Delete Contacts</button>
</div>
<hr>
<div class="tablediv">
<h2 class="information" align="center">Contacts</h2>
<div  id="parentDiv"></div>
</div>
</body>
</html>

The Solution

First of all massive thanks to Darren for his advice, which turns out to be spot on (with minor change)

First error I made was inserting jquery, I had

<script src="jquery-1.8.3.min.js">
   //code
</script>

When I needed

<script src="jquery-1.8.3.min.js"></script>
   <script>
     //code
   </script>

So that very minor mistake held me back for a while.

Secondly I used:

 $(document).on('click','.btnForDiv',function(){

To call the Onclick event for my btnForDiv class buttons and the rest was all Darren 🙂

Thanks again

Answer 1

You could do a few things here.

One idea would be to store your generated div and button ID’s in an array. You can then search this array for a given button ID to find its corresponding div.

For example (not tested…)

     // outside your generatedDiv method
     var myControls = new Array();

     // then inside your generatedDiv method
     var control = new Array();
     control[0] = divId;
     control[1] = buttonId;
     myControls.push(control);

When you click your button you can grab its ID then search through the myControls array and look for the corresponding div

you could do a single function in jQuery to handle all the click for all of your generated buttons.

again (not tested) – give all your buttons a class, for example btnForDiv

     $(document).ready(function(){

           $(".btnForDiv").click(function(){

              // get the ID of the button
              var id = $(this).prop("id");
              var divId;
              // now find the div Id related to this button
              for (var i = 0, len = myControls.length; i < len; i++){
                if (myControls[i][1] == id){
                   divId = myControls[i][0];
                   break;
                }
              }

              // you now have the div,so toggle it.
              $("#" + divId).toggle();

           });
     });

I’m not 100% sure what your question was, though took a stab in the dark to help..

UPDATE

Because your div‘s are generated and added to the DOM dynamically you may have to use on instead of click – this will bind the click event to dynamic elements.

So try this:

$(".btnForDiv").on("click", function(){

      // get the id.... etc...

});

also, make sure you did add the class btnForDiv to your dynamically generated buttons

this.firstName + " " + this.surname + "<button style='color: black;' id='" + buttonid +  "b'" + " class='btnForDiv'> Button </button>" +