jQuery - Remove Element

Question

I am creating a social network and people get notifications when they get new messages. When they click on the messages link in the header, the message notifications is suppose to go away. But it doesn't. I get taken to the messages page and the notification still stays there. Whenever I click it, it leaves for about 1 second and comes back. Any help ?

<a onClick="removeBadge();" href="messages.php">Messages
  <?php

    if($num_messages > 0)
      echo '<span class="notification_badge" id="unread_message">' 
        . $num_messages . 
        '</span>'
  ?>    
</a>

<script type="text/javascript"> 
  function removeBadge(user) {

    $("span").remove("#unread_message");

  }
</script>

There seems to be some other script acting upon it. Can you post the full code so that we can have a look at it? — Praveen Kumar Purushothaman, May 05 '20 at 18:58
Can you confirm whether demo.js actually sends an update to the server to update the `$num_messages` variable? — Danny Bullis, May 05 '20 at 19:50
Yes. This is from a previous project I was working on so everything is in here — , May 05 '20 at 19:51

score 0 · Answer 1 · answered May 05 '20 at 19:09

The return value from the onClick code is what determines whether the link's inherent clicked action is processed or not - returning false means that it isn't processed, but if you return true then the browser will proceed to process it after your function returns and go to the proper anchor.

The same scenario is already answered here

score 0 · Answer 2 · answered May 05 '20 at 19:09

It appears that you are using a server-based variable $num_messages which is a value that exists on your server, but which your client has no control over unless you send a request back to your server explicitly updating the number of messages that is used to populate the $num_messages value in your messages.php page.

You are clearing the notification from the screen in the HTML page with JavaScript, but it comes back as soon as you load messages.php because the value isn't actually updated on the server, so when the page is reloaded, it is served with the original value for $num_messages as before.

From within your removeBadge() click handler, you could submit a request to a PHP page that handles a request to update whatever data is being used to populate $num_messages. You can do this asynchronously, however you'll run into problems on messages.php if the asynchronous operation to update the number of messages does not complete before the messages.php page renders. Instead of using an <a> tag which will navigate right away when clicked, there are a couple of options; switch to something like a <span> tag instead and redirect to messages.php when the async callback succeeds. JQuery has very easy to use asynchronous functionality. Check out the async method. Set up a redirect to messages.php in your success callback.

Hope this helps.

score 0 · Answer 3 · answered May 05 '20 at 19:33

0

This is because of anchor tag href attribute, by clicking you redirect to messages.php page.

Instead you can add target="_blank" to your anchor tag, this will open messages.php in new window while also remove the notification from parent page.

<a onClick="removeBadge();" href="messages.php" target="_blank">Messages
        <?php

            if($num_messages > 0)
            echo '<span class="notification_badge" id="unread_message">' . $num_messages . 
            '</span>'
        ?>  
    </a>

<script type="text/javascript">

    function removeBadge(user) {

        $("#unread_message").remove();

    }
</script>

answered May 05 '20 at 19:33

Adeel Tahir

203
2
9

Did it open a new window? and remove notification on parent page? – Adeel Tahir May 05 '20 at 19:40
Yes. But I don't want it to open in a new window. I want it to still stay on the parent page but remove the badge – May 05 '20 at 19:44
You need to use Ajax for that.Because it will always redirect to message.php.You have to remove notification and load message.php through Ajax so browser will not reload.Other thing you can do is to pass some parameter on message say message.php?notification=0 and check this parameter and if it exist do not show the notifications. Hope you get the idea. – Adeel Tahir May 05 '20 at 19:50

jQuery - Remove Element

3 Answers3