We Keep Coding

Uncaught ReferenceError: jQuery is not defined in wordpress custom script

My jquery file is not working in WordPress.The error is here:
My js code:
(function($) {
$(document).ready(function(){
$('#read_more').click(function() {
$('.display_none').show().animate({'transition': '2s'});
});
});
})( jQuery );
I have an added custom-script.js file in functions.php like this:
function aristo_css_js(){
wp_enqueue_script('myjs', get_template_directory_uri().'/assets/js/custom-script.js');
wp_enqueue_script('myjs');
}
add_action('wp_enqueue_scripts','aristo_css_js');
What is the main problem for this was not working? But if I added custom script code before body tag it's working. ?

I solve my own question by add jquery file before my custom-script
wp_enqueue_script('jquery-main', get_template_directory_uri().'/assets/js/jquery-3.3.1.min.js');
wp_enqueue_script('myjs', get_template_directory_uri().'/assets/js/custom-script.js');

I had this same issue once.
WordPress ships with its own version of the jQuery library.
Try using jQuery instead of just $ sign.
For example:
var svg = $("#svg-container");
should be replaced with
var svg = jQuery("#svg-container");

Try to use this updated javascript code,
jQuery.noConflict();
(function(jQuery) {
jQuery(document).ready(function(){
jQuery('#read_more').click(function() {
jQuery('.display_none').show().animate({'transition': '2s'});
});
});
})( jQuery );
function aristo_css_js(){
wp_enqueue_script('jquery-main', get_template_directory_uri().'/assets/js/jquery-3.3.1.min.js');
wp_enqueue_script('myjs', get_template_directory_uri().'/assets/js/custom-script.js');
}
add_action('wp_enqueue_scripts','aristo_css_js');
Thanks!

I hope this will fix your issue
(function($) {
// Use $() inside of this function like so
$(#selector)
})(jQuery);

Show/Hide on click with Javascript not working

I'm trying to use a basic on click to expand so when the user clicks on the title it shows more details but for some reason it isn't working.
Here is the page in question:
http://eftposnz.wpengine.com/integrated-eftpos/pos-vendors/
I'm not sure if the issue is with the code itself or if I'm not using it correctly.
Here is the code I'm using:
$(document).ready(function () {
$(".content").hide();
$(".show_hide").on("click", function () {
var txt = $(".content").is(':visible') ? 'Read More' : 'Read Less';
$(".show_hide").text(txt);
$(this).next('.content').slideToggle(50);
show_hide.preventDefault();
});
});
Any help would be greatly appreciated and please let me know if you need any further information.

I'm not familiar with WordPress, but it seems like the jQuery version it's using (or that you chose to use) won't let you use $ from the get-go.
As you can see on the jQuery version included on your page, jQuery.noConflict() is called at the end, making $ unavailable.
Here's what you can do, as an easy/safe workaround:
(function($) {
// your code using $ here
})(jQuery);

The site is currently using wordpress, so there is not "$" defined in the window context, instead of this, is only avalible via "jQuery".
A solution can be:
(function($){
$(function(){
/* Here your code */
});
})(jQuery);

Your jQuery is known in the window's scope as jQuery instead of $, which is a result of jQuery.noConflict().
Now you could create $ yourself by writing this above your code:
var $ = jQuery; // yuck!
But that would pollute your global scope!!
It would be cleaner to wrap your code into an anonymous function like this:
(function ($) {
// your code
}(jQuery));

Be sure that never have JQuery conflict

I need to create code which can be used as snipped for every site.
When I copy paste this code to any html in the world this should work:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script type="text/javascript"> my_jQuery = $.noConflict(true);</script>
<script type="text/jscript">
my_jQuery(document).ready(function () {
my_jQuery("#myDiv").html("Hello world");
});
</script>
<div id="myDiv">
</div>
Of Course in real world logic will be more complex but principle is same.
So this must work even if site already have JQuery, if have same version of JQuery,if have different version of JQuery, or even if does not have JQuery at all.
I want be sure that client does not use some old version of JQuery, so I want always use my JQuery.
What do you think, will this work or there is something that I have not consider?

I think that this question should be faced in an architectural way, knowing what libraries/frameworks are available is a design concern... Basically, you shouldn't need to check dependencies at runtime... if you write jQuery, you must be sure that jQuery exists!
By the way, there are some cases where you can't do it, for example, if you are writing a public/api (a snippet that runs in heterogeneous environments). In these cases, you can do:
mark jQuery as peer-dependencies
Check at runtime.
There is an example of runtime checking:
<script>
(function($) {
var jQueryUrl = 'https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js';
$ || (document.writeln('<script src="'+ jQueryUrl +'"></script>'));
})(window.jQuery);
</script>
In order to avoid conflicts, finally, you don't need to use jQuery.noConflict, you need to work with javascript scopes (closures)... basically, never try to access the global jQuery alias $ (never use global vars), simple pass it as function param:
(function($) { console.log('$', $); })(window.jQuery)
window.jQuery(document).ready(function($) { console.log('$', $); });

The first thing we need to do is check if jQuery is present on the website. jQuery is the global variable so it should be in window object if it is loaded. We can check it like this: if (window.jQuery) {}
If the jQuery not present we can dynamically load it adding script tag with desired jQuery version. So the snippet answering for checking if jQuery is loaded and loading if it's not would be like:
if (!window.jQuery) {
var jq = document.createElement('script');
jq.type = 'text/javascript';
jq.src = 'http://code.jquery.com/jquery-1.12.1.min.js';
document.getElementsByTagName('head')[0].appendChild(jq);
}

That would work for
So this must work even if site already have JQuery,
if have same version of JQuery,
if have different version of JQuery,
or even if does not have JQuery at all.
As you can see as per your code, that would work fine for all three situations but 4th one. For this case you have to have a check to find if window has jQuery object. That can be done with:
if(window.jQuery){
var my_jQuery = $.noConflict(true);
my_jQuery(document).ready(function () {
my_jQuery("#myDiv").html("Hello world");
});
}
Note:
<script type="text/jscript">
would not work in the browsers other than IE.

How can I use Jquery to add 'hyphenate' class to P element not working in Joomla

I am developing a site using Joomla 2.5 and since I'm going to be handing it off to a client who is less than code savvy, I don't want to have to make them try to remember how to add class=hyphenate to every <p> when they add / update content.
I'm trying to use JQuery to do it but it doesn't seem to be working. Here is my code that should add the class:
<script type="text/javascript">
$("p").addClass("hyphenate");
</script>
Any input / help is - as always - appreciated!
Thanks,
Cynthia

If your script tag is placed before the p elements, you need to wait for the document to be ready - like this:
$(document).ready(function(){
$("p").addClass("hyphenate");
});
Shorthand version:
$(function(){
$("p").addClass("hyphenate");
});
Sidenote: when mixing libraries, global variables (like the $) can get out of hand. So make your own scope, ensuring that the $ is jQuery:
(function($){ // $ = jQuery
$(function(){
$("p").addClass("hyphenate");
});
})(jQuery);

Also your Jquery May Conflict with Joomla Mootools, to overcome you can use JQuery noConflict
var JQ=jQuery.noConflict();
JQ(document).ready(function(){
JQ("p").addClass("hyphenate");
});

jQuery not register $

I am using prototype + jquery on a site. Now the prototype plugins use $. I do not want jQuery to use $. How do I make jQuery not register the $. Also, how do I then call jQuery functions.
Thank you for your time.

The jQuery documentation has an article on how to make jQuery play nice with other libraries.
This is one suggested way from that article:
<html>
<head>
<script src="prototype.js"></script>
<script src="jquery.js"></script>
<script>
jQuery.noConflict();
// Put all your code in your document ready area
jQuery(document).ready(function($){
// Do jQuery stuff using $
$("div").hide();
});
// Use Prototype with $(...), etc.
$('someid').hide();
</script>
</head>
<body></body>
</html>

link jquery first and prototype second. this will override the $.
for jQuery, use the function jQuery(...).

You can use jQuery.noConflict( ); And then you can remap it like this: $j = jQuery;

this is what I use if it's only a small bit of jQuery
jQuery(function($) {
// now you can use $ again within here - this block of code is fired on DOM ready
});

You can use jquery's noConflict method:
var jQ=jQuery.noConflict();
now onwards you can use jQ in place of "$" to work with jQuery functions and use $ for prototype.