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

Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
  • destroy window #6407

    mr_putersmit
    Participant

    Hello. I read a thread here that says to destroy a jqxWindow use the $(“#header”).remove(); of jquery. I cannot get this to work however. The reason I need to do this is because the first time it opens the screen goes modal with the window open. However, after closing using x when I click again the window opens but there is no modal and any data such as an alert, seems to get incremented by 1 each time. Is there an example of using this method with widgets? Thanks

    destroy window #6412

    mr_putersmit
    Participant

    Any help with this please? Thanks

    destroy window #6413

    Dimitar
    Participant

    Hello mr_putersmit,

    Here is an example which answers your question. You need to call the remove() function to remove the window. In the example it is called when a button is clicked.

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title id='Description'></title>
    <link rel="stylesheet" href="jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="jquery-1.7.2.min.js"></script>
    <script type="text/javascript" src="jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="jqwidgets/jqxwindow.js"></script>
    </head>
    <body>
    <div id='content'>
    <script type="text/javascript">
    $(document).ready(function () {
    $("#jqxwindow ").jqxWindow({ height: 90, width: 150 });
    $('#btn').click(function(){
    $('div').remove('#jqxwindow');})
    });
    </script>
    <div id='jqxwindow'>
    <div>Header</div>
    <div>Content</div>
    </div>
    <button id="btn">Remove window!</button>
    </div>
    </body>
    </html>

    Best Regards,
    Dimitar,

    jQWidgets Team,
    http://www.jqwidgets.com/

    destroy window #6416

    mr_putersmit
    Participant

    Thank you dimitar. Much appreciated. There was one more thing if I may. The code I am using is not inserting the OK button in the window when it launches. What is the correct way to have OK button or cancel. Thanks

    okButton: $('#ok'),
    OK: true

    destroy window #6421

    Dimitar
    Participant

    Hello mr_putersmit,

    Here is the solution. Check the inline comments for more clarification:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title id='Description'></title>
    <link rel="stylesheet" href="jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="jquery-1.7.2.min.js"></script>
    <script type="text/javascript" src="jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="jqwidgets/jqxwindow.js"></script>
    <script type="text/javascript" src="jqwidgets/jqxbuttons.js"></script>
    </head>
    <body>
    <div id='content'>
    <script type="text/javascript">
    $(document).ready(function () {
    $("#OK").jqxButton({ width: '50', height: '25' }); //makes use of jqxbuttons.js
    $("#Cancel").jqxButton({ width: '50', height: '25' }); //makes use of jqxbuttons.js
    $("#jqxwindow ").jqxWindow({ height: 90, width: 150 });
    $('#jqxwindow').jqxWindow({ okButton: $('#OK') }); //creates the OK button - returns true
    $('#jqxwindow').jqxWindow({ cancelButton: $('#Cancel') }); //creates the Cancel button - returns false
    $('#btn').click(function () {
    $('div').remove('#jqxwindow');
    })
    });
    </script>
    <div id='jqxwindow'>
    <div>Header</div>
    <div>Content<br />
    <!-- The buttons should go into the "Content" <div> -->
    <button id="OK">OK</button>
    <button id="Cancel">Cancel</button>
    </div>
    </div>
    <button id="btn">Remove window!</button>
    </div>
    </body>
    </html>

    Best Regards,
    Dimitar,

    jQWidgets Team,
    http://www.jqwidgets.com/

    destroy window #6441

    mr_putersmit
    Participant

    Dimitar

    Thank you for example. 2 points: Firstly, when the Cancel button is clicked, does this remove the window. Secondly, Instead of removing from button, is it just a case of using $(‘div’).remove(‘#jqxwindow’); in a statement and also doing grid refresh? thanks

    destroy window #6458

    Dimitar
    Participant

    Hi mr_putersmit,

    The Cancel button closes the window but doesn’t remove it.

    $('div').remove('#jqxwindow');

    is used to remove the window. It can be used with a button or however you like.

    Best Regards,
    Dimitar,

    jQWidgets Team,
    http://www.jqwidgets.com/

    destroy window #6472

    mr_putersmit
    Participant

    Dimitar. Still cannot get it to work. I have posted code and would be grateful for guidance. The window does not open. Thanks

    var dataAdapter = new $.jqx.dataAdapter(source);

    $("#deleterowbutton").jqxButton({ theme: 'classic' });
    $("#actionrowbutton").jqxButton({ theme: 'classic' });
    $("#Action").jqxButton({ theme: 'classic' });
    $("#OK").jqxButton({ width: '50', height: '25' }); //makes use of jqxbuttons.js
    $("#Cancel").jqxButton({ width: '50', height: '25' }); //makes use of jqxbuttons.js
    $("#header").jqxWindow({ height: 150, width: 350 });
    $('#header').jqxWindow({ okButton: $('#OK') }); //creates the OK button - returns true
    $('#header').jqxWindow({ cancelButton: $('#Cancel') }); //creates the Cancel button - returns false

    $("#header").hide();
    $("#actionWindow").hide();
    $("#delete").hide();
    $("#dialog").hide();
    $("#actioned").hide();

    // action row.
    $("#header").bind('click', function () {
    var selectedrowindex = $("#jqxgrid").jqxGrid('getselectedrowindex');
    //var datarow = $("#jqxgrid").jqxGrid('getrowdata');alert(datarow);
    var rowscount = $("#jqxgrid").jqxGrid('getdatainformation').rowscount;
    if (selectedrowindex >= 0 && selectedrowindex < rowscount) {
    var rows = $('#jqxgrid').jqxGrid('getrows', selectedrowindex);
    var id = $("#jqxgrid").jqxGrid('getrowid', selectedrowindex);
    //var service = datarow;
    //console.log(id + service);
    $("#jqxgrid").jqxGrid('actionrow', id, rows);
    //alert(id + service);
    /*
    *$( "#actionWindow" ).dialog({

    //title: 'DELETE ERROR',
    resizable: false,
    modal: true,
    buttons: {
    "Ok": function() {
    $(this).dialog("close");
    }
    }

    });
    */
    $("#header").show();
    $('#header').jqxWindow('open');
    }
    });

    ACTION ERROR
    You must select a row to action!

    <!-- The buttons should go into the "Content"

    -->
    OK
    Cancel

    destroy window #6473

    mr_putersmit
    Participant

    The input tags for the ok and cancel buttons seem to have dissapeared?

    destroy window #6478

    Dimitar
    Participant

    Hi mr_putersmit,

    This topic shows how to format code when you post in the Forum: http://www.jqwidgets.com/community/topic/code-formatting

    Best Regards,
    Dimitar,

    jQWidgets Team,
    http://www.jqwidgets.com/

    destroy window #6483

    mr_putersmit
    Participant
    <div id="header">
    <div>ACTION ERROR</div>
    <div>You must select a row to action!
    <!-- The buttons should go into the "Content" <div> -->
    <button id="OK">OK</button>
    <button id="Cancel">Cancel</button>
    </div></div>
    destroy window #6484

    Dimitar
    Participant

    Hi mr_putersmit,

    I suggest you to see this demo: popupediting.htm. The demo shows how to show and hide jqxWindow on some user action. The issue in your code is that you try to open the jqxWindow when the jqxWindow’s element is clicked, but you Hide the jqxWindow’s element before that, but the code in the click handler will not be executed because it is not possible to Click something which is not visible.

    Best Regards,
    Dimitar,

    jQWidgets Team,
    http://www.jqwidgets.com/

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

You must be logged in to reply to this topic.