Bootbox modal is not showing up if I click on a link that contains an “href”

Question

Ok so I am using bootbox which works perfectly, but when I want to send variables in a link with PHP then all javascript works but not the bootbox.

----This works----

<a href='#' class="alert_without_href">I dont have an href</a>
<script>
$(document).ready(function()
 {
    $('a.alert_without_href').on('click', function()
    {
        alert('This works');
        bootbox.alert("This ALSO works");
    });
});
</script>

----This doesn't work----

<a href="?name=Jacob" class="alert_with_href">I have an href</a><br><br>
<script>
   $(document).ready(function()
   {
      $('a.alert_with_href').on('click', function()
      {
        alert('This works');
        bootbox.alert("This one DOESNT work"); <---- PROBLEM IS HERE
        alert('This also works');
      });
   });
</script>

----And then finally to display----

<?php
    if ($_SERVER['REQUEST_METHOD'] === 'GET')
    {
        echo 'Hello ' . $_GET["name"];
    }  
?>

I do need to pass a variable in the link, it cannot be taken out. How can I fix this?

Thanks in advance

----EDIT---- I added an image of a table below with an explanation of what exactly has to be done

Table of users

--ONLY READ IF YOU SAW THE IMAGE-- So each link under "Action" in the table creates a link with a variable of the user's unique ID. When it is clicked I check if $_GET['remove_id'] is set and then run a MySQL query to delete that person with that ID.

So basically the idea of Bootbox is to be a confirmation message if you want to delete the user, I don't want to use normal alert('') because that can be disabled.

ps the delete function does work, I just want to add a confirmation now using bootbox.

Answer 1

Bootstrap (and therefore Bootbox) modals do not generate blocking events, so if you want something to happen when you click on a hyperlink, you need to prevent the default behavior (page navigation). Something like:

<a href="?name=Jacob" class="alert_with_href">I have an href</a><br><br>
<script>
   $(document).ready(function() {
      $('a.alert_with_href').on('click', function(e) // <-- add an event variable
      {
        e.preventDefault(); // <-- prevent the event
        bootbox.alert("I am an alert!");
      });
   });
</script>

Since you said you want to confirm something, use bootbox.confirm and some AJAX:

<a href="?name=Jacob" class="alert_with_href" data-name="Jacob">I have an href</a><br><br>
<script>
    $(document).ready(function() {
        $('a.alert_with_href').on('click', function(e) // <-- add an event variable
        {
            e.preventDefault(); // <-- prevent the event

            var data = { name = $(this).data('name') };
            bootbox.confirm("Really delete?", function(result){
                if(result){
                    $.post('your-url', data)
                        .done(function(response, status, jqxhr){
                            // do something when successful response
                        })
                        .fail(function(jqxhr, status, error){
                            // do something when failure response
                        });
                }// end if
            }); // end confirm
        });
    });
</script>

I also added a data-attribute to make it easier to get the value for posting (don't use a GET request to perform a delete action). I would assume you would reload the page on a successful delete, or you can use .remove to remove the "row" containing the item you're removing