即使在JavaScript和Thymeleaf中刷新后，请禁用多个按钮

发布于 2025-01-30 13:38:50 字数 4473 浏览 1 评论 0原文

问题

我有多个连接到DB的按钮，以保持点击数量。它们在列中，每次单击一个时，与该按钮相关的值都会递增。

数据库表看起来像这样：

id  party name  vote 
'1', 'Vulcan', '0'
'2', 'Romulan', '0'
'3', 'Klingon', '0'
'6', 'Rick & morty', '0'
'25', 'updated test', '0'

我想要的是：当您单击任何按钮时，它应该禁用所有按钮，但仍会递增单击的按钮，同时也保存cookie session，以便即使之后也刷新页面您无法单击任何按钮。因此，单击后，所有按钮都应消失/禁用。

我尝试了什么？

我尝试了很多事情，例如 this ，但不起作用。按钮仍然可以工作，增量仍然发生。

这是我的HTML页面上所示的图片

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" 
    >
<head>
<meta charset="UTF-8">
<title>Show all parties</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto|Varela+Round|Open+Sans">

 -->
 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">

</head>
<body>
    <div class="col-sm-8"><h2><b>Voting Page</b></h2></div>
        <div class="col-sm-4">
        
         <a href="/newparty" class="btn btn-info add-new">Add New Party</a>
    </div>
    
    <table border="1" cellpadding="10" class="table table-bordered table-striped">
        <thead>
            <tr>
                <th>Party Symbols</th>
                <th>Party Name</th>
                <th>Vote Here</th>
                <th>Action</th>
            </tr>
        </thead>
        
        <tbody>
            <tr th:each=" party : ${parties}">
                <td th:text="${party.id}">Party Symbols</td>
                <td th:text="${party.name}">Party Name</td>
                <td>
                    
                    <form th:action="@{/vote/{id}(id=${party.id})}" method="get">
                             
                             <button id="voted" >Vote Here</button>
                             
                    </form>
                </td>
                <td>
                    
                    <a th:href="@{/edit/{id}(id=${party.id})}"
                    
                    class="edit" title="Edit" data-toggle="tooltip"><i class="material-icons">&#xE254;</i></a>
                     &nbsp;&nbsp;&nbsp;
                     <a th:href="@{/delete/{id}(id=${party.id})}"
                    
                    class="delete" title="Delete" data-toggle="tooltip"><i class="material-icons">&#xE872;</i></a>
                    
                </td>
                
            </tr>
        </tbody>
        
    </table >
    <script type="text/javascript" 
        
    >
    function setCookie(name, value, days) {
        if (days) {
            var date = new Date();
            date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
            var expires = "; expires=" + date.toGMTString();
        }
        else var expires = "";
        document.cookie = name + "=" + value + expires + "; path=/";
    }

    function getCookie(name) {
        var nameEQ = name + "=";
        var ca = document.cookie.split(';');
        for (var i = 0; i < ca.length; i++) {
            var c = ca[i];
            while (c.charAt(0) == ' ') c = c.substring(1, c.length);
            if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length, c.length);
        }
        return null;
    }

    $('#voted').click(function(){
        $(this).attr('disabled',true);
        setCookie('DisableBtn', true, null);
    });
    if(getCookie('DisableBtn'))
        $('#clic').attr('disabled',true);

    </script>
</body>
</html>

，这是我的控制器在此处点击投票时被获取

@GetMapping("/vote/{id}")
    public String getVote(@PathVariable Long id) {
        partyService.vote(id);
        
        return "redirect:/";
    }

原文

The problem

I have multiple buttons that are connected to db to keep count of the clicks. They are in a column and each time you click on one, the value associated with that button increments by one.

The database table looks like this:

id  party name  vote 
'1', 'Vulcan', '0'
'2', 'Romulan', '0'
'3', 'Klingon', '0'
'6', 'Rick & morty', '0'
'25', 'updated test', '0'

What I want is: when you click on any button it should disable all the buttons but still increment the one that has been clicked while also saving the cookies session so even after refreshing the page you can not click any buttons. So all button should disappear/disabled after one click.

What I have tried?

I have tried so many things such as this, but non works. The buttons still work and the increment still happen.

Here is my html page for that shown the pic above

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" 
    >
<head>
<meta charset="UTF-8">
<title>Show all parties</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto|Varela+Round|Open+Sans">

 -->
 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">

