Skip to:
Content
Pages
Categories
Search
Top
Bottom

Font Awesome breaks ajax on delete link

  • @shanebp

    Moderator

    10 years, 4 months ago

    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)

  • @shanebp

    Moderator

    10 years, 4 months ago

    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.

    @shanebp

    Moderator

    10 years, 4 months ago

    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) {

    @shanebp

    Moderator

    10 years, 4 months ago

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

    to:
    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.

    @salehmotaal

    Participant

    9 years, 10 months ago

    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.

Topic Info

Topic Tags

Skip to toolbar