Develop Reference

jquery function reloads the page on click event

I am having a problem. Below is my code:
$(function() {
$('#find').on("click",function(){
name = $('#q_name').text();
location = $('#q_location').text();
city = $('#q_city').text();
alert("Clicked");
});
});
When this anchor tag whose id is find is clicked the alert "Clicked" appears then the whole page is reloaded. I am getting name, location and city values from p tags separately.
Also when I keep only one assignment and discard other two then page reloading stops and only alert occurs. This is the beginning as I have to send this collected data to via AJAX to controller function but first I want to stop reloading the page. What am I doing wrong?
P.S: I'm very new to jQuery and only know few of its basics. Please help.

You need to stop the default behaviour of the link (ie. changing the URL) by using event.preventDefault, try this:
$('#find').on("click", function(e){
e.preventDefault();
name = $('#q_name').text();
location = $('#q_location').text();
city = $('#q_city').text();
alert("Clicked");
});

Rename your location variable to location1.
i think it refer to browser location.

To stop the page reload and navigation behavior of anchor tag, you can use javascript:void(0) or event.preventDefault()
Click
Or
$(function() {
$('#find').on("click",function(e){
e.preventDefault()
name = $('#q_name').text();
location = $('#q_location').text();
city = $('#q_city').text();
alert("Clicked");
});
});
Now your page will not reload on click on this anchor tag.

try this. simple and easy
Modify the href attribute as given below
<a href="javascript:void(0)" onclick="whateverFunction()" >

How to execute an anchor\href in my javascript?

I'm trying to figure this one out but my mind has just gone blank.
I have a button element on my webpage with an id: e.g <button id="someId"></button>
In the document.ready function, I have an on click event which occurs when the user clicks the button. e.g. $('#someId').on('click', function() {
In this event there is an if statement which determines a value. Depending on the value, I want to execute a href in an anchor but I can't figure out the syntax.
The reason I am trying to execute the anchor in the javascript is because i'm passing a variable into the href. It could be true or false.
Here is what I have\what I'm trying to do. Any help would be great.
if (date1 <= date2) {
//I want to execute this anchor
}else{
//otherwise execute this anchor
}

You're looking at the problem wrong. An anchor is a static HTML element that, when clicked, changes the current window location (i.e. URL). The JS equivalent looks something like this: window.location.href = 'http://www.google.com';. So by setting window.location.href you will use JS to navigate to another URL.

The window.location method posted by Eli is the correct way to visit a link using JavaScript. However, if you can use a link instead of a button, you could just set the href of the link in the onclick. Here is a sample jsFiddle that visits a different url based on whether one input is greater than the other:
http://jsfiddle.net/jw3Pd/
So when the user clicks the link, set the href to whatever link you want the user to visit.
$("#someId").on("click", function () {
if (date1 <= date2) {
//I want to execute this anchor
$("#someId").attr("href", "#{Application.openthispage(true)}");
} else{
//otherwise execute this anchor
$("#someId").attr("href", "#{Application.openthispage(false)}");
}
});

Warning when clicking external links and how to add it to a link class

I'm not sure how to do a pop-up that warns when you are clicking on external links, using javascript.
I figured that it would be handy to put a class on my external links as well, but I'm not quite sure it's done correct as it is now either. This is the HTML I'm using at the moment:
<div id="commercial-container">
<img src="picture1.jpg" />
<img src="pciture2.jpg" />
<img src="picture3.jpg" />
<img src="picture4" />
</div>
I'm very new to javascript and very unsure on how to solve my problems. The pretty much only thing I figured out so far is that I will have to use window.onbeforeload but I have no clue on how to figure out how to write the function I need.
I want to keep my javascript in a separated .js document instead of in the HTML as well.

Call the confirm() function from the onClick attribute. This function returns true if the user clicks OK, which will open the link, otherwise it will return false.
<img src="picture1.jpg"/>
Hope this helps.

You can do it by adding a click event handler to each link. This saves having to use a classname.
window.onunload will run even if the user is just trying to close your site, which you may not want.
staying in site
going external
<script>
var a = document.getElementsByTagName('a');
var b = a.length;
while(b--){
a[b].onclick = function(){
if(this.href.indexOf('yourwebsitedomain.com')<0){
//They have clicked an external domain
alert('going external');
}
else{
alert('staying in your site');
}
};
}
</script>

Since you're new to Javascript I advice you to use a javascript framework to do all the "heavy work" for you.
For example with JQuery you can easily bind an onClick event to all external links by doing:
$(".external").click(function(event) {
var confirmation = confirmation("Are you sure you want to leave ?");
if (!confirmation) {
// prevents the default event for the click
// which means that in this case it won't follow the link
event.preventDefault();
}
});
This way every time a user clicks on a link with the external class, a popup message box asking for a confirmation to leave will be prompt to the user and it will only follow the link if the user says "yes".
In case you want only to notify without taking any actions you can replace the confirmation by a simple alert call:
$(".external").click(function(event) {
alert("You are leaving the site");
});

If the user click an image,div,.. you need to look for the parent node. !There could be several elements wrapped with a-tag.
document.addEventListener('click',function(event){
var eT=(event.target||event.srcElement);
if((eT.tagName.toLowerCase()==='a' && eT.href.indexOf('<mydomain>')<0)
|| (eT.parentNode!==null && eT.parentNode.tagName.toLowerCase()==='a'
&& eT.parentNode.href.indexOf('<mydomay>')<0))
{
//do someting
}
else if(eT...){
...
}
},false);
Two side notes:
If you want to keep track a user by cookie or something similar, it's good practice to check external links, set a timeout and make a synchronic get request to renew.
It's better to add the event to the document or a div containing all events and decide on target.

How to check hyperlink status using JavaScript?

I created a dynamic list with hyperlinks using Android PhoneGap. Now I want to check the link status (that is, whether the link is clicked or not) each time I run that application.

Add an attribute to link "onclick" and do something on onclick. There is also to be a counter variable to differentiate the links. Like this:
<a onclick="alert('clikced'+counter)">Link</a>
Or you can call any JavaScript function on the onclick event.

You can add event to every link, when it is clicked, count++, and save count to local storage or something else. When run the application next time, check out count for each link.

function linkisclicked(){
//Do your tasks
}
<a onclick="linkisclicked()"> link </a>

Click count possible with javascript?

Let's say, in website, I want to display the notice message block whenever people click any of the link at my website more than x number of times. Is that possible to count with javascript and display the notice message block ? And can we count the refresh times also ? Or can it be only done with server side language like php ? Please kindly suggest. Thank you.
With Regards,

To do something when any link is clicked is best done with JQuery's live:
Description: Attach a handler to the
event for all elements which match the
current selector, now and in the
future.
$('a').live('click', function() {
// Live handler called.
});
Even if you add more links in run time, this will take care of it.
For counting refreshes I would do it with ajax calls on window.load event, or if you want to use new tech - store it locally with Html5. :-)

You can do that on the client. However, this will be limited to the browser. The simplest will be to store this information in cookies on the client. For instance with jQuery you could simply intercept clicks like that:
$("a").click(function() {
var clickedUrl = $(this).attr('href');
// Here you update the cookie for the count of clicks for that A URL
});

I would either count page refreshes serverside or probably call an ajax function to update the count when the page loads.
If you want to count clicks you may need to bind an event to each link and then for each indivisual button store the number of clicks in global variables...

You could register each click event on the document by using:
$(document).click(function()
{
// Check the number in the cookie and add another
// click to the cookie
});
Then you could use the jQuery cookie plugin to store that value and check it each time there is a click (in the function above).
here's the cookie plugin: https://github.com/carhartl/jquery-cookie
I threw together a quick example. If you're not worried about doing this from page to page then you don't need cookies, just store it in a variable:
http://www.webdesignandseo.net/jquery/clickcount/