1

I want to add a javascript to my Enterprise wiki page layout. the javascript will fire when users change the options for some site columns, which i have added to my enterprisewiki.aspx page layout to implement a cascading lists. the javascript looks as follow:-

<script type="text/javascript">
function getCurrentMainCategoryID(){
var currentMainCatId = 0;
var customer = document.getElementById("ctl00_PlaceHolderMain_ctl06_DropDownChoice");
var selectobject = document.getElementById("ctl00_PlaceHolderMain_ctl07_DropDownChoice");

    $.ajax({
     url: url,
     method: "GET",
     async: false,
     headers: { "Accept": "application/json; odata=verbose" },
     success: function (data) {
        if(data.d.results.length>0){
            //code goes here

    $.ajax({
     url: url2,
     method: "GET",
     async: false,
     headers: { "Accept": "application/json; odata=verbose" },
     success: function (data2) {
            //code goes here

     },
     error: function (data) {
     alert("Error");}
            });
                                    }
                                },
     error: function (data) {
     alert("Error");
     }
    });
    return results;}

$("#ctl00_PlaceHolderMain_ctl06_DropDownChoice").change(function() {
getCurrentMainCategoryID();                         
});
getCurrentMainCategoryID(); 

</script>   

now this script allowed me to implement a cascade effect between two choices site columns inside my page layout. but i have these questions on my above appraoch:-

  1. I have placed this javaScript just before closing the </asp:Content> inside my enterprisewiki.aspx page layout,, so is this the right place to add such as script ?

  2. I did not find a way to add the JavaScript selectors, rather than manually hard-coding the fields non-friendly ids which are ctl00_PlaceHolderMain_ctl06_DropDownChoice & ctl00_PlaceHolderMain_ctl07_DropDownChoice.. so could these ids change in the future for a reason or another (like applying a cumulative updates or add additional columns inside the page layout or add additional columns to the enterprise wiki content type)?i though i will be dealing with the site columns internal names,, but seems my page layout will not render the columns internal names and instead it will create non-user friendly ids ?

can anyone advice on my above 2 points please?

here is the markup for the 2 select lists:-

enter image description here

Thanks

1

For current development against SharePoint, I put my code inside of a text file and load that into SiteAssets. Then, I add in a CEWP and load the text file. This way I can make changes to the text file and let it affect anywhere my code lives. This also gives me the added bonus that if my code breaks something, I can just fix it in the file and not have to worry about editing something on the page.

With respect to your code, change your selectors to something as such:

document.querySelector("select[title='MainCategory Required Field']")
document.querySelector("select[title='SubCategory Required Field']")

It's better to use something like this over the generated SharePoint Ids. Just run these selectors in the browser to validate they return valid HTML.

You'll also want to look into Script-On-Demand as well.

  • thanks for your reply,, I totally agree with you regarding using CEWP + text files instead of directly adding the script as this will allow me to maintain the scripts easier... but can i know why you prefer to use selectors such as document.querySelector("select[title='MainCategory Required Field']") instead of select based on the IDs ? is this because these Ids might change ? second question,, still i am not sure where i need to place the script inside the page layout ? is placing it just before closing the </asp:Content> as valid approach? – john Gu Feb 27 '17 at 23:59
  • third question what is the benefits of using Script on-demand in my case? can you explain this point more please? again thanks for your great help. – john Gu Feb 28 '17 at 0:01
  • 1
    1. Why do I use selectors? I use selectors as they give me more flexibility that I would get similar to jQuery but without jQuery. I select the title as it's more reliable when returning the one record I want over the sharepoint generated Ids. As you eluded they can change and that would break your code. The only thing that would break the selector is removing it as being a required field. This can be remedied by something like title^='MainCategory' – Brent Feb 28 '17 at 19:17
  • 1
    2. Where do I place the script? Truth be told, I've never used a wiki site. Are you able to edit the page layout and add the CEWP? You could add it anywhere on the page. In your case if you're using designer, you could add it in the content area but it feels safer in my head to do it via CEWP. – Brent Feb 28 '17 at 19:17
  • 1
    3. What is the benefit of SOD in your case. Whenever I load code on a page, this is a mechanism that solves two potential problems for me. First is that its my belief that it allows the page to be ready (document.ready) and the DOM is accessible. Second is that any required SharePoint objects I depend on are loaded. A good example of this is when I was doing Search with DataTables on top of it. I had to make sure that the search.js files were loaded before I could do anything with it. Other examples could be when leveraging the JSOM. Does this help? (Stupid character limit) – Brent Feb 28 '17 at 19:18

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.