jQuery not working on 2nd page of SharePoint list

Question

On our SharePoint list, we have anchor tags opening in a new window via:

<script type="text/javascript" src="/SiteAssets/jquery-latest.min.js"></script>

    <script type="text/javascript">
    $(function() {
        var $t = $("table.ms-listviewtable>tbody tr td:nth-child(4) a");

        var interval = setInterval(function() {
            $t.each(function(){
              $(this).attr("target", "_blank");
            });
        }, 1000);
    });
</script>

When you hit page 2 in the list, the anchor tags open in the same window, and via "Inspect Element" do not contain the "target="_blank" like on the first page.

The jQuery code above is in a CEWP which points to a .txt file containing the code via CEWP property of "Content Link :: To link to a text file, type a URL."

I can't figure out why 2nd page is causing this issue. If I go back to 1st page, from 2nd page, the jQuery doesn't work either. In the query string, the URL has appended "?PageView=Shared&InitialTabId=Ribbon.WebPartPage&VisibilityContext=WSSWebPartPage#I"

If I take this string noted above off the end of the URL, and the view name is the last thing in the URL (viewname.aspx), the jQuery works on page 1.

---

04.21.15 using this now as working solution:

   $(function() {
        var $t;

        var interval = setInterval(function() {
            $t = $("table.ms-listviewtable>tbody tr td:nth-child(4) a");

            $t.each(function(){
              $(this).attr("target", "_blank");
            });
        }, 1000);
    });

Answer 1

I wonder if SharePoint's default client side rendering could be taking effect and rendering over your changes after you have applied them ?

At a minimum it might make a difference if your CEWP is above or below the listview web part ? Also do you need to call jQuery(document).ready() ?

eg. (I have not tested this...)

<script type="text/javascript" src="/SiteAssets/jquery-latest.min.js"></script>

<script type="text/javascript">
jQuery(document).ready(function() {
    var $t = $("table.ms-listviewtable>tbody tr td:nth-child(4) a");

    var interval = setInterval(function() {
        $t.each(function(){
          $(this).attr("target", "_blank");
        });
    }, 1000);
});
</script>

It looks like you are trying to modify a column of existing hyperlinks ?

You might try doing this with a CSR javascript.

I have an example posted here Do not apply CSR Override in QuickEdit Mode which you could modify. Happy to help if you decide to go this way and get stuck.

You would create the simple js file and upload it to your site assets library and then set the jslink property on your view to "clienttemplates.js|~site/Site Assets/xyz.js" using code in a feature or with powershell.

Here is a CSR script that will do what you want for a sample hyperlink field called LinkTest.

• I use code to set the jslink property on my listview. By choosing that listview in my webpart the jslink seemed to take effect. Might be able to jslink direct from the webpart as well ?

• I deploy mine to the layouts folder. I guess you just adjust your jslink if deploying elsewhere.

• I tested this with pages 1 and 2 of a listview webpart, configured to use the allitems view where I had set my jslink in code.

