Multiple instances of the same notification are being opened . - Angular, Vue, React, Web Components, Javascript, HTML5 Widgets

Tagged: Button, children, click, closeLast, jqxButton, jqxNotification, length, Notification, open, single instance

This topic contains 4 replies, has 2 voices, and was last updated by JKANNAN 9 years, 11 months ago.

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

Author

Multiple instances of the same notification are being opened . Posts

April 16, 2015 at 8:00 pm Multiple instances of the same notification are being opened . #69966

JKANNAN

Participant

Hi,

We are enjoying the JQWidgets so far without any issues.

We have a scenario with the notification control.

I have implemented the logic to open up a notification on the button click as explained in the example.

It appears that Multiple instances of the same notification are being opened every time on the button click event.

I do not want to have Multiple instances of the same notification on the button click event.

At any point i like to have only one instance of the notification being opened on the button click.

Is there any way to have only one instance of notification being opened.

Any help will be appreciated.

Thanks

Kannan

April 17, 2015 at 7:19 am Multiple instances of the same notification are being opened . #69982

Nadezhda

Participant

Hello Kannan,

Here is an example which shows how to open only one instance of jqxNotification. I hope it would be helpful.

<!DOCTYPE html>
<html lang="en">
<head>
    <title></title>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.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/jqxbuttons.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxnotification.js"></script>
</head>
<body class='default'>
    <div id='content'>
        <script type="text/javascript">
            $(document).ready(function () {
                // Create jqxButton widgets.
                $("#jqxButton").jqxButton({ width: '150' });
                $("#jqxNotification").jqxNotification({
                    width: "180px", position: "top-right", opacity: 0.9,
                    autoOpen: false, animationOpenDelay: 800, autoClose: false
                });
                var count = 0;
                $("#jqxButton").on('click', function (event) {
                    if (count < 1) {
                        $('#jqxNotification').jqxNotification('open');
                        count++;
                    }
                });
            });
        </script>
        <div>
            <input type="button" value="Button" id='jqxButton' />
        </div>
        <div id="jqxNotification">
            This is a notification.
        </div>
    </div>
</body>
</html>

Best Regards,
Nadezhda

jQWidgets team
http://www.jqwidgets.com/

April 17, 2015 at 2:08 pm Multiple instances of the same notification are being opened . #70013

JKANNAN

Participant

Hi Nadezhda

Thanks for the sample.

But this does not resolve the problem.

The sample that you have provided displays the notification on the first button click.

Any subsequent button clicks, will not display the notification bar.

I need only one instance of notification to be displayed every time the user clicks on the button.

Thanks for your help.

Kannan Jeyamani

April 20, 2015 at 8:00 am Multiple instances of the same notification are being opened . #70046

Nadezhda

Participant

Hi Kannan Jeyamani,

Please, find the following example which contains possible solution.

<!DOCTYPE html>
<html lang="en">
<head>
    <title></title>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.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/jqxbuttons.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxnotification.js"></script>
</head>
<body class='default'>
    <div id='content'>
        <script type="text/javascript">
            $(document).ready(function () {
                $("#jqxButton").jqxButton({ width: '150' });
                $("#jqxNotification").jqxNotification({
                    width: "180px", position: "top-right", opacity: 0.9, animationCloseDelay: 1, animationOpenDelay: 1,
                    autoOpen: false, autoClose: true
                });
                $("#jqxButton").on('click', function (event) {
                    $('#jqxNotification').jqxNotification('open');
                    var len = $('#jqxNotificationDefaultContainer-top-right').children().length;
                    console.log(len);
                    if (len > 1) {
                        $("#jqxNotification").jqxNotification("closeLast");
                    }
                    
                })              
            });
        </script>
        <div>
            <input type="button" value="Button" id='jqxButton' />
        </div>
        <div id="jqxNotification">
            This is a notification.
        </div>
    </div>
</body>
</html>

Best Regards,
Nadezhda

jQWidgets team
http://www.jqwidgets.com/

April 20, 2015 at 3:18 pm Multiple instances of the same notification are being opened . #70078

JKANNAN

Participant

Hi Nadezhda

Thanks for the sample. That works perfectly.

Thanks

Kannan

Author

Posts

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

You must be logged in to reply to this topic.