none
Is it possible to reference and update div in Content Editor Web Part From a Script Editor web Part on same page? RRS feed

  • Question

  • I have a new Content Editor Web Part on a page in one zone, with a div in it that I want to update with html content and near the bottom of the same page I have a Script Editor Web Part, in a different zone with my javascript, for updating the div in the CEWP. Will this work? I ask because I have tried several different things, using jquery and unique id's and so far the jquery does not seem either to be able to find the div or update it successfully.

    Its possible I may not be addressing the div correctly, but before I go any further I want to make sure its possible, so I don't waste a lot of time, pursuing something that's not possible.

    I'm using javascript, jquery, and JSOM to do all of this.

    Thanks for the help.

    Henry

    Tuesday, March 21, 2017 2:57 AM

Answers

  • Hi Henry,

    Please add this snippet into the Script Editor Web Part and monitor the console, it can be used to test if the tag did exist in the page:

    <script type="text/javascript">
    
    
    //1. window onload event
    window.onload = function(){
    	console.log("1", document.querySelector("#divTaskResults"));
    	
    	ready();
    };
    
    function ready()
    {
    	console.log("ready");
    
    	document.querySelector("#btn").onclick = function(){
    		console.log("click");
    		console.log("2", document.querySelector("#divTaskResults"));
    	};
    }
    
    
    </script>
    <input type="button" id="btn" value="run it"></input>

     

    Best regards,

    Patrick

    Please remember to mark the replies as answers if they help.
    If you have feedback for TechNet Subscriber Support, contact tnmff@microsoft.com

    Thursday, March 23, 2017 12:01 PM
    Moderator

All replies

  • Hi Henry,

    There are several ways to inject HTML/CSS/JavaScript into a SharePoint page, such as Content Editor Web Part, Script Editor Web Part or with SharePoint Designer. No matter which way you choose, the custom HTML will combine into the final page which is rendered in browser.

    Thus, you don’t need to worry about how it is added into the page, simply see it as a normal page element and ensure you find the right tag.

    Maybe you can try assigning an “id” to that div, it would make you easier to “find” it in your script.

    Best regards,

    Patrick 

    Please remember to mark the replies as answers if they help.
    If you have feedback for TechNet Subscriber Support, contact tnmff@microsoft.com

    Wednesday, March 22, 2017 2:44 AM
    Moderator
  • Patrick, I do have an "id" attribute assigned to the target "div" like this:

    ​<div id="divTaskResults" ></div>

    but my jQuery statement can't seem to find it, and add my search results there.

    When I do a browser "inspect element" of the CEWP the target "div" seems to be buried deep inside a series of levels of "divs" associated with the CEWP. 

    My div id should be unique, at least within the code that I've developed.

    Its funny though. If I put the exact same "div" HTML code into another HTML Form Web Part on the same page I can see a test message in the div, so I know my jquery code does work.

    So I'm wondering why I can see it in one webpart and not in the other? 

    Let me know if there's something not obvious about both of those web parts, that might affect what I'm trying to do.

    Thanks for the help.

    Henry

     
    Wednesday, March 22, 2017 3:04 AM
  • Hi Henry,

    Please add this snippet into the Script Editor Web Part and monitor the console, it can be used to test if the tag did exist in the page:

    <script type="text/javascript">
    
    
    //1. window onload event
    window.onload = function(){
    	console.log("1", document.querySelector("#divTaskResults"));
    	
    	ready();
    };
    
    function ready()
    {
    	console.log("ready");
    
    	document.querySelector("#btn").onclick = function(){
    		console.log("click");
    		console.log("2", document.querySelector("#divTaskResults"));
    	};
    }
    
    
    </script>
    <input type="button" id="btn" value="run it"></input>

     

    Best regards,

    Patrick

    Please remember to mark the replies as answers if they help.
    If you have feedback for TechNet Subscriber Support, contact tnmff@microsoft.com

    Thursday, March 23, 2017 12:01 PM
    Moderator
  • Patrick, I tried your code by adding it to the end of mine in the Script Editor Web Part and when the target "div" is in a Content Editor Web Part, the code returns a null value which I'm guessing means the div wasn't found. Next I put the same target div code in an HTML Form Web Part and ran the code again, and then it did see the div and bring back the code for it. So there is a real difference between the two web parts and whether a document item might be found. So for now I'm going to use it within the HTML Form Web Part. Sound OK or is there a reason for me not to try using it within an HTML Form Web Part?
    Friday, March 24, 2017 2:09 AM
  • Hi Henry,

    What if you click the “run it” button, will it still returns a null value?

    Per my knowledge on SharePoint page designing, it would be better to put all your script in one place(one Script Editor) on your page, less chances to meet unnecessary mistake during development.

    Best regards,

    Patrick

    Please remember to mark the replies as answers if they help.
    If you have feedback for TechNet Subscriber Support, contact tnmff@microsoft.com

    Monday, March 27, 2017 2:12 AM
    Moderator
  • Patrick, when I clicked the button it did still return null. So for now at least I have decided to just add another HTML From web part to the page to hold the result div that I want.  I don't have time at the moment to delve into this further. I will try to pick it back up in the future time-permitting.

    Thanks.

    Henry

    Monday, March 27, 2017 7:47 PM