• Hopefully my code formatting below is correct ! It didn't want to go into the edit window smoothly...

  function $_global_jslinkmodifylink() {
  
  //jslink script to add target="_blank" to each hyperlink in a test column of hyperlinks.
  
  //Deployed straight to _layouts as file jslinkmodifylink.js
  //Used jslink property of listview as clienttemplates.js|jslinkmodifylink.js
  //Special note : do not use ~layouts token.  It is bugged and adds a script reference in the page that is missing a leading /.  
  // - This breaks MDS as registerinit function cant match the path.
  //The $_global_ wrapper function ensures that this works in MDS enabled sites.
  //If deploying to another location, you will need to use the relevant ~site/.. etc. format for jslink.
  
  Type.registerNamespace('KG');
  KG.jslink_modifylink = KG.jslink_modifylink || {};
  KG.jslink_modifylink.Templates = KG.jslink_modifylink.Templates || {};
  KG.jslink_modifylink.Functions = KG.jslink_modifylink.Functions || {};     
  
  //Helper function to get the default HTML for the field that SharePoint would 'normally' return before we implemented our CSR override.
  KG.jslink_modifylink.Functions.getDefaultFieldHtml = function (renderCtx, field, listItem, listSchema) {
  
      //Copy Paste of Jim Browns awesome helper function to return default CSR field rendering
  
  var renderingTemplateToUse = null;
  
  var fieldRenderMap = {
      Computed: new ComputedFieldRenderer(field.Name),
      Attachments: new AttachmentFieldRenderer(field.Name),
      User: new UserFieldRenderer(field.Name),
      UserMulti: new UserFieldRenderer(field.Name),
      URL: new UrlFieldRenderer(field.Name),
      Note: new NoteFieldRenderer(field.Name),
      Recurrence: new RecurrenceFieldRenderer(field.Name),
      CrossProjectLink: new ProjectLinkFieldRenderer(field.Name),
      AllDayEvent: new AllDayEventFieldRenderer(field.Name),
      Number: new NumberFieldRenderer(field.Name),
      BusinessData: new BusinessDataFieldRenderer(field.Name),
      Currency: new NumberFieldRenderer(field.Name),
      DateTime: new DateTimeFieldRenderer(field.Name),
      Text: new TextFieldRenderer(field.Name),
      Lookup: new LookupFieldRenderer(field.Name),
      LookupMulti: new LookupFieldRenderer(field.Name),
      WorkflowStatus: new RawFieldRenderer(field.Name)
  };
  
  if (field.XSLRender == '1') {
  
      renderingTemplateToUse = new RawFieldRenderer(field.Name);
  }
  else {
  
      renderingTemplateToUse = fieldRenderMap[field.FieldType];
      if (renderingTemplateToUse == null)
          renderingTemplateToUse = fieldRenderMap[field.Type];
  }
  
  if (renderingTemplateToUse == null)
  
      renderingTemplateToUse = new FieldRenderer(field.Name);
  
  return renderingTemplateToUse.RenderField(renderCtx, field, listItem, listSchema);
  }      
  
  //Our custom function to modify the field before it gets rendered on the screen.
  KG.jslink_modifylink.Functions.modifyLink = function (ctx) {
  
  //First we get the HTML that SharePoint would have rendered from our helper function.
      var html = KG.jslink_modifylink.Functions.getDefaultFieldHtml(ctx, ctx.CurrentFieldSchema, ctx.CurrentItem, ctx.ListSchema);
  
  //If we are in QuickEdit, we do nothing (some extra things to be aware of for CSR when in QuickEdit mode).
  if (!ctx.inGridMode) {
  
      // Not in Quick Edit mode...
  
      //Assuming that this field just holds simple links we are doing a straight string replace to insert the target="_blank".
      //If its more complex we could use javascript RegExp here to process it more.
      var htmlwithtarget = html.replace('<a ', '<a target="_blank"');
  
      //Return our modified HTML.
      return htmlwithtarget;
  }
  //We are in QuickEdit so just return default HTML.
  return html;
  }   
  
  //Standard format for declaring that we want to override the rendering of the field called LinkTest when in a listview.
  //  (We are telling SharePoint to run our function (KG.jslink_modifylink.Functions.modifyLink) which is expected to return the HTML
  //  that will render in that cell.)
  KG.jslink_modifylink.Templates.Fields = {        
  'LinkTest': {
      'View': KG.jslink_modifylink.Functions.modifyLink}                      
  }    
  
  //We can control the view id that this is applicable to if we wish.
  //KG.jslink_modifylink.BaseViewID = 1;
  
  //We can control the type of list that this is applicable to if we wish.
  //KG.jslink_modifylink.ListTemplateType = 101;
  
  //Make the magic happen....  This registers the fields CSR override that we defined above.  Once registered, it will be applied when
  //SharePoint needs to render our field (LinkTest) in a listview.
  SPClientTemplates.TemplateManager.RegisterTemplateOverrides(KG.jslink_modifylink);
  
  } $_global_jslinkmodifylink();
  

Answer 2

I found that If I place a tick in the 'Server Render' box within the Miscellaneous section of the web part properties, the issue was resolved. This disables client-side rendering for the Data View and in my case, fixed the issue of the JSLink not taking affect after paging.

Answer 3

The page load does not execute document.ready Jquery code so use setInterval function to execute it after 1 mili second.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js" type="text/javascript"></script>

<script type="text/javascript">
    $(function() {
        setInterval(function () {
            fnColorCode();
            }, 1000); 
    });

    function fnColorCode(){
                $Text = $("td.ms-cellstyle.ms-vb2:contains('Approved')");
              $Text.parent().css("background-color", "#CEF6D8");
              $Text = $("td.ms-cellstyle.ms-vb2:contains('Rejected')");
                $Text.parent().css("background-color", "#F6CECE");

                $Text = $("td.ms-cellstyle.ms-vb2:contains('Open')");
                $Text.parent().css("background-color", "#F5F6CE");
    }
</script>