mercredi 19 octobre 2016

Make checkboxes status in Popover persistent and suitable for submit

I am trying to set up some popovers with checkboxes to submit their status by linking them to a div. But I have some problems to update the content of the popover when I close it and open it again.

HTML:

<form type="submit" action="index.php?action=updateSysteme" method="post">
   <div id="test" style="display:block">
       <input type="checkbox" name="1" checked> 1 </input>
       <input type="checkbox" name="2"> 2 </input>
       <input type="checkbox" name="3"> 3 </input>
       <input type="checkbox" name="4"> 4 </input>
   </div>
   <button data-toggle="popover" id="btn" data-original-title="Systemowner" data-html="true" data-placement="bottom" type="button" class="btn btn-default" onclick="click()" aria-label="Left Align">
       <span class="glyphicon glyphicon-chevron-down" aria-hidden="true">   </span>
   </button>
</form>

Javascript:

$(function () {
   $('[data-toggle="popover"]').popover();
})

$('#btn').popover({ 
   html : true,
   content: function() {
      return $('#test').html();
   }
});

function click(){
   var myPopover = $('#btn').data('bs.popover');
   myPopover.options.content = function(){
       return $('#test').html();
   };
}

With function click() I try to update the status of the checkboxes within the popover, but there is absolutely no result when I change the status of a checkbox in the div. The popover shows just the status of the first initializing (so first checkbox checked only). I assume that the problem comes from return $('#test').html(); in function click() because I think that the HTML of #test doesn't change if I tick or untick a checkbox. Is there any workaround?

Thank you very much!




Aucun commentaire:

Enregistrer un commentaire