3

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);
    });
  • Does the web part have asynchronous loading enabled? – wjervis Apr 17 '15 at 19:58
  • Try disabling "Minimal Download Strategy" in site features. – Arsalan Shahid Apr 17 '15 at 20:03
  • Not seeing option to have asynchronous loading enabled – Sol Web Solutions Apr 17 '15 at 20:51
  • I started the test on a site that didn't have this feature disabled. It's still happening on this "test" site with the Minimal Download Strategy feature disabled. – Sol Web Solutions Apr 17 '15 at 21:02
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();
    
  • Hi...thank you for the reply. I've tried placing code above and below the list webpart, and no difference. Using jQuery(document).ready didn't affect anything either. I've also tried using a CEWP pointing to the javascript, and that's not making a difference either. Script Editor or CEWP both seem to have same functionality for page 2. – Sol Web Solutions Apr 20 '15 at 15:04
  • If I run the script via Chrome's Console/Inspect element on page 2 of the list, the hyperlink jquery works (i.e. opens the link in a new tab like the first page does)....interesting. – Sol Web Solutions Apr 20 '15 at 18:06
  • From JS Link property for the list web part, I can get the hyperlink tag to work properly from page 1, but page 2 still doesn't work correctly. – Sol Web Solutions Apr 20 '15 at 19:14
  • Are you using a modified copy of my jslink script or are you just using js to your existing jquery code ? – Satyrical Apr 20 '15 at 20:09
  • Have used your code and mine...neither work on page 2 – Sol Web Solutions Apr 20 '15 at 20:48
0

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.

0

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>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.