ifnotfr / popconfirm Goto Github PK

It would be really nice if there were one 😉

Hi

I am using the plugin and works great...one issue I'm having is binding to a newly created element that is created via ajax

I guess my question is How would I bind popConfirm() like the jQuery .live(), . on() or .delegate() functions for example.

Hope you can help? My functions below:

$('a.delete-skill-button').click(function() {

var url = "<?php print site_url('skill/delete'); ?>";

// Test for Empty Fields before Serializing form
var btn      = $(this),
    id       = btn.attr('id'),
    skill_id = id.split('-').pop();

$.ajax({
  type: "POST",
  dataType:'json',
  url: url,
  data:{ skill_id:skill_id },

    success: function(data){

      if(data.status === "success")
      {
        btn.parent().hide();
      }
    },
    error: function(){
      alert("Error deleting skill, Please reload page and try again!")
    }
  }
);

});

$("a.delete-skill-button").popConfirm({
title: "Remove skill", // The title of the confirm
content: "Please confirm?", // The message of the confirm
placement: "right", // The placement of the confirm (Top, Right, Bottom, Left)
container: "body", // The html container
yesBtn: "Yes",
noBtn: "No"
});

When tapping or clicking on a button or other item that triggers PopConfirm more than once, it makes the PopConfirm popover flash briefly and then not re-appear when the user tries to re-trigger it.

To re-create the issue, simply click on anything that triggers PopConfirm once, and then once again.

Perhaps the best solution would be to have the trigger object/button toggle the PopConfirm popover.

Hi

Thanks for this great plugin.
It'd be great if clicking somewhere else on the screen closes any open popover.
I'm not sure, but it seems that this will make it work (Line 79):

$('html').on('click', function(){
    last.popover('hide');
});

self.bind('click', function(e) {
    e.preventDefault();
    e.stopPropagation();

    self.popover('show');
    ...

Sorry I didn't have the time to fork and merge.

Hello ! I used angular 1.6 , angular translate and used jquery Popconfirm. I want translate all text button Yes| No , title and content when User click flag language translate . How to do did ? Thanks

PopConfirm is currently not working properly in Bootstrap 4 and jQuery 3.3.1. For example, when trying to employ PopConfirm to confirm a form submission, the form does not submit and the result is an un-closable instance of the popover that only goes away when the DOM is refreshed. I'd fix it but I don't know how, and I suspect that it may be due to a change in jQuery.

The Bootstrap 4 changes are easy enough because I think it's mostly just changes to the button names and styling. But, the bigger question is getting forms to submit and removing the popover instance after it is submitted.

When a regular Bootstrap popover is called from a button inside a <div> where the CSS has been set to overflow:hidden;, it properly displays the entire popover above the <div> from inside which it was called (http://www.bootply.com/bhall7x/101614):

But, when a PopConfirm popover is called from a button inside a <div> where the CSS has been set to overflow:hidden;, it is not properly shown above the <div> from where it was called:

Is there a way to somehow get the PopConfirm popover to display above all other elements, even if the <div> from which it was called is set to overflow:hidden;?

I would have put together an example on Bootply or JSFiddle, but I can't get PopConfirm to work in any of those test environments.

Hi,

First of all, thanks for a great project!

I'm wondering if there is any way to style the buttons for confirming / cancelling? Currently I think they are a bit to close to each other.

I was not able to add these styles in an easy way.
Do you have any suggestions?

Best regards,
Robin

@twbs popover has a 'destroy' method that it's very useful when you're reusing a button.

For example, i use the same modal to do different operations, some require confirmation, but others don't, and i need to destroy the tooltip whenever the operation has not confirmation, and rebuild it when it does.

When the object that fires the confirmation popup has a 'title' attribute, it's shown instead of the title option used to open popConfirm.

For example, this button

<button class="btn btn-success popconfirm_full" data-toggle='confirmation' id="important_action" title="Default title">Full featured</button>

And this function:

$("[data-toggle='confirmation']").popConfirm({ title: "Really ?", content: "I have warned you !", placement: "bottom" // (top, right, bottom, left) });

Shoud show a confirmation box with "Really?" as the title, but it shows "Default title"

Demo: http://jsfiddle.net/ereth7y8/1/

Hi!
I really like popConfirm, however, I'm having a frustrating problem when dynamically generating a table with thymeleaf. Example:

<table id="tableID" class="table">
    <thead>
       <tr>
          <th>Name</th>
	  <th>City</th>
	  <th>Action</th>
       </tr>
    </thead>
    <tbody>
       <tr th:each="user : ${users}">
          <td th:text="${user.name}">
          <td th:text="${user.city}">
          <td>
              <button id="confirmation_delete" class="btn fa fa-trash-o"></button> <!--action not displayed-->
          </td>							
       </tr>
    </tbody>
</table>

I then have my popConfirm code in a javascript file (correctly loaded)

$(document).ready(function() {
	$("#confirmation_delete").popConfirm();		
});

The problem is that when I click the delete button in the first row of the table, the popConfirm is correctly displayed and working, however, for the rest of the table rows, the popConfirm button is not even displayed (the action is immediately triggered).

Can you help solving this problem?

Kind regards,
Paulo Maia

Hi,
This is a nice plugin.

Is there a way to popup the box only when some conditions satisfied?

For example,
there are multiple rows, each row have a check box.
and there is a button, clicking the button will delete all the checked/selected rows. Using your plugin, it will popup a confirmation box before delete all the selected rows.

The question is, if none of rows are selected, clicking the button still popups the confirmation box.

Is there a way to NOT popup the confirm box when click the button if none of rows are selected?

Thanks.

If you're using inside of onclick event some AJAX request, then with every new click it adds an extra request. So, if you click the button with popConfirm once, all is fine. If you click it second time, then two requests are sent to the server, third time, then there are already three requests are going to the server and so on. I think, something should be destroyed or scoped locally. If I have a chance to debug it, I will post back. Thanks!!

Hi, popConfirm let the user doubleclick and ececute the funcion 2 times.
I will try to work on a solution too.
Thanks for your atention

When you confirm using popconfirm, there is two events generated that call the onclick function.
during the second call I had a null event.
this is the exact error

jquery.popconfirm.js:135 Uncaught TypeError: Cannot read property 'preventDefault' of undefined
    at init.<anonymous> (jquery.popconfirm.js:135)
    at HTMLButtonElement.<anonymous> (jquery.popconfirm.js:143)
    at HTMLButtonElement.e (jquery.min.js:3)
    at HTMLButtonElement.dispatch (jquery.min.js:3)
    at HTMLButtonElement.i (jquery.min.js:3)

``
I had to add line 136/137 the "if(e)" : 

            if(e)e.preventDefault();
            if(e)e.stopPropagation();

besides, it seems that the the lib make no use of the object e.
appeared on chromium Version 57.0.2987.133 (64-bit) and IE last version.

Whenever a PopConfirm popover is triggered from a form button inside a collapsible/toggled <div>, the popover is not dismissed but remains:

Please see this example: http://jsfiddle.net/bhall7x/V9q5F/

(Note that I am using @PlippiePlop's fork from 4/2/14, and I am embedding the JS into the fiddle for demonstration purposes)

It would be nice to allow specifying of handlers for onConfirm.
Case in point, i would like to proceed with executing some javascript if the user allows the operation to continue.

I cannot currently do this because all the onclick events associated with the object are removed by the plugin.

What would be cool would be providing a mechanism for providing handlers for onConfirm.

For hard onclick attribute the current code for removing onclick is not working in IE, resulting in onclick being triggered before the popup appears.

Instead of
$(self).removeAttr('onclick');

Use
$(self).prop("onclick", null);

See advice in https://api.jquery.com/removeAttr/

Cheers
Franck

Hi,

How do I combine the confirm with an ajax request if they accept?

i.e. I have this code

$(".confirm-action").popConfirm();

and I have this code

$('.confirm-action').click(function(e){
            e.preventDefault();
            $.ajax({
                      // Ajax stuff here
            });
});

How do I make it that the ajax only fires if they click accept?

For some reason, I'm having a hard time submitting an HTML form using the latest version PopConfirm. I tried to create an example on JSFiddle (http://jsfiddle.net/bhall7x/Y4t8a/12/). When you click the Delete button in the example, then click Yes in the confirmation popover, it should submit the form, but it doesn't submit anything. I thought that not being able to submit the form was just a JSFiddle issue, but I tried it on my web server and had the same problem. What am I doing wrong?

When I don't use PopConfirm, the form submits fine.

Hi,

it seems that the plugin is not working when I have the event handlers registered like this:

  $(document).on "click", ".do-confirm", ->
    console.log "hey"
    return

  $(".do-confirm").click ->
    console.log "hoe"
    return

  $(".do-confirm").popConfirm()

The "hoe" gets printed, but the "hey" does not.
Is there a reason why this is this way?

Cheers,
Gerwin

P.S.: I'd lover to use this plugin with meteorJS and they register the events like mentioned in the first example.

Thanks for the great work on this plugin!

One thing I noticed is that if you have multiple rows of items in a list, each with their own button which triggers .popConfirm(), then triggering more than one PopConfirm popover does not close any other open popovers. This could result in a confusing user experience if multiple buttons were clicked:

The ideal behavior would be to only allow one PopConfirm popover open at a time (or make it an option to only show one PopConfirm popover at a time).

Thanks!

PopConfirm not work on AJAX loaded HTML elements please help.

I moved line 148 that close the popover to the beginning of the confirm click around line 137

I also added ,[eventToConfirm] to the arrayActions[i].apply(self) to receive the event has expected from my button click event.

You can close as soon as you read it. Regards

Fixed by adding following before form.submit() call:

            var hidden = document.createElement('input');
            hidden.type = 'hidden';
            hidden.name = self.attr('name');
            hidden.value = self.attr('value');
            form.append(hidden);