Call service when pressing a button

Question

I would like to use dismissable Bootstrap alerts to display some help messages to my users.

Moreover, I would like them to be able to definitively dismiss each alert, one by one. The "database" part is already done and works properly (a User entity, a Message entity, a Many-To-Many relationship inbetween to list which User wants to always dismiss which Message).

Now I would like to have the following beheavior: when a User (logged in, of course) clics on the dismiss button (an "X" in this case), this hides the Bootstrap alert (=normal behavior) and call a service which adds a new line in my User-Message join table, without reloading the current page.

How should I do that? Using TWIG? JS?

Any other suggestion to achieve the same final result (i.e. provide hideable help message to users)?

Answer 1

You can use Javascript to launch an ajax request when clicking the close button.

Here it is in jQuery:

$(".close").click(function(){
   $.ajax({
     url: 'your-url.php',
     type: 'post',
     data: {},
     success: function (data) {
        alert('done!')
    }
   });
});

That way you can your page will not reload but you will be able to do some stuff server-side, e.g. insert a row in your User-Message join table.