0

We have a script editor web part with javascript that references some jquery libraries. The code creates web part properties and hides DIV tag in the web part based on some conditions. It works great until I try to place the same exact web part / code block on the same page twice. The way we are rolling this out we don' t users messing the code and we want the WP properties UI to be identical on both Web Parts.

Given all this.. is it possible with jquery code to perform Web Part specific DOM manipulation without any conflict with other similar Web Parts and Script editor code blocks on the page? Possible to dynamically change DIV Tag IDs, Jquery Variables and WP Properties to have the unique web part GUID?

Possible? Any ideas would be appreciated.

Here's the problem: http://screencast-o-matic.com/watch/coeUlneNT6

Code:

enter image description here

    function addCustomProperty(propertyID, label, initialValue)
{
 customPropertyIndex.push({ propertyID: propertyID, label: label });
}var toolEditorPanePropertyHtml = "<div><table style=\"width: 100%; border-collapse: collapse;\" cellspacing=\"0\" cellpadding=\"0\"><tbody><tr><td><div class=\"UserSectionTitle\"><a title=\"Expand category: {PROPERTYNAME}\" id=\"{PROPERTYNAME}_IMAGEANCHOR\" onclick=\"javascript: MSOTlPn_ToggleDisplay('{PROPERTYNAME}', '{PROPERTYNAME}_IMAGE', '{PROPERTYNAME}_ANCHOR', 'Expand category: {PROPERTYNAME}', 'Collapse category: {PROPERTYNAME}', '{PROPERTYNAME}_IMAGEANCHOR'); return false;\" href=\"#\">&nbsp;<img id=\"{PROPERTYNAME}_IMAGE\" alt=\"Expand category: {PROPERTYNAME}\" src=\"/_layouts/15/images/TPMax2.gif\" border=\"0\">&nbsp;</a><a tabindex=\"-1\" title=\"Expand category: {PROPERTYNAME}\" id=\"{PROPERTYNAME}_ANCHOR\" onclick=\"javascript: MSOTlPn_ToggleDisplay('{PROPERTYNAME}', '{PROPERTYNAME}_IMAGE', '{PROPERTYNAME}_ANCHOR', 'Expand category: {PROPERTYNAME}', 'Collapse category: {PROPERTYNAME}', '{PROPERTYNAME}_IMAGEANCHOR'); return false;\"> &nbsp;{PROPERTYNAME}</a></div></td></tr></tbody></table><div class=\"ms-propGridTable\" id=\"{PROPERTYNAME}\" style=\"display: none;\"><table style=\"border-width: 0px; width: 100%; border-collapse: collapse;\" cellspacing=\"0\"><tbody><tr><td><div class=\"UserSectionHead\"><label title=\"Name of field to hide.\" for=\"{PROPERTYNAME}_EDITOR\">{LABEL}</label></div><div class=\"UserSectionBody\"><div class=\"UserControlGroup\"><nobr><input name=\"{PROPERTYNAME}_EDITOR\" class=\"UserInput\" id=\"{PROPERTYNAME}_FieldName_EDITOR\" value=\"{INITIAL}\" style=\"width: 176px; direction: ltr;\" type=\"text\" ms-tlpnwiden=\"true\"></nobr></div></div><div class=\"UserDottedLine\" style=\"width: 100%;\"></div></td></tr></tbody></table></div></div>";


function injectItemID(fieldName)
{
    $.each($(".ms-formbody"), function (index, value) {
        if ($(value).html().indexOf("FieldName=\"" + fieldName + "\"") > -1) {
            $(value).find("input").val($.getUrlVar("ID"));
        }
    });
}
1
  • Can you post the code you have. It's better to modify your code to be generic and pass web part details rather repeating the same code twice. Mar 28, 2015 at 10:56

1 Answer 1

0

As Amal said you should try not to put duplicate code blocks on your page. You could either make your code generic (looks up the web part GUID etc.) or use just one codeblock for both.

Answer for one code block

In jQuery you can use a selector with a comma as separator such as [webpartid="firstID"],[webpartid="anotherID"] to find both target Web parts' HTML elements. Then you can for example loop these elements and perform your changes on them using jQuery.each();. Within the each loop you can get data such as GUID from the webpart using jQuery(this);

Simple example:

jQuery('[webpartid="firstID"],[webpartid="anotherID"]').each(function(){ 
    var thisElem = jQuery(this);
    var webPartGUID = thisElem.attr("ID");
    //Your code  
}

Relevant jQuery documentation

https://api.jquery.com/category/selectors/

https://api.jquery.com/each/

5
  • our deployment requires seperate web parts with identical code. we are looking for something to dynamically work for the calling webpart. Can the code block pass it's webpartid to a common jquery function that in turn only performs operations on the calling webpart?
    – Hell.Bent
    Mar 28, 2015 at 17:21
  • It's not clear to me how you are intending to save and load the property. This makes answering difficult. Are you saving it by updating the entire webpart code? If so, then it seems to me you are overcomplicating things. Any chance you can share some more code or explain what te other code is meant to do? Mar 29, 2015 at 22:13
  • A suggestion that might help you is to use an element to trigger a central function with (this) (look here quirksmode.org/js/this.html). So for example you can have <div class="myChangingElem" onload="onWPload(this)">Some text</div>. In the onWPload function you may now use this HTML element as the starting point to move up the dom with closest. I.e. jQuery(this).closest("[webpartid]"); Mar 29, 2015 at 22:22
  • Thanks Jan. We write back property value to the script editor web part code block. See added code. We are trying out your suggestion now.
    – Hell.Bent
    Mar 30, 2015 at 9:57
  • @cyberpine Why not follow this logic: if the the toolpane is loaded AND webpartID is not set in webpartcode (default) get it, save it, add property editor to toolpane. On the next run follow this logic: if saved webpartID matches current webpartID of toolpane then add property editor to toolpane. Else run your code with the webpartID you saved. You can get the webpartID of the webpart currently being edited from somewhere in the DOM, i.e. for SP2010 I get it from jQuery("div[selectedwebpart='true']").attr("webpartid"); you'll have to look if this applies in SP2013 as well. Mar 30, 2015 at 11:43

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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