0

QUESTION: The filter on the WP Page will not work. It should be filtering from the 'view' column.The view column is a calculated column, which derives its value from another column called 'Status'. The issue seems to be in a calculated js column I have called 'cmd', which changes the value of 'Status' when pressed. Below are an explanation of the (3) columns.

I am aware that the 'cmd' column is clashing with the filter script on my WP Page, but I don't know why.

The filter on the WP Page works when I remove the cmd column from the list view. I'd like to integrate both into the List View. I've attached all of the components. Does anyone know how I can amend this, please? screenshot of it NOT working[screenshot of it working WITHOUT the cmd column

Column 1: cmd

Type: Calculated Column

Formula:

="<div style=""display:inline-flex;"">"&"<button style=""float:left;"&"cursor:pointer;width:75px;"&"background:"&"#FFE5E5"&";"" "&"onclick=""{event.stopPropagation();"&"this.parentNode.parentNode.parentNode.parentNode.style.backgroundColor=this.style.background;"&"var C=SP.ClientContext.get_current(),"&"I=C.get_web().get_lists().getById(SP.ListOperation.Selection.getSelectedList()).getItemById("&"this.parentNode.parentNode.parentNode.parentNode.id.split(',')[1]"&");"&"C.load(I);"&"I.set_item('Status',this.innerHTML);"&"I.update();"&"C.executeQueryAsync();"&"return false;}"""&">(1) Unread</button>"&"<button style=""float:left;"&"cursor:pointer;width:75px;"&"background:"&"#B0E0E6"&";"" "&"onclick=""{event.stopPropagation();"&"this.parentNode.parentNode.parentNode.parentNode.style.backgroundColor=this.style.background;"&"var C=SP.ClientContext.get_current(),"&"I=C.get_web().get_lists().getById(SP.ListOperation.Selection.getSelectedList()).getItemById("&"this.parentNode.parentNode.parentNode.parentNode.id.split(',')[1]"&");"&"C.load(I);"&"I.set_item('Status',this.innerHTML);"&"I.update();"&"C.executeQueryAsync();"&"return false;}"""&">(2) Mark as Read</button>"&"<button style=""float:left;"&"cursor:pointer;width:75px;"&"background:"&"#F5DEB3"&";"" "&"onclick=""{event.stopPropagation();"&"this.parentNode.parentNode.parentNode.parentNode.style.backgroundColor=this.style.background;"&"var C=SP.ClientContext.get_current(),"&"I=C.get_web().get_lists().getById(SP.ListOperation.Selection.getSelectedList()).getItemById("&"this.parentNode.parentNode.parentNode.parentNode.id.split(',')[1]"&");"&"C.load(I);"&"I.set_item('Status',this.innerHTML);"&"I.update();"&"C.executeQueryAsync();"&"return false;}"""&">(3) Save</button>"&"</div>"&"<img src=/_layouts/images/blank.gif onload=""{"&"this.parentNode.parentNode.parentNode.style.backgroundColor="&CHAR(39)&CHOOSE(RIGHT(LEFT(Status,2),1),"#FFE5E5","#B0E0E6","#F5DEB3")&CHAR(39)&"}"">"

Column 2: Status

Type: Choice Column

Values:

  • (1) Unread
  • (2) Mark as Read
  • (3) Save)

Column Name: View

Type: Calculated

=IF(Status="(1) Unread","Unread","")&
IF(Status="(2) Mark as Read","Mark as Read","")&
IF(Status="(3) Save","Save","")

This is the script I've created and pasted into A SINGLE script editor on my WP Page.

<!doctype html>
<html lang="en">
<head>  
  <script src="http://code.jquery.com/jquery-1.11.0.min.js"     type="text/javascript"></script>
  <link rel="stylesheet" href="/SiteAssets/css/chosen.css">
  <link rel="stylesheet" href="/SiteAssets/css/prism.css">
  <script src="/SiteAssets/js/prism.js" type="text/javascript"></script>
  <script src="/SiteAssets/js/chosen.jquery.min.js" type="text/javascript"     charset="utf-8"></script>

  <style type="text/css" media="all">
    /* fix rtl for demo */
    .chosen-rtl .chosen-drop { left: -9000px; }
  </style>

  <script type="text/javascript">
      $(document).ready(function () {
          //Resize all the filter boxes
          $('.filter-box').css({ "width": "250px" });
          //This function does the filtering of the list view.
          function filterList(value)
          {
              $dataCell = $(".ms-itmhover:not(:contains('" + value + "'))");
             $dataCell.hide(500);
          }

          //Filter list based on 'view' column
          $('.view-filter').chosen().change(function () {
              //Get value for button clicked
              var value = $(".view-filter option:selected").text();
              filterList(value);
          });

      });

          $('.resetFilter').click(function () {
              //Show all items, clear all filters.
              $(".ms-itmhover").show(1000);
              $(".view-filter option:selected").removeAttr('selected');
              $(".view-filter").trigger("chosen:updated");

          });

    });
  </script>
  </head>
  <body>
         <div>
         <select data-placeholder="Select One..." class="view-filter filter-    box" tabindex="2">
            <option value=""></option>
            <option>Unread</option>
            <option>Mark as Read</option>
            <option>Save</option>
          </select>


        <input class="resetFilter" type="button" value="Reset Filters">    </input>
        </div>
</body>
</html>
  • Are you getting javascript errors? – jpollar Jan 13 '16 at 21:25
  • Nope. There are no errors in the debugger or in DOM explorer (this is actually a first for me). – TheJDScott Jan 13 '16 at 22:11

Your Answer

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

Browse other questions tagged or ask your own question.