Guriddo » Topic: Lock edit form on submit

Lock edit form on submit

Guriddo
jqgrid edit
Lock edit form on submit

Tagged: jqgrid edit

This topic has 3 replies, 2 voices, and was last updated 10 years, 1 month ago by busko1@gmail.com.

Creator

Topic
March 6, 2016 at 10:12 pm #124937
busko1@gmail.com
Participant
Hi dear jqGrid experts,

I try to find very obvious thing like disabling form contols on submit event with no luck 🙁

Scenario is simple:
1. I am using standard build-in jqGrid edit form to add/edit/delete rows
2. I fill data on form and then press submit
3. Data is sent to server, it takes some time
4. Form is still active!!! Form controls are editable, buttons are not disables, while I am waiting for server work.
Is there simple way to at least disable form while server is working? This functionality looks obvious for me. I believe it is implemented by default but I cant find proper way to activate it.

May be there is a way to show also some “in progress” message during server is working? Something that indicates that system is working 🙂

I am using latest jqgrid version

Thanks in advance.

Best Regards,

Eugene.
- This topic was modified 10 years, 1 month ago by busko1@gmail.com.
Creator

Topic

Viewing 3 replies - 1 through 3 (of 3 total)

Author

Replies

March 7, 2016 at 12:43 pm #124939

guriddo.support

Participant

Hello,

In current implementation you can edit form while posing to the server, but the Submit button is disabled so that instead of changes the user can not click the submit.

To add a visual implementation of processing you can use two events by example onclickSubmit and afterComplete to init the ajax working message and hide them after the request is completed.

Suppose you have added a html in your page like this:

&lt;div id=&#039;loadingmessage&#039; style=&#039;display:none&#039;&gt;
  &lt;img src=&#039;loadinggraphic.gif&#039;/&gt;
&lt;/div&gt;

</div>

Then you can do

$(&quot;#grid&quot;).navGrid(&#039;#pager&#039;, 
 {...}, //params
 {  // edit
     onclickSubmit : function() {
        $(&#039;#loadingmessage&#039;).show();
     }, 
     afterComplete : function() {
        $(&#039;#loadingmessage&#039;).hide();
     }
 } ,
 { ... }  // do the same for add
})

$("#grid").navGrid('#pager',

{...}, //params

{ // edit

onclickSubmit : function() {

$('#loadingmessage').show();

afterComplete : function() {

$('#loadingmessage').hide();

}

} ,

{ ... } // do the same for add

})

You can add and position the loading div where you want – in the body or in the form..

Hope this help

Kind Regards
Will

Guriddo Support Team

March 7, 2016 at 1:05 pm #124941

guriddo.support

Participant

Hello,

Addition to the previous post is using a error function in case the request fail. So the final code is:


$(&quot;#grid&quot;).navGrid(&#039;#pager&#039;, 
 {...}, //params
 {  // edit
     onclickSubmit : function() {
        $(&#039;#loadingmessage&#039;).show();
     }, 
     afterComplete : function() {
        $(&#039;#loadingmessage&#039;).hide();
     },
     errorTextFormat: function (data) { 
        $(&#039;#loadingmessage&#039;).hide();
        return &#039;Error: &#039; + data.responseText; 
     }
 } ,
 { ... }  // do the same for add
})

$("#grid").navGrid('#pager',

{...}, //params

{ // edit

onclickSubmit : function() {

$('#loadingmessage').show();

afterComplete : function() {

$('#loadingmessage').hide();

errorTextFormat: function (data) {

$('#loadingmessage').hide();

return 'Error: ' + data.responseText;

}

} ,

{ ... } // do the same for add

})

Guriddo Support Team

March 9, 2016 at 11:28 am #124943

busko1@gmail.com

Participant

Thanks for the help!!!

Beats Regards,

Eugene.

Author

Replies

Viewing 3 replies - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.

Stay connected with us in your favorite flavor!

Lock edit form on submit

Search Forum

Recent Replies

Forum Statistics

UserOnline