Benjamin O'Neill Benjamin O'Neill - 8 days ago 6
HTML Question

Show popup only when a certain button is clicked

Snippet: https://jsfiddle.net/boneill1292/uLjmy72h/8/

I have a snippet of code that is almost working correctly. I am trying to show the popup only when a button is clicked, and never anytime else. You will see in the snippet provided that on the first try if you click the 'Reports' button it will generate two options:

Scenario one: The first time the page loads and you click the 'Reports' button you can either hit 'Report 1' or 'Delete Page' and both links work correctly. If you click the 'x' the popup closes and nothing else happens.

Scenario two: If you click the 'Reports' button then the 'Delete Page' button and cancel the popup that follows. Then click the 'Reports' button (again) and hit the 'x' to close the popup the Delete popup shows up (This shouldn't happen). I am pretty sure this is caused from the following code: but I thought I would prevent it with the data-dismissible="false"

$("#reportsPopupDialog")
.on("popupafterclose",
function() {
$('#exportPopupDialog').popup('open');
});


I apologize for this being so wordy, but I couldn't think of a better way to describe it. My feelings wont be hurt if this was done completely wrong, so go ahead and let me know.

Thanks a lot!

Answer

well, with the click on #deleteid you added the eventListener popupafterclose to the #reportsPopupDialog which will always trigger when this popup closes. instead just show the popupDialog on clicking the #deleteid button

$("#deleteid").click(function() {
  $('#reportsPopupDialog').popup('close');
  setTimeout(showDeletePopup, 500);
});
function showDeletePopup () {
  $('#popupDialog').popup('open');
}

here is a jsFiddle

Note: the setTimeout is because you cant have two popups at the same time so you need to wait for one popup to fully close first to open the next