jquery - how to create popover with dynamic html content -


i trying create dynamic popover content worked fine, problem shows 1 html content popover. please me find out solution

my code given below , example date given below

var div = $("<div>").addclass("pull-right vitaldeviceconnectedicon"); var vitals = ["steps", "floor"]; var device =  [{     "apiid": "1",     "accountdeviceid": "83",     "manufacturerid": "26",     "device": "fitbit one",     "api": "/fitbit/updatefitbitdata"  }, {     "apiid": "2",     "accountdeviceid": "91",     "manufacturerid": "32",     "device": "up",     "api": "/oauth/jawboneupdate"  }, {     "apiid": "4",     "accountdeviceid": "92",     "manufacturerid": "34",     "device": "bg5",     "api": "/oauth/ihealthupdate" }]; (var = 0; < device.length; ++i) {     var img = $("<img>");     if (device[i].apiid == "1") {         $(img).attr("src", "img/fitbit_iconsm.png");     }     if (device[i].apiid == "2") {         $(img).attr("src", "img/jawbone_iconsm.png");     }     if (device[i].apiid == "4") {         $(img).attr("src", "img/ihealth_iconsm.png");     }     $(img).data("data", device[i]);     $(img).click(function() {         var deviceinfo = $(this).data("data");         syncdevices(deviceinfo.api, deviceinfo.accountdeviceid, vitalid, vitalname, deviceinfo.device);     });     var divdetails = $("<div>");     var label = $("<label>").html("device: " + device[i].device);     var ul = $("<ul>")     $(divdetails).append(label);     $(divdetails).append(ul);     (var j = 0; j < vitals.length; ++j) {         var li = $("<li>").html(vitals[j]);         $(ul).append(li);     }     var pfortext = $("<p>").html("please click on icon update vital values");     $(divdetails).append(pfortext);     $(img).attr("data-toggle", "popover");     $(img).attr("data-placement", "top");     $(img).attr("data-trigger", "hover");     console.info($(divdetails).html());     try {         $(img).popover("destroy");     } catch(err) {      }     $(div).append(img);     $(img).popover({         html : true,         content : function() {             return divdetails;         },     }); } return div; 

your problem divdetails saved in closure, , every time content function called, returns same divdetails object (the 1 that's created on last run of loop).

the easiest solution setting content without function:

$(img).popover({     html : true,     content : divdetails }); 

another solution create new scope each call popover:

(function(div) {     $(img).popover({         html : true,         content : function() {             return div;         }     }); })(divdetails); 

Comments

Popular posts from this blog

java - Run spring boot application error: Cannot instantiate interface org.springframework.context.ApplicationListener -

python - pip wont install .WHL files -

Excel VBA "Microsoft Windows Common Controls 6.0 (SP6)" Location Changes -