1

I'm a beginner and I'm trying to add a Javascript event to the delete button so that a modal appears for application with Spring Boot Java. I'm not sure if my bootstrap connection is done correctly. I have a LayoutDefault where I call the other layers. In LayoutDefault I'm adding the links for bootstrap connection. Can anyone help me trigger the event?

modal's html:

<!DOCTYPE html>
<html xmlns="http://wwww.w3.org/1999/xhtml"
xmlns:th="http://www.thymeleaf.org"
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">

<div class="modal" id ="confirmationExclusion" tabindex="-1"  data-backdrop="static">

  <div class="modal-dialog">
     <form action="/title" method="post">
     <input type="hidden" name="_method" value="DELETE"/>
     
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title">You have sure?</h5>
            
            <button type="button" class="close-close" data-bs-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
          </div>
          <div class="modal-body">
            <span></span>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">cancel</button>
            <button type="button" class="btn btn-primary">delete</button>
          </div>
        </div>
    </form>
  </div>  
</div>
</html>

button to activate modal:

<!DOCTYPE>
<html xmlns="http://www.w3.org/1999/xhtml" 
 xmlns:th="http://www.thymeleaf.org"
 xmlns:layout="http://ultraq.net.nz/thymeleaf/layout"
 layout:decorate="~{LayoutDefault}"
 >
<head>
 
<meta charset="UTF-8">
<title>Pesquisa</title>
</head>
<body>
<section layout:fragment="content">
....
<button type="button" data-toggle="modal" data-target="#deleteModal" th:attr="data-codigo=${titulo.codigo}, data-descricao=${title.describle}"
                    

             class="btn btn-link" title="Delete">
                                    <i class="material-icons">delete</i>
                                    </button>
    <script src="/js/cob.js"></script>  
  ....
</section
    </body>
    </html>


my file js for trigger the event cob.js

$('#deleteModal').on('show.bs.modal', function(event){
        
var button = $(event.relatedTarget);
        
        

var codTitle = button.data('cod');
var describleTitle = button.data('describle');
        
var modal = $(this);
        
var form = modal.find('form');
        
var action = form.data('url-base');
        
        
if(!action.endsWith('/')){
            action += '/';
        }
        form.attr('action', action + codTitle);
    
modal.find('.modal-body span').html('Are you sure you want to delete the record <strong>'+describleTitle+'<strong>');
        
});

LayoutDefault:

<!DOCTYPE>
<html xmlns="http://www.w3.org/1999/xhtml" 
    xmlns:th="http://www.thymeleaf.org"
    xmlns:layout="http://ultraq.net.nz/thymeleaf/layout"
>  

<head>
    <link rel="stylesheet" type="text/css" href="/css/bootstrap.min.css"/>
     

    <meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js" type="text/javascript"></script> 
      <link rel="stylesheet" href= "https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css" integrity="sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I"
              crossorigin="anonymous" />
        <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" 
                crossorigin="anonymous"></script>

        <script src="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/js/bootstrap.min.js" integrity="sha384-oesi62hOLfzrys4LxRF63OJCXdXDipiYWBnvTl9Y9/TRlw5xlKIEHpNyvvDShgf/" 
                crossorigin="anonymous"></script>
      
  
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"/>
    <meta charset="UTF-8">
    <title>Insert title here</title>
</head>
<body>

    <header th:replace = "Header"></header>
    
    <section layout:fragment="content">
        <p> Main content </p>
    </section>

<!--    
   
not found
<script src="/js/popper.min.js"></script>
<script src="/js/jquery-3.6.0.min.js"></script>   
<script src="/js/bootstrap.min.js"></script>

--> 
 
</body>
</html>
DanGM
  • 13
  • 4

1 Answers1

0
<script src="/js/popper.min.js"></script>
<script src="/js/jquery-3.6.0.min.js"></script>   
<script src="/js/bootstrap.min.js"></script>

there is a path problem in the src of the javascript change to

<script th:src="@{/js/popper.min.js}"></script>
<script th:src="@{/js/jquery-3.6.0.min.js}"></script>   
<script th:src="@{/js/bootstrap.min.js}"></script>
Navin Kumar
  • 92
  • 6