需要帮助的原型JS / AJAX

Question

I've been using PrototypeJS recently for a project, but today I've encountered an issue.

I'm doing some kind of contact list for a module, where we can add a contact via a form, or suppress it with a link.

Here is my HTML for the removing link :

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

There is one link for each contact in the list.

And here is the AJAX I created for this:

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);
});

But there is an issue here: I can remove only the first element of the list. Also, I can't remove after the updater has been called. If I want to, I have to refresh the page.

Well I've tried everything, so if someone have an idea it would be really great :).

Answer 1

You need to have a unique id attribute for each removing link. Per the MDN documentation:

The id global attribute defines a unique identifier (ID) which must be unique in the whole document. Its purpose is to identify the element when linking (using a fragment identifier), scripting, or styling (with CSS).¹

So update the links to have an id attribute like this, and perhaps add a class name to all remove links (e.g. <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>

Then instead of observing clicks on the element with id attribute rmContact, use an Event Delegate to observe clicks on the page. If the element is a remove link (e.g. has a class name rmLink), then trigger the AJAX request.

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', {
     ....
}

Does that make sense? See an example of this below.

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>

---

¹_{https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id}

</div>