jQuery UI Widgets › Forums › Layouts › Docking › Fire closewindow event
Tagged: docking, javascript docking, jquery docking
This topic contains 10 replies, has 3 voices, and was last updated by GDHafeleUK 12 years, 8 months ago.
-
AuthorFire closewindow event Posts
-
Hi,
Is it possible to get the id of the window that has been closed?
I have something like this
$(document).ready(function () {
$('#docking').bind('closeWindow', function (event) {
alert('Hello');
});
});
But when I click on a cross on a window this event does not fire.
Can you tell me where I am going wrong and point me in the right direction please?Thanks,
GDHi GD,
jqxDocking does not have a ‘closeWindow’ event. It has a method called ‘closeWindow’ which allows you to close a specific window by ID.
To trigger when a window is closed, subscribe to its ‘close’ event by doing this:$("#window1, #window2, #window3, #window4").bind('close', function (event) { alert('closed') });
Best Wishes,
Peter StoevjQWidgets Team
http://www.jqwidgets.comThanks,
I will have to do this in a loop as my windows are dynamic, so I won’t know how many are on screen.
I will give it a go.
Thanks,
GDHi,
How can I fix close window event, I have to close/remove window when user click on close icon (X). I have to fire some code that will update and remove closed window records from database, so next time when user refresh page he cannot see closed window. I tried both way as above. It did not work for below code as well.
$("#window1, #window2, #window3, #window4").bind('close', function (event) { alert('closed') });
Please advice.
-Thank you.
Hi WaveTeam,
The code:
$("#window1, #window2, #window3, #window4").bind('close', function (event) { alert('closed') });
works fine, if your window’s ids are window1, window2, window3 and window4. If you use different ids, select them with jQuery and bind to the ‘close’ event. In addition, the ‘close’ event is available in version 2.3.1. If you use older versions, please update your javascript files.
Best Wishes,
Peter StoevjQWidgets Team
http://www.jqwidgets.comHi Peter,
I have tested jquery ‘bind’ method with click event for one div – it working fine with my current jquery library, so it wont be issue. Also I am using same ids window1, window2…. to my window. but it did not work, I did not get any alert for above code. Please advice.
Thank you.
Hi WaveTeam,
I didn’t mean your jQuery library’s version. I meant the current version of jQWidgets which is 2.3.1. If you use older versions, it will not work as the ‘close’ event was added in a recent release.
Here’s a working sample with jQWidgets 2.3.1
<!DOCTYPE html><html lang="en"><head> <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" /> <script type="text/javascript" src="../../scripts/jquery-1.7.2.min.js"></script> <script type="text/javascript" src="../../scripts/gettheme.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/jqxdatetimeinput.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxcalendar.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxtooltip.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxtabs.js"></script> <script type="text/javascript" src="../../jqwidgets/globalization/jquery.global.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxdocking.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxpanel.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxsplitter.js"></script> <script type="text/javascript"> $(document).ready(function () { var source = [ 'JavaScript Certification - Welcome to our network', 'Business Challenges via Web take a part', 'jQWidgets better web, less time. Take a tour', 'Facebook - you have 7 new notifications', 'Twitter - John Doe is following you. Look at his profile', 'New videos, take a look at YouTube.com' ]; var theme = getTheme(); $('#docking').jqxDocking({ theme: theme, orientation: 'horizontal', width: 680, mode: 'docked' }); $('#docking').jqxDocking('disableWindowResize', 'window1'); $('#docking').jqxDocking('disableWindowResize', 'window2'); $('#docking').jqxDocking('disableWindowResize', 'window3'); $('#docking').jqxDocking('disableWindowResize', 'window4'); $('#calendar').jqxCalendar({ theme: theme, width: 180, height: 180 }); $('#newsTbs').jqxTabs({ theme: theme, width: 310, height: 181, selectedItem: 1 }); $('#listbox').jqxListBox({ source: source, theme: theme, width: 310, height: 181 }); $('#zodiak').jqxPanel({ theme: theme, width: 310, height: 180 }); $("#window1").bind('close', function () { alert('closed window 1') }); }); </script></head><body class='default'> <div id='jqxWidget'> <div id="docking"> <div> <div id="window1" style="height: 220px;"> <div> Date and Time</div> <div style="overflow: hidden;"> <div id="calendar" style="float: left; margin-right: 10px;"> </div> <h3 style="text-align: center; color: #787878;"> Sunny</h3> <div style="float: left; margin-left: 30px; text-align: center;"> <img src="../../images/sun-icon.png" alt="Sunny" /> </div> <div style="text-align: left; margin-left: 5px; margin-top: 10px; font-size: 10px; float: right; margin-right: 20px;"> Mo: 23 °C<br /> To 25 °C<br /> We: 27 °C </div> </div> </div> <div id="window2" style="height: 220px"> <div> News</div> <div style="overflow: hidden;"> <div id="newsTbs"> <ul style="margin-left: 30px"> <li>World</li> <li>Local</li> <li>Sports</li> </ul> <div> <div style="padding: 3px; margin: 10px; width: 150px; height: 84px; float: left;"> <img src="../../images/news_ie6.jpg" alt="IE6" title="IE6" /> </div> <span style="font-size: 11px;">Microsoft is set to get a little more pushy ensuring you have an up-to-date browser and will automatically update Internet Explorer... <span style="font-size: 8px;">(BBC)</span> </span> </div> <div> <div style="padding: 3px; margin: 10px; width: 144px; height: 81px; float: left;"> <img src="../../images/local.jpg" alt="Tennis" title="Tennis" /> </div> <span style="font-size: 11px;">The High Court has dismissed a challenge to laws that require immigrant spouses to be able to speak English in order to live in the UK... <span style="font-size: 8px;">(BBC)</span> </span> </div> <div> <div style="padding: 3px; margin: 10px; width: 130px; height: 73px; float: left;"> <img src="../../images/tennis.jpg" alt="Tennis" title="Tennis" /> </div> <span style="font-size: 11px;">British number one Elena Baltacha says Judy Murray is a "fantastic" appointment as Great Britain's new Fed Cup captain... <span style="font-size: 8px;"> (BBC)</span> </span> </div> </div> </div> </div> </div> <div> <div id="window3" style="height: 220px"> <div> Zodiac</div> <div style="overflow: hidden;"> <div id="zodiak"> <div style="padding: 3px; width: 150px; height: 110px; float: left; margin: 10px;"> <img src="../../images/leo.jpg" alt="Leo" title="Leo" /> </div> <h3 style="text-align: center; color: #787878;"> Leo</h3> <span style="font-size: 11px">Individuals born under the zodiac sign of Leo are very good looking and have a healthy physique, with a broad forehead. Leo are very intelligent, extremely courageous, love their freedom and live by their own rules. Indulgence and extravagance is like second nature to them and they love to... </span> </div> </div> </div> <div id="window4" style="height: 220px;"> <div> E-mail</div> <div style="overflow: hidden;"> <div id="listbox"> </div> </div> </div> </div> </div> </div></body></html>
Best Wishes,
Peter StoevjQWidgets Team
http://www.jqwidgets.comHi Peter,
Thank you for your quick response. It is working now.
So ‘close’ just sets the panel’s visibility to none?
I’m trying to save the layout to a database and on close event in the callback function I’m trying to export the layout with exportLayout, but the layout in effect hasn’t changed!$(document).ready(function () {
@: $(‘#@item.Sequence’).bind(‘close’, function (event) {
@: DeleteWidget(‘@item.WidgetID’);
@: });The deletewidget uses ajax to call a function on the server to delete the actual widget from my database, all works fine.
The problem is in the else condition as the exportLayout is still the same, after deleting the widget, I need the page to update without the deleted widget, any ideas?
function DeleteWidget(widgetID) {
$.ajax({
type: 'post',
url: "Home/DeleteWidget",
dataType: 'json',
data: { widgetID: widgetID},
cache: false,
success: function (data)
{
if(data.KPI == null)
{
$('#jqxWidget').empty();
$('#noKPI').prepend('You do not have any KPIs set up. Please choose some KPIs from the list below.');
}
else
{
var data = $('#docking').jqxDocking('exportLayout');}
}
});
}Hi,
I am trying to get exportLayout after deleting window but yes.. I did not get updated json (updated with removing deleted window).
thanks
Hi,
I worked out what I needed to do and that was to remove the hidden div with something like
$('#divid').detach();
This updated the html to remove the deleted window. I then did the following
var data = $('#docking').jqxDocking('exportLayout');
$.ajax({
type: 'post',
url: "Home/SaveData",
dataType: 'json',
data: { layout: data},
cache: false,
success: function () {
}
});
And that passed back the updated JSON to my controller code. -
AuthorPosts
You must be logged in to reply to this topic.