Develop Reference

Phonegap jQuery onClick handler

I am trying to open links with the default ios system browser instead of the inappbroswer plugin. The following code does not open with the system browser:
function openlink(x){
window.open(x.href, "_system");
return false;
}
<h1>google</h1>
<h1>yahoo</h1>
$("html").click(function(){
$(".exLink").attr("onclick", "javascript:return openlink(this)");
});
This code does open with the system browser but it's not what I need.
<h1><a href="http://google.com" onClick='javascript:return openlink(this)'>google</a></h1>
What's the best way to get the onclick attr() to work?

Try something like this:
$(".exLink").on('click', function() { openlink(this); return false; });

It's because the click event for the .exLink is assigned, but not triggered, only when html level is clicked.
unless capturing the click event at the html level is there for a reason, try
$(function(){
$(".exLink").attr("onclick", "javascript:return openlink(this)");
})

Try simple like this -
google

How do I use a javascript injection to click on links of a specific class?

I have a page with many links that execute certain actions on click. Example:
<a class="x" onclick="somefunction(does_something)" href="javascript:void(0)">x</a>
I want to use a javascript injection to click all of them on the page. So far, I tried:
javascript:document.getElementsByClassName("x")[0].click();
But that doesn't seem to work. What am I doing wrong?

If your JS is inline, you can simply call what you need right in the href...
<a href="javascript:functionName('parameter1','parameter1','parameter1')">
Click to execute JS</a>
...but not wise if the parameters aren't predefined by you. Definitely don't do this if your parameters take user input and update/execute against your database, but it does work.

First of all, I'd suggest using jQuery, it's a lot easier to understand. Next, you can't really 'click' links dynamically and run it's function. You need to simply run a function on all the links and use it's address.
window.open( $('.x').attr( 'href' ), '_blank' );
Iterating through all links and opening them inside a container...
jQuery
$('#some_link_container').find('a').each(function() {
var link = $(this); // This is the current link in the iteration
window.open( link.attr( 'href' ), '_blank' ); // Prepare for mass computer lag
});
HTML
<div id="some_link_container">
A link
A link
A link
A link
</div>
If you are trying to run a function onclick, it's best to use a event listener rather then onclick. Something like the following
Event Listener Demo
Here we listen to a click on any link inside our container, then we run a function.
$('#some_link_container').find('a').each(function() { // Each link inside our div container
var link = $(this); // The current link
link.on('click', function(e) { // When the link is clicked
e.preventDefault(); // Stop the link from forwarding to that page
goodbye( link.attr('href') ); // Run our function onclick
});
});
var goodbye = function(link) {
alert( 'Goodbye guest! Forwarding you to: ' + link );
window.open( link, '_self' );
}

Replacing asp:imagebutton with processing image using jquery

So I have an asp:imagebutton for lets say loginning into a web site.
OnClick the page does xyz and then redirects you, there is a pause time between the redirect from when the button was clicked. To make the wait a bit more user friendly I am replacing the button with a processing image and text the javascript that does this is:
$(document).ready(function () {
$(".ShowProcessing").click(function () {
$(this).replaceWith("<img src='/content/images/processing.gif' /> Processing");
});
});
This is the button:
<asp:ImageButton ID="Login" runat="server" OnClick="Login_Click" CssClass="ShowProcessing" />
The problem is the change to processing image happens but the asp OnClick event however does not fire.

Instead of replacing the entire element with something else entirely, just alter the src of the current element:
$(".ShowProcessing").click(function () {
$(this).attr("src", "/content/images/processing.gif");
});
This is if ImageButton is rendered as an img proper, somewhere, and not just some funky input with scripting (I don't recall off the top of my head, and webforms does some things in strange ways). Then proceed to insert text after the existing element as desired.

Instead of using .replace() tried and succeeded with:
$(".ShowProcessing").click(function () {
$(this).hide();
$(this).after("<img src='/content/images/processing.gif' /> Please wait..." )
});

I guess you may try to remove the first image and then add the new processing image.
instead of replace use (Remove then add) functions.

Executing JavaScript when a link is clicked

Which is preferable, assuming we don't care about people who don't have JavaScript enabled?
Or
Is there any difference?
Or there any other ways I'm missing besides attaching an event to the anchor element with a JavaScript library?

The nice thing about onclick is you can have the link gracefully handle browsers with javascript disabled.
For example, the photo link below will work whether or not javascript is enabled in the browser:
foobar

it's better to use the onclick because that's the way the things should be.
The javascript: was somekind of hackish way to simulate the onclick.
Also I advice you to do some non intrusive Javascript as much as possible, it make the code more easy to read and more maintainable!

href="#" has a number of bad side effects such as showing # in the browser footer as the destination URL, and if the user has javascript disabled it will add a # at the end of their URL when they click the link.
The best method IMHO is to attach the handler to the link in your code, and not in the HTML.
var e = document.getElementById("#myLink");
e.onclick = executeSomething;

This is essentially the pattern you'd want to follow:
Write your HTML markup
Attach event handlers from JavaScript
This is one way:
<a id="link1" href="#">Something</a>
<script type="text/javascript">
// get a reference to the A element
var link1 = document.getElementById("link1");
// attach event
link1.onclick = function(e) { return myHandler(e); };
// your handler
function myHandler(e) {
// do whatever
// prevent execution of the a href
return false;
}
</script>
Others have mentioned jQuery, which is much more robust and cross-browser compatible.

Best practice would be to completely separate your javascript from your mark up. Here's an example using jQuery.
<script type="text/javascript">
$(function() {
$('a#someLink').click( function() {
doSomething();
return false;
});
});
</script>
...
some text

Yes I would agree to use onclick and leave the href completely out of the anchor tag... Don't know which you prefer to do but I like to keep the 'return false' statement inside by function as well.

The main difference is that:
The browser assume by default the href attribute is a string (target url)
The browser knows that in a onclick attribute this is some javascript
That's why some guys specify to the browser "hey, interpret javascript when you read the href attribute for this hyperlink" by doing ...
To answer the question, that's the difference!
OTOH what's the best practice when using javascript events is another story, but most of the points have been made by others here!
Thanks

Javascript: open new page in same window

Is there an easy way to modify this code so that the target URL opens in the SAME window?
click here``

<script type="text/javascript">
window.open ('YourNewPage.htm','_self',false)
</script>
see reference:
http://www.w3schools.com/jsref/met_win_open.asp

The second parameter of window.open() is a string representing the name of the target window.
Set it to: "_self".
click here
Sidenote:
The following question gives an overview of an arguably better way to bind event handlers to HTML links.
What's the best way to replace links with js functions?

Go;

try this it worked for me in ie 7 and ie 8
$(this).click(function (j) {
var href = ($(this).attr('href'));
window.location = href;
return true;

Here's what worked for me:
<button name="redirect" onClick="redirect()">button name</button>
<script type="text/javascript">
function redirect(){
var url = "http://www.google.com";
window.open(url, '_top');
}
</script>

I'd take that a slightly different way if I were you. Change the text link when the page loads, not on the click. I'll give the example in jQuery, but it could easily be done in vanilla javascript (though, jQuery is nicer)
$(function() {
$('a[href$="url="]') // all links whose href ends in "url="
.each(function(i, el) {
this.href += escape(document.location.href);
})
;
});
and write your HTML like this:
...
the benefits of this are that people can see what they're clicking on (the href is already set), and it removes the javascript from your HTML.
All this said, it looks like you're using PHP... why not add it in server-side?

So by adding the URL at the the end of the href, Each link will open in the same window? You could also probably use _BLANK within the HTML to do the same thing.

try
<a href="#"
onclick="location='http://example.com/submit.php?url='+escape(location)"
>click here</a>