Get selected items from JavaScript in the document library view

Question

I have a page in which I have placed XsltListView web part to show the view of the picture library.

Above that view I have placed a link using Content Editor Web Part which redirects to other web page with the query string parameter.

The function of OnClick event of the link in Content Editor Webpart is defined in the separate JavaScript file in Style Library.

I want to get selected item ids in the JavaScript and send it as query string parameters to the other page.

HTML tag in the content editor web part is:

<a onclick="redirectToDownloadsPage()" href="#"> Download Images </a>   

The function which is in separate JavaScript file is:

function redirectToDownloadsPage() {

    var ctx = SP.ClientContext.get_current();
    var items = SP.ListOperation.Selection.getSelectedItems(ctx);
    var myItems = '';
    var i;

    for (i in items) {
        myItems += '|' + items[i].id;
    }

    if (myItems) {        
        var siteUrl = url = window.location.protocol + "//" + window.location.host + _spPageContextInfo.siteServerRelativeUrl + "/_layouts/15/DownloadImages.aspx?Items=" + myItems;        
        window.location.href = siteUrl
    }
    else {
        alert("Select atleast one item");
    }
}

My problem is that if I place the above script in Content Editor Web part, it works fine, but if put it in the other JavaScript file and load in the page then its not working.

I am getting items blank, i.e. there is not value fetched in the items.

What am I missing?

Answer 1

Here is what I would do to debug and find the root cause:

• Open the page in Firefox (suggestion, it can be any browser with a JS console, I usually use Firebug)
• Open the Console
• Manually call the function in the Console:

SP.ListOperation.Selection.getSelectedItems(SP.ClientContext.get_current())

• Check if any value is returned
• If there is no value, my suggestion would be to wrap the whole function in ExecuteOrDelayUntilScriptLoaded (as maybe SP.js isn't loaded for some reason): ExecuteOrDelayUntilScriptLoaded with sp.js when in debug mode Object Expected
• If there is a value, then the problem relies in other parts of your function
• Continue by typing redirectToDownloadsPage (no parenthesis, just to see if the function exists)
• Is the function registered on the client side?
• If it is, call it by doing redirectToDownloadsPage()
• Does it work now?

https://developer.mozilla.org/en-US/docs/Debugging_JavaScript

Answer 2

How about calling function after some time delay.

You can use two method of time event in javascript.i.e.

setInterval(): executes a function, over and over again, at specified time intervals setTimeout() : executes a function, once, after waiting a specified number of milliseconds

If you use siteTimeout then you can delay calling execution by certain time.

Answer 3

Have you tried to make sure that your code run after the sp.js loaded? Such as:

function redirectToDownloadsPage() {
    SP.SOD.executeFunc('sp.js', 'SP.ClientContext', function () {
        var ctx = SP.ClientContext.get_current();
        var items = SP.ListOperation.Selection.getSelectedItems(ctx);
        var myItems = '';
        var i;

        for (i in items) {
            myItems += '|' + items[i].id;
        }

        if (myItems) {        
            var siteUrl = url = window.location.protocol + "//" +         
            window.location.host + _spPageContextInfo.siteServerRelativeUrl + "/_layouts/15/DownloadImages.aspx?Items=" + myItems;        
            window.location.href = siteUrl
        }
        else {
            alert("Select atleast one item");
        }
    });
}

Answer 4

Check this code I've used in another answer:

$(document).ready(function() {
    getProjects();

});

function getProjects() {      
    alert("get items");      
    var clientContext = SP.ClientContext.get_current(); 
    var oList = clientContext.get_web().get_lists().getByTitle('ProjectProfile');
    var camlQuery = new SP.CamlQuery();
    camlQuery.set_viewXml('1');    
    this.collListItem = oList.getItems(camlQuery);   
    clientContext.load(collListItem, 'Include(ID, Project, ProjectName, Active, Created)');
    clientContext.executeQueryAsync(Function.createDelegate(this, this.onQuerySucceeded), Function.createDelegate(this, this.onQueryFailed));
}

function onQuerySucceeded(sender, args) {   
    alert("SUCCESS");
    var listItemInfo = '';
    var listItemEnumerator = collListItem.getEnumerator();        
    while (listItemEnumerator.moveNext()) {
        var oListItem = listItemEnumerator.get_current();

        var iden = oListItem.get_item("ID");
        alert("id: " + iden);           
        var proyecto = oListItem.get_item("Project");
        alert("proyecto: " + proyecto);

        var nombre = oListItem.get_item("ProjectName");
        alert("name: " + nombre);

        var activo = oListItem.get_item("Active");
        alert("active: " + activo);

    }       
    alert("FIN");
}

function onQueryFailed(sender, args) {
    alert("FAIL");
    alert('Cannot: ' + args.get_message() + '\n' + args.get_stackTrace());
}

It's more safe to manipulate your page, once the entire page (images or iframes), not just the DOM is ready, that's the reason for starting with the first method:

$(document).ready(...)

Remember to add the script tags for the following libraries:

• /_layouts/15/MicrosoftAjax.js

• /_layouts/15/sp.runtime.js

• /_layouts/15/sp.js