单击模式屏幕中行上的 <h：commandLink>

我在 JSF 2.2 中有一个表（ID rangenTabel ）。在此表中，我有一个数据库表的条目。每一行都有一个用于删除此行的隐藏commandLink。在我将此请求发送到服务器上的 bean 之前，我希望在模态屏幕的帮助下从用户那里得到确认。当用户单击行中的<img>时，将显示此模式屏幕。在显示模态屏幕之前，我想将 onclick 属性替换为单击右侧commandLink的命令。

我有什么

此时我已经能够将 onclick 属性替换为alert('button clicked');这会导致弹出另一个警报。

该表采用表单，如下所示（为了可读性，我删除了所有其他列）：

  <h:form id="formRangen">
    <table class="table table-striped table-condensed table-datatable display compact" id="rangenTabel">
      <colgroup>
        <col width="50px" />
      </colgroup>
      <thead>
        <tr>
          <th></th>
        </tr>
      </thead>
      <tbody>
        <t:dataList var="rang" value="#{lijst}" rowIndexVar="idx">
          <tr>
            <td>
              <h:commandLink action="#{natuur.verwijderRang(rang.rang)}" actionFor="formRangen" id="lnkDelete" /><img src="user-trash.png" alt="Delete" title="Delete" onclick="$('#btnDelete').attr('onclick','alert('button clicked');');$('#bevestiging').modal('show');" />
            </td>
          </tr>
        </t:dataList>
      </tbody>
    </table>
    <ui:include src="confirmatie.xhtml">
      <ui:param name="confirmatietitel" value="Delete XXX" />
    </ui:include>
  </h:form>

上的button位于模态模态屏幕（在 confirmatie.xhtml 中定义）中，如下所示：

<div class="modal fade" id="bevestiging" tabindex="-1" role="dialog" aria-labelledby="bevestiging" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h2 class="modal-title">Confirmation</h2>
      </div>
      <div class="modal-body">
        <div>
          <p class="pull-left"><img src="user-trash.png" /></p>
          <h3 id="teVerwijderen"></h3>
        </div>
        <br />
        <h4 class="text-center">Are You Sure?</h4>
      </div>
      <div class="modal-footer">
        <button id="btnDelete" type="button" class="btn btn-warning" data-dismiss="modal" onclick="return false;">Yes</button>
        <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
      </div>
    </div>
  </div>
</div>

输出如下所示：

<!DOCTYPE html >
<html lang="nl" xmlns="http://www.w3.org/1999/xhtml"><head>
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <link rel="stylesheet" type="text/css" media="all" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />
  <link rel="stylesheet" type="text/css" media="all" href="https://cdn.datatables.net/1.10.11/css/dataTables.bootstrap.css" />
  <script src="http://code.jquery.com/jquery.min.js"><!--
//--></script>
  <script src="http://cdn.datatables.net/responsive/1.0.0/js/dataTables.responsive.min.js"><!--
//--></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"><!--
//--></script>
  <script src="https://cdn.datatables.net/1.10.11/js/dataTables.bootstrap.min.js"><!--
//--></script>
      <script type="text/javascript" charset="utf-8"><!--
        $(document).ready(function() {
          $('#rangenTabel').dataTable( {
            "order": [[1, "asc"]],
            "columns": [
                      { "orderable": false },
                      { "orderable": true },
                      { "orderable": true }
                  ],
            "pagingType": "full_numbers",
            "lengthMenu": [[10, 20, 50, -1], [10, 20, 50, "Alle"]],
            "language": {
              "paginate": {
                "first": "&lt;&lt;",
                "last": "&gt;&gt;",
                "next": "&gt;",
                "previous": "&lt;"
              },
              "lengthMenu": "_MENU_ rijen per pagina",
              "search": "Zoeken:",
              "zeroRecords": "Niets gevonden.",
              "info": "Pagina _PAGE_ van de _PAGES_",
              "infoEmpty": "Geen rijen beschikbaar.",
              "infoFiltered": "(gevonden uit _MAX_ rijen)"
            }
          } );
        } );
      
