Redirecting to a different list view with a image button through JavaScript

Question

I want to upload a button image and when clicked I want it to be redirected to a different List view.

I used a JavaScript for a New List entry form using JavaScript

<a  href="javascript:(void SP.UI.ModalDialog.showModalDialog({title: &#39;New Form&#39;,showMaximized:false,url: &#39;../Lists/XYZForm/NewForm.aspx&#39;}));" target="_self"><img class="pic" alt="Leaver Form" src="http://XYZ/ABC/DE/FG%20Images/XYZForm.png" style="height: 30px; width: 140px"/> </a>

I used a Content Editor web part and supplied the link of the JavaScript.

I want to do the same for the List View.

I need help with the JavaScript Query to be used.

Answer 1

Add below script in content editor webpart (change your list view page url)

<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
<script type="text/javascript">    
    $(document).ready(function () {
        $("#btnGoToView").click(function () {
            window.location = "Your list view page URL";
        });        
    });
</script>
<img id="btnGoToView" src="images/image.jpg" alt="test image" height="42" width="42"/>

If there is any predefined image on page on which you want click event to redirect then find that image's id and replace it in code. Also remove image tag from above code if not needed.

Answer 2

Maybe I don't understand what you want to achieve, or maybe you are over-complicating things.

Create a list view.

Navigate to that list view and copy the URL.

Back on your original page, create the button and use a hyperlink to the list view URL you just copied.

Answer 3

Using JQuery + HTML:

 <button type="button" id="Nav">Navigate to list</button>

 var site = "*yourlisturlhere*"

 $('#Nav').click(function(){
      window.location.assign(site)
 })