jqgrid disable all controls and close form after delay

Question

I have a modal edit dialog in my jqgrid. After submit I display an success/error message to the user and then after a delay I make the error message dissapper.

         afterSubmit: function (response, postdata) {
             if(response.status == 200){ 
                  //---how to disable all controls here--------------------
                  $(".topinfo").html("<span style='color: green;font-weight: bold;'>Updates saved.</span>"); 
                  var tinfoel = $(".tinfo").show();
                  tinfoel.delay(5000).fadeOut();
                  //---how to hide modal dialog here---------------------------
                  return [true,''];
            } else {
                  return [false,"<span style='color: red;font-weight: bold;'>An error occurred whilst attempting to save.</span>"];
            }
        }

What I would like to do is to disable all controls in the edit dialog as soon as I know the update was siccessful and then after the delay in addition to making the success message disappear I want to make the edit dialog dissappear.

Can someone help me with how to do this please?

thanks

score 1 · Accepted Answer · edited May 23 '17 at 12:27

1

I don't think that the else part of if(response.status) will ever work. It could work only in case of not real error. For example if the status code will be 201 (Created), 304 (Not Modified) and so on. In case of real error status code (400 and higher) the errorTextFormat callback will be called instead.

Now back to your main question. To hide Add/Edit dialog ine should add the following lines after tinfoel.delay(5000).fadeOut();:

var formSelector = "#editmod" + $.jgrid.jqID(this.id),
    gboxSelector = "#gbox_" + $.jgrid.jqID(this.id);

setTimeout (function () {
    $.jgrid.hideModal(formSelector, {gb: gboxSelector, jqm: true});
    $(formSelector).remove();
}, 6000);

I don't full understand what you mean under "to disable all controls in the edit dialog". It could be that some controls need be disabled or destroyed in a special way, but you should know which controls you use and to call the corresponding methods of the corresponding controls.

To remove (to destroy) the Add/Edit form it's enough to execute additional line $(formSelector).remove(); after calling of $.jgrid.hideModal.

See the demo

UPDATED: The answer described how to disable all fields of Add/Edit form. The modified demo uses the same code. After the user clicks "Submit" button all will be disabled:

enter image description here

edited May 23 '17 at 12:27

Community

1
1

answered Nov 22 '14 at 14:17

Oleg

220,925
34
403
798

I am using a lower version of jquery than you are (1.7) and am getting "$.jgrid.hideModal is not a function". Is this to do with my version? Is there anyway if that's the case? thanks – Richie Nov 22 '14 at 22:20
@Richie: `$.jgrid.hideModal` is a part of jqGrid. If you use `jquery.jqGrid.src.js` you will find it's definition in the line 5831 (see [here](https://github.com/tonytomov/jqGrid/blob/v4.6.0/js/grid.common.js#L22) too). I have no idea why it's not a function in your code. – Oleg Nov 22 '14 at 23:22
I've found out why. You are using jqgrid 4.6.0. I am using jqgrid 3.7.2. Comparing the modules they look very different. I don't think 3.7.2 has jquery.jqGrid.src.js. I'm going to try and upgrade to 4.6.0. – Richie Nov 23 '14 at 00:34
Do you know if 4.6.0 is compatiable with jquery 1.7.1? – Richie Nov 23 '14 at 00:39
@Richie: I strictly recommend you to update jqGrid version. Version 3.7.2 is more as 4 years old. By the way it has **global** `hideModal` function. So in jqGrid 3.7.2 the method `$.jgrid.hideModal` should be replaced to `hideModal`. As I know jqGrid 4.6.0 should work with jQuery 1.7.2 and probably with 1.7.1 too. In any way it's not tested with such old versions of jQuery. If you want that your code works in modern versions of web browsers I'd recommend you to use current versions of jQuery, jQuery UI and jqGrid. – Oleg Nov 23 '14 at 00:39
thanks for you advice. I took it and have upgraded to 4.6.0 and guess what. It works with 1.7.1. After doing that U tried your suggested solution and it worked!! ($.jgrid.hideModal...). In regards to my question about disabling the controls on the edit form. Along with the success message of the update I just wanted all the inputs on the form to be disabled to show that the field values have been saved and the user can no longer edit. Something like $("#note").attr("disabled","disabled"); however when I tried that it doesn't seem to work. – Richie Nov 23 '14 at 03:10
1

@Richie: You are welcome! I posted in [the answer](http://stackoverflow.com/a/20498576/315935) how to disable all fields of Add/Edit form. [The demo](http://www.ok-soft-gmbh.com/jqGrid/closeEditForm1.htm) in modified version of previously posted demo which uses the same code. – Oleg Nov 23 '14 at 10:08

jqgrid disable all controls and close form after delay

1 Answers1