0

How could I add a jQuery in Content Query web Part. How It could be run, not in a head section of template. I have got a jQuery library added and I adding a code and it haven't been fired:

 <!DOCTYPE html>
<html>
<head>

</head>
<body>

<button id="hide">Hide</button>
<button id="show">Show</button>

<p>If you click on the "Hide" button, I will disappear.
<br />
Bo po to jest to wśród nas.
</p>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script  type="text/javascript">
$(document).ready(function(){
//ExecuteOrDelayUntilScriptLoaded(function(){
    $("#hide").click(function(){
        $("p").hide(5000);
    });
    $("#show").click(function(){
        $("p").show(2000);
    });
//},"sp.js");
});


</script>

</body>
</html>

This is Sharepoint 2013.

1 Answer 1

2

you didnt state what version of sharepoint your using. Assuming 2010/2013 i would use "sharepoint html form web part" instead to insert custom html and Jquery... its what it was designed for. Just put that webpart on the page and copy paste your code above into the text box area and save the webpart.

edit

below is what your looking for in 2013

enter image description here

also change your code to:

<button id="hide">Hide</button>
<button id="show">Show</button>

<p>If you click on the "Hide" button, I will disappear.
<br />
Bo po to jest to wśród nas.
</p>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script  type="text/javascript">
$(document).ready(function(){
//ExecuteOrDelayUntilScriptLoaded(function(){
    $("#hide").click(function(){
        $("p").hide(5000);
    });
    $("#show").click(function(){
        $("p").show(2000);
    });
//},"sp.js");
});


</script>

no need for head and body! it will throw errors as you already have both in the parent.

EDIT 2

try this code instead:

<button id="idhide" type="button" onclick="hide();">Hide</button>

<button id="idshow" type="button" onclick="show();">Show</button>

<div id="showhide">
<p>If you click on the "Hide" button, I will disappear.
<br />
Bo po to jest to wśród nas.
</p>
<div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script type="text/javascript">

function hide()
{
         $("#showhide p").hide(5000);
}
function show()
{
        $("#showhide p").show(2000);
}


</script>

or

your code slightly modified, need to put in type in the button so that it knows its a button and doesn't produce a postback when referencing a javascript event.

<button type="button" id="idhide">Hide</button>
<button type="button" id="idshow">Show</button>

<p>If you click on the "Hide" button, I will disappear.
<br />
Bo po to jest to wśród nas.
</p>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script  type="text/javascript">
$(document).ready(function(){
//ExecuteOrDelayUntilScriptLoaded(function(){
    $("#idhide").click(function(){
        $("p").hide(5000);
    });
    $("#idshow").click(function(){
        $("p").show(2000);
    });
//},"sp.js");
});


</script>
19
  • Sharepoint 2013 Commented Oct 13, 2016 at 11:54
  • 1
    unless your doing somthing specific with the cqwp like querying a list and then want a custom UI then I would use SPD to edit the xsl. otherwise just use the html webpart to put in custom html and jquery.... far easier... even when doing a query to a list as you can use rest to get the data instead without having to mess with xsl and rebuilding it into the cqwp. Commented Oct 13, 2016 at 12:01
  • Have You got a samles of Code ? Please give some. Commented Oct 13, 2016 at 12:06
  • 1
    what type of site are you using? publishing site? Commented Oct 13, 2016 at 12:20
  • 1
    just amended my answer. both versions work fine ;) , looks like its causing a postback on the code so added type. my code targets a specific within a div Commented Oct 13, 2016 at 13:31

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.