ifad / data-confirm-modal

Makes Rails' link_to confirm: 'foo' build a Bootstrap Modal instead of calling the browser's confirm() API.
MIT License
271 stars 115 forks source link

how to send the click event to #foo in the 'without rails, without data attributes' implementation #82

Closed Halloran closed 3 years ago

Halloran commented 3 years ago

The version that you illustrate for using this without rails and without data attributes, shows the onConfirm and onCancel events popping alert messages. Is it possible to show what would be the correct callbacks to use to get the behavior of a normal confirmation: i.e. onConfirm would send the click event to #foo, and the onCancel event would simply close the confirmation dialog.

I'm sure I'm missing something here, but I just cannot get this to work, and unfortunately cannot use the other implementations because I cannot figure a way to set the 'text:' dynamically in any of the other implementations.

vjt commented 3 years ago

Sorry I don't understand your use case, care to reproduce it on jsfiddle or describe it with some code here?

Halloran commented 3 years ago

I am calling this confirm from a modal form, where the id of the submit button is 'orderSubmitButton' My Js is properly bringing up the confirm modal, but I cannot figure out how to specify the onConfirm callback such that it closes the confirmation dialog AND SUBMITS THE FORM

<%= f.submit @button_text, class: "btn btn-primary", disable_with: 'Processing', id: 'orderSubmitButton' %>

` var link = $('#orderSubmitButton'); link.on('click', function(event) { event.preventDefault();

var side = document.getElementById("selectList").value;
if (side == 'BUY') {
  modalText = "This is the appropriate confirmation text for a BUY";
}
else {
  modalText = "This is the appropriate confirmation text for everything else";
}
dataConfirmModal.confirm({
  title: 'Are you sure?',
  text: modalText, # being able to set this text dynamically based on form contents is why I am using this implementation
  commit: 'Agree',
  cancel: 'Cancel',
  onConfirm: function() { return true; }, # this closes the confirmation dialog, but the form remains open and does not get submitted
  onCancel:  function() { alert('cancel') },
  onHide:    function() { alert('hidden') }
});

}); `

Halloran commented 3 years ago

[and many thanks for responding quickly!]

vjt commented 3 years ago

OK I understand your use case now. If you want to leep the current structure, you should $() your form and .submit() it from the onConfirm callback.

Otherwise, you could ditch this structure and have two separate links with two totally different modals attached to them, and show/hide the links when changing the selected value in the selectList dropdown.

HTH,

Marcello -- // vjt@openssl.it // https://sindro.me/

On 3 Nov 2020, at 00:43, John Halloran notifications@github.com wrote:  [and many thanks for responding quickly!]

— You are receiving this because you commented. Reply to this email directly, view it on GitHub, or unsubscribe.

Halloran commented 3 years ago

Thanks. I'll give that a go.

Halloran commented 3 years ago

Thanks for the direction. onConfirm: function() { $.post('/orders', $('#new_order').serialize(), dataType: 'js') }, seems to do the trick. I suppose that using this on a form submit button is not the normal use case, so probably does not make sense to include in the example.

vjt commented 3 years ago

yes that works. I would have re-used the form action by reading it from the form tag, or avoided this altogether with the previous hint - however what works for you is ok :-)

Kind regards,

Marcello -- // vjt@openssl.it // https://sindro.me/

On 3 Nov 2020, at 02:34, John Halloran notifications@github.com wrote:

 Thanks for the direction. onConfirm: function() { $.post('/orders', $('#new_order').serialize(), dataType: 'js') }, seems to do the trick. I suppose that using this on a form submit button is not the normal use case, so probably does not make sense to include in the example.

— You are receiving this because you commented. Reply to this email directly, view it on GitHub, or unsubscribe.