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:
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=\"#\"> <img id=\"{PROPERTYNAME}_IMAGE\" alt=\"Expand category: {PROPERTYNAME}\" src=\"/_layouts/15/images/TPMax2.gif\" border=\"0\"> </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;\"> {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"));
}
});
}