Tuesday, July 17, 2012

Disable OK button in SharePoint using jQuery

Hi All,

It is really funny but today I come to know the real power of jquery. I know that jQuery is real cool dude in web world. However when I applied some stuff, it got my relief because it solved my two problems.

When you want to disable OK button in NewForm, Editform of list or document library in SharePoint, you can achieve this with the help of jQuery and it helps a lot. Let us say that you have some requirement like if status is suspended then nobody should be allowed to make any changes in the status field.

Let us add complexity to this. We have attached a workflow that triggers on update. Now the problem with SharePoint is even though nothing is updated, then also it triggers the workflow. So if you do not disable OK button and you go and click on edit item. And then when you do not update anything, click on OK. Boom...workflow triggers. Man…I don’t like this.

Here comes jQuery to save us. Disable the status and disable OK button. That will solve the purpose.

What do you need to do? Well, I have created dummy list to demonstrate this.

I have few fields and one of them is status. Statuses are New, In Progress, Archived and suspended.

When the status is suspended, I do not want to allow any of the users to change the status and also there is workflow attached to this list which triggers if we update any item. Workflow is attached from the SharePoint designer. Hence we are even not writing a code in event handler to check for the item has changed or not in ItemAdding event.

So write down this jQuery in content editor web part. Just add CEWP on top with appending &toolpaneview=2 to the URL.

Add following code to the content editor web part. If you observe we have taken reference of jquery from shared document. You can download the jQuery and then give href to the document library path. What we have done in this jQuery is simply finding all drop downs and then checking its value. If it’s suspended, then we are again checking button OK by its class and once found, we are disabling the button. Hummm…Easy ha? Yes it is.



And see the result.



Get ready for some more exciting stuff with jQuery.

No comments:

Post a Comment