Develop Reference

e.preventDefault() on a link still loads the page

the title may be a bit misleading but I'm not sure how to phrase it better, so I apologize for that.
I'm creating a custom handler so the site doesn't refresh when new content is pressed (similar to how youtube works, for example).
For that I'm using this script:
$('.sidebar2 li a').click(function (e) {
test = true;
var button = $(this);
var noteId = button.data("noteid");
$(".sidebar2 li.active").removeClass("active");
var postData = { id: noteId };
$.ajax({
url: '/API/Note',
type: 'get',
data: postData,
success: function (resp) {
if (resp.success == true) {
$('#app-bar-left').html(resp.note.navBarHTML);
$('#cell-content').html(resp.note.noteContentHTML);
window.history.pushState({ path: window.location.href }, resp.note.title, '/MyNotes/Note/' + resp.note.noteId);
document.title = resp.note.title;
$('*[data-noteId="'+resp.note.noteId+'"]').parent().addClass("active")
e.preventDefault();
test = false;
return false;
}
}
});
});
even though I've stated e.preventDefault() to trigger, javascript loads the new content into the current frame without refreshing, but the browser refreshes again anyway.
I've tried to use href="#" however in this case when I go back and handle that, I always end up with two same pages, one without and one with # at the end, and in addition to that it wouldn't be very user friendly to have all links href="#"
What am I doing wrong to make the browser redirect "normally" even though I've told him no no no?
I've also tried adding onclick="javascript:void(0)" on a elements and that didn't help

ajax is async. By the time success callback is called event will already be bubbled up the DOM tree and processed. You need to call preventDefault before sending a request.
$('.sidebar2 li a').click(function (e) {
e.preventDefault(); // here for example
test = true;
var button = $(this);
var noteId = button.data("noteid");
$(".sidebar2 li.active").removeClass("active");
var postData = { id: noteId };
$.ajax({
url: '/API/Note',
type: 'get',
data: postData,
success: function (resp) {
if (resp.success == true) {
$('#app-bar-left').html(resp.note.navBarHTML);
$('#cell-content').html(resp.note.noteContentHTML);
window.history.pushState({ path: window.location.href }, resp.note.title, '/MyNotes/Note/' + resp.note.noteId);
document.title = resp.note.title;
$('*[data-noteId="'+resp.note.noteId+'"]').parent().addClass("active")
test = false;
// returning here makes no sense also
// return false;
}
}
});
});

How to press a button after successful Ajax?

When Ajax call is successful, user gets redirected to main page:
$('#button_1').on('click', function () {
//code
$.ajax({
method: "POST",
url: "/somewhere",
data: {
//code
}
}).done(function () {
location.href = "/";
});
});
After getting redirected, I want to automatically click another button, which opens a modal. I tried inside done function different methods:
.done(function () {
location.href = "/";
$('#button_2').click(); // doesn't work
});
.done(function () {
location.href = "/";
setTimeout(function ()
$('#button_2').click(); // doesn't execute
}, 2000);
});
.done(function () {
location.href = "/";
$(document).ready( function () {
// executes but user is immediately redirected to main page
$('#button_2').click();
});
});
I also tried outside Ajax, in the function that Ajax call is in, but had the same results.
How can I click the button programmatically after the Ajax call?

You need to add that logic in the target (main) page.
Once you redirect, the current page is not longer the active one and all logic is removed.
You could add some parameter to the URL in order to know when you are there due to redirection, something like:
location.href="/?redirect=1"
and then check that parameter

