peter-cooper
asked on
Jquery notification event firing twice
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-gr itter/.
Many thanks.
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/
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>
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.
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.
@Leakim971 - where is the loop? I couldn't see it...
ASKER
@Rob Lurd
Thank you for your comment.
Renedered code as far as I can see.
Thank you for your comment.
You're missing semicolons at the end of your JS linesWhere 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>
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.
https://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:
https://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";
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;
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.
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.
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.
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>
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>
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
@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.
@Ray
Thank you for your comments. Will look into HEREDOC. Many thanks.
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>
@Ray
Thank you for your comments. Will look into HEREDOC. Many thanks.
ASKER
Thank you very much for your help.
@Rob
Still good practice but not a source of the errors
- You're missing semicolons at the end of your JS linesNot mandatory as long as there are a newline after each line and it is not inline JS in an event handler.
- The SCRIPT tag should be lowercase.
Still good practice but not a source of the errors
I see you put a document.ready inside a loop, so it will fire more than one time