Is there a way to use the jquery functions in batch.js?

[BJ Yang]

It seems that a batch.js file provided by confluence has jQuery functions, but I can't seem to use them. I'm not sure what I'm doing wrong if anything. This is a quick sample test I made, but it doesn't work even though batch.js is is called in every page. We are using Conlfuence 3.5.2.

{html}

<div id="test1">hello world</div>

<br/>

<input type="button" id="hide" value="hide">

<input type="button" id="show" value="show">

<script type="text/javascript">

$(document).ready(function(){

$('#hide').click(function(){

$('#test1').fadeOut();

});

$('#show').click(function(){

$('#test1').fadeIn();

});

});

</script>

{html}

[David at David Simpson Apps · Accepted solution]

See the Confluence UI Guidelines. The guidelines suggest wrapping all custom jQuery in AJS.toInit() if you require the code to be fired after DOMReady.

So your code would be:

AJS.toInit(function(){

	AJS.$('#hide').click(function(){
		AJS.$('#test1').fadeOut();
	});
	AJS.$('#show').click(function(){
		AJS.$('#test1').fadeIn();
	});
	
});

[Joe Clark]

For bonus points, you can structure your toInit function like this:

(AJS.toInit(function($) {

   // Access AJS.$ by just using '$'
   $("#selector").html("Hello, World");

}))(AJS.$);

and it will save you a bunch of keystrokes not having to prefix '$' with 'AJS.' every single time. :-)

[Martin Dulák]

Great trick Joe. Thank you!

[JamieA]

jquery dollar has been "noConflict"ed to AJS.$, so instead use:

AJS.$(function () {
   // page load...
})

[BJ Yang]

Should my code look like this?

<script type="text/javascript">
AJS.$(function(){
  $(document).ready(function(){
    $('#hide').click(function(){
      $('#test1').fadeOut();
    });
    $('#show').click(function(){
      $('#test1').fadeIn();
    });
  });
});
</script>