//--></script></head><body>
  <div id="container">
    <div id="menu" class="row"><nav class="navbar navbar-default navbar-static-top">
     <div class="container">
      <div class="navbar-header">
        <a class="navbar-brand" href="/natuur/index.jsf">Natuur</a>
      </div>
      <div id="navbar" class="collapse navbar-collapse">
        <ul class="nav navbar-nav">
          <li><a href="/natuur/admin/parameters.jsf">Parameters</a></li>
          <li><a href="/natuur/rangen/rangen.jsf">Rangen</a></li>
          <li><a href="/natuur/gebieden/gebieden.jsf">Gebieden</a></li>
          <li><a href="/natuur/taxa/taxa.jsf">Taxa</a></li>
          <li><a href="/natuur/waarnemingen/waarnemingen.jsf">Waarnemingen</a></li>
          <li><a href="/natuur/fotos/fotos.jsf">Foto's</a></li>
        </ul>
      </div>
    </div>
  </nav>
    </div>
    <div id="content" class="row">
      <div class="container"><form id="formRangen" name="formRangen" method="post" action="/natuur/rangen/rangen.jsf" enctype="application/x-www-form-urlencoded">
        <div class="col-md-6 col-md-offset-3">
  <table class="table table-striped table-condensed table-datatable display compact" id="rangenTabel">
    <colgroup>
      <col width="50px" />
      <col width="60px" />
      <col />
    </colgroup>
    <thead>
      <tr>
        <th></th>
        <th>Niveau</th>
        <th>Rang</th>
      </tr>
    </thead>
    <tbody>
        <tr>
          <td><a href="#" onclick="return myfaces.oam.submitForm('formRangen','formRangen:j_id_g:0:j_id_j');"><img src="text-x-generic.png" alt="Bekijken" title="Bekijken" /></a><a href="#" onclick="return myfaces.oam.submitForm('formRangen','formRangen:j_id_g:0:lnkDelete');" id="formRangen:j_id_g:0:lnkDelete"></a><img src="user-trash.png" alt="Verwijderen" title="Verwijderen" onclick="$('#teVerwijderen').text('???biologie.rang.osp;nl???');$('#btnDelete').attr('onclick','$(this).closest('#lnkDelete').click();');$('#bevestiging').modal('show');" />
          </td>
          <td class="text-right">171</td>
          <td>???biologie.rang.osp;nl???</td>
        </tr>
        <tr>
          <td><a href="#" onclick="return myfaces.oam.submitForm('formRangen','formRangen:j_id_g:1:j_id_j');"><img src="text-x-generic.png" alt="Bekijken" title="Bekijken" /></a><a href="#" onclick="return myfaces.oam.submitForm('formRangen','formRangen:j_id_g:1:lnkDelete');" id="formRangen:j_id_g:1:lnkDelete"></a><img src="user-trash.png" alt="Verwijderen" title="Verwijderen" onclick="$('#teVerwijderen').text('Ondersoort');$('#btnDelete').attr('onclick','$(this).closest('#lnkDelete').click();');$('#bevestiging').modal('show');" />
          </td>
    </tbody>
  </table>
        </div>
        <div class="row"><div class="modal fade" id="bevestiging" tabindex="-1" role="dialog" aria-labelledby="bevestiging" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h2 class="modal-title">Verwijder Rang</h2>
        </div>
        <div class="modal-body">
          <div>
            <p class="pull-left"><img src="user-trash.png" alt="Verwijderen" title="Verwijderen" hspace="10px" /></p>
            <h3 id="teVerwijderen"></h3>
          </div>
          <br />
          <h4 class="text-center">Zeker weten?</h4>
        </div>
        <div class="modal-footer">
          <button id="btnDelete" type="button" class="btn btn-warning" data-dismiss="modal" onclick="return false;">Verwijderen</button>
          <button type="button" class="btn btn-default" data-dismiss="modal">Annuleren</button>
        </div>
      </div>
    </div>
  </div>
        </div><input type="hidden" name="formRangen_SUBMIT" value="1" /><input type="hidden" name="javax.faces.ViewState" id="javax.faces.ViewState" value="mE5vSMv6UxfQzWZp/4ahdi+1n402A4UuPClyZ4G8Q2DaDNDB" /></form>
      </div>
    </div>
    <div id="footer" class="row">
      <div class="col-md-4 col-md-offset-8 footer">  Versie: 0.1.0-SNAPSHOT | Bouwdatum: 2016-03-04 20:57:05
      </div>
    </div>
    <div id="modal" class="row">
    </div>
  </div></body>
</html>

问题

如何更改<button>的 onclick 属性，以便它将在单击<img>的同一行上执行commandLink按钮？它必须以某种方式使用表的 ID （rangenTabel）、commandLink 的 ID （lnkDelete ）和rowIndexVar （idx ）。不要忘记 $、（、）、# 和 \' 的正确用法。

已编辑：

在jQuery closest（）方法中只有助于找到祖先。所以使用了closest（）和find（）方法的组合来获取需要点击的元素。

此外，无需将值添加到html标签的onclick属性中，最好我们可以使用jQuery在按钮上绑定单击事件（例如"btnDelete"）。

$('.img_del').on('click', function(){
   var txt=$(this).closest('td').next().next().html();
   $('#teVerwijderen').text(txt);
   var elem = $(this).closest('td').find('.lnkDelete').first();
   $('#btnDelete').one('click',function() {
      $(elem).click();
   });
   $('#bevestiging').modal('show');
});

代码需要很少的修改：

更改<img src="user-trash.png" alt="Delete" title="Delete" onclick="$('#btnDelete').attr('onclick','alert('button clicked');');$('#bevestiging').modal('show');" />

到<img src="user-trash.png" alt="Delete" title="Delete" class="img_del" />

将 class="lnkDelete" 添加到 'lnkDelete' 链接。
然后尝试上面的脚本。

首先要感谢@gurpreet-Singh，他完成了99%的工作。不知何故，分页使他的解决方案在第一页上未显示的元素上失败。

我没有将javascript放在类的onclick中，而是创建了以下函数：

  <script type='text/javascript'>
  function confirmatie(deze, tekst){
    $('#teVerwijderen').text(tekst);
    var elem = $(deze).closest('td').find('.lnkDelete').first();
    $('#btnDelete').one('click',function() {
        $(elem).click();
    });
    $('#bevestiging').modal('show');
  }
  </script>

在<img>的onclick中，我补充说：

onclick="confirmatie(this, '#{rangtekst}');"

现在，当我单击<img>时，模态屏幕会显示我想要的文本，当我单击accept按钮时，将执行右<h:commandLink>的onclick。

相关内容

最新更新

热门标签：