Develop Reference

javascript alert redirect not working properly

I have an alert where if the answer is OK then it should redirect the user to a different page and if they click cancel they should stay on the page. But no matter what button they press it will redirect them to the new page. What is going on?
<script>
function validation() {
if (window.confirm("Click OK if you have entered Anthropometric Data")){
window.location.replace = "send_PhysiologicalMeasures.html";
}
}
</script>

Your HTML button is wrapped in an a tag, which is effectively a link. a elements will always take you to their link specified in href, so just remove that a element: change your HTML to:
<button class="button PhysiologicalMeasures" onclick ="validation()">Record Physiological Measures</button>

Another method would be to change the link's onclick to return the status:
Link
and the JS:
<script>
function validation() {
if (window.confirm("Click OK if you have entered Anthropometric Data")){
return true;
}
return false;
}
</script>
By returning false, you will prevent the execution of the link, and returning true will allow the link to work.
You can see it here: https://jsfiddle.net/am0adszu/

on click event inside pageinit only works after page refresh

I know there're a lot of duplicate questions out there, I checked almost all of them, but I just couldn't find a solution in my case. So, here's my problem:
I have a banner which will show on every page of the project, inside the banner there's a close button to close the banner, and a download button which leads user to the app store to download the app. My banner works perfect only except I have to refresh the page to get these two buttons works. Here's my code:
$(document).on("pageinit", function () {
$("#close").on("click", CloseBanner);
$("#download").on("click", SetAppStorePath);
//alert("pageinit");
});
function SetAppStorePath() {
if (isIOS) {
window.location = "https://itunes.apple.com/us/app/myapp/id.....";
}
else if (isAndroid) {
window.location = "https://play.google.com/store/apps/details?id=.....";
}
}
function CloseBanner() {
$('.banner').hide();
}
Here's the simplified html:
<div class="banner">
<div class="container">
<a id="close">×</a>
<a id="download">Download</a>
</div>
</div>
I did a little test, and found something tricky: I added that alert inside pageinit, I noticed that the alert is always executed(means my button on click events are always registered) when I jump from page A to page B. But when the button works, I see page A is gone, blank page shows, alert shows, then page B shows, the buttons work. When it doesn't work, the order is different, I still can see page A, then I see alert(I still can see page A now), then it changes to page B, the buttons don't work.
So seems that when pageinit executed after page jumped, it works,but sometimes pageinit executed before page jumped, then it doesn't work.

I think your elements are dynamically created. You may need event delegation.
$(document).on("pagecreate", function () {
$("body").on("click", "#close", CloseBanner);
$("body").on("click", "#download", SetAppStorePath);
});

Move following outside of the init and change it like following
$(document).on("click","#close", CloseBanner);
$(document).on("click","#download", SetAppStorePath);
when page init executes, DOM is not ready. that is the reason it is not binding to close or download elements. and this is the way to overcome that. you dont need pageinit event here

Chrome ignoring jquery click function

I have the following html/code that works fine in IE but when I click the link in Chrome, nothing happens.
The HTML is as follows:
<h1 id="pagetitle">Daina - kora dziesmu kr&#257jums</h1>
<div class="frontpage">
<p id="arvilcinu">Ar vilci&#326u R&#299ga braucu</p>
</div>
<!--***************** Ar Vilcinu *******************-->
<div id="arvilcinudisplay" class="singlesong">
<p>Click here to download PDF file for printing</p>
<p>Click here to watch the video - sung by Daina</p>
<p id="back"><img src="backbutton.jpg" alt="Back to Main menu" height="40" width="100"></p>
</div>
The jquery bit of script is as follows:
$("#arvilcinu").click(function(){
$(".frontpage").fadeOut(1000,function(){
document.getElementById("pagetitle").innerHTML = "Ar vilci&#326u R&#299ga braucu";
$("#arvilcinudisplay").css("display","block");
});
});
The idea is that when the user clicks the link (id=arvilcinu) that the link fades out and the relevant info is then displayed. Clicking the link in Chrome just makes the screen flash for a second but nothing on the screen changes.
Thanks

You need to use preventDefault() to remove natural behaviour of link and to fire click event written by you, like below :
Also you can write your code in jQuery only (no javascript) --
$("#arvilcinu").click(function(e){
e.preventDefault();
$(".frontpage").fadeOut(1000,function(){
$("#pagetitle").html("Ar vilci&#326u R&#299ga braucu");
$("#arvilcinudisplay").show();
});
});
Working Demo

It is because of the two event will be occur when you click on the link. one is of your anchor tag <a href="" >... and another is of your click event on element whose id is arvilcinu. anchor tag is inside of the <p id="arvilcinu"> which leads to this behaviour.
You need to prevent default behaviour of the <a> tag which will be done by using
event.preventDefault() function on the event.
If this method is called, the default action of the event will not be triggered.
You code should look like below :
$("#arvilcinu").click(function(e){
e.preventDefault();
// rest of you logic on click event
});

How to avoid page refreshing on anchor (<a></a>) tag click?

I'm creating a dynamic website. My problem is when i click on the following tag:
<a class="s-inte" href="set_interesantes.php?n=Frank Melo&u=f6e79cfe9c0ecc4c08dac4c860c4802b&back=http://localhost:8085/Something/success/profile.php?search_user=f6e79cfe9c0ecc4c08dac4c860c4802b&p=12&sa=f6e79cfe9c0ecc4c08dac4c860c4802b&i=2345123&dl=&iv=1">Interesante</a>
The page gets refreshed, How do I avoid this page refresh?

What you want to accomplish is to update some counter of interestings w/o refreshing the page?
You should do it using AJAX techniques, this is what AJAX was invented for.
Consider the following code, it's top easy (jQuery library required):
Interesante
<script>
$(function(){
$("a.counter").click(function()
{
$.get("set_interesantes.php?n=Frank Melo&u=f6e79cfe9c0ecc4c08dac4c860c4802b&back=http://localhost:8085/Something/success/profile.php?search_user=f6e79cfe9c0ecc4c08dac4c860c4802b&p=12&sa=f6e79cfe9c0ecc4c08dac4c860c4802b&i=2345123&dl=&iv=1" );
.... // you can do some animation here, like a "Liked!" popup or something
return false; // prevent default browser refresh on "#" link
});
});
</script>

you need to prevent default action on the click event.
You can do a simple inline handler which will return false
<a class="s-inte" onclick="return false" href="set_interesantes.php?n=Frank Melo&u=f6e79cfe9c0ecc4c08dac4c860c4802b&back=http://localhost:8085/Something/success/profile.php?search_user=f6e79cfe9c0ecc4c08dac4c860c4802b&p=12&sa=f6e79cfe9c0ecc4c08dac4c860c4802b&i=2345123&dl=&iv=1">Interesante</a>
or write a jQuery handler which will do the same
$('.s-inte').click(function(e){
e.preventDefault()
})

If you are dynamically loading the content using ajax. You should probably call it in this way. This way it will work for every anchor with .s-inte class, no matter it's added dynamically or statically.
$(document).on('click', '.s-inte',function(e){
e.preventDefault();
// Do more stuff every anchor click here...
});

put href="javascript:void(0)"

How to disable anchor tag after first click in javascript ?

I have a a href tag with css class thickbox I need to disable the link after first click. how I can do this?
Aspx code
<a href="SomePage.aspx?FDID=11&KeepThis=true&TB_iframe=true&height=150&width=400"
onclick="return DoSomething(this)" class="thickbox" id="AnchorID">
<img id="MyImageButton" alt="Image" src="SiteImages/image.png" runat="server" />
</a>
My JavaScript Method
function DoSomething(element) {
return true;
}

In your javascript you can set the attribute disabled="" at your element. (look here)
If, with disable, you mean to not let the browser go to the url, you have to call event.preventDefault() (look here)

For this you have to create a hidden feild which will store a value example 1 or 0. If the user clicks the link first time set the hidden feild value to 1 and allow the user to redirect and then disable the hyperlink. If user again clicks the hyper link then first check the hidden feild if it contains a value 1 then don't allow him to redirect. Hope you understand my point. Also set the href property in the javascript.

I'm not sure exactly what the OP is trying to do, but if it is purely to allow the script to run the once after clicking, something like this would work...
function DoSomething(element) {
if(element.getAttribute("block")==null){
...
element.setAttribute("block","1");
return true;
}else{
return false;
}
}
This has the advantage of not changing the style of button by setting the disabled attribute.
However, returning true from the function and then in turn returning true to the OnClick handler of the link will result in the browser navigating to the URL in href... so I can't see why the need for the blocking of a 2nd run. (Unless thickbox, which I know nothing about, works in a way which is not the normal.)