Solved

Jquery notification event firing twice

Posted on 2014-09-19
11
402 Views
Last Modified: 2014-09-21
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.

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

Open in new window

0
Comment
Question by:peter-cooper
  • 4
  • 3
  • 2
  • +2
11 Comments
 
LVL 82

Expert Comment

by:leakim971
ID: 40332380
could you post the generated HTML instead the PHP code?

I see you put a document.ready inside a loop, so it will fire more than one time
0
 
LVL 42

Expert Comment

by:Rob Jurd, EE MVE
ID: 40332391
Works fine here: http://jsbin.com/wemahi/1/edit

I would change a few things:

- You're missing semicolons at the end of your JS lines
- The SCRIPT tag should be lowercase.
- Remove this line just while you're testing:  echo "$(\"#testid\" ).show()\n";
- You have mixed use of quotes in your gritter call.  remove the double quotes and stick with the single: echo "$.gritter.add({title: 'This is a notice', text: '$messages1'});\n";

Given this is rendered on the client, can you post the rendered code please?  Load the page, right click, view source, paste here.
0
 
LVL 42

Expert Comment

by:Rob Jurd, EE MVE
ID: 40332395
@Leakim971 - where is the loop? I couldn't see it...
0
 

Author Comment

by:peter-cooper
ID: 40332788
@Rob Lurd
Thank you for your comment.
You're missing semicolons at the end of your JS lines
Where exactly?

You have mixed use of quotes in your gritter call.  remove the double quotes and stick with the single: echo "$.gritter.add({title: 'This is a notice', text: '$messages1'});\n";
That doesn't work.

Renedered code as far as I can see.

<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;">
							
			<script type=text/javascript>
$.gritter.add({title: 'This is a new notice', text: "You have  <span class='yourstyle'>1</span> new message(s). Please go to the message area in your control panel.", time: 3000});
</script>
						
			</div>
                        
                    </div>
                </div>

Open in new window

0
 
LVL 108

Expert Comment

by:Ray Paseur
ID: 40333650
I see two things that might make your life easier.  First, get off MySQL ASAP.  It's a dead technology.  This article explains why and what you must do to keep your scripts running.
http://www.experts-exchange.com/Web_Development/Web_Languages-Standards/PHP/PHP_Databases/A_11177-PHP-MySQL-Deprecated-as-of-PHP-5-5-0.html

Second, when you see code like this:
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";

Open in new window

get rid of it and instead use the HEREDOC notation.  It greatly simplifies the punctuation and escaping, and lets you concentrate on the contents of the data string (in this case, javaScript).
$thing = <<<EOD
<script type=text/javascript>
$(function(){
    $("#testid" ).show()
    $.gritter.add({title: 'This is a notice', text: "$messages1"});
});
</script>
EOD;
echo $thing;

Open in new window

I did not try to understand the JavaScript.  It looks a little "off" to me, and I'm not sure I understand what you want it to accomplish.
0
Highfive + Dolby Voice = No More Audio Complaints!

Poor audio quality is one of the top reasons people don’t use video conferencing. Get the crispest, clearest audio powered by Dolby Voice in every meeting. Highfive and Dolby Voice deliver the best video conferencing and audio experience for every meeting and every room.

 
LVL 42

Expert Comment

by:Rob Jurd, EE MVE
ID: 40333738
Your rendered code is missing the jQuery initializing function. E.g. $(function() {})
The missing semicolons we're not in your php file at the end if every line of JavaScript (not php) as JavaScript requires then too. However your rendered code looks fine other than the missing jQuery init.
0
 
LVL 108

Expert Comment

by:Ray Paseur
ID: 40333801
To Rob's point about jQuery initialization, this is how I start.
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
$(document).ready(function(){
});
</script>

Open in new window

Then building on that, I might come up with something like this.
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
$(document).ready(function(){
    $("#testid" ).show()
    $.gritter.add({title: 'This is a notice', text: "$messages1"});
});
</script>

Open in new window

0
 
LVL 42

Accepted Solution

by:
Rob Jurd, EE MVE earned 500 total points
ID: 40333831
And to build on what Ray's said, you should only have one initialisation function, not multiple.  The reason it's needed is the javascript needs to wait until all the HTML has been rendered by the browser.  There are a series of events that happen when you load a webpage and not all of them allow you to manipulate the html in the website.

The other accepted practice is to put the <script>...</script> just before the </body> tag.  I've never liked doing this but it's based on the principle that the content has been loaded by the time it gets to this point of the page.  It should otherwise be in the <head>

In terms of your page, I would personally output all the page as you want it to look and put the javascript all together in the <head> (or before the </body>) with all that needs to happen on your page.
0
 

Author Comment

by:peter-cooper
ID: 40334244
@Rob Lurd
Turned out to be quite simple. Took your advice and deleted original script code and declared new script before </body> tag and it works.

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

Open in new window


@Ray
Thank you for your comments. Will look into HEREDOC. Many thanks.
0
 

Author Closing Comment

by:peter-cooper
ID: 40334245
Thank you very much for your help.
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 40335006
@Rob

- You're missing semicolons at the end of your JS lines
- The SCRIPT tag should be lowercase.
Not mandatory as long as there are a newline after each line and it is not inline JS in an event handler.

Still good practice but not a source of the errors
0

Featured Post

How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

Join & Write a Comment

I found this questions asking how to do this in many different forums, so I will describe here how to implement a solution using PHP and AJAX. The logical flow for the problem should be: Write an event handler for the first drop down box to get …
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
The viewer will learn how to count occurrences of each item in an array.
The viewer will learn how to create and use a small PHP class to apply a watermark to an image. This video shows the viewer the setup for the PHP watermark as well as important coding language. Continue to Part 2 to learn the core code used in creat…

707 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

18 Experts available now in Live!

Get 1:1 Help Now