Small riddle: Why this isn't working on Chrome? - javascript

Any ideas on why the following code perfectly 'posts' when using FF (I can see the DB updated) but fails on Chrome?
$("a").click(function() {
$.post("ajax/update_count.php", {site: 'http://mysite.com'});
});
Tip: jQuery version is jquery-1.4.3.min.js
Update
The issue seems to be that when the link is clicked, a new page is loaded, which seems to be stopping the post in Chrome... Is that a possible explanation? If so, what can I do?

You need to prevent the default behavior of an <a>. Use this:
$("a").click(function (e) {
e.preventDefault();
// Your code
});
or, if you actually want the link to load the new page, you could try:
$("a").click(function (e) {
e.preventDefault();
var href = this.href;
// Might want to put a "loading" spinner on the page here
$.post("whatever", {}, function () {
window.location.href = href;
});
});
Might have to change it a little - maybe use $(this).attr("href") or $(this).prop("href"), not this.href...the differences those evaluate to may or may not work with window.location.href (I'm sure both do).

Related

Hash link disables relative link in HTML

I'm building a webapp that basically its an one-page webapp so to link to another part of the app is like this:
This is possible because I used JavaScript that contains animations and different stuff, the problem is that somehow, this method disables the possibility to link like this:
How can I have both links, without disabling the hash links?
EDIT: To be honest I dont know which part of the js its causing this behaviour because I took a template, but here is the js:
https://github.com/gomobile/template-list-view/blob/master/www/lib/appframework/appframework.ui.min.js
I believe you have a code like this
$('a').on('click', function(e) {
e.preventDefault();
});
You need to have an if like
if ($(this).attr('href').indexOf('#') == 0) {
e.preventDefault();
}
OR better change the selector to:
$("a[href^=#]").on('click', function(e) {
e.preventDefault();
// your animation here.
});
This code will just apply to anchor elements that have the href starting with #
------- update --------
You added a minified js :).
If you don't have the problem in your code, you can fix it with a hack like this:
$('a:not([href^=#])').on('click', function(e) {
window.location.href = $(this).attr('href');
});
But you should really find the issue, not fix it like this :)

code not working, jcepopup window not reloading while closing

I'm having a problem with a form. I need to perform a query once a jcepopup window has closed, but so far i can't make it work. I tried the following code:
function passVal(val1,val2){
parent.document.getElementById('award_number').value=val1;
parent.document.getElementById('award_name').value=val2;
parent.document.getElementById('aw_number').value=val1;
parent.document.getElementById('aw_name').value=val2;
window.onunload = refreshParent;
window.parent.jcepopup.close();
}
window.onunload = refreshParent;
function refreshParent() {
window.opener.location.reload();
}
However, so far it's not working, at least not the reload part. It returns the values, but i can't use them to trigger the next query that i would like to use.
Anyway, I'm open to suggestions. Thanks
Check the MDN docs which state:
You can and should handle this event through window.addEventListener() and the unload event. More documentation is available there.
window.addEventListener('unload', function () { console.log('do stuff'); } );
https://developer.mozilla.org/en-US/docs/Web/API/Window.onunload

jQuery script not working as excepted

I have a jQuery script that should open images full size when they are clicked.
$('img').click( function() {
var src = $(this).attr('src');
window.location.href=src;
});
However, when images are clicked they don't open as expected. Does anyone have any idea why? Any help appreciated :)
Your code seems to work just fine here: http://jsfiddle.net/jfriend00/n6n5R/
So, there is likely some issue with your event handler getting installed properly. Here are things to check:
Are you waiting for the document to load before installing your event handlers?
Are your images dynamically loaded?
Do you have any script errors that are preventing your event handler from running?
For item #1, I would suggest this:
$(document).ready(function() {
$("img").click(function() {
window.location.href = this.src;
});
});
For item #2, you may want to use delegated event handling instead:
$(document).ready(function() {
$(document).on("click", "img", function() {
window.location.href = this.src;
});
});
For item #3, you need to check your browser error console or the debug console and see what script errors might be causing your scripts to stop executing prematurely.
P.S. You may also note that I've simplified your code a bit by just using this.src rather than $(this).attr("src"). No point in using jQuery when it is just longer and slower.
Make sure Jquery is loaded before your script .Also if images are loaded dynamically use this script:
$('body').on('click','img', function() {
var src = $(this).attr('src');
window.location.href=src;
});
Have your images absolute path names? if not, you want to do something like this:
window.location.href = window.location.href.substr(0, window.location.href.lastIndexOf('/')) + src;

JQuery add event to anchor and get url