The lines of code next to
location.href = "/";
will not be executed because the browser is navigating to another page.
So you should put your logic in the / page (#button_2 should be in that page).

You're currently trying to execute code after a redirect which isn't possible directly because the code after location.href = "/" will never be reached. Once you redirect you've have a fresh page with a clear state.
Your current function can still look like this:
$('#button_1').on('click', function () {
$.ajax({
method: "POST",
url: "/somewhere",
data: {
//code
}
}).done(function () {
location.href = "/?modal-open=1";
});
});
As you can see I've added a query parameter to the redirect so we know we were redirected with the intention to open the modal.
For your Root Page (/) you will need a script like this:
$(document).ready( function () {
// check the URL for the modal-open parameter we've just added.
if(location.search.indexOf('modal-open=1')>=0) {
$('#button_2').click();
}
});
This will check if the parameter is in the URL and trigger the click.

First of all when you redirect a new page you can not access DOM because the page is reloaded. You can send a parameter for do that.
$(document).ready( function () {
//after page load
var isButtonActive = findGetParameter("isButtonActive");
if(isButtonActive){
alert("button_2 activated");
$('#button_2').click();
}
$('#button_1').on('click', function () {
//code
$.ajax({
method: "POST",
url: "/somewhere",
data: {
//code
}
}).done(function () {
alert("page will be reload. button_2 wil be activated");
location.href = "/?isButtonActive=true";
});
});
$('#button_2').on('click', function () {
alert("button_2 clicked");
});
});
function findGetParameter(parameterName) {
var result = null,
tmp = [];
location.search
.substr(1)
.split("&")
.forEach(function (item) {
tmp = item.split("=");
if (tmp[0] === parameterName) result = decodeURIComponent(tmp[1]);
});
return result;
}

Thank you for your answers. I researched a bit more and found another way to do it:
$('#button_1').on('click', function () {
sessionStorage.setItem("reload", "true");
//code
$.ajax({
method: "POST",
url: "/somewhere",
data: {
//code
}
}).done(function () {
location.reload();
});
});
And in main page:
$(document).ready(function () {
var reload = sessionStorage.getItem("reload");
if (reload == "true") {
$("#button_2").click();
sessionStorage.setItem("reload", false);
}
});

creating new iframe after closing old one

I have an Iframe with fields which sent data to php file through ajax. If it was successful I close (it is working) iframe and create new one with another information (doen't work). So question is: how to close the old iframe and open another one?
so here is ajax function that works but doesn't open a new iframe
$.ajax({
type: "POST",
url: "sign.php",
data: {name : name,
data: canvasData
},
success: function () {
//frame_activation(); //if it will be here it will open iframe inside the old one iframe.
alert('done');
close_frame ();
$(body).html(argument[0]);
//windows.top.frame_activation();
frame_activation(); // does't work
}
});
So the result is - the old iframe sent information and close it, but doesn't open a new iframe.
frame activation :
function frame_activation() {
//document.getElementById('bg_frame').style.visibility = 'visible';
reg = document.createElement('iframe');
document.body.appendChild(reg);
reg.id = 'iframe';
reg.src = 'activate.html';
reg.style.width='600px';
reg.style.height='200px';
position_frame(reg);
reg.style.border='solid 5px #d4d4d4';
alert('here');
return false;
}
function to close iframe:
function close_frame () {
parent.document.getElementById('bg_frame').style.visibility = 'hidden';
var el = parent.document.getElementById('iframe');
el.style.display='none';
parent.document.body.removeChild(el);
return(false);
}
function for creating first iframe with fields
function frame_reg() {
document.getElementById('bg_frame').style.visibility = 'visible';
reg = document.createElement('iframe');
document.body.appendChild(reg);
reg.id = 'iframe';
reg.src = 'frame.html';
reg.style.width='640px';
reg.style.height='400px';
position_frame(reg);
reg.style.border='solid 5px #d4d4d4';
return false;
}

You can change src of iframe to change a page display.
This is sample using Jquery :
$(document).ready(function () {
$("#btnMenu1").click(function () {
$("#myIframe").attr("src", "example.aspx");
});
});

safari target="_blank" and ajax

I have the following html code:
image
I have the following js functions:
var jsFunction = function(button) {
var site = encodeURIComponent("site name");
var lid = "lid";
var src = "src";
var pf = "platfrom";
$.ajax({
url: "https://www.myurl.com/page.php?site="+site+"&lid="+lid+"&src="+src+"&pf="+pf+"&bt="+button,
async: false
});
}
var jsFunction2 = function() {
var lid = "lid";
var offer = "offer";
var platform = "platfrom";
var site = encodeURIComponent("site name");
var aid = "aid";
var sid = encodeURIComponent("sid");
var placement = "placement";
$.ajax({
url: "https://www.myurl.com/pagetwo.php?lid="+lid+"&offer="+offer+"&platform="+platform+"&site="+site+"&aid="+aid+"&sid="+sid+"&placement="+placement,
async: false
});
window.location = "mypage.php";
}
This seems to function normally in all browsers except Safari 5.1.9 and above. Upon clicking the link it opens a new window/tab and the parent window is directed forward as it should. However, in safari an new window is not opened but the parent window still moves forward. Any ideas as to why safari has this behavior and how to work around or fix it?

function doesn't work after ajax succesfully sent data

I have an Iframe with formwhi fields wich sent data to php file through ajax. If it was successful I close iframe (it is working) and create new one with another information. So question is: how to close the old iframe and open another one?
so here is ajax function that works but doesn't open a new iframe
the function opening a new iframe work by it self but doesn't work in ajax. Where is a problem?
$.ajax({
type: "POST",
url: "sign.php",
data: {name : name,
data: canvasData
},
success: function () {
//frame_activation(); //if it will be here it will open iframe inside the old one iframe.
alert('done');
close_frame (); //closing frame with form
$(body).html(argument[0]);
//windows.top.frame_activation();
frame_activation(); // does't work, doesn't open a new iframe
}
});
So the result is - the old iframe sent information and close it, but doesn't open a new iframe.
frame activation :
function frame_activation() {
//document.getElementById('bg_frame').style.visibility = 'visible';
reg = document.createElement('iframe');
document.body.appendChild(reg);
reg.id = 'iframe';
reg.src = 'activate.html';
reg.style.width='600px';
reg.style.height='200px';
position_frame(reg);
reg.style.border='solid 5px #d4d4d4';
alert('here');
return false;
}
function to close iframe:
function close_frame () {
parent.document.getElementById('bg_frame').style.visibility = 'hidden';
var el = parent.document.getElementById('iframe');
el.style.display='none';
parent.document.body.removeChild(el);
return(false);
}
function for creating first iframe with fields
function frame_reg() {
document.getElementById('bg_frame').style.visibility = 'visible';
reg = document.createElement('iframe');
document.body.appendChild(reg);
reg.id = 'iframe';
reg.src = 'frame.html';
reg.style.width='640px';
reg.style.height='400px';
position_frame(reg);
reg.style.border='solid 5px #d4d4d4';
return false;
}