jQWidgets Forums

jQuery UI Widgets › Forums › Dialogs and Notifications › Window › warning window issue

Tagged: , , , ,

This topic contains 2 replies, has 2 voices, and was last updated by  Adarsha 10 years, 7 months ago.

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    warning window issue Posts
  • August 27, 2014 at 2:24 pm warning window issue #58849

    Adarsha
    Participant

    Hi,

    I have below logic. Here i am trying to check how many selections were made in Combobox. Only three selections are allowed. Once 4th selection is made,
    a warning window is displayed. Display of warning widnow works fine, but below are my issues

    1. the UnselectItem is not unselecting the 4th item selected from the combobox
    2. When i manually remove the 4th item, and re-select the 4th item again, it goes into Else loop as usual and does not display warning window.
    3. The 4th item is again selected.

    Can you please suggest what is the mistake i am doing here.. thanks !

    $(“#jqxlibrarylist”).on(‘change’, function (event) {
    var items = $(“#jqxlibrarylist”).jqxComboBox(‘getSelectedItems’);

    if (items.length <= 3){
    displayNames ();
    }else
    {
    for (var i = 0; i < items.length; i++)
    {
    var cds = items[i].label;
    }

    function createElements() {
    $(‘#eventWindow’).jqxWindow({
    maxHeight: 150,
    maxWidth: 280,
    minHeight: 30,
    minWidth: 250,
    height: 120,
    width: 270,
    /*resizable: false,*/
    isModal: true,
    /*modalOpacity: 0.3,*/
    okButton: $(‘#ok’),
    initContent: function () {
    $(‘#ok’).jqxButton({ width: ’65px’ });
    $(‘#ok’).focus();
    }
    });
    };
    createElements();
    document.getElementById(“errmess”).innerText =’Only 3 libraries can be selected. “Ok” to close this dialog box’;
    $(“warnwindow”).css(‘visibility’, ‘visible’);
    $(“#jqxlibrarylist”).jqxComboBox(‘unselectItem’, cds);
    };
    });

    August 28, 2014 at 5:46 am warning window issue #58865

    Dimitar
    Participant

    Hello adarsha,

    This code is insufficient for us to determine the source of the issue. Please provide us with a JSFiddle example we can test.

    On a side note, we do not recommend calling the window initialization code (createElements()) multiple times. Initialize it once and when you need it, call its open method.

    Best Regards,
    Dimitar

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

    August 28, 2014 at 7:46 am warning window issue #58870

    Adarsha
    Participant

    am sorry i did not understand how to send the code in fiddle !! lemme expand my issue

    Step 1: Create a combobox to select the items
    var dataAdapter = new $.jqx.dataAdapter(source);
    // Create a jqxDropDownList
    $(“#jqxlibrarylist”).jqxComboBox({
    placeHolder: “Select libraries..”,
    theme: ‘arctic’,
    source: dataAdapter,
    displayMember: “cdsid”,
    valueMember: “name”,
    multiSelect:true,
    autoDropDownHeight: true,
    width: 250
    });

    Step 2. When i select the items, their values are displayed next to the combobox
    var displayNames = function(){
    var items = $(“#jqxlibrarylist”).jqxComboBox(‘getSelectedItems’);
    if (items.length>0){var log = “Name: “;}
    else{var log = ”;}

    for (var i = 0; i < items.length; i++) {
    log += items[i].value;
    if (i < items.length – 1) {
    log += ‘, ‘;
    }
    }
    $(“#selectionlog”).text(log);
    }

    Step 3: Only three items are allowed to select. Once 4th item is selected then the warning window should appear
    $(“#jqxlibrarylist”).on(‘change’, function (event) {
    var items = $(“#jqxlibrarylist”).jqxComboBox(‘getSelectedItems’);

    if (items.length <= 3){
    displayNames ();
    }else
    {
    for (var i = 0; i < items.length; i++)
    {
    var cds = items[i].label;
    }

    function createElements() {
    $(‘#eventWindow’).jqxWindow({
    maxHeight: 150,
    maxWidth: 280,
    minHeight: 30,
    minWidth: 250,
    height: 120,
    width: 270,
    /*resizable: false,*/
    isModal: true,
    /*modalOpacity: 0.3,*/
    okButton: $(‘#ok’),
    initContent: function () {
    $(‘#ok’).jqxButton({ width: ’65px’ });
    $(‘#ok’).focus();
    }
    });
    };
    createElements();
    document.getElementById(“errmess”).innerText =’Only 3 libraries can be selected. “Ok” to close this dialog box’;
    $(“warnwindow”).css(‘visibility’, ‘visible’);
    $(“#jqxlibrarylist”).jqxComboBox(‘unselectItem’, cds);
    };
    });

    HTML For this

    <!DOCTYPE html>
    <html lang=”en”>
    <head>
    <link rel=”stylesheet” href=”css/jqx.base.css” type=”text/css”>
    <link rel=”stylesheet” type=”text/css” href=”css/styles/jqx.arctic.css”>
    <link rel=”stylesheet” type=”text/css” href=”css/styles/jqx.fresh.css”>
    </head>
    <body class=”default”>
    <div id=”content-wrapper”>
    <div id=’jqxWidget’>
    <div id=’jqxlibrarylist’></div>
    <div id=”selectionlog”></div>
    </div>
    </body>
    </html>

  • Author
    Posts
Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.