Adding a JS confirm popup inside wordpress

  • Im using wordpress and there is an element that erases a post and want to add a confirmation pop up box with javascript but it isnt working

    function wpb_hook_javascript() {
    if (is_page ('1203')) { 
      ?>
          <script type="text/javascript">

             document.getElementsByClassName("test1").addEventListener("click", myFunction);
             function myFunction() {
                confirm("Are you sure?");
            }

          </script>
      <?php
    }
  }
  add_action('wp_head', 'wpb_hook_javascript');
Viewing 13 replies - 1 through 13 (of 13 total)

  • What *part* is not working?
    The js is not firing, or the js is firing but ignoring the request?

    If you are using the Gutenberg environment, you might use Modal.
    I am not sure but I think WordPress was blocking my standard JavaScript popups.

    Worst case scenario: use HTML elements for the confirmation dialog (show or create them when your button is clicker, and have ‘OK’ perform the action and ‘Cancel’ hide or delete the dialog elements).
    You can even place it under your button, or on top of everything (absolute position) if you want it to fill like a popup. I actually think Modal does that. It allows for graphic consistency, and your popup remains within the web page (and not wherever it wants on the user’s screen).

    • This reply was modified 4 years, 5 months ago by Bunker D.
    • This reply was modified 4 years, 5 months ago by Bunker D.
    Thread Starter andy1203

    (@andy1203)

    Im adding the code through the functions.php, could I create the modal inside the php?
    I will try doing it, could you help with the code that would have the OK button do the action?

    It’s a bit overkill really. You don’t need a listener on the confirm. Just check the confirm inline in your function. Also, if would help to know when it is not working.
    Do you have the test1 class assigned to your button?

    I tested it here and it works as expected, but wrap your confirm in an if – see here :
    https://nghapoe.ca/check-first/

    Thread Starter andy1203

    (@andy1203)

    could you please share your code?
    Im trying to call a class from a plugins’ element.
    for testing I reated an icon and assigned the class “test1” just to confirm that the reason it wasn’t working was because of a mistype of the plugin’s element class.
    none of this elements are buttons tho, they are a hrefs thats why I thought the listener to be necessary

    The element type like this doesn’t matter – I updated it to work on an href :
    https://nghapoe.ca/check-first/

    Create a child theme, and copy the header.php from the parent.
    Put this in your header.php file :

    <?php if( is_page( '1203' ) ) {  ?>
<script type="text/javascript">
function myFunction() {
  var txt;
  if (confirm("Click Okay to Delete or Click Cancel")) {
}
</script>
<?php } ?>

    then just put the onClick in your href :
    <a href="#" onclick="myFunction()">Click here to delete</a>

    • This reply was modified 4 years, 5 months ago by corrinarusso.
    Thread Starter andy1203

    (@andy1203)

    Thanks a lot, the only issue is I can’t add the onClick in the href, since its being generated by a plugin, I would spend years looking inside the plugin html to find this element and manually add the onClick, and Im pretty sure in the next update it would be overwritten

    Which plugin ?
    and what element ?

    Thread Starter andy1203

    (@andy1203)

    So im ussing buddypress, with the theme buddyboss, but created a page where I call for buddypress’ timeline using another plugin called “buddypress shortcodes”.
    I will attach a link to a screenshot where you can see a “Delete” element, that is the element I want to deploy a confirm box when clicked, since now it deletes the post without confirming the users’ action
    https://drive.google.com/file/d/1ifx6_Wd3FPoBVrHjTrgusHpoz89IAnj3/view?usp=sharing

    There’s not enough info from a screenshot, tbh.
    I’ve neve rused buddypress, but it looks like it’s in the activity_loop function :

    @usm57 [~/public_html/wp-content/plugins/buddypress/bp-templates/bp-legacy/buddypress/activity]# pwd
    /wp-content/plugins/buddypress/bp-templates/bp-legacy/buddypress/activity
    p.php
    @usm57 [~/public_html/wp-content/plugins/buddypress/bp-templates/bp-legacy/buddypress/activity]# ls -l activity-loop
    -rw-r–r– 1 1367 Jun 8 21:49 activity-loop.php

    A URL would help, or do an inspect Element on the Delete button, and post the screenshot of that.

    Thread Starter andy1203

    (@andy1203)

    https://drive.google.com/file/d/15jWE8rJZpoN-LAGz7SPsw49-0LioQkjh/view?usp=sharing

    here is a screenshot of the inspection,
    the element appears in other pages, and in the other pages the lement does display a confirm box , all other pages are component pages(empty pages that have the content generated by buddypress),
    its only in this particular page that I made myself that it doesnt show, so Im trying to add my own pop up.

    Oooooooooooohhhhhhhh. Lol.
    This is a lesson in forum discussions. Sometimes there is only a snapshot of information available. I would strongly figure out how to access the same function that is being used throughout the rest of the site.

    I dunno. Without access to your site, etc it’s just not enough info.

    However, the code I posted above works. Either incorporate into your functions file, or add directly into your plugin then you’ll need to be cognizant of when it updates.

    Thread Starter andy1203

    (@andy1203)

    ok I will thanks! for the help!!

Viewing 13 replies - 1 through 13 (of 13 total)
  • The topic ‘Adding a JS confirm popup inside wordpress’ is closed to new replies.