2

On the editform of an item, i have added a cEWP and hidden the default editform webpart. The CEWP calls a html file which references jquery and spservices. The html shows a few fields of the SP List item one among which is a multiline text field called comments where I display all the versions of a comment using spservices, getversioncollection method, SPservices to retrieve version history of items in SharePoint List 2007?

But this showed $ is undefined for the SPServices. For this I added a 

var JQ=jQuery.noconflict(true);

and I was able to use JQ in the the SPServices method. This code was called from the document.ready, e.x.

$(document).ready(function(){
GetComments();
});

There are buttons on the form which have jquery functionality. All of this was working fine. Now when i moved the code to another environment, I get the error '$ is not a function' inside the button click events. When I comment the GetComments code, the button functionality works. I am not sure how to resolve this as the same code is working in one system but not another.

I was able to reproduce similar situation in script below. Can someone tell me how to fix this?

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js">    </script>
<script>

$(document).ready(function(){LoadData();});

function LoadData()
{
    $("p").text("jQuery is still working!");
   DisplayComments(); 
}
function DisplayComments()
{
var j=$.noConflict(true);
//call spservices getversioncollection method here
j("p").append("<br>conflict jQuery is still working!");
}
function foo()
{
 $("p").append("<br>jQuery is not recognized here");
}
</script>
</head>
<body>

<p>This is a paragraph.</p>
<button onclick='foo()'>Test jQuery</button>
</body>
</html>
Improve this question

2 Answers 2

Reset to default
4

Call to $.noConflict(true) completely removes variables $ and jQuery from global scope. That means you can use jQuery via j variable only inside your DisplayComments. From other functions there will be undefined error, because global $ is not accessible any more.

To solve that issue I suggest you to use immediately invoked function expression and pass to this expression $.noConflict(true). By doing this you will have local copy of jQuery object and you able to do anything you want, without hurting global scope: 

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>

(function($){
    // $ can safely used here, because it's local variable
    $(document).ready(function(){LoadData();});

    function LoadData() {
        $("p").text("jQuery is still working!");
        DisplayComments(); 

        $("button").on("click", function(){
            $("p").append("<br>jQuery is not recognized here");
        });
    }
    function DisplayComments() {
        //var j=$.noConflict(true); <-- no need to call noConflict, since already called

        $("p").append("<br>conflict jQuery is still working!");
    }   
})($.noConflict(true));

// call to $ or jQuery returns undefined error here, because we call "$.noConflict(true)" previously, that means jQuery will be completely inaccessible outside
//$("p");

</script>
</head>
<body>

<p>This is a paragraph.</p>
<button>Test jQuery</button>
</body>
</html>
Improve this answer
2 
function DisplayComments()
{
 //Call SPServices using jQuery().SPServices...
  jQuery("p").append("<br>removed noConflict,used jQuery and jQuery is still working!");
}
Improve this answer

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.