1

I have the following functional (in html) jsfiddle: http://jsfiddle.net/pmpvLjuq/1/

I've found that in order to be functional in Wordpress too, should be used in jQuery's noConflict mode. In wp codex I've found this section:

At this point, I'm not so sure if I understand the global term in these circumstances. Should I replace all the $ signs with jQuery ?

What I've done without error in the console (but I'm concerned) also working in wp pages it's here: http://jsfiddle.net/8r9rcft2/2/

In other words, in these particular cases should I still replace the $ mark(?)

line 15 $links = $(".pagedMenu li"), will be jQuerylinks = jQuery(".pagedMenu li"),(?)

line 16 count = $links.length, will be count = jQuerylinks.length, (?) line

The same for lines 25,26,26, ect.

Can I have your prepared for wordpress jsfiddle in jQuery's noConflict mode in order to have the whole picture of this process please?

Can you please confirm, as a rule of thumb, if I dont receive any error in the browser console that means everything is fine in the code? Thanks

typo_
  • 11
  • 2
  • 15
  • 37
  • Use of noConflict has been pretty standard in wordpress for years now. You sure the theme you have doesn't already have it implemented? Is usually in last line of jQuery.js that ships with wordpress – charlietfl Sep 22 '15 at 05:33
  • I guess not because using the `$` mark I get `Uncaught TypeError: $ is not a function` reffering to this line : `$('nav ul li').mouseover(function(e){` – typo_ Sep 22 '15 at 05:35
  • well that is a good indication that it has been implemented. noConflict removes the `$` alias from `window` – charlietfl Sep 22 '15 at 05:36
  • and what is the best approach in this case, you mean that using `jQuery` instead of `$` is useless? replacing `$` signs solved the error :) – typo_ Sep 22 '15 at 05:37
  • 1
    can use `$` by using the IIFE wrapper @renishkhunt has in answer below – charlietfl Sep 22 '15 at 05:38

2 Answers2

3

I always used jQuery like this in wordpress and it's working for me I hop this is working for you.

(function($){

  $(document).ready(function(){
      // write code here
  });

  // or also you can write jquery code like this

  jQuery(document).ready(function(){
      // write code here
  });

})(jQuery);
Renish Khunt
  • 5,620
  • 18
  • 55
  • 92
  • typo in `function($)){` ..extra `)` – charlietfl Sep 22 '15 at 05:38
  • thanks. I'm not so sure if I understand, the code should be written twice in both sections `$(document).ready(function(){ // write code here });` and `jQuery(document).ready(function(){ // write code here });` !? – typo_ Sep 22 '15 at 05:39
  • @typo_78 those are examples showing you can do it either way – charlietfl Sep 22 '15 at 05:40
  • 1
    hey, typo it's working when i write both section in `function($)){ //code here });` – Renish Khunt Sep 22 '15 at 05:42
  • gr8, I got it. For my background knowledge could you be so kind and answer my main question, taking your answer as well in consideration editing my jsfiddle doing it in the old school way replacing the `$` signs with `jQuery` _only_ where it should be like this? I'm just trying to understand why and where. Thanks – typo_ Sep 22 '15 at 05:44
  • 1
    @typo_78 lots of explanations here http://stackoverflow.com/questions/10896749/what-does-function-function-window-jquery-do – charlietfl Sep 22 '15 at 05:49
  • In conclusion, this http://jsfiddle.net/pmpvLjuq/1/ will do the same thing in wordpress if it's wrapped like this http://jsfiddle.net/5vgvskc8/1/ without being necessary to replace `$` marks if I understand right. But how about if in the same `js` file, we have `jQuery` and `js` sequences, will be fine to apply for the whole code `jQuery` function? the above request is still available if someone could show me ... That's why I've asked for a code review replacing in the specific lines `$` marks with `jQuery` (still confused). thanks. – typo_ Sep 22 '15 at 06:46
  • 1
    @typo_78 yes keep `document.ready` . These other issues are not related to that and you still need to make sure elements exist before the code runs – charlietfl Sep 22 '15 at 11:13
  • @charlietfl not so sure if you opened the fiddles. which one is good please? :) this one http://jsfiddle.net/5vgvskc8/3/ or this one http://jsfiddle.net/5vgvskc8/1/ thanks – typo_ Sep 22 '15 at 11:24
  • other than one using `document.ready` and the other not i don't see much difference so use the one with `ready` – charlietfl Sep 22 '15 at 11:33
2

I always prefer below method because it always separate jquery libraries and never conflict and it is one of recommended method of jquery.

Its just a example. I mostly used it for smooth scrooling.

$scroll= jQuery.noConflict();    
$scroll('a').click(function(){
    $scroll('html, body').animate({
        scrollTop: $scroll( $scroll(this).attr('href') ).offset().top
    }, 1000);
    return false;
});
Yatin Khullar
  • 1,580
  • 1
  • 12
  • 26
  • can you please fork this fiddle http://jsfiddle.net/pmpvLjuq/1/ and apply your solution on it modifying your answer? It could be a good approach. I'm not lazy, but at my level (pure beginner) it's hard to understand how can I apply your solution in my situation. Is it too much? thanks – typo_ Sep 22 '15 at 08:44
  • thank you, not a problem, I'll closely analyse that to understand the difference between your solution and the other one exposed here and I'll come back with a feed-back. I appreciate it! by the way `$clk` could be anything like `$dummy` right? – typo_ Sep 22 '15 at 10:47
  • 1
    goes against wordpress documented approach for using noConflict which could lead to some confusion and other conflicts – charlietfl Sep 22 '15 at 11:09
  • 1
    No @charlietfl it is not against wordpress documentation. If it is please paste url here. Because many users uses this as this is recommended method by jquery. – Yatin Khullar Sep 22 '15 at 12:30
  • @Yatin Khullar `$clk` is it predefined term or could be anything like `$dummy` ? – typo_ Sep 22 '15 at 16:14
  • 1
    No its not a predefined it can be any as you say it can be $dummy or anyone you like @typo_78 – Yatin Khullar Sep 23 '15 at 06:37
  • good to know, thanks, For sure I'll use your method too but in particular cases; the above method works too and it's much easier to implement; anyway, I really appreciate it! – typo_ Sep 23 '15 at 07:15
  • 1
    Ok but i think, But there is a drawback of it too, which will occur in some cases, if there are many jquery libraries then above method will fail(i think) because it will not help in separation of libraries when there are too manys. – Yatin Khullar Sep 23 '15 at 07:41
  • 1
    I'll take in consideration. – typo_ Sep 23 '15 at 08:16