Using CEWP to run JavaScript

Question

I have a SharePoint 2013 Online site. On a form page, I am trying to use the CEWP to run JavaScript to allow me to pre-fill in a form field and then disable it.

I have found numerous sites which have code to make this happen. However, even though I follow their steps I cannot get this to work. I can't even tell if the JavaScript is firing off or if it is sitting dormant.

Are there any settings which I should check which would prevent me from using the CEWP to run JavaScript?

How can I check if my scripts have ran?

Below is the script I'm trying to execute from a file titled newChild.js

<!--
    Name: newChild.js 
-->

<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.2.min.js"></script>

<script type="text/javascript">

jQuery(document).ready(function($) {

    //get the Issue ID from they query string
    var customerID = getParameterByName("CustID");

    //Set the corresponding Lookup field value to the Issue ID
       $("select[title='External Contact']").val(customerID);    
       //use this line to disable the lookup field selection
       $("select[title='External Contact']").attr('disabled','disabled')
       //use this line to hide the lookup field and label entirely
       //$("select[title='External Contact']").closest("tr").hide(); 

});

// no, I didn't write this function from scratch, I found it at
// http://stackoverflow.com/questions/901115/get-query-string-values-in-javascript
function getParameterByName(name)
{
  name = name.replace(/[[]/, "\[").replace(/[]]/, "\]");
  var regexS = "[\?&]" + name + "=([^&#]*)";
  var regex = new RegExp(regexS);
  var results = regex.exec(window.location.href);
  if(results == null)
    return "";
  else
    return decodeURIComponent(results[1].replace(/+/g, " "));
}

</script>

You can put debugger keyword in JavaScript to test if it executes. It will trigger debugger breakpoint if you have developer tools open in your browser. — dstarkowski
– dstarkowski, Commented Oct 9, 2015 at 7:41
To check if it's firing I would put alert("hi"); before the var customerID... line. If this code is in a file named thisChild.js, where is this file located? Are you therefore only linking to this JS file in your CEWP? Please share what you're putting into your CEWP. — Submits
– Submits, Commented Oct 9, 2015 at 7:43
Do you have Publishing Enabled? Or, do you have MDS enabled? — Derek Gusoff
– Derek Gusoff, Commented Oct 9, 2015 at 13:19

Community · Accepted Answer · 2020-06-15 08:48:55Z

If things do not work try to take a step back and break up your problems in different parts.

As the comments suggest first check if your code in the CEWP is working; do not link it to a script file but try to execute this as code inside the CEWP

<script>
alert('Hello World!');
</script>

if that works take it step by step.

FYI

SharePoint provides an JSRequest class to get the query parameters.

JSRequest.EnsureSetup();
var customerID=JSRequest.QueryString['CustID'];

And you can also do without jQuery with native JavaScript

document.querySelectorAll("select[title='External Contact']")[0].value;

document.querySelectorAll("select[title='External Contact']")[0].setAttribute('disabled','disabled');

disclaimer: I typed this without checking for typos

jcp · Accepted Answer · 2015-10-10 11:34:54Z

Thank you all for the quick response.

I was frustrated in that I couldn't see any action from any script I posted. One error was that I was using document.write() instead of alert() to test my script. The other was that I had to put the full URL to my jQuery document library.

From there I went piece by piece re-building this javascript until it worked. I still have a lot to learn with debugging code.

I still have not been successful in calling functions within the same snipet of code. To fix this I just place everything that was in the function in the body. I had not seen the JSRequest solution yet but will try that out just to see if it works.

The final winning code is:

<script type="text/javascript" src="/SiteAssets/js/jquery-1.11.0.min.js"></script>
<script>
    $(document).ready(function() {
        var vars = [], hash;
        var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
        for(var i = 0; i < hashes.length; i++)
        {
            hash = hashes[i].split('=');
            vars.push(hash[0]);
            vars[hash[0]] = hash[1];
        }

        var customerID = vars["CustID"];
        $("select[title='External Contact']").val(customerID);
        if (customerID != null)
            $("select[title='External Contact']").attr('disabled','disabled');

    }); // end ready
</script>

When doing script in a CEWP, I find it's a good practice to put the functions before their calls, and this seems to work for me. — Steven Mulkerrins
– Steven Mulkerrins, Commented Oct 12, 2015 at 10:58

PapaDaniel · Accepted Answer · 2016-09-08 15:52:40Z

I realize this is an older question but, I wanted to offer up a suggestion on the order of code. It is possible, based on the page load sequence, etc. that the function you are attempting to call is not defined before it is attempted to be called.

<script type="text/javascript"  src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.2.min.js"></script>

<script type="text/javascript">
    // no, I didn't write this function from scratch, I found it at
    // http://stackoverflow.com/questions/901115/get-query-string-values-in-javascript
    function getParameterByName(name) {
        name = name.replace(/[[]/, "\[").replace(/[]]/, "\]");
        var regexS = "[\?&]" + name + "=([^&#]*)";
        var regex = new RegExp(regexS);
        var results = regex.exec(window.location.href);
        if (results == null)
            return "";
        else
            return decodeURIComponent(results[1].replace(/+/g, " "));
    }

jQuery(document).ready(function($) {
    //get the Issue ID from they query string
    var customerID = getParameterByName("CustID");

    //Set the corresponding Lookup field value to the Issue ID
    $("select[title='External Contact']").val(customerID);

  //use this line to disable the lookup field selection
    $("select[title='External Contact']").attr('disabled', 'disabled');

    //use this line to hide the lookup field and label entirely
    //$("select[title='External Contact']").closest("tr").hide(); 

}); 
</script>

Stack Exchange Network

Using CEWP to run JavaScript

3 Answers 3

FYI

Your Answer

Hot Network Questions

Using CEWP to run JavaScript

3 Answers 3

FYI

Your Answer

Sign up or log in

Post as a guest

Related

Hot Network Questions