How to run javascript code only when list item gets deleted?

Question

ANSWERED! See bottom of original question for the working answer.

I'm trying to find out how I can run a piece of JavaScript code the moment a list item gets deleted. So it should be some sort of script that runs on the page, and triggers when a user deletes an item from a list.

For example, this dummy code should somewhat tell you what I mean:

function doThisOnDelete() {
  if (action == delete) {
    alert('You just deleted a list item.');
  }
  else {
    do nothing
  }
} 

So on the line with "(action == delete)", it should be something that detect if a list item gets deleted.

Is there a way to check when a method is called (like the one that deletes list items)? And how can I find out what the name of that method would be?

My goal is to return to the previous page when an item gets deleted, or to prevent the page from going to the list and leave the page with the custom list view.

Any help is greatly appreciated!

Alternatively, I'm also open to the idea of using custom JavaScript code to delete a list item (based on the paragraph titled "Delete a file in a document library" from the MSDN site).
If I can manage to use a custom delete script in JavaScript, then I can perhaps prevent the user from automatically being redirected. If this is possible, then any suggestions and/or tips regarding this are welcome as well!

ANSWER

Inspired by Ecanem's answer, I wrote the following code. Against my expectations, it ended up being rather simple and short.

var ref = document.referrer;            // Stores the URL of the previous page.
var url = window.location.pathname;     // Stores the URL of the current page.

// The following code will run if the user edits a list item or properties of a document.
if (url.indexOf('EditForm.aspx') > -1) {
    sessionStorage.setItem("page", ref);
}

if (url.indexOf('AllItems.aspx') > -1 && ref.indexOf('EditForm.aspx') > -1) {
    window.location = sessionStorage.getItem("page");
}

It works like this: first we see if the current URL is "EditForm.aspx". If it is not, do nothing. If it is, then we save the URL of the previous page in the session.
If the URL of the current page is "AllItems.aspx" and the previous page was "EditForm.aspx", then this means that an item or document was deleted from the list or library by the user.

Since we want to prevent users from seeing the "AllItems.aspx" page and let them stay on the page with the list/library view, we will redirect them to the page we stored in the session.

The redirection is smooth and almost unnoticeable; the URL for "AllItems.aspx" may be present in the browser address bar for a short moment, but most users won't focus on the address bar and won't even know they have been redirected back to the original page.

There is, however, a very small issue.
When you log something to the console while using this code, you may get an error saying "Uncaught ReferenceError: Type is not defined" and then you won't be able to redirect back to the proper page (in my case, it ended up redirecting to a completely different page). But as long as you don't include "console.log();" in the code, you'll be just fine!

I also added the answer to my blog, you can find the post here.

Answer 1

So let's go with your first request.

You want a piece of code to run when a list item is deleted from a list but it has to be 100% javascript and there can't be any page postbacks.

Obviously we must assume the page is going to stay open the entire time.

You are left with using web services or CSOM to achieve this. My recommendation would be to use the Lists web service, all three options are going to rely on putting your function within a javascript setInterval of some period. This setInterval will call the web service on this interval you decide to look for changes.

1. Use the standard getListItems webservice with an array of ID's. On each function run, compare the old array to the new to see if there is an ID missing, that is the item that was deleted.
2. Use GetListItemChangesSinceToken, on your first and every subsequent call. This will give you the changes that occurred since the token was sent. A bonus of this function is you could store the token as a cookie and thus when the user came back to the page they could see the changes that occurred since they were last on the page.
3. Use GetListItemChanges. This is similar to the above but you are defining the time in which you want to receive the changes from.

As mentioned, for all of these, you would need to wrap them in a setInterval function and I would likely use SPServices to make the calls.

Answer 2

If you are using SharePoint 2013 you can use the client api and register event receivers remotely. E.g. SPRemoteItemEventProperties (http://msdn.microsoft.com/en-us/library/microsoft.sharepoint.client.eventreceivers.spremoteitemeventproperties.aspx). You can even use this api with your embedded javascript.

For SharePoint 2010 jQuery may help you to fiddle with changing standard behavior.

Answer 3

within your item deleted event reciver you can call the JS script. or better yet, all you seem todo is show that they have deleted an item? and then redirect back to previous page!

iv done somthing similar! but fully coded, including the creation of the list. once iv created the list i added a webpart that i created... it pure function is to simply redirect back to previous page:

public class httpRedirectHome : WebPart
{
    protected override void CreateChildControls()
    {
    }

    protected override void OnInit(EventArgs e)
    {

        changeRedirection(Page.Session["PreviousPageUrl"].ToString());
        base.OnInit(e);
    }

    private void changeRedirection(string url)
    {
        if (Page.Session["PreviousPageUrl"] != null)
        {
            Page.Response.Redirect(url);
        }
    }
}

I added that webpart to any list that i want to redirect back after any operation!

say for instance I Have a custom page, on the page load i would add the following:

Page.Session["PreviousPageUrl"] = SPContext.Current.Site.Url + "/mysite";

so on the page load the session varible that stores the url is saving the site to redirect when i navigate to the list!

going to the list iv deleted an item it will then redirect me back to the save url!

its basic and very simple but it works like a charm! You can still have a popup box to display on the custome page that an item has been deleted! todo this i would do:

public class httpRedirectHome : WebPart
{
    protected override void CreateChildControls()
    {
    }

    protected override void OnInit(EventArgs e)
    {

        changeRedirection(Page.Session["PreviousPageUrl"].ToString());
        base.OnInit(e);
    }

    private void changeRedirection(string url)
    {
        if (Page.Session["PreviousPageUrl"] != null)
        {
            Page.Response.Redirect(url);
            Page.Session["ItemDeleted"] = "true";
        }
    }
}

NOTE

in your case the code above does not need to be within a webpart, rather it would go within the item deleted event to redirect like so:

   public override void ItemDeleted(SPItemEventProperties properties)
   {
       base.ItemDeleted(properties);
       changeRedirection(Page.Session["PreviousPageUrl"].ToString());
   }

    private void changeRedirection(string url)
    {
        if (Page.Session["PreviousPageUrl"] != null)
        {
            Page.Response.Redirect(url);
            Page.Session["ItemDeleted"] = "true";
        }
    }

now to change the custom page to show the user that an item has been deleted after the redirect:

Page.Session["PreviousPageUrl"] = SPContext.Current.Site.Url + "/mysite";

if(Page.Session["ItemDeleted"] == "true")
{
     ClientScript.RegisterStartupScript(this.GetType(),"", "$(document).ready(function(){alert('You just deleted a list item.')});", true); 
}

there are many other ways of going about it, this is a simple method and works! so what would the user experience?

well when they delete an item it will reload the page sending you to the page that you came from or what ever the url you save and it will display a message indicating that an item was deleted.

Answer 4

I have done this kind of "hackery" before. I would recommend doing this only after all other options have failed. Here are the basic steps:

1) Include the JavaScript (which you want to load when the item gets deleted) in a js file. Lets call this FireOnDelete.js

2) Create a Module and using CustomActions and the ScriptLink attribute, include FireOnDelete.js in it. Here is how to do that: http://blog.voyta.net/2010/09/12/referencing-javascript-files-using-customaction-in-sharepoint-2010-sandboxed-solutions/

3) Create a Web level Feature and include the previously created module inside it. Do not activate this feature by default.

4) On your list, put an ItemDeleted event receiver and inside that, programmatically activate the feature which we created in step 3.

5) In FireOnDelete.js itself, you can write JSOM code to deactivate the feature so that the script will load on the page only once.

So the Flow will be:

Item Gets Deleted -> ItemDeleted EventReceiver fired -> Feature is Activated -> JavaScript is loaded on the page -> JS code is executed -> JS code deactivates feature using JSOM -> JS is not loaded on other pages.