JavaScript - how to get file id attribute of more than 1 files?

Question

I have a simple JavaScript function that I wrote:

function fireGENURL(a){
    try{

        var selectedFiles = $('.fileCheck:checked');
        if(selectedFiles.length < 1 ){
            alert("Please select at least one file.");
            return false;
        }

        var fileID = $(selectedFiles[0]).attr('fileid');

      /*  var $fileChecks = $('.fileCheck:checked');
        $fileChecks.each(function() {
            var file = $(this).attr('fileid');
            alert(file+"has been selected");
        });
        var count = $fileChecks.length;*/



        $('body').pWin("open", {
            x: 260,
            y: 47,
            height: 450,
            width: 881,
            title: "Generate URL",
            skinMode:'dialog',
            iframe:true,
            url: "file/url/genurl.jsp",
            data: {

            nodeID:fileID

            },
            offResize:true,
            offMove:true,
            onTitle:false,
            offBottom:true
        });



    }catch(e)
    {
        alert(e);
    }


}

When I checked on tick box on any files and fire the GENURL button, the function above is called. Below is a screenshot of my screen:

And it calls genurl.jsp which retrives the fileID of the ticked checkbox.

GENURL.JSP:

  <%

    //grabs the file id of each file
    long nodeID = Long.parseLong(request.getParameter("nodeID"));





        //need to input logic to populate data on each row
        int count = 0;

        List files = fileFacade.list_items(nodeID);
        for (Iterator rstltr = files.iterator(); rstltr.hasNext();) {
            Fmedia fv = (Fmedia) rstltr.next();
            Node nd = nodeFacade.get(fv.getNodeid(), false);
           // Fmedia fm = fileFacade.get_file(fv.getNodeid());


            count++;




    %>

        <tbody>
        <tr>
            <td width="5%">
    <!-- Checkbox   -->
                <input type="checkbox" name="name1" />&nbsp;
            </td>

            <td>

                <!-- No   -->

            </td>
            <td width="28%">

                <!-- Filename   -->
                <%=nd.getNodedesc()%>
            </td>


        </tr>

        </tbody>


    <%}
    %>

As you can see nd.getNodedesc will return the file name and populate my jsp page table.

Anyway, it works if I checked one box and populate the table but how do I make it retrieve multiple file ID's if ticked more than once and populate the table?

I know this line var fileID = $(selectedFiles[0]).attr('fileid'); only retrieves one file ID but I can't figure how to get multiple files to pass it to the JSP page.

Edit

In my JavaScript function, under the code that is commented out, that snippet is able to retrieve multiple file id but it's unable to pass the value to data.

function fireGENURL(a){
    try{

        var selectedFiles = $('.fileCheck:checked');
        if(selectedFiles.length < 1 ){
            alert("Please select at least one file.");
            return false;
        }

        cutFiles = new Object();

        var count = 0;
        for(var file in selectedItems){
            var fileID = file.substring(0);

            // post each selected fileID
            cutFiles['fileID' + count] = fileID;
            count += 1;
            alert(fileID +" has been selected");
        }




       // var fileID = $(selectedFiles[0]).attr('fileid');

      /*  var $fileChecks = $('.fileCheck:checked');
        $fileChecks.each(function() {
            var file = $(this).attr('fileid');
            alert(file+"has been selected");
        });
        var count = $fileChecks.length;*/



        $('body').pWin("open", {
            x: 260,
            y: 47,
            height: 450,
            width: 881,
            title: "Generate URL",
            skinMode:'dialog',
            iframe:true,
            url: "file/url/genurl.jsp",
            data: {

            nodeID:fileID

            },
            offResize:true,
            offMove:true,
            onTitle:false,
            offBottom:true
        });



    }catch(e)
    {
        alert(e);
    }


}

Edit 4

 String[] split = request.getParameter("nodeID").split(",",0);
 for(int i=0;i<split.length;i++){

     long file=Long.parseLong(split[i]);

 }

Answer 1

Only way how you can pass array via HTML GET in JS using single data variable that I know, is to somehow stringify it:

var selectedFiles = [];
$('.fileCheck:checked').each(function() { selectedFiles.push($(this).attr('fileid')); });
var stringArray = JSON.stringify(selectedFiles);

$('body').pWin("open", {
            x: 260,
            y: 47,
            height: 450,
            width: 881,
            title: "Generate URL",
            skinMode:'dialog',
            iframe:true,
            url: "file/url/genurl.jsp",
            data: {

            nodeID:stringArray 

            },
            offResize:true,
            offMove:true,
            onTitle:false,
            offBottom:true
        });

This will send a string that can be parsed into array with:

JSON.parse(request.getParameter("nodeID"));

See Fiddle example what output does it produce.

https://jsfiddle.net/h3Legzt6/1/

EDIT:

There are some limitations tho: What is the maximum length of a URL in different browsers?

Other way how to do it is using local storage:

localStorage.setItem('IDs', JSON.stringify(selectedFiles));

and

JSON.parse(localStorage.getItem('IDs'));

This also has limitations but is limited to much more space, based on a browser default settings. Unfortunately this space is not guaranteed as users can configure how much space can localStorage take. What is the max size of localStorage values?

Also, be careful as mutiple tabs can interfere with this storage and including some call identification in storage name, unique for each tab name would be a good idea and provding this unique ID to JSP so it will be able to find it.

EDIT2:

To implement it into your code this should do:

function fireGENURL(a){
    try{

        var selectedFiles = $('.fileCheck:checked');
        if(selectedFiles.length < 1 ){
            alert("Please select at least one file.");
            return false;
        }

        var filesList = [];
        var $fileChecks = $('.fileCheck:checked');
        $fileChecks.each(function() {
            filesList.push($(this).attr('fileid'));
        });
        var count = $fileChecks.length;
        var stringArray = JSON.stringify(filesList);



        $('body').pWin("open", {
            x: 260,
            y: 47,
            height: 450,
            width: 881,
            title: "Generate URL",
            skinMode:'dialog',
            iframe:true,
            url: "file/url/genurl.jsp",
            data: {

            nodeID:stringArray

            },
            offResize:true,
            offMove:true,
            onTitle:false,
            offBottom:true
        });



    }catch(e)
    {
        alert(e);
    }


}

EDIT 3:

As per comments, it is also possible to generate a string of delimited numbers (ex.: 123,234) and split them in JSP and convert them to Long in loop.

EDIT 4:

This is just an attempt and syntax might be wrong, you got it almost there I think. You split, loop trough it and convert to Long and this long can be used with the rest of the code:

<%

    String[] split = request.getParameter("nodeID").split(",",0);
     for(int i=0;i<split.length;i++){

         long file=Long.parseLong(split[i]);

        //need to input logic to populate data on each row
        int count = 0;

        List files = fileFacade.list_items(file);
        for (Iterator rstltr = files.iterator(); rstltr.hasNext();) {
            Fmedia fv = (Fmedia) rstltr.next();
            Node nd = nodeFacade.get(fv.getNodeid(), false);
           // Fmedia fm = fileFacade.get_file(fv.getNodeid());


            count++;




    %>

        <tbody>
        <tr>
            <td width="5%">
    <!-- Checkbox   -->
                <input type="checkbox" name="name1" />&nbsp;
            </td>

            <td>

                <!-- No   -->

            </td>
            <td width="28%">

                <!-- Filename   -->
                <%=nd.getNodedesc()%>
            </td>


        </tr>

        </tbody>


    <%}}
    %>