CODEWITHSUNDEEP
javascriptjqueryajaxhtmlbootstrap-modal
Eric
Eric

Reputation: 5

use JQuery to add an id for a div to make a dynamic table with JSON and JQuery

I am trying to use Ajax to get the JSON data from a URL to make a dynamic contact table, and use the bootstrap modal to show up a card with specific contact info when user click names on the table. I made every contact modal having their own modal blocks, and want to use the different id to identify and populate the correct data to each modal div, but when I want to add the id attribute to particular div, I find out the id didn't be added in with below code. I can't find where is the problem, so I come here to ask for help.

 var modal_elements = $(modalTemplate); 
                    var contactModalid = "myModal" + i.toString();
                    modal_elements.find("#myModal0").attr("id", contactModalid);
                    modal_elements.find("#name").text(contact.name);
                    modalContainer.append(modal_elements);

the below is my whole script block in the HTML head for the better understanding of my entire situation.

$(document).ready(function () {

        var contactTemplate =
            "<tr><td class=\"contactID\">contact's id goes here</td>" +
            "<td><a data-toggle=\"modal\" class=\"contactName\">contact's name goes here</a></td></tr>";

        var modalTemplate = 
        "<div class=\"modal fade\" id=\"myModal0\" role=\"dialog\">" + 
        "<div class=\"modal-dialog\">" + 
        "<div class=\"modal-content\">" + 
        "<div class=\"modal-body\" style=\"padding:80px 50px; background-color:DodgerBlue; color: white\">" +
        "<h2 id=\"name\" style=\"text-align: right\"></h2>" + 
        "<p id=\"title\" style=\"text-align: right\">Web Designer</p></div>" + 
        "<div class=\"modal-footer\" style=\"background-color:black; color: white\">" + 
        "<p id=\"phone_email\">222.222.2222 | [email protected]</p><p id=\"address\">1812 Rafe Lane, Jackson, MS 39211</p></div></div></div></div>";

        $.ajax({
            url: 'http://jsonplaceholder.typicode.com/users',
            type: 'GET',
            success: function (msg) {
                var container = $("tbody");
                var modalContainer = $("#cardModal");

                for (var i = 0; i < msg.length; i++) {
                    var contact = msg[i];

                    var contact_elements = $(contactTemplate);
                    contact_elements.find(".contactID").text(contact.id);
                    contact_elements.find(".contactName").text(contact.name);
                    contact_elements.find("a").attr("id", i.toString());
                    var herfValue = "#myModal" + i.toString();
                    contact_elements.find("a").attr("href", herfValue);
                    container.append(contact_elements);


                    var modal_elements = $(modalTemplate); 
                    var contactModalid = "myModal" + i.toString();
                    modal_elements.find("#myModal0").attr("id", contactModalid);
                    modal_elements.find("#name").text(contact.name);
                    modalContainer.append(modal_elements);


                };
            }

        });
    });

Upvotes: 0

Views: 297

Answers (2)

Kamran Ahmed
Kamran Ahmed

Reputation: 1

Exactly, like @ADyson said, when you find element, it finds child element within selected element, so your script should contain 

modal_elements.attr("id", contactModalid);

or select its previous object

modal_elements.find("#myModal0").prevObject[0].id = contactModalid;

both will work!!

Upvotes: 0

ADyson
ADyson

Reputation: 61984

Simply changing it to

modal_elements.attr("id", contactModalid);

will fix it.

The element known as #myModal0 in your template is the element represented by modal_elements, because it's the root element of the ones in the template. Using "find" searches for children of the element, but you want to modify the element itself.

Upvotes: 0

Related Questions