Develop Reference

Can't access jQuery function in Wordpress

Why am I getting the ReferenceError:
manualEntry is not defined error,
when using the following within Wordpress?
hide
<script>
jQuery(document).ready(function ($) {
function manualEntry() {
$("#details").hide();
}
});
</script>

<a class="my_class" href="#">hide</a>
<script>
var $ = jQuery.noConflict();
$(document).ready(function () {
$( ".my_class" ).click(function( event ) {
event.preventDefault();
$("#details").hide();
});
});
</script>

How to have multiple functions in jQuery ready?

I can create Jquery functions, but what if you want more functions.
For example say I wanted to have a function for a drop down list AND a button.
I can only seem to do one function:
<script type="text/javascript">
$(document).ready(function() {
$("button").click(function() {
this.hide();
});
});
</script>
<script type="text/javascript">
$(document).ready(function() {
$("banner").click(function() {
this.fadeTo();
});
});
</script>
Is this right on how to create multiple functions in one document or is there an easier way to create them?
Can you show me how to create multiple ones instead of one?

Both functions can go inside the same document ready function:
<script type="text/javascript">
$(document).ready(function() {
$("button").click(function() {
$(this).hide();
});
$("banner").click(function()
$(this).fadeTo();
});
});
</script>
However, the selector $("banner") is invalid, if you're targeting a class of banner it should be $(".banner"), ID would be $("#banner")

You should rather use single document ready event and then wrap the two methods in it.
You would need to use class selector as element have class banner in it.also double quote is missing at the end of this selector
:
$(document).ready(function() {
$("button").click(function() {
$(this).hide();
});
$(".banner").click(function() {
$(this).fadeTo();
});
});

You can put them in the same $(document).ready function - you don't need a new document ready for each event listener.
<script type="text/javascript">
$(document).ready(function() {
$("button").click(function() {
$(this).hide();
});
$("banner).click(function() {
$(this).fadeTo();
});
});
</script>
Also your $("banner") selector is invalid - take a look at the jQuery Selectors documentation here: https://api.jquery.com/category/selectors/

you only require one $(document).ready(function () {})
<script type="text/javascript">
$(document).ready(function () {
$("button").click(function () {
$(this).hide();
});
$("banner").click(function () {
$(this).fadeTo();
});
});
</script>

Combine both and change $("banner) to $(".banner"):
$(document).ready(function() {
$("button").click(function() {
$(this).hide();
});
$(".banner").click(function()
$(this).fadeTo();
});
});

concat button & banner click code in $(document).ready:
<script type="text/javascript">
$(document).ready(function() {
$("button").click(function() {
$(this).hide();
});
$("banner").click(function() {
$(this).fadeTo();
});
});
</script>

If you are going to use the code several time it is fairly easy to write a function that hides a certain element. Then you just have to call the function with a parameter(the value of your DOM.
function hideElement(value)
{
$('' + value +' ').click(function() {
$(this).fadeTo();
});
$(document).ready(function() {
hidedElement(banner);
hideElement(button);
});

I trying to add below script for list some products while adding this script menu bar is not working. Why?

Please explain?menu bar it is not working.the below code for listing some element.
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<script type="text/javascript" src="/js/lib/dummy.js"></script>
<script type="text/javascript">//<![CDATA[
$(window).load(function(){
$('li a').click(function (e) {
e.preventDefault();
var ullist = $(this).parent().children('ul:first');
if(ullist.is(':visible')){
ullist.hide('slow');
} else {
ullist.show('slow');
}
});
});
//]]>
</script>

The .load function does not refer to the loaded event. Standard jQuery practice is to use the document.ready event:
$(function() { // Shorthand for $(document).ready(function() ...
$('li a').click(function(e) {
e.preventDefault();
var ullist = $(this).parent().children('ul:first');
if (ullist.is(':visible')) {
ullist.hide('slow');
} else {
ullist.show('slow');
}
});
});

how do I include a jQuery script into an include.js file?

lease forgive me if this is simple-minded a question.
I have a jQuery script shown below embedded in my app:
<script type='text/javascript'>//<![CDATA[
$(function(){
$('#div1).on('click', function () {
$('#divTitle').show();
});
$('#div1').on('click', function () {
$('#divTitle').slideUp();
});
});//]]>
</script>
<script type='text/javascript'>//<![CDATA[
$(function(){
$('#div2').on('click', function () {
$('#secDiv').show();
});
$('#div2).on('click', function () {
$('#secDiv).slideUp();
});
});//]]>
</script>
My boss just told me to put this jQuery in include.js file.
I included the file as shown below
function showIcon() {
toggleButtonIcon('[Widget dijit.form.ToggleButton, pan]');
navToolbar.activate(esri.toolbars.Navigation.PAN);
/*dijit.registry.byClass("dijit.form.ToggleButton").forEach(function(togbtn) {
if (togbtn == '[Widget dijit.form.ToggleButton, pan]') {
togbtn.attr("checked", true);
}
else
{
togbtn.attr("checked", false);
}
});
*/
}
//<![CDATA[
$(function(){
$('#div1).on('click', function () {
$('#divTitle').show();
});
$('#div1').on('click', function () {
$('#divTitle').slideUp();
});
});//]]>
<![CDATA[
$(function(){
$('#div2').on('click', function () {
$('#secDiv').show();
});
$('#div2).on('click', function () {
$('#secDiv).slideUp();
});
});//]]>
but now it isn't working anymore.
It is supposed to show and hide certain icons.
What am I doing wrong?

A couple things. First drop the <script> and CDATA tags. They aren't necessary in an external javascript file (presumably being included by a <script> tag in the HTML).
Secondly, you'll need to wrap your javascript with $(document).ready(). You probably had this javascript at the bottom of your current HTML (or at least after the HTML elements it was binding to), and since this external JS file likely gets loaded in the header, the HTML elements aren't there to bind to.
new include.js :
function showIcon() {
toggleButtonIcon('[Widget dijit.form.ToggleButton, pan]');
navToolbar.activate(esri.toolbars.Navigation.PAN);
/*dijit.registry.byClass("dijit.form.ToggleButton").forEach(function(togbtn) {
if (togbtn == '[Widget dijit.form.ToggleButton, pan]') {
togbtn.attr("checked", true);
}
else
{
togbtn.attr("checked", false);
}
});
*/
}
$(document).ready(function() {
$(function(){
$('#div1).on('click', function () {
$('#divTitle').show();
});
$('#div1').on('click', function () {
$('#divTitle').slideUp();
});
});
$(function(){
$('#div2').on('click', function () {
$('#secDiv').show();
});
$('#div2).on('click', function () {
$('#secDiv').slideUp();
});
});
});
Also verify that you have something like this in your HTML file:
<script type="text/javascript" src="path/to/include.js"></script>

You want to include your Javascript in a file right ?
Assuming jQuery has been included before :
Html
<script type="text/javascript" src="path/to/include.js"></script>
include.js
jQuery(function($){
$('#div1').on('click', function () { //missing '
$('#divTitle').show();
});
$('#div1').on('click', function () {
$('#divTitle').slideUp();
});
$('#div2').on('click', function () {
$('#secDiv').show();
});
$('#div2').on('click', function () { //missing ' here
$('#secDiv').slideUp(); //missing ' here too
});
});
//Edit omitted this part
function showIcon() {
toggleButtonIcon('[Widget dijit.form.ToggleButton, pan]');
navToolbar.activate(esri.toolbars.Navigation.PAN);
}

How to convert this jquery code into noconflict

will we have to replace every $ with jquery?
$(document).ready(function() {
$('.tabs a').click(function(){
switch_tabs($(this));
});
switch_tabs($('.defaulttab'));
});
function switch_tabs(obj)
{
$('.tab-content').hide();
$('.tabs a').removeClass("selected");
var id = obj.attr("rel");
$('#'+id).show();
obj.addClass("selected");
}

As long as you are sure the snippet contains just jQuery usage of $ then you can wrap it in a closure
(function($){
$(document).ready(function() {
$('.tabs a').click(function(){
switch_tabs($(this));
});
switch_tabs($('.defaulttab'));
});
function switch_tabs(obj)
{
$('.tab-content').hide();
$('.tabs a').removeClass("selected");
var id = obj.attr("rel");
$('#'+id).show();
obj.addClass("selected");
}
})(jQuery);

use
$.noConflict();
(function($) {
$(function() {
// more code using $ as alias to jQuery
});
})(jQuery);
// other code using $ as an alias to the other library
Resolve the conflict issues
More detail : http://api.jquery.com/jQuery.noConflict/

var $j = jQuery.noConflict();
$j(document).ready(function() {
$j('.tabs a').click(function(){
switch_tabs($j(this));
});
switch_tabs($j('.defaulttab'));
});
function switch_tabs(obj)
{
$j('.tab-content').hide();
$j('.tabs a').removeClass("selected");
var id = obj.attr("rel");
$j('#'+id).show();
obj.addClass("selected");
}