Question

我最近一直在使用PrototypeJS进行项目，但今天我遇到了一个问题。

我正在为模块做一些联系人列表，我们可以通过表单添加联系人，或者通过链接禁止它。

以下是删除链接的HTML：

<td>
    <a href="#" id="rmContact" name="<?php echo $contact->ID; ?>">
    <img src="../profil_collab/themes/collab_fr/images/supprime.gif" border="0">
    </a>
</td>

列表中的每个联系人都有一个链接。

这是我为此创建的AJAX：

Event.observe( $('rmContact'), 'click', function(event) {
    var suppress = new Ajax.Request('annuaire_rm_contact.php', {
        parameters: 
        {
            ref_contact: ref,
            id: this.readAttribute("name")
        },
        onSuccess: function() {
            formdiv.setStyle({
                display: 'none'
            });
            var ajaxCall = new Ajax.Updater("list", "annuaire_contact_list.php", {
                    parameters: { ref: ref}
                }
            );
            div.setStyle({
                display: 'initial'
            });
        }
    });
    Event.stop(event);
});

但这里有一个问题：我只能删除列表的第一个元素。此外，在调用更新程序后我无法删除。如果我愿意，我必须刷新页面。

我已经尝试了所有的东西，所以如果有人有想法，那就太棒了:)。

Answer 1

每个删除链接都需要具有唯一的id属性。根据{{3}}：

id MDN documentation定义唯一标识符（ID），该标识符在整个文档中必须是唯一的。它的目的是在链接（使用片段标识符），脚本或样式（使用CSS）时识别元素。^{global attribute}

因此，请更新链接以获得此类 id 属性，并可能为所有删除链接添加类名称（例如<a class="rmContact"）：

<td>
    <a class="rmContact" href="#" id="rmContact_<?php echo $contact->ID; ?>" name="<?php echo $contact->ID; ?>">
        <img src="../profil_collab/themes/collab_fr/images/supprime.gif" border="0">
    </a>
</td>

然后，不是观察具有id属性 rmContact 的元素的点击，而是使用事件代表来观察页面上的点击。如果元素是删除链接（例如，具有类名rmLink），则触发AJAX请求。

Event.observe( document, 'click', function(event) {
    var eventElement = Event.element(event);
    //match parent of image (anchor tag)
    if (eventElement.parentNode.match('.rmContact')) {
         eventElement = eventElement.parentNode;
    }
    if (eventElement && eventElement.hasClassName("rmContact")) {
        removeContactLink(eventElement);
    }
    else {
         //handle other clicks, stop event if necessary, etc.
    }
});
//update your function above to accept a removeLink
function removeContactLink(removeLink) {
     var suppress = new Ajax.Request('annuaire_rm_contact.php', {
     ....
}

这有意义吗？请参阅下面的示例。

Event.observe(document, 'click', function(event) {
  var eventElement = Event.element(event);
  if (eventElement.parentNode.match('.rmContact')) {
    eventElement = eventElement.parentNode;
  }
  if (eventElement && eventElement.hasClassName("rmContact")) {
    removeContactLink(eventElement);
  } else {
    //handle other clicks, stop event if necessary, etc.
  }
});
//update your function above to accept a removeLink
function removeContactLink(removeLink) {
  console.log('removeContactLink: ', removeLink.readAttribute("name"));
  //var suppress = new Ajax.Request('annuaire_rm_contact.php', {     });
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/prototype/1.7.3/prototype.js"></script>
<table>
  <tr>
    <td>Sam</td>
    <td>
      <a href="#" id="rmContact" name="4" class="rmContact">
        <img src="http://gpcpublishing.com/templates/images/icons/delete.gif" border="0">
      </a>
    </td>
  </tr>
  <tr>
    <td>Terry</td>
    <td>
      <a href="#" id="rmContact" name="8" class="rmContact">
        <img src="http://gpcpublishing.com/templates/images/icons/delete.gif" border="0">
      </a>
    </td>
  </tr>
</table>

¹ <子> 1

需要帮助原型JS / AJAX

1 个答案: