asked on

Not opening correct dropdown

socialHandles.push('<div id="editAction'+[i]+'" data-toggle="dropdown" class ="col-lg-3 dropdown-toggle"><div class="file-manager__item file-manager__item--directory card card-small social-hover mb-3"><div class="card-footer"><span class="file-manager__item-icon"><img class="img-responsive img-thumbnail" src="images/icons/fullcontact/' + demo1.infomation.TYPE_ID[i] + '.png"/></span><h6 class="file-manager__item-title">'+demo1.infomation.TYPE_NAME[i]+'</h6></div></div></div><div id="social-action'+[i]+'"  class="dropdown-menu" aria-labelledby="editAction'+[i]+'"> <a class="dropdown-item edit-social-profile" href="#"><i class="fas fa-wrench mr-1"></i>Edit</a><a id='+ demo1.infomation.ID[i] +' class="dropdown-item delete-social-profile" href="#"><i  style = "" class="fas fa-times-circle mr-1"></i>Delete</a></div>');
            }// end for
        }


   
        $("#social-handles").append(socialHandles);

Open in new window

This code is in a for loop from a array.

now it output correctly but the dropdown isnt working correctly, as yo see i have sperated each dropwon with the number of entires 0, 1 ,2 3 etc,

all seems correct but when i trigger the drop down it keeps opening the first for example

when i click a container with id editActions3 it will open editActions0 dropdown ?

any hints

Zakaria Acharki

Hi Alex,

We need to see your JS code part.

Alex Lord

ASKER

   var facebookIndex = -1;
        var twitterIndex = -1;
        var linkedinIndex = -1;
        var youtubeIndex = -1;
        var image = [];
        var socialIcons = [];
        var socialHandles = [];
        var temparray = [];
        var count = 0;


        if (demo1.infomation.TYPE_ID == null) {
            image.push($(' <a href="" target="_blank"><img class=""  src= "images/icons/sillhouette.png" alt="blank" ></a>'));
        } else {


            for (var i = 0; i < demo1.infomation.TYPE_ID.length; i++) {
                if (demo1.infomation.TYPE_ID[i] == "facebook") { // social properties index
                    facebookIndex = i;

                } else if (demo1.infomation.TYPE_ID[i] == "twitter") {
                    twitterIndex = i;

                } else if (demo1.infomation.TYPE_ID[i] == "linkedin") {
                    linkedinIndex = i;

                } else if (demo1.infomation.TYPE_ID[i] == "youtube") {
                    youtubeIndex = i;

                } else {
                }  // end socialproperties index

                if (demo1.infomation.PROFILE_IMAGE_1[i]) { // social profile image

                    image.push($(' <a href="' + demo1.infomation.URL[i] + '" target="_blank"><img class=""  src= "' + demo1.infomation.PROFILE_IMAGE_1[i] + '" title="' + demo1.infomation.TYPE_NAME + '" /></a>'));

                } else if (demo1.infomation.PROFILE_IMAGE_2[i] && demo1.infomation.PROFILE_IMAGE_1[i]) {

                    image.push($(' <a href="' + demo1.infomation.URL[i] + '" target="_blank"><img class=""  src= "' + demo1.infomation.PROFILE_IMAGE_2[i] + '" title="' + demo1.infomation.TYPE_NAME + '" alt="blank" /></a>'));

                } else if (demo1.infomation.PROFILE_IMAGE_2[i]) {
                    image.push($(' <a href="' + demo1.infomation.URL[i] + '" target="_blank"><img class=""  src= "' + demo1.infomation.PROFILE_IMAGE_2[i] + '" title="' + demo1.infomation.TYPE_NAME + '" alt="blank" /></a>'));
                } else {
                    image.push($(' <a href="' + demo1.infomation.URL[i] + '" target="_blank"><img class=""  src= "images/icons/sillhouette.png" alt="blank" /></a>'));
                } // end social profile

                socialIcons.push($('<li class = "mx-1"><a href= "' + demo1.infomation.URL[i] + '" target="_blank" title="' + demo1.infomation.TYPE_NAME + '"><img class="img-circle"  width="30" height="30" src="images/icons/fullcontact/' + demo1.infomation.TYPE_ID[i] + '.png" alt="blank"/> </a></l1>'));


               /* temparray.push('<div>',
                    '<div class="formLabel">' + demo1.infomation.TYPE_NAME[i] + '<img src="images/delete-ico.png" class="remove-social-profile" data-id="' + demo1.infomation.ID[i] + '" />', '</div>',
                    '<div class="formInputNoEdit">', '<a href="' + demo1.infomation.URL[i] + '" target="_blank" title="' + demo1.infomation.TYPE_NAME[i] + '">' + demo1.infomation.URL[i] + '</a>', '</div>',
                    '<div class="clear">', '</div>',
                    '</div>'); //socialhandles */


                /*socialHandles.push('<div id="editAction" type="button" data-toggle="dropdown"   class = "thumbnail dropdown-toggle"><a  href="' + demo1.infomation.URL[i] + '" target="_blank"><img class="img-responsive img-thumbnail" width="40px" height="40px" src="images/icons/fullcontact/' + demo1.infomation.TYPE_ID[i] + '.png"  /> ' + demo1.infomation.TYPE_NAME[i] + '  </a></div> <div  class="dropdown-menu" aria-labelledby="editAction"> <a class="dropdown-item" href="#"><i style = "margin:left:1%;" class="fas fa-wrench"></i>Edit</a><a class="dropdown-item emove-social-profile" href="#"><i style = "margin:left:1%;" data-id="' + demo1.infomation.ID[i] + '" class="fas fa-times-circle"></i>Delete</a></div> '); */
                
                socialHandles.push('<div id="editAction'+[i]+'" data-toggle="dropdown" class ="col-lg-3 dropdown-toggle"><div class="file-manager__item file-manager__item--directory card card-small social-hover mb-3"><div class="card-footer"><span class="file-manager__item-icon"><img class="img-responsive img-thumbnail" src="images/icons/fullcontact/' + demo1.infomation.TYPE_ID[i] + '.png"/></span><h6 class="file-manager__item-title">'+demo1.infomation.TYPE_NAME[i]+'</h6></div></div></div><div id="social-action'+[i]+'"  class="dropdown-menu" aria-labelledby="editAction'+[i]+'"> <a class="dropdown-item " href="#"><i class="fas fa-wrench mr-1"></i>Edit</a><a id='+ demo1.infomation.ID[i] +' class="dropdown-item " href="#"><i  style = "" class="fas fa-times-circle mr-1"></i>Delete</a></div>');
            }// end for
        }


        $("#header-icons").append(socialIcons);
        $("#img-wrap").append(image);
        $("#social-handles").append(socialHandles);

Open in new window

Zakaria Acharki

I think the main problem comes from the HTML structure, the `dropdown-menu` element should be inside the `dropdown` not a sibling of it, so I suggest to you to push it up inside the drop-down div like :

socialHandles.push('<div id="editAction'+[i]+'" data-toggle="dropdown" class="col-lg-3 dropdown-toggle"><div class="file-manager__item file-manager__item--directory card card-small social-hover mb-3"><div class="card-footer"><span class="file-manager__item-icon"><img class="img-responsive img-thumbnail" src="images/icons/fullcontact/' + demo1.infomation.TYPE_ID[i] + '.png"/></span><h6 class="file-manager__item-title">'+demo1.infomation.TYPE_NAME[i]+'</h6></div></div><div id="social-action'+[i]+'" class="dropdown-menu" aria-labelledby="editAction'+[i]+'"> <a class="dropdown-item edit-social-profile" href="#"><i class="fas fa-wrench mr-1"></i>Edit</a><a id='+ demo1.infomation.ID[i] +' class="dropdown-item delete-social-profile" href="#"><i  style = "" class="fas fa-times-circle mr-1"></i>Delete</a></div></div>');

Open in new window

If that does not work please share with us the compiled HTML from you browser developers console.

ASKER CERTIFIED SOLUTION

Zakaria Acharki

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Alex Lord

ASKER

Hello sorry for delay, had to go onto another topic, i tried it out and it worked,many thanks

Zakaria Acharki

You're welcome brother, glad I could help.