</head>
<body>
    <div class="col-sm-8"><h2><b>Voting Page</b></h2></div>
        <div class="col-sm-4">
        
         <a href="/newparty" class="btn btn-info add-new">Add New Party</a>
    </div>
    
    <table border="1" cellpadding="10" class="table table-bordered table-striped">
        <thead>
            <tr>
                <th>Party Symbols</th>
                <th>Party Name</th>
                <th>Vote Here</th>
                <th>Action</th>
            </tr>
        </thead>
        
        <tbody>
            <tr th:each=" party : ${parties}">
                <td th:text="${party.id}">Party Symbols</td>
                <td th:text="${party.name}">Party Name</td>
                <td>
                    
                    <form th:action="@{/vote/{id}(id=${party.id})}" method="get">
                             
                             <button id="voted" >Vote Here</button>
                             
                    </form>
                </td>
                <td>
                    
                    <a th:href="@{/edit/{id}(id=${party.id})}"
                    
                    class="edit" title="Edit" data-toggle="tooltip"><i class="material-icons"></i></a>
                        
                     <a th:href="@{/delete/{id}(id=${party.id})}"
                    
                    class="delete" title="Delete" data-toggle="tooltip"><i class="material-icons"></i></a>
                    
                </td>
                
            </tr>
        </tbody>
        
    </table >
    <script type="text/javascript" 
        
    >
    function setCookie(name, value, days) {
        if (days) {
            var date = new Date();
            date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
            var expires = "; expires=" + date.toGMTString();
        }
        else var expires = "";
        document.cookie = name + "=" + value + expires + "; path=/";
    }

    function getCookie(name) {
        var nameEQ = name + "=";
        var ca = document.cookie.split(';');
        for (var i = 0; i < ca.length; i++) {
            var c = ca[i];
            while (c.charAt(0) == ' ') c = c.substring(1, c.length);
            if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length, c.length);
        }
        return null;
    }

    $('#voted').click(function(){
        $(this).attr('disabled',true);
        setCookie('DisableBtn', true, null);
    });
    if(getCookie('DisableBtn'))
        $('#clic').attr('disabled',true);

    </script>
</body>
</html>

And here is my controller get fetched when clicking on Vote Here

@GetMapping("/vote/{id}")
    public String getVote(@PathVariable Long id) {
        partyService.vote(id);
        
        return "redirect:/";
    }

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

爱本泡沫多脆弱 2025-02-06 13:38:50

您应该能够完全使用服务器端cookie完成此操作。例如，这对我的

控制器有效：

@GetMapping("/vote")
public String main(Map<String, Object> model, @CookieValue(name = "voted", defaultValue = "false") String voted) {
  model.put("voted", Boolean.parseBoolean(voted));
  return "vote";
}

@GetMapping("/vote/{id}")
public String vote(HttpServletResponse response, @CookieValue(name = "voted", defaultValue = "false") String voted, @PathVariable Long id) {
  if (!Boolean.parseBoolean(voted)) {
    partyService.vote(id);
    Cookie cookie = new Cookie("voted", "true");
    response.addCookie(cookie);
  }

  return "redirect:/vote";
}

按钮：

<button id="voted" th:disabled="${voted}">Vote Here</button>

You should be able to do this entirely with server side cookies. For example, this worked for me

Controller:

@GetMapping("/vote")
public String main(Map<String, Object> model, @CookieValue(name = "voted", defaultValue = "false") String voted) {
  model.put("voted", Boolean.parseBoolean(voted));
  return "vote";
}

@GetMapping("/vote/{id}")
public String vote(HttpServletResponse response, @CookieValue(name = "voted", defaultValue = "false") String voted, @PathVariable Long id) {
  if (!Boolean.parseBoolean(voted)) {
    partyService.vote(id);
    Cookie cookie = new Cookie("voted", "true");
    response.addCookie(cookie);
  }

  return "redirect:/vote";
}

Button:

<button id="voted" th:disabled="${voted}">Vote Here</button>

回复收藏 0 原文

~没有更多了~

关于作者

执笏见

暂无简介

文章

27 人气

关注发私信

友情链接

文江博客

即使在JavaScript和Thymeleaf中刷新后，请禁用多个按钮

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（1）

关于作者

相关话题

热门标签

推荐作者

5040234068

樱花雨梦

≈。彩虹

雨轻弹

血之狂魔

qq_0bIjwE

友情链接

即使在JavaScript和Thymeleaf中刷新后，请禁用多个按钮

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（1）

关于作者

相关话题

热门标签

推荐作者

5040234068

樱花雨梦

≈。彩虹

雨轻弹

血之狂魔

qq_0bIjwE

友情链接

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。