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
Post a Comment