jQuery to Wordpress - Uncaught errors driving me insane

I recently finished a little application on Codepen and I decided to bring it over to my website, which is using Wordpress. I replaced all instances of $ with jQuery and updated the location of my JSON file, but I'm getting some issues in the console.

The program functions just fine - it's reaching the JSON file and pulling info from it - up until I click on a scale button and it stops dead. The first time, there's nothing in the console, but the second dead click will bring this up:

Uncaught Error: Syntax error, unrecognized expression: .
    at Function.ga.error (jquery.js?ver=1.12.4:2)
    at ga.tokenize (jquery.js?ver=1.12.4:2)
    at ga.select (jquery.js?ver=1.12.4:2)
    at Function.ga (jquery.js?ver=1.12.4:2)
    at Function.a.find (jquery-migrate.min.js?ver=1.4.1:2)
    at r.fn.init.find (jquery.js?ver=1.12.4:2)
    at r.fn.init.a.fn.find (jquery-migrate.min.js?ver=1.4.1:2)
    at a.fn.init.r.fn.init (jquery.js?ver=1.12.4:2)
    at a.fn.init (jquery-migrate.min.js?ver=1.4.1:2)
    at r (jquery.js?ver=1.12.4:2)

I'm getting a headache from this, I've put jQuery applications on this site before and had issues with it, but I was able to get the others going eventually...this time is different.

I'd really appreciate it if someone could take a look and see if they can spot the issue, I'm so frustrated with it now.

This is the original (functioning) codepen: http://codepen.io/JTBennett/pen/NdLWJy This is the transferred wordpress version: https://www.electricherald.com/guitar-scales-chart-application/

Here's the new jQuery (for comparison):

jQuery('.A, .As, .B, .C, .Cs, .D, .Ds, .E, .F, .Fs, .G, .Gs').hide();

jQuery.getJSON("https://www.electricherald.com/json/scalesDirSm.json", function(data) {
    console.log(data);
  jQuery('.main-btn').on("click", function () {
    jQuery('#total-scale-men').empty()
    console.log("emptied total-scale-men");
    jQuery('.gcMen ul li button').css({'border' : '1px #666 solid',
   'color' : '#666'})
    jQuery('.scales-men').hide()
    jQuery('.scales-men').fadeIn()
    jQuery(this).css({'border' : '1px #cc4c4c solid',
   'color' : '#cc4c4c'})
        var scale = jQuery(this).data('scale')
        jQuery.each(data,function(i,data){
            if (scale == data.root) {
                jQuery('#total-scale-men').append('<button class="scale-btn" data-css="'+ data.CSS +'">' + data.scale + '</button>');
            }
        });

        jQuery('.scale-btn').on("click", function () {
    jQuery('.nt').hide()
    jQuery('.scales-men').hide()
    jQuery('.gcMen ul li button').css({'border' : '1px #666 solid','color' : '#666'})

      var css = jQuery(this).data('css')
      jQuery.each(data,function(i,data){
        var notes = ['.'+data.noteClass_1,
                     '.'+data.noteClass_2,
                     '.'+data.noteClass_3,
                     '.'+data.noteClass_4,
                     '.'+data.noteClass_5,
                     '.'+data.noteClass_6,
                     '.'+data.noteClass_7,
                     '.'+data.noteClass_8]
      if (css == data.CSS) {
      jQuery('#test').html(notes)
        jQuery('#inf div:nth-child(1)').text(data.root)
        jQuery('#inf div:nth-child(2)').text(data.scale)
        jQuery('#inf div:nth-child(3)').text(data.structure)

        for(var i = 0; i < notes.length; i++)
        jQuery(notes[i]).fadeIn();
      }
      });
  })

    })
}); 

I'd really greatly appreciate some direction with this one, I'm really angry at wordpress right now. I wish I'd built the site myself at this point.

Answers 1

  • I was able to reproduce the error on codepen by switching to the version of jquery you are using on your production siteenter image description here

    So on your site you should upgrade to jquery 3.x


Related Articles