We Keep Coding

JQuery href preventdefault issue with anchor

I have a link as following.
Tab 3
On tab 2, when Tab 3 is clicked, I want to first validate whether form in Tab 2 is correctly filled.
$("#tab3Link").click(function(e){
e.preventDefault();
$("#tab3Link").prop("href", "#");
if(validateTab2()){
$("#tab3Link").prop("href", "#tab3Info");
return true;
}else{
return false;
}
});
#tab3Info anchor should take the page to a new div. But click does not happen. But if I manually append #tab3Info at the end of the URL and press enter, page moves to new tab. So in the above function, although href is changed, click function does not happen.
This is working fine when JQuery 1.4.2 is used with Jquery mobile 1.1.0. Problem occurs when JQuery was upgraded to 1.9.1 and Jquery mobile to 1.3.2.

Usage of jQuery prop() method does not apply since it sets a property in the element (in your case #tab3Link). But you want to manipulate the location value.
Instead of:
$("#tab3Link").prop("href", "#tab3Info");
You can either use:
window.location.hash = 'tab3Info';
or:
window.location += '#tab3Info';

Instead of return true, try:
$(this).unbind('click');
$(this).click();

Set variable on back button click

I have a function I dont want to run if the broswer back button was clicked. I am attempting to use something like the below:
var backButtonClicked = false;
window.onpopstate = function() {
alert("Back clicked");
backButtonClicked = true;
};
then later I am trying to use the variable like:
if(!backButtonClicked) {
//run function if not back button clicked
}
However with the code above the alert is not getting fired when I hit the back button.
window.onpopstate = function() {
alert("back clicked");
backButtonClicked = true;
};
history.pushState({}, '');
With the code above the alert gets fired when I click the back button, however the browser doesnt navigate back to the previous page unless I click the back button for the second time. Is there something I am doing incorrect here or is there a better approach to achieve what I am trying to do?

My coding skills are not very good when I have very little time to type. But maybe an eventlistener would be another approach to the problem you can maybe consider?
For examples and reference from an excellent source:
http://www.w3schools.com/js/js_htmldom_eventlistener.asp
Hope this helps, and good luck!

how to change href during onclick event

I am trying to create a dynamic hyperlink that will download an image retrieved from the server.
The code I am using:
HTML:
<a class="btn" id="controlDownloadJPEG" download>Save & Download</a>
JS:
this.downloadJPEGClickHandler = function() {
CollageCore.downloadJPEG(function(data){
$("#controlDownloadJPEG").attr("href", "../file/fileStore.action?fileName=/" + data[0].AttachmentUrl);
});;
return true;
};
The href is getting changed on click, but the link itself is linking to the href set before my JavaScript executes. The first click does nothing as there is no default href and the second click will download what the first click should have downloaded.
I have seen suggestions to use JavaScript window.href instead of relying on the html tag itself. The reason I need to use the html tag is for its download functionality.

You are treating an asynchronous call as it it is synchronous. It is like ordering a delivery pizza and expecting it to be there as soon as you place the order. That does not happen unless you are standing in the restaurant and it is already been made.
You need to cancel the click and fire the page change manually when the call comes back. So you want to use window.location.href = "new path"; instead of setting the href.
this.downloadJPEGClickHandler = function() {
CollageCore.downloadJPEG(function(data){
window.location.href = "../file/fileStore.action?fileName=/" + data[0].AttachmentUrl;
});
return false; //or preventDefault if you pass in event object
};

If you are are attaching this activity to an onClick(event) handler you should be able to stop the redirect by passing in event.preventDefault();
cite: http://api.jquery.com/event.preventdefault/

Prevent the default click behavior, change the href attribute, and then imitate the click. Should work.
$( "a" ).click(function( event ) {
event.preventDefault();
$("#controlDownloadJPEG").attr("href", "../file/fileStore.action?fileName=/" + data[0].AttachmentUrl);
$(this).click();
});

html <a> activate on click on enter pressed

I want the onclick event of a link <a href='#' onclick='function()'> to activate when the enter button is pressed. This is supposed to work, but I don't seem to get it working. Trigger a button click with JavaScript on the Enter key in a text box . And this also didn't work for a button.
The reason for this is probably because I run and load most of my interface in with ajax because of loading issues, certain calculations take quite some time, so I figured I should use ajax to show my page elements so I can update real time instead of making the user wait 5 to 10 seconds for the server. This however seems to make the code below not working.
My code
//This comes from a different php file which is read out on the server with
//readfile() in php after an ajax call. In other words it echoes the
//contents of this file on the page including this link.
echo "<a href='#' onclick='dosomething()' ID='Enter'>Click me</a>";
//js
$("#Enter").keyup(function(event){
if(event.keyCode == 13){
$("#Enter").click();
}
});
function dosomething(){
//activate some code depends on the link.
}
So how do I get this working. Activating the onclick on enter pressed on a link imported via ajax? Is this even possible?

Working Demo
Try this,
Use keypress event and it won't fire on #Enter as it is an <a> tag.
$(document).keypress(function(event){
if(event.keyCode == 13){
$("#Enter").click(); //OR $("#Enter").trigger('click');
}
});
function dosomething(){
alert('..');
//activate some code depends on the link.
}

You can do like
$("#Enter").keypress(function(event){
if(event.keyCode == 13){
dosomething();
}
});
Even you can Trigger it like
$("#Enter").trigger('click');

Detecting form changes using jQuery when the form changes themselves were triggered by JS

I have a list of radio buttons that I can toggle "yes" or "no" to using Javascript.
$(document).ready(function(){
$('#select-all').click(function(){
$('#notifications .notif-radio').each(function(){
$('input[type="radio"]', this).eq(0).attr('checked', true);
$('input[type="radio"]', this).eq(1).attr('checked', false);
});
});
$('#deselect-all').click(function(){
$('#notifications .notif-radio').each(function(){
$('input[type="radio"]', this).eq(0).attr('checked', false);
$('input[type="radio"]', this).eq(1).attr('checked', true);
});
});
});
this works just fine. Now I have a separate piece of code that detects when a user has changed something, and asks them if they want to leave the page.
var stay_on_page;
window.onbeforeunload = confirm_exit;
$('.container form input[TYPE="SUBMIT"]').click(function(){
stay_on_page = false;
});
$('#wrapper #content .container.edit-user form').change(function(){
stay_on_page = true;
});
function confirm_exit()
{
if(stay_on_page){ return "Are you sure you want to navigate away without saving changes?"; }
}
The problem is that if the user uses the first piece of functionality to toggle all radio buttons one way or another. The JS detecting form changes doesn't see that the form was changed. I have tried using .live, but to no avail. Anyone have any ideas?

I do something similar to this by adding change() (or whatever's appropriate, click() in your case I suppose) event handlers which set either a visible or hidden field value, then check that value as part of your onbeforeunload function.
So, my on before unload looks like:
window.onbeforeunload = function () {
if ($('#dirtymark').length) {
return "You have unsaved changes.";
}
};
And, or course, dirtymark is added to the page (a red asterisk near the Save button), when the page becomes dirty.