none
In SharePoint 2013,how to catch the selected item event of document library using Jquery if i select anywhere(FileName,Folder Image,Checkbox) in the file? RRS feed

  • Question

  • In SharePoint 2013,how to catch the selected item event of document library using Jquery if i select anywhere(FileName,Folder Image,Checkbox) in the file?

    I have a requirement like whenever i select an Folder, then i am able to show One field with custom button in that selected item row.

    Select item checkbox --> then show custom button with in the field .Deselect item checkbox then disable the custom button with field.

    Please help in finding this approach using jquery in sp2013 ?

    or suggest if any custom code with out Visual studio.

    Wednesday, July 25, 2018 1:34 PM

Answers

  • Hi,

    You can use the following script to capture the event when a list item is selected:

    <script src="http://code.jquery.com/jquery-1.11.2.min.js" type="text/javascript"></script>
    
    <script type="text/javascript">
    
        $(function () {
    
            $(".s4-itm-cbx").click(function(){
    
                alert("Test1");
    
            });
    
            $(".ms-vb-itmcbx").click(function(){
    
                alert("Test2");
    
            });
    
            $(".ms-listviewtable > tbody > tr").click(function(){
    
                alert("Test3");
    
            });      
    
        });  
    
    </script>


    For your requirement, you can add hidden buttons to each item row in list view using jQuery. Then display buttons for selected items.

    A demo:

    <script src="http://code.jquery.com/jquery-1.11.2.min.js" type="text/javascript"></script>
    
    <script type="text/javascript">
    
                _spBodyOnLoadFunctionNames.push("ready");
    
                function ready()
    
                {
    
                            // add hidden buttons at the end of each row
    
                            // Note: Change 'js-listviewthead-WPQ2' to your id of the list view web part element. Use F12 to check the id of the element.
    
                            var $t = $('#js-listviewthead-WPQ2').next().next().find('tr');
    
                            $t.each(function(){ 
    
                                        $(this).append("<input type='button' value='btn' style='display:none'/>");
    
                            });
    
                }
    
               
    
                //diplay button for selected item row
    
        $(function () {
    
            $(".s4-itm-cbx").click(function(){                                                                   
    
                                        var select = $(this).closest("tr").hasClass("s4-itm-selected");
    
                                        if(select){
    
                                                    //unselect item
    
                                                    $(this).closest("tr").find("input[value='btn']").css("display","none");
    
                                        }else{
    
                                                    //select item
    
                                                    $("input[value='btn']").css("display","none");
    
                                                    $(this).closest("tr").addClass("s4-itm-selected");
    
                                                    $(".s4-itm-selected").find("input[value='btn']").css("display","");
    
                                        }                                  
    
                                       
    
            });
    
                            $(".ms-vb-itmcbx").click(function(){          
    
                                        var select = $(this).closest("tr").hasClass("s4-itm-selected");
    
                                        if(select){
    
                                                    //unselect item
    
                                                    $(this).closest("tr").find("input[value='btn']").css("display","none");
    
                                        }else{
    
                                                    //select item
    
                                                    $("input[value='btn']").css("display","none");        
    
                                                    $(this).closest("tr").addClass("s4-itm-selected");
    
                                                    $(".s4-itm-selected").find("input[value='btn']").css("display","");
    
                                        }
    
                            });
    
            $(".ms-listviewtable > tbody > tr").click(function(){
    
                                        $("input[value='btn']").css("display","none");
    
                                        //select item
    
                                        $(this).closest("tr").find("input[value='btn']").css("display","");                                
    
            });
    
        });  
    
    </script>


    Best Regards,

    Linda Zhang


    Please remember to mark the replies as answers if they helped. If you have feedback for TechNet Subscriber Support, contact tnmff@microsoft.com.


    Click here to learn more. Visit the dedicated forum to share, explore and talk to experts about Microsoft Teams.

    • Marked as answer by sudhir muvva Friday, July 27, 2018 3:27 PM
    Thursday, July 26, 2018 9:42 AM
    Moderator