dimanche 28 mai 2017

Bootstap Popover Change Checkbox via JS / JQUERY

I don't get this problem solved.

I have a page with a list of users. On each User you can change some status - for exemple 'follow'. For this i am using Bootstrap Popover in which i placed some checkboxes.

     <button type="button" class="btn btn-primary user-popover" 
          data-user-id="" 
          data-toggle="popover" 
          title="Title" 
          data-placement="bottom" 
          data-content="
               <fieldset class='form-group'>
                    <input type='checkbox' 
                         id='check_follow_' 
                         data-update='relation' 
                         data-name='follow' 
                         data-id='' 
                         name='relation' 
                         value='follow' 
                         @if($user->follow) checked @endif >
                    <label for='check_follow_'>
                         Follow User</label>
               </fieldset>
          ">
          Friend
     </button>

On the Event 'shown.bs.popover' i defined a Listener with is updating the database and since the value of the Checkbox is not persisting during the hide of the popover i created an array for all the users shown on this page which i change.

 window.user_data = [{
     id: 1,
     follow: true
 }];

Until here all is working well. Now i also try to check or uncheck the checkbox depending on the data. Therefore i also added to the 'shown.bs.popover' event this Code:

 const id = $(this).data('user-id');
 const array = window.user_data;
 const result = $.grep(array, function(e){ return e.id === id;});
 if (result.length >= 0) {
      $('#ckeck_follow_'+id).prop("checked", result[0].follow);
 }

But this is not working. I tryed with output in the console if the data of the array is right, if i find the checkbox element - all good

But the checkbox doesn't change.

Any Idea?




Aucun commentaire:

Enregistrer un commentaire