I have the following code
$(".btnClose").click(function (e) {
alert('a');
e.stopPropagation();
e.preventDefault();
var targetUrl = $(this).attr("href");
$('#modal-a').modal();
$("#modal-a .btn-danger").click(function () {
window.location.href = targetUrl;
});
});
$('.clickable-row').click(function () {
alert('b');
var formId = ...;
var locked = ...
if (locked == false) {
document.location = "a/" + formId;
}
else {
document.location = "b/" + formId;
}
});
<tr class="clickable-row">
<td><a class="btnClose" href="/c?FormId=40">Close</a></td>
</tr>
The problem is that when I click any button with the btnClose class, it alerts 'a', shows the modal window, wait for the modal window answer. If I answer with cancel, then it will show 'b' and make an undesired redirection.
I see that stop propagation is not working in this case and I don't know why.
There's an easy way to fix that, just check the target
$('.clickable-row').click(function (e) {
if ( $(e.target).hasClass('btnClose') ) return;
// rest of the code
});
Related
I want to create a Webpage which is used to conduct online examination so if user switches to other tabs, the examination must be ended after 1st view and current tab must be closed.
I already used page visibility API in Javascript to find the number of views user switches to other tabs.window.close() is not working in chrome.
if(document.hidden==true){
views++;
if(views==1){
close_window();return false();
}
alert( "Your view count is: <b>" + views +
". " + "Your page current state is: " +
document[(prefix === "" ? "v" : prefix + "V") + "isibilityState"] + "</b><br />");
}
}
function testPageVisibilityApi() {
if (prefix === null)
document.getElementById("log").innerHTML = "Your browser does not support Page Visibility API";
else {
document.addEventListener(prefix + "visibilitychange", countView);
countView();
}
}
Any suggestions?
To close the particular tab, you can implement function like:
(function() {
'use strict';
$("#close_page").click(function() {
var confirm_result = confirm("Are you sure you want to quit?");
if (confirm_result == true) {
window.close();
}
});
})();
var Activetab;
window.onfocus = function () {
Activetab = true;
};
window.onblur = function () {
Activetab = false;
};
// check periodically
setInterval(function () {
console.log(window.Activetab ? 'active' : 'inactive');
}, 2000);
this may help you to detect when the user changes tabs, this is working fine and referred from here
UPDATED
var Activetab;
window.onfocus = function () {
Activetab = true;
};
window.onblur = function () {
Activetab = false;
// window.close();
open("yourpathoffile/filename.ext", '_self').close(); // or you can
try directly window.close
};
// check periodically
setInterval(function () {
console.log(window.Activetab ? 'active' : 'inactive');
}, 2000);
JS:
function close_window() {
if (confirm("Close Window?")) {
close();
}
}
HTML:
close
or:
close
We added return false here to prevent the default behavior for the event. Otherwise the browser will attempt to go to that URL.
Refer to this article for Firefox.
I have used the following showModalDialog polyfill for my code. It seems to be working fine except I cannot close it without pressing the close button on the iframe.
(function() {window.showModalDialog = window.showModalDialog || function(url, arg, opt) {
url = url || ''; //URL of a dialog
arg = arg || null; //arguments to a dialog
opt = opt/* || 'dialogWidth:300px;dialogHeight:200px'*/; //options: dialogTop;dialogLeft;dialogWidth;dialogHeight or CSS styles
var caller = showModalDialog.caller.toString();
var dialog = document.body.appendChild(document.createElement('dialog'));
dialog.setAttribute('style', opt.replace(/dialog/gi, ''));
dialog.setAttribute('id', 'dialogID');
dialog.innerHTML = '×<iframe id="dialog-body" src="' + url + '" style="border: 0; width: 100%; height: 100%;"></iframe>';
document.getElementById('dialog-body').contentWindow.dialogArguments = arg;
document.getElementById('dialog-close').addEventListener('click', function(e) {
e.preventDefault();
dialog.close();
});
dialog.showModal();
document.getElementById('dialog-body').addEventListener('click', function(e) {
e.preventDefault();
dialog.close();
});
dialog.addEventListener('close', function() {
var returnValue = document.getElementById('dialog-body').contentWindow.returnValue;
document.body.removeChild(dialog);
nextStmts[0] = nextStmts[0].replace(/(window\.)?showModalDialog\(.*\)/g, JSON.stringify(returnValue));
eval('{\n' + nextStmts.join('\n'));
});
throw 'Execution stopped until showModalDialog is closed';
};
})();`
I need to close the generated dialogbox on the press of a yes or no button from the passed URL. The url is of a web page that has a yes and a no button and calls this function onClick.
function dialogButtonClick(dialogFlag)
{
if(dialogFlag=='YES')
{
window.returnValue = 'YES';
}
window.close();
}
Window.close() does not seem to work. I am unable to return the click value from the dialogbox to the parent code. Could anyone help me find a solution for this?
Try this:
dialogButtonClick = (dialogFlag) => {
if (dialogFlag == 'YES') { open(location, '_self').close(); }
return false;
}
I have 5 link and mini preview photo and url 3 links its good link opsss and upsss is wrong when i click good link i'm going to new page when i click error link attr href change to adresError and then we have popup This only works for the first time second time click all links have a popup and should have only opsss and upsss
http://jsfiddle.net/3ptktp47/1/
Here is my code :
var nameError = [
"opsss",
"upsss",
];
$(function() {
$('#prev').hide();
$(function() {
var title_link = 'kliknij aby podejżeć';
$(".preview-link a")
.attr({title: title_link})
//.tooltip()
.click(function(){
$('.preview-link a img').css('opacity',1);
var sciezka = $(this).attr("href");
var tytul = $(this).attr("title");
var adres = $(this).text();
//alert(adres);
$(".duzy").attr({ src: sciezka, alt: tytul, style:'cursor:pointer;', href:'http://www.'+ adres,'target':'_blank'});
$('.link').html(adres).attr({href:'http://www.'+ adres,'target':'_blank'});
$('#prev').show();
function errorDomain() {
$('.link, .duzy').removeAttr('href');
$('.link, .duzy').click(function(event){
$('#popup, .popup-bg').show('slow');
$('.server_url').html(adresError).attr({href:'http://'+ adresError,'target':'_blank'});
});
};
if(adres == 'opsss.com'){
var adresError = 'x4ql.nazwa.pl/'+ nameError[0];
errorDomain();
}else if(adres == 'upsss.com' ){
var adresError = 'x4ql.nazwa.pl/'+ nameError[1];
errorDomain();
}else{
//$('#popup, .popup-bg').fadeOut();
};
$('.cancel, .popup-bg').click(function(event){
$('#popup, .popup-bg').fadeOut();
});
return false;
});
$('.close').click(function(){
$('#prev').hide();
});
$('.link').mouseover(function(){
$(this).css({style: 'color:#000;'});
});
});
});
EDITED:
Ok, I was able to handle your problem.
Your .click() event in the errorDomain() method was firing every time you clicked this square. I managed it to toggle a class on a.duzy element with toggleClass('error') in your if-statement where you check the address.
Inside your click() event, a if-statement is checking if the .duzy element has class named error with hasClass('error') , this has following result -
TRUE- your popup will be displayed
FALSE - nothing happens
I hope my answer is clear enough, but please check out the edited fiddle.
EDITED SOURCE:
Your errorDomain() Method
function errorDomain() {
$('.link, .duzy').removeAttr('href');
$('.duzy, .link').click(function (event) {
if ($(this).hasClass("error")) {
$('#popup, .popup-bg').show('slow');
$('.server_url').html(adresError).attr({
href: 'http://' + adresError,
'target': '_blank'
});
}
});
}
The if-statements
if (adres == 'opsss.com') {
var adresError = 'x4ql.nazwa.pl/' + nameError[0];
$('a.duzy').toggleClass("error");
errorDomain();
} else if (adres == 'upsss.com') {
var adresError = 'x4ql.nazwa.pl/' + nameError[1];
$('a.duzy').toggleClass("error");
errorDomain();
} else {
$('a.duzy').removeClass("error");
}
Edited fiddle
How do I trigger the default action (in this case an a tag click) after calling e.preventDefault()? I tried $(this).trigger(e) but it does not work.
$(".log-in").on("click", function(e) {
e.preventDefault();
if($.cookie("remember")) {
var account = $.cookie("remember");
window.location = 'https://' + account + '.mydomain.com';
} else {
$(this).trigger(e);
}
});
Move your e.preventDefault() inside the if statement
$(".log-in").on("click", function(e) {
if($.cookie("remember")) {
e.preventDefault();
var account = $.cookie("remember");
window.location = 'https://' + account + '.mydomain.com';
}
});
Clicking several times on the link run several ajax-requests. That is why it is hang browser will and is run code js bad. how can to disable link after innitial click and enable when ajax-request is finished?
With respect
$('#icon a').click(function (event) {
event.preventDefault();
var id = '#' + this.id;
var title = $(id).attr('title');
$(".title").toggleClass("suject").html(title);
var url = $(id).attr('href');
$('.table_show, #num_count, #select_box, #input_search').fadeOut('slow', function () {
$('.results').load(url, function(){
$(this).hide().show();
$.getScript("http://localhost/Siran-mehdi/files/js/admin.js");
})
//.hide().show("slow")
});
});
change link to # after clicking
$("#link").click(function(){
var href = $(this).attr('href');
$(this).attr('href', '#');
var $this = $(this);
$('.results').load(url, function(){
$this.attr('href', href);
$(this).hide().show();
$.getScript("http://localhost/Siran-mehdi/files/js/admin.js");
});
});
return it after ajax is done
well you could hide it and show it back after the call has finished:
$('#icon a').click(function (event) {
event.preventDefault();
var id = '#' + this.id;
var title = $(id).attr('title');
$(".title").toggleClass("suject").html(title);
var url = $(id).attr('href');
//hide it
$(id).hide();
$('.table_show, #num_count, #select_box, #input_search').fadeOut('slow', function () {
$('.results').load(url, function(){
//show it
$(id).show();
$.getScript("http://localhost/Siran-mehdi/files/js/admin.js");
})
//.hide().show("slow")
});
});
Simply make the link disabled:
$('#icon a').click(function (event) {
event.preventDefault();
var id = '#' + this.id;
var title = $(id).attr('title');
$(".title").toggleClass("suject").html(title);
var url = $(id).attr('href');
// disable the link
$(id).removeAttr("href");
$('.table_show, #num_count, #select_box, #input_search').fadeOut('slow', function () {
$('.results').load(url, function(){
$(this).hide().show();
$.getScript("http://localhost/Siran-mehdi/files/js/admin.js");
})
});
// enable the link again
$(id).attr("href", url);
});
$('a#YourLinkId').click(function() {
// Your ajax code
return false; // Disable the link
});