0

Im using webui popover my code is:

for(var i=0; i<posts.length; i++){

pre_elem_at = document.createElement("a");
                        pre_elem_at.setAttribute("class", "show-pop-async");
                        pre_elem_at.setAttribute("href", "javascript:void(0)");
                        pre_elem_at.setAttribute("style", "font-size: 14px;margin-left: 15px;background-color: white;padding: 5px;cursor: pointer;");
                        pre_elem_at.innerHTML = 'Get Link';
                        pre_elem_at.post_id = posts[i].id;
                        // $(pre_elem_at).webuiPopover();

                        $(pre_elem_at).webuiPopover('destroy').webuiPopover({
                            type:'async',
                            url:'timeline/pullrequest/share_post?share_link=1&cred='+posts[i].id,
                            content:function(data){

                                data = JSON.parse(data);
                                var html ='<div style="margin:0px; width:100%; overflow:hidden;" class="input-group mb-3">';
                                html += '<div class="input-group-prepend">';
                                html += '<button style="border-radius:2px 0 0 2px;" class="btn btn-primary btn-outline-secondary" type="button">Copy</button>';
                                html += '</div>';
                                html += '<input style="color:#333" value="'+data.share_link+'" type="text" class="form-control" placeholder="" aria-label="" aria-describedby="basic-addon1">';
                                html += '</div>';
                                return html;
                        },
                        width:'397',
                        height:'16',
                        padding:false,
                        margin:false,
                         trigger: 'click',
                        cache:false,
                        multi:false

                    });
}

Its working great but I have a problem.. the popovers doesnt close.. even I added 'closeable:true' and clicked the "x" icon.. it still doesnt close.. if I remove type:async property it will close the popover correctly but I cant load my div inside it. since its an ajax call.

enter image description here

melvnberd
  • 3,093
  • 6
  • 32
  • 69
  • .webuiPopover('hide'); then .webuiPopover('destroy') This doesn't work? – Any Moose Sep 11 '18 at 18:36
  • where should I add that line of code @AnyMoose ? $(pre_elem_at).webuiPopover('hide'); $(pre_elem_at).webuiPopover('destroy'); – melvnberd Sep 11 '18 at 18:48
  • yes try to replace $(pre_elem_at).webuiPopover('destroy') with $(pre_elem_at).webuiPopover('hide')... – Any Moose Sep 11 '18 at 18:50
  • no it doesnt work.. it generates this error instead `TypeError: $(...).webuiPopover(...).webuiPopover is not a function` if I replace "destroy" with "hide" .. – melvnberd Sep 11 '18 at 18:56
  • I think there is an issue on the `type:'async',` coz if I remove it.. the popover works just fine but its gonna be blank since its not fetching data from the specified url.. – melvnberd Sep 11 '18 at 18:57

1 Answers1

0

I added the webui popover initiation on pre_elem_at.addEventListener

pre_elem_at.addEventListener("click",function(e){
                            var pid = e.target.post_id;
                            $(this).webuiPopover({
                            type:'async',
                            url:'timeline/pullrequest/share_post?share_link=1&cred='+pid,
                            content:function(data){

                                data = JSON.parse(data);
                                var html ='<div style="margin:0px; width:100%; overflow:hidden;" class="input-group mb-3">';
                                html += '<div class="input-group-prepend">';
                                html += '<button style="border-radius:2px 0 0 2px;" class="btn btn-primary btn-outline-secondary" type="button">Copy</button>';
                                html += '</div>';
                                html += '<input style="color:#333" value="'+data.share_link+'" type="text" class="form-control" placeholder="" aria-label="" aria-describedby="basic-addon1">';
                                html += '</div>';
                                return html;
                        },
                        width:'397',
                        height:'16',
                        padding:false,
                        margin:false,
                         trigger: 'click',
                        cache:false,
                        multi:false
                    });
                    $(this).webuiPopover('show');
                });

and added a webui destroyer on my index file

//updated to exclude the popover

$(document).on('blur','.show-pop-async, .xpopover',function(e){
var xthis = this;
setTimeout(function(){
   elem = document.activeElement; // This is the element that has focus
   str = $(elem).attr('class');
   arr = str.split(" ");
   n = arr.includes("xpopover");
    if(!n){
      $('.show-pop-async').webuiPopover('destroy');
    }

},1);

});

melvnberd
  • 3,093
  • 6
  • 32
  • 69