Skip to:

Font Awesome breaks ajax on delete link

  • Profile photo of shanebp


    I can replace the activity stream item ‘Delete’ text with a Font Awesome icon, but it causes a page reload instead of using ajax.

    Any ideas as to why or a solution?

    function sc_swap_delete_text( $link ) {
    	$trash = '<i class="icon-trash icon-large"></i>';
    	$link = str_replace("Delete", $trash, $link);
    	return $link;
    add_filter( 'bp_get_activity_delete_link', 'sc_swap_delete_text', 1, 1 );
Viewing 4 replies - 1 through 4 (of 4 total)
  • Profile photo of shanebp


    Replacing the text with a basic img tag has the same effect; when clicked, the activity item is deleted but on a page reload instead of via ajax.

    So I don’t think it’s specific to font awesome.

    Profile photo of shanebp


    This issue gets stranger the farther I dig…

    1. We aren’t using the BP Default theme, so why is the activity stream using global.js instead of buddypress.js from the legacy theme?

    2. in either /js, this click handler is never triggered if an image is used in the < a > tag for activity->delete or activity->fav

    jq('div.activity').click( function(event) {

    Profile photo of shanebp


    It’s the jquery in global.js

    The ‘target’ becomes the icon rather than the a tag.
    So if ( target.hasClass('delete-activity') fails.

    Changing to this gets the right target:
    if ( target.hasClass('icon-trash') {

    And then you need to change:
    var link_href = target.attr('href');

    var link_href = target.closest("a").attr("href");

    otherwise the nonce won’t be found and the ajax will fail.

    Note: why is global.js being loaded from BuddyPress Default Theme when BP Legacy Theme is being used? Don’t know, but something is funky in this particular client’s installation.

    Profile photo of saleh.motaal


    I ran into the same problem and by the time I found this post I had tried various js click pass-throughs and it was getting ugly.

    Here is a css-only approach to fix font-awesome and other a.button conflicts of that nature.

    a.button * { pointer-events:none; }

    Since anchors are almost always the click targets for a user pointer perspective, it makes no sense that any thing within the anchor would catch pointer interactions.

    If you’re a genius and created a design that uses nested link elements you could further specialize the selector a.button :not(a):not(button)… Not recommended at all though!

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Font Awesome breaks ajax on delete link’ is closed to new replies.
Skip to toolbar