jQuery UI Widgets Forums Grid pop up window before refreshing page ?

This topic contains 3 replies, has 3 voices, and was last updated by  Dimitar 8 years ago.

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author

  • ashwin prabhu


    I have a grid data and i have save option to save the grid contents. I want to ensure that user remembers to save the grid data before refreshing or exiting the page. Is there a way i can show a popup giving them an alert on saving the grid data before refreshing or exiting ?

    I have the following code using javascript

    window.onbeforeunload = function() {
    				  return "Please ensure to save the file before exiting";

    This pop up is vague and different than the popups used in jqwidgets. i want to maintain consistency in my page. I have used popups using jqwidgets. Here is that code.

    // initialize the popup window and buttons.
    				width: 300,
    				resizable: false,
    				theme: theme,
    				isModal: true,
    				autoOpen: false,
    				modalOpacity: .3
    // open the popup window when the user clicks save button.
    var offset = \$("#jqxgrid").offset();
    								position: {
    									x: parseInt(offset.left) + 360,
    									y: parseInt(offset.top) + 60
    							// show the popup window.
    this is the html code. 
    <div id="popupWindow">
    		<div style="overflow: hidden;">
    				Save file

    The above code is for saving once user clicks save button. Is there a onbeforeunload kind of thing in jqwidgets ??


    Hi ashwin prabhu,

    Unfortunately, it does not seem to be possible to override the default onbeforeunload dialog. For more information, please refer to the following Stack Overflow answer: http://stackoverflow.com/a/276739.

    Best Regards,

    jQWidgets team


    i have tried to load a HTML page in popup using ng-include but it is not loading. that HTML page contain a calender of jqwidgets.here is the code.

    <script type=”text/javascript”>
    var app=angular.module(“myApp”,[“jqwidgets”]);
    app.controller(“calenderController”, function ($scope) {
    var dialog;
    $scope.dialogSettings = {
    created : function(args) {
    dialog = args.instance;
    resizable : false,
    position : {
    left : popup.offsetLeft + 300,
    top : popup.offsetTop
    width : 400,
    height : 300,
    autoOpen : false
    <body ng-app=”myApp” ng-controller=”calenderController”>
    <input type=”text”>
    <jqx-window jqx-on-close=”close()” jqx-create=”dialogSettings” jqx-settings=”dialogSettings”>
    <div id=”popup”>Edit Dialog</div>
    <div style=”overflow: hidden;”>
    <div ng-include=” ‘Calender.html’ “></div>


    Hi sudeep,

    We have a demo showcasing the ng-include directive you can see here: http://www.jqwidgets.com/jquery-widgets-demo/demos/angularjs-demos/nginclude.htm?light. If you are not able to resolve the issue, please share if there are any errors thrown in your browser’s console.

    Best Regards,

    jQWidgets team

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

You must be logged in to reply to this topic.