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';
}
});
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;
}
When submitting the form based on normal method it execute jQuery AJAX perfectly. When submitting the same form used within the popup the jQuery AJAX is not executed. Why is that? The code is given below.
Form submission script:
$("#submit").click(function (e) {
/* $('form').submit(function() { // bind function to submit event of form */
if ($('form').attr('rel') == 'frm_jquery') {
$('#result')
.html('<span id="process">processing....</span>');
$.ajax({
type: $('form').attr('method'), // get type of request from 'method'
url: $('form').attr('action'), // get url of request from 'action'
data: $('form').serialize(), // serialize the form's data
dataType: "json",
success: function (data) {
if (data.status == 'success') {
$('form')[0].reset();
$('#result').html(data.message);
setTimeout(function () {
$('#result').fadeOut('fast');
if (data.url != undefined)
window.location.replace(data.url);
}, 5000);
}
else if (data.status == 'error') {
$('#result').html(data.message);
}
else if (data.status == 'redirect') {
window.location.replace(data.url);
}
}
});
e.preventDefault();
return false; // important: prevent the form from submitting
}
});
Popup script:
$('.pop').click(function () {
var src = $(this).attr('href'); //store url to variable
var width = (($(this).attr('data-popwidth') != undefined) ? $(this).attr('data-popwidth') : 600);
var height = (($(this).attr('data-popheight') != undefined) ? $(this).attr('data-popheight') : 500);
if ($(window).width() < width) {
width = "98%";
var left_pos = "1%";
}
else {
var left_pos = ($(window).width() - width) / 2 + 'px';
width = width + "px";
}
if ($(window).height() < height) {
height = "98%";
var top_pos = "1%";
}
else {
var top_pos = ($(window).height() - height) / 2 + 'px';
height = height + "px";
}
$('#dv_move').remove();
//add to body
$('<div></div>')
.prependTo('body')
.attr('id', 'overlay');// add overlay div to disable the parent page
var title = 'test';
var html = '<div class="main" id="dv_move" style="width:' + width + '; height:' + height + '; left:' + left_pos + '; top:' + top_pos + '">';
html += '<div id="dv_no_move" style="overflow-y: scroll;">';
html += ' </div>';
html += ' </div>';
$('body').append(html);
$("#dv_no_move").load(src);
$("#img_close").click(function () {
$('#overlay').fadeOut('slow');
$('#dv_move').fadeOut('slow');
setTimeout("$('#dv_move').remove();", 1000);
//call Refresh(); if we need to reload the parent page on its closing
parent.Refresh();
});
$("#img_close").mousedown(function () {
return false;
});
//change close icon image on hover
$("#img_close").mouseover(function () {
$(this).css('opacity', '0.6');
// $(this).attr("src", 'close.png');
});
$("#img_close").mouseout(function () {
$(this).css('opacity', '1');
// $(this).attr("src", 'close-red.png');
});
return false;
});
First you attach the event handler to #submit. At that time, the form is not yet loaded, so the event handler isn't attached to anything. After that (when the user clicks on the link) the form is opened in a popup. There is no event handler attached to #submit, since that code ran before #submit was created. Therefore nothing happens when you click it.
So how do you fix it? You need to attach the event handler after the form is loaded:
$("#dv_no_move").load(src, function() {
//This code will run when the content has been loaded into the div.
//Here we can attach the event handler to #submit.
$("#submit").click(function(e) {
//The code to do stuff when #submit is clicked should be placed here.
});
});
Please note that this will attach the event handler to #submit no matter what it is that is loaded. Perhaps you use the same page to load other pages as well where you don't want this behavior? Then the above code will be problematic.
Instead, you could put the JavaScript for the submit button in the page that clicking the popup loads (the one with address src), or include it from there. I think you should also wrap it in $(function() { ... }.
I am implementing a new feature to let my page to support endless scroll AJAX show. But when I pull down my page scroll bar, sometimes the same request occurs.
This means that alert(nextPage) method is executed and it shows the same result. I've added the event.stopPropagation() code, but it didn't solve the problem. How can i fix it?
(function(window, undefined) {
var app = {
event: {
add: function(obj, type, handle) {
try {
obj.addEventListener(type, handle, false);
} catch (e) {
try {
obj.attachEvent('on' + type, handle);
} catch (e) {
obj['on' + type] = handle;
}
}
}
},
scroll: function(id, url) {
$.get(url, function(html) {
$("#" + id).append(html)
});
}
}
})(window);
HTML
<script>
$(function() {
app.event.add(window, "scroll", function(event) {
var nextPage = getNextPage();
alert(nextPage);
app.scroll("productTable", '?page=' + nextPage);
if (event && event.stopPropagation) {
event.stopPropagation();
} else {
window.event.cancelBubble = true;
}
});
});
</script>
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
});