$(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/, ...
Related
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.
I am not sure why this keeps happening. I searched how to remove hashtags from the URL and found many answers. All of them was no help as all they simply did was remove the hashtag, but I had to refresh the page. And even then that still did not help. My problem is that the hashtag appears when I click on this anchor tag:
echo '<a href="?id='.$row['id'].'" <-- here is what I am trying to add to the URL, but the hashtag appears. id="smallbtn" data-toggle="modal" data-target="#small" data-modal="small">';
Here is the javascript I used to try and fix my problem, but no success (Also was told to use it in the <head>.):
<script type="text/javascript">
// remove fragment as much as it can go without adding an entry in browser history:
window.location.replace("#");
// slice off the remaining '#' in HTML5:
if (typeof window.history.replaceState == 'function') {
history.replaceState({}, '', window.location.href.slice(0, -1));
}
</script>
And I don't know if this is the problem, but I use this to open the modal and put the anchor tag href in the URL:
<script type="text/javascript">
$(document).ready(function(){
$(window.location.hash).modal('show');
$('a[data-toggle="modal"]').click(function(){
window.location.hash = $(this).attr('href');
});
});
</script>
My goal is to try to put that href in the URL as parameter and so far I am having a hard time getting it that work. Any help on this is gladly appreciated!
In the click event callback, the line where you set window.location.hash = $(this).attr('href'); , this will cause the a '#' to be prefixed before the content you set, ie, the value of href attribute.
I'm trying to make my site crawlable by changing the # to #!. The page works OK when clicking on the link, but I cannot manage to fix the script for calling the hash directly from the URL.
This is what I have
HEAD
$(function() {
$("#tabs a").click(function() {
var page = this.hash.substr(2);
$.get(page+".php", function(gotHtml) {
$("#content").html(gotHtml)
});
});
(location.hash) ? $("a[href="+location.hash+"]").click() : $("#tabs a:first").click()
});
BODY
< ul id="tabs">
< li>< a href="#!foo" >foo</a>< /li>
< li>< a href="#!foo2" >foo2</a>< /li>
< li>< a href="#!foo3" >foo3</a>< /li>
< /ul>
When I click on foo, content loads ok, but if I call my site with www.foo.com/#!foo, it doesn't load the content.
Can anyone guide me?
If you look in your error console you'll see that it's throwing the following exception:
Uncaught Error: Syntax error, unrecognized expression: [href=#!foo2]
In order to fix this, you can change your JavaScript ever so slightly.
$(function() {
$("#tabs a").click(function() {
var page = this.hash.substr(2);
$.get(page+".php", function(gotHtml) {
$("#content").html(gotHtml)
});
});
(location.hash) ? $("a[href='"+location.hash+"']").click() : $("#tabs a:first").click()
});
Notice I just stuck single quotes around your href portion of your selector.
On a related note, I would recommend that if you're going to do hash-bangs (they are a headache) that you make the href attribute the actual URL value that you're going to. In the JavaScript do the switch over to a hash-bang. The reason for this is that users with JavaScript disabled will not be able to use your site. Your click function will change ever so slightly to set the hash, load the page, and disable the default click behavior.
Update for question: On the related note, I meant if the href="#!foo" change that href to actually be href="foo.php". If a user does not have JavaScript enabled they can go to foo.php and see the page. If the user does have JavaScript place the hashbang in the URL and do what you did previously. You can do this manually; however, libraries like jQuery BBQ can really make this trivial.
$(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 am trying to do two things:
Append a div to the body
Make all clicks to links class editlink make a popup and not go to their href
Doing just #2 is fine:
$(document).ready(function(){
// $(body).append("<div>Hello world</div>");
$("a.editlink").click(function(event){
alert("Javascript-endabled users should see this");
event.preventDefault();
});
});
But if I uncomment the code for #1 like below,
$(document).ready(function(){
$(body).append("<div>Hello world</div>");
$("a.editlink").click(function(event){
alert("Javascript-endabled users should see this");
event.preventDefault();
});
});
the div appears as expected, but clicking editlink links no longer gives me a popup and navigates to the link's href.
What's going on?
Did you mean:
$("body")
rather than:
$(body)
?
Can I recommend that you use Firebug to get decent error reporting? You'd have found this very quickly with Firebug.
You are missing the quotes for your body tag selector:
$('body').append("<div>Hello world</div>");