I have a Syntax error, unrecognized expression. I use a set of links to change to a div on the same page and sent a variable with it.
Voorpagina
Updates
Over mij
$taal is the language the user choose, like NL, EN…
After the user clicks, get this in action:
$('a').click(function (e) {
$('html, body').animate({
scrollTop: $($(this).attr('href')).offset().top}, 500);
});
Everything works but I get the next error in my console:
Uncaught Error: Syntax error, unrecognized expression: ?taal=nl#Updates
at Sizzle.error (jquery-3.6.0.js:1681:8)
at Sizzle.tokenize (jquery-3.6.0.js:2381:11)
at Sizzle.select (jquery-3.6.0.js:2842:20)
at Function.Sizzle [as find] (jquery-3.6.0.js:898:9)
at jQuery.fn.init.find (jquery-3.6.0.js:3099:11)
at new jQuery.fn.init (jquery-3.6.0.js:3209:32)
at jQuery (jquery-3.6.0.js:161:10)
at HTMLAnchorElement.<anonymous> (?taal=nl:175:24)
at HTMLAnchorElement.dispatch (jquery-3.6.0.js:5430:27)
at elemData.handle (jquery-3.6.0.js:5234:28)
How can I resolve this error? By the way, if I remove the <?PHP echo $taal; ?> variable in the links above (first code), the error is gone but I need that variable for further navigation.
I’ve tried to rebuild the code, removed $taal and the error was gone but I need that variable.
Thanks in advance.
You are using the whole url, you want to just use the hash portion.
$('a').on('click',function (e) {
e.preventDefault();
console.log(e.target.hash);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
A
B
C
You need a selector as the argument to $(). The selector is after the # in the href, e.g. #Home or #Updates. You need to extract that from the href attribute.
$('a').click(function (e) {
let href = $(this).attr('href');
let target = href.split('#')[1];
$('html, body').animate({
scrollTop: $(`#${target}`).offset().top}, 500);
});
});
I've fixed the issue. In the code do I check now if $taal exists or not. If not, then I use my old jQuery link code, the code on the top of this page. If $taal does exist, then I split the URL variables and do I use Barmar's code. Thanks for all your help.
Related
Good day. I found this error while I'm working on my project. Yesterday, I used javascript inside the html file and it's working fine but when I made it as an external script and linked to the index.html, the smooth scroll doesn't seem to work on some links to the section. Here's the error below:
smoothscroll.js:16 Uncaught TypeError: Cannot read property 'top' of undefined
at HTMLAnchorElement.<anonymous> (smoothscroll.js:16)
at HTMLAnchorElement.dispatch (jquery.min.js:2)
at HTMLAnchorElement.y.handle (jquery.min.js:2)
It works fine on links such as and the likes, but when it comes to the navigation bar that links to the section of the same page, it produces that error above in the console.
$(hash) element is not found.
Example: Link if there isn't an element with id something is not found then it'll error out. You need to only perform the scrolling when the element exists.
$(document).ready(function(){
$("a").on('click', function(event){
if (this.hash){
event.preventDefault();
var hash = this.hash,
element = $(hash);
if(element.length){ //check if the element exists before doing the scrolling
$('html, body').animate({
scrollTop: element.offset().top
}, 800, function(){
window.location.hash = hash;
});
}
}
});
});
$(document).ready(function(){
var page = window.location.hash;
if(page != ""){
$('a[href='+ page +']').addclass('selected');
pageload(page.replace('#/page/', 'pages/?load='));
}
$('#top a').click(function(event){
$('#top a').removeClass('selected');
$(this).addClass('selected');
pageload($(this).attr('href').replace('#/page/', 'pages/?load='));
event.preventDefault;
});
});
<div id="top">
Link
Link
Link
Link
Link
</div>
So when i'm trying to do this, and load up a page using the window.location.hash, i get an error in the console saying:
Uncaught Error: Syntax error, unrecognized expression:
[href=#/page/link]
How can i make this work?
Try this instead:
$('a[href="'+ page +'"]').addClass('selected');
(You need to escape the value of the href – with this, you get a[href="#/page/link"].)
Your regular expression doesn't need the speech marks:
replace(#/page/, ...
I'm trying to animate my window scrolling immediately as my page loads. I tried putting an alert() for testing purposes and it worked... but only the alert() did.
Javascript
$(document).ready(function(){
alert("jQuery is working!")
$("html, body").animate({
scrollTop:$("#page5").offset().top
}, 1000);
return false;
});
It seems that you forgot a semi-colon after your alert statement, which could be the reason.
Although it is not required but the browser might have implemented it that way.
EDIT: I tried executing the below code by omitting the semi-colon on chrome and it throws an error as SyntaxError: missing ; before statement. After putting it back, it works fine.
$(document).ready(function(){
alert("jQuery is working!")alert("not working")
});
EDIT-2: According to comments, it seems that the element you are trying to access does not exist on the page.
Firebug is giving the error:
TypeError: $(...) is null
$('#menu img').hover(
I have no idea why. The seemingly problematic script is this which replaces an image when the cursor hovers over an image:
$(document).ready(function()
{
var storeNormalPath;
$('#menu img').hover(
function()
{
storeNormalPath = $(this).attr('src');
var imgArray = $(this).attr('src').split('.jpg');
$(this).attr('src', imgArray[0]+'Hover.jpg');
},
function()
{
$(this).attr('src', storeNormalPath);
}
).click (function()
{
//empty now
});
});
After some looking over your page using chrome's console, it looks that even $(document) is returning null.
jQuery(document) however, works, which suggests there is something in conflict with jQuery's $ operator.
(Source: I would direct you to this question: $.document is null)
Seeing that you have both jquery-1.5.1.min.js AND jquery.1.4.2.js referenced in your page header, perhaps that could be the reason of the conflict? Have you tried loading only one of them?
Let us know if that helps, sorry I couldn't be more help.
Good luck!
$(document).ready(function(){
var page = window.location.hash;
if(page != ""){
$('a[href='+ page +']').addclass('selected');
pageload(page.replace('#/page/', 'pages/?load='));
}
$('#top a').click(function(event){
$('#top a').removeClass('selected');
$(this).addClass('selected');
pageload($(this).attr('href').replace('#/page/', 'pages/?load='));
event.preventDefault;
});
});
<div id="top">
Link
Link
Link
Link
Link
</div>
So when i'm trying to do this, and load up a page using the window.location.hash, i get an error in the console saying:
Uncaught Error: Syntax error, unrecognized expression:
[href=#/page/link]
How can i make this work?
Try this instead:
$('a[href="'+ page +'"]').addClass('selected');
(You need to escape the value of the href – with this, you get a[href="#/page/link"].)
Your regular expression doesn't need the speech marks:
replace(#/page/, ...