jQuery UI Widgets › Forums › Dialogs and Notifications › Window › destroy window
This topic contains 11 replies, has 2 voices, and was last updated by Dimitar 12 years, 8 months ago.
-
Authordestroy window Posts
-
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
Any help with this please? Thanks
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/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: trueHello 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/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
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/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 ERRORYou must select a row to action!<!-- The buttons should go into the "Content"
-->
OK
CancelThe input tags for the ok and cancel buttons seem to have dissapeared?
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/<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>
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/ -
AuthorPosts
You must be logged in to reply to this topic.