I am trying to get the childBrowser plugin to work on links by adding the code at runtime to links.
Normally, if I was adding to code manually to the links, this is how it would look:
<a href="#" window.plugins.childBrowser.showWebPage('http://www.google.com');>click me</a>
Now, because I need to do it at runtime I've got this together:
$('a').on('click', function () {
window.plugins.childBrowser.showWebPage('http://www.google.com');
});
But the problem is that all links might have a different url so I need to somehow use the code about but with the link that it comes with and not a hardcoded url as above.
Links would initially look like below.
click me
How could I do this?
Use this.href
$('a').on('click', function () {
window.plugins.childBrowser.showWebPage(this.href);
return false;
});
Try this
$('a').on('click', function () {
window.plugins.childBrowser.showWebPage($(this).attr('href'));
});

windows.location.href not working on Firefox3

We have a JavaScript function named "move" which does just "windows.location.href = any given anchor".
This function works on IE, Opera and Safari, but somehow is ignored in Firefox. Researching on Google doesn't produce a satisfactory answer why it doesn't work.
Does any JavaScript guru knows about this behavior, and what would be the best practice to jump to an anchor via JavaScript?
Have you tried just using
window.location = 'url';
In some browsers, window.location.href is a read-only property and is not the best way to set the location (even though technically it should allow you to). If you use the location property on its own, that should redirect for you in all browsers.
Mozilla's documentation has a pretty detailed explanation of how to use the window.location object.
https://developer.mozilla.org/en/DOM/window.location
If you are trying to call this javascript code after an event that is followed by a callback then you must add another line to your function:
function JSNavSomewhere()
{
window.location.href = myUrl;
return false;
}
in your markup for the page, the control that calls this function on click must return this function's value
<asp:button ........ onclick="return JSNavSomewhere();" />
The false return value will cancel the callback and the redirection will now work. Why this works in IE? Well I guess they were thinking differently on the issue when they prioritized the redirection over the callback.
Hope this helps!
One observation to ensure in such a scenario
Following will work in IE, but neither in Chrome nor in Firefox (the versions I tested)
window.location.href("http://stackoverflow.com");
Following will work all the three
window.location.href = "http://stackoverflow.com";
Maybe it's just a typo in your post and not in your code, but it's window and not windows
I am not sure to follow you.
I just tried: going with FF3 to Lua 5.1 Reference Manual (long and with lot of anchors).
Pasting javascript:window.location.href="#2.5"; alert(window.location.href); in the address bar, I went to the right anchor and it displayed the right URL. Works also with a full URL, of course.
Alternative code: javascript:(function () { window.location.href="#2.5"; })();
Perhaps you forgot the #. Common problem, also with image maps.
I have the same problem and I guess this is related to a click event.
I have a function that moves the browser to a specific page. I attach that function to some click events: in a button and in a image. AlsoI execute the function when the user press escape (document onkeypress event).
The results are that in all cases the function is called and executed, but only when there is a click the browser goes to the address I want.
Update
I got it working! with a
setTimeout( "location.replace('whatever.html');", 0 );
I don't know why the location.replace wasn't working when the event was a keypress, but with the settimeout it works :)
Update
Returning false after the event when you press escape makes the redirection works. If you return true or nothing the browser will not follow
You've got to add return false; after the window.location.href as mentioned above.
function thisWorks()
{
window.location.href = "http://www.google.com";
return false;
}
function thisDoesNotWork()
{
window.location.href = "http://www.google.com";
}
window.location.href works fine in all versions of Firefox, as does document.location.href I think that there is something else in your code that is breaking things.
drop this in a blank page, if it works, it indicates there is something else wrong on your page.
<script>
window.location.href = 'http://www.google.com/';
</script>
You could also use window.location.replace to jump to an anchor without register it in the browser history:
This article illustrates how to jump to an anchor and uses href as read-only property.
function navigateNext()
{
if (!window.location.hash)
{
window.location.replace(window.location.href + unescape("#2"))
}
else
{
newItem = nextItem(window.location.hash)
if (document.getElementById(newItem))
{
window.location.replace(stripHash(window.location) + "#" + newItem)
}
else
{
window.location.replace(stripHash(window.location) + "#1")
}
}
}
Have you tried this?
Response.Write("<script type='text/javaScript'> window.location = '#myAnchor'; </script>";);
please add full javascript script tag
<script type="text/javascript" language="javascript"></script>
window.location.hash = "#gallery";
For reference I had the same problem.
onclick = "javascript: window.location('example.html');" didn't work under FF (latest)
I just had to rewrite to onclick = "javascript: window.location = 'example.html';" to get it working
I just overcome the same problem. and the problem is not in javascript, but the href attribute on the <a> element.
my js code
function sebelum_hapus()
{
var setuju = confirm ("Anda akan menghapus data...")
if (setuju)
window.location = "index.php";
}
my previous html was
Klik here
and I update it to
Klik here
or remove the href attribute
hope this helps.
window.location.assign("link to next page") should work in both (chrome and firefox) browsers.
window.location.assign("link to next page")
Another option:
document.location.href ="..."

Categories