jQWidgets Forums

Tagged: javascript notification, jqwidget, nofitication

This topic contains 2 replies, has 2 voices, and was last updated by eqsvimp 8 years, 11 months ago.

Viewing 3 posts - 1 through 3 (of 3 total)

Author

How to distinguish each notification‘s content Posts
June 1, 2016 at 5:43 am How to distinguish each notification‘s content #84784

eqsvimp
Participant

Recently, I try to use jqxNotification events demo.
As I click the button, one of the notification is produced. After I click the notification, it will popup the SAME message.

What I want to implement is:
As I click the notification, it can popup notification’s corresponding messages. That means, one notification, one message.

It is well appreciated you can supply the example in terms of this. Thank you very much

<!DOCTYPE html>
<html>
<head>
<title id=”Description”>This demo showcases the jqxNotification events.</title>
<meta name=”keywords” content=”event, jQuery notification, jQWidgets, jqxNotification, jqxNotification event, notification, unobtrusive notification” />
<meta name=”description” content=”This demo showcases the jqxNotification events.” />
<link rel=”stylesheet” href=”./jqwidgets/styles/jqx.base.css” type=”text/css” />
<link rel=”stylesheet” href=”./jqwidgets/styles/jqx.ui-redmond.css” type=”text/css” />
<link rel=”stylesheet” href=”./jqwidgets/styles/jqx.darkblue.css” type=”text/css” />
<script type=”text/javascript” src=”./scripts/jquery-1.11.1.min.js”></script>
<script type=”text/javascript” src=”./jqwidgets/jqxcore.js”></script>
<script type=”text/javascript” src=”./jqwidgets/jqxnotification.js”></script>
<script type=”text/javascript” src=”./jqwidgets/jqxbuttons.js”></script>
<script type=”text/javascript” src=”./jqwidgets/jqxsplitter.js”></script>
<script type=”text/javascript” src=”./jqwidgets/jqxscrollbar.js”></script>
<script type=”text/javascript” src=”./jqwidgets/jqxpanel.js”></script>
<script type=”text/javascript” src=”./scripts/demos.js”></script>

<script type=”text/javascript”>
$(document).ready(function () {
$(‘#mainSplitter’).jqxSplitter({ theme : ‘darkblue’ , width: 1330, height: 600, panels: [{ size: 482 }] });

$(“#jqxNotification”).jqxNotification({ theme : ‘darkblue’,width: “100%”, appendContainer: “#container”, opacity: 0.9,
closeOnClick: true, autoClose: false, showCloseButton: true, template: “error”, blink: true
});

// <div id=”jqxNotification” style=”width: 100%;”><div>CUDB System <b>Error</b></div><div style=”font-size: smaller; text-align: center;”>Click to view.</div></div>

$(“#checkMail”).jqxButton();
$(“#eventsPanel”).jqxPanel({ theme : ‘darkblue’, width: 150, height: 150 });

var jsonranklist=[‘{“command_name”:”cudb_system”,”status”:”ok”,”output”:”sdafasdfasdfdasfs”}’,'{“command_name”:”cudb_monitor”,”status”:”ok”,”output”:”sdafasdfasdfdasfs”}’,'{“command_name”:”cudb_abc”,”status”:”ok”,”output”:”sdafasdfasdfdasfs”}’];
obj = JSON.parse(jsonranklist[0]);

$(“#checkMail”).click(function () {

for(var i=0;i< jsonranklist.length;i++)
{
var obj;
obj = JSON.parse(jsonranklist[i]);
$(“#notificationContent”).html(obj.command_name);
alert(i);
$(“#jqxNotification”).jqxNotification(“open”,{notificationOffset: i});
}

alert($(‘#jqxNotification’).jqxNotification(‘notificationOffset’));
//add the alert message here
});

alert(obj.command_name);
// event handlers
$(“#jqxNotification”).on(“open”, function (event) {
$(“#eventsPanel”).jqxPanel(“append”, event.type + “<br />”);
});
$(“#jqxNotification”).on(“close”, function (event) {
$(“#eventsPanel”).jqxPanel(“append”, event.type + “<br />”);
});
$(“#jqxNotification”).on(“click”, function (event) {
$(“#eventsPanel”).jqxPanel(“append”, event.type + “<br />”);
alert(“!!!”);
alert(obj.command_name);
alert(“!!”);
alert($(‘#jqxNotification’).jqxNotification(‘notificationOffset’));
$(“#messageContent”).html(obj.command_name);
$(“#messageContent”).fadeIn();
});
});
</script>
</head>
<body>

<div id=”mainSplitter”>
<div class=”splitter-panel”>
<button id=”checkMail”>
Check mail
</button>
<div style=”margin-top: 15px;”>
Events log:
</div>
<div id=”eventsPanel”>
</div>
<div id=”messageContent”>
</div>

</div>

<div class=”splitter-panel”>
<div id=”jqxNotification”>
<div id=”notificationContent”>
</div>
</div>

<div id=”container” style=”width: 100%; height: 100%; background-color: #F2F2F2;
border: 1px dashed #AAAAAA; overflow: auto;”>
</div>

</div>
</div>

</body>
</html>

June 1, 2016 at 8:05 am How to distinguish each notification‘s content #84791

ivailo
Participant

Hi eqsvimp,

Please refer to this demo.

Best Regards,
Ivailo Ivanov

jQWidgets Team
http://www.jqwidgets.com

June 1, 2016 at 9:41 am How to distinguish each notification‘s content #84794

eqsvimp
Participant

I try it on the Jqxwidget ver3.8, it does not work. After click the notification, the event is not caught.(not sure why)
But it can work in the newest version.
Thank you so much, ivailo.
Author

Posts

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.