I recently completed a small application on Codepen and decided to transfer it to my Wordpress website. After updating the necessary elements, such as replacing $ with jQuery and adjusting the JSON file location, I encountered some issues in the console.
The program is functioning properly - it successfully accesses the JSON file and retrieves information from it - until I click on a scale button, at which point it suddenly stops working. Initially, there are no errors shown in the console, but after the second failed click, the following error message appears:
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)
This issue is causing me frustration, as I have previously dealt with problems related to jQuery on this site, although I managed to resolve them eventually. However, this time seems different.
If someone could kindly take a look and help identify the problem, I would greatly appreciate it as I'm currently struggling to address it.
Here is the original (working) version on Codepen: http://codepen.io/JTBennett/pen/NdLWJy And here is the transferred version on Wordpress:
Below is the updated jQuery code 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();
}
});
})
})
});
Your guidance on resolving this issue would be immensely appreciated, as I am currently frustrated with the situation dealing with Wordpress. At this point, I wish I had developed the site myself.