Jquery notification event firing twice

Question

I have just started using gritter notification plugin and experiencing strange behavior. I am displaying the notification on page load and for some reason, the same message is appearing twice. I would be grateful if someone could check my code and highlight any errors that I have overlooked. The link for the plugin is: http://boedesign.com/blog/2009/07/11/growl-for-jquery-gritter/. Many thanks.

UPDATED HTML FROM FIREBUG

<div id="gritter-notice-wrapper">

    <div id="gritter-item-2" class="gritter-item-wrapper" role="alert" style="">
        <div class="gritter-top"></div>
        <div class="gritter-item">
            <a class="gritter-close" tabindex="1" href="#" style="display: none;">

                Close Notification

            </a>
            <div class="gritter-without-image">
                <span class="gritter-title">

                    New Message

                </span>
                <p>

                    You have  

                    <span class="yourstyle">

                        1

                    </span>

                     new message(s). Please go to the message area in …

                </p>
            </div>
            <div style="clear:both"></div>
        </div>
        <div class="gritter-bottom"></div>
    </div>


    <div id="gritter-item-3" class="gritter-item-wrapper" role="alert" style="">
        <div class="gritter-top"></div>
        <div class="gritter-item">
            <a class="gritter-close" tabindex="1" href="#">

                Close Notification

            </a>
            <div class="gritter-without-image">
                <span class="gritter-title">

                    New Message

                </span>
                <p>

                    You have  

                    <span class="yourstyle">

                        1

                    </span>

                     new message(s). Please go to the message area in …

                </p>
            </div>
        </div>
        <div class="gritter-bottom"></div>
    </div>

</div>  


<div id="messages" style="float: left;height: 220px">
     <div>
       Messages
     </div>
     <div style="overflow: hidden;">
        <div id="message"style="font-size: 11px; padding: 10px 10px;" >

            <?php

                mysql_select_db($database_domain, $domain); 
                $query1 = "SELECT * FROM messages WHERE to_user = '$_SESSION[kt_name_usr]' AND `read` = 1"; 
                $result1 = mysql_query($query1) or die(mysql_error());
                $totalRows1 = mysql_num_rows($result1);
                if (mysql_num_rows($result1) ==0) {
                $error1 = true;
                $message3 = "You have no new messages.";
                } else {
                // There was a result
                // now check if there were any records.
                    if (mysql_num_rows($result1) >0) {    
                        $error1 = false;
                        $messages1 = "You have" . "  " . "<span class='yourstyle'>" . $totalRows1 . "</span>" . " " . "new message(s). Please go to the message area in your control panel."; 
                  }
                 } 

                 if($error1 == 0)  {

                    echo "You have" . "  " . "<span class='yourstyle'>" . $totalRows1 . "</span>" . " " . "new message(s). Please go to the message area in your control panel.";

                    echo "<SCRIPT type=text/javascript>\n";
                    echo "$(function() {\n";
                    echo "$(\"#testid\" ).show()\n";
                    echo "$.gritter.add({title: 'This is a notice', text: \"".$messages1."\"})\n";
                    echo "});\n";
                    echo "</script>\n";

                } else { 

                    echo 'There are no new system or site messages to display.';

                }

             ?>

            </div>

           </div>

          </div>

          <div id="testid" style="display:none;"></div>

SOLUTION:

<script type="text/javascript">
       $(function () {
            var newmsg = <?php echo json_encode($messages1) ?>;
            $.gritter.add({title: 'New Message', text: newmsg, time: 4000, sticky: false});
    });
</script>

I didn't find any notification on page load. Perhaps you could provide a fiddle? — Nikunj Madhogaria, Sep 19 '14 at 10:33

score 0 · Answer 1 · answered Sep 19 '14 at 11:17

0

Just comment out this line,

echo "You have" . "  " . "<span class='yourstyle'>" . $totalRows1 . "</span>" . " " . "new message(s). Please go to the message area in your control panel.";

answered Sep 19 '14 at 11:17

Apul Gupta

3,044
3
22
30

Hi Apul. Still the same. Firing twice. Thanks – user1532468 Sep 19 '14 at 11:50
Please share page's view source rendered in browser. – Apul Gupta Sep 19 '14 at 16:29
Messages

– user1532468 Sep 19 '14 at 16:43
there should be some js/css also. I need full html code generated after execution. If this is a response of ajax, share the initiator page html code with me. – Apul Gupta Sep 19 '14 at 17:56
If i right click view source in ff, I can the markup of the code. What exasctly should I be looking for. css/js is available from the link I posted. Also, has a thought. Could it be it is bubbling and I perhaps need to stoppropogation? Thanks – user1532468 Sep 19 '14 at 18:05
would be nice if you can share url where did u implement this. This type of issues come when two times same event getting bind. – Apul Gupta Sep 19 '14 at 18:12
I do notice though from innerHTML that it is appearing twice. I shall post html that appears in firebug. Thanks – user1532468 Sep 19 '14 at 19:07
Turned out to be quite simple. Deleted original script and declared new script to before
tag. Works well. Shall post my code in original question so it may benefit others. Thanks
– user1532468 Sep 20 '14 at 09:37

score 0 · Answer 2 · answered May 10 '18 at 06:50

I have the same issue resolved by stopImmediatePropagation()

try to use following code

    <script type="text/javascript">
       $(function (event) {
            event.stopImmediatePropagation();
            var newmsg = <?php echo json_encode($messages1) ?>;
            $.gritter.add({title: 'New Message', text: newmsg, time: 4000, sticky: false});
    });
</script>

Jquery notification event firing twice

2 Answers2