I have a dropdown list that when selected sets a bunch of variables in C#. These variables are then used to populate a popover, then the user clicks on an anchor next to the DDL. THis works fine, but for the fact, when I change the value in the DDL, the popover keeps the old data. It never updates/refreshes with the new data.
in summary, the user clicks the dropdown to change the variables. There is a help icon next to the DDL that the user clicks to show the popover, with the data retrieved from the variables set by the DDL.
I am assuming that is holding onto the object data from when it is first used when the page loads. I have tried destroying it, hiding it and rewriting it several times, it just keeps the old data.
Question: How do I get the popover to accept new data.
$( document ).ready( function (){
$( "#ShowMeterInfo" ).popover( {
title: '<h3 class="custom-title"><span class="glyphicon glyphicon-info-sign"></span> Meter: <%=this.HiddenMeterName.Value%></h3>',
content: "<p><ul><li><strong>Location:</strong><%=this.MeterLocation %></li><li><strong>Id:</strong> 321654</li><li><strong>Building:</strong><%=this.MeterBuilding%></li><li><strong>Site:</strong><%=this.MeterSite%></li></ul></p>",
template: '<div class="popover"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div><div class="popover-footer"><a href="#" class="btn btn-info btn-sm">Close</a></div></div>',
html: true,
animation: true
} );
$( document ).on( "click", ".popover-footer .btn", function (){
$( this ).parents( ".popover" ).popover( 'destroy' );
} );
} );
It works great other than the data won't refresh!
It's because you're using elements like: <%=this.MeterLocation %> which will put the value of that field into your view at the time.of rendering. You need to instead get a reference to the rendered input element and retrieve the value.
So when showing the pop over use something like:
$('#MeterLocation').val()
And this will get the current value of that element.