Escape handling in popup using javascript - javascript

I have a page at which when clicked on a button a popup appears and in that popup I have given a link which shows another popup . The problem here is when I handled the escape button in first popup , it worked fine . But when I am handling the escape button in second popup , when it is pressed both the popups are getting closed . But the need is if I press the escape button in second popup , only the second popup must close .Do anyone have the solution for this .
Thanks in advance ...

This has to be done with simple algorithm.
Define a variable, say var currentPop = 0;
When first pop-up is shown (or when first button is clicked)
set it to 1, currentPop = 1;
When second pop-up is shown (or when second button is clicked)
set it to 2, currentPop = 2;
Now, in the escape kay handling code: Write an algo. to hide appropriate pop-up.
function escapeHandling()
{
if(currentPop == 2)
{
$("#secondPop").hide();
}
else if(currentPop == 1)
{
$("#firstPop").hide();
}
}
*Provide me your code if you want exact fix!!!

Related

Redirect when click double click at single button

I try to find Q&A related to my question. But I couldn't find. I have created a code where if user click double or multi click at single link then he will redirect to error page.
My Code is
<script>
var doubleClick = false;
function myWillPageRedirect() {
if(!doubleClick) {
doubleClick = true;
window.open("errorPage.html");
}
}
</script>
But this is not working. Why?
I want to create a secure page generally we can see in some bank or financial website.
I want to create 'if user click window back button then he will redirect to error page.' OR if if click refresh button then same action will perform and redirect to error page. ..
If this all code can make in Linux server backend code. It would be great.
Please help. I am not saying to some create code for me , I am asking for help to some correct my code above or bit extra help to make them secure.
Thank you .
HTML:
Double-click me
JS:
if(performance.navigation){ //Check if the page was refreshed
if( performance.navigation.type === performance.navigation.TYPE_RELOAD ){
myWillPageRedirect();
}
}
function myWillPageRedirect() {
window.open("errorPage.html");
}
window.onhashchange = function() { //Check if the url has changed (in case of pressing back button)
myWillPageRedirect();
}
More infos about Performance.navigation

Obstructed JavaScript code: part of codes are not executed starting from second click

What I want is to trigger a Bootstrap modal (with an Id testModal) by a button click and update its content dynamically. Be more precise, I want to check if a certain div tag has been created, if yes then remove it and create a new one. For this I came up with the following jQuery code for testing purpose:
jQuery('#testModalButton').on('click',
function(){
'use strict';
jQuery('#testModalTitle').html('Country list');
console.log('Check if a div exists');
//...other codes...//
var $testModalBodyDiv = null;
if (jQuery('#testModalBodyDiv').length != 0) {
// if yes, then remove it.
jQuery('#testModalBodyDiv').remove();
}
else {
$testModalBodyDiv
= jQuery("#testModalBody")
.append($('<div id="testModalBodyDiv">'));
}
// end of...other codes...//
jQuery('#testModal').modal('show');
}
);
What bugs me is that, after the first click, everything runs fine, [...other codes...] is executed and modal is opened too. However, when I click the button again, the modal can be opened, yet the [...other codes...] part is not executed at all. At the third click, it runs fine again. This pattern repeats. I am wondering what went wrong.
NOTE ADDED: Well, my stupidity comes from a misuse of
$testModalBodyDiv = jQuery("#testModalBody").append($('<div id="testModalBodyDiv">'));
which, as a matter of fact, first selected the testModalBody instead of testModalBodyDiv in my previous codes.

Clicking a menu link to bring up sign up box via js file

I have set up a pop up sign up box to show on first site arrival that is loaded using a .js file called inside the <head> tag and this all works fine.
How can i get it to re-show if a menu link is clicked?
Obviously when i link it like this below it will open the file itself containing the codes.
Mailing List
So how do i get it to carry out the function that's in popup.js when the above link is clicked?
Edit: I was able to get the pop up to show by using the below thank you all who contributed.
Mailing List
Now to complete what i'm trying to achieve is to ignore/disable the cookie being set that stops the popup from showing the next time the link is clicked.
function AlreadyBeenNewsletter()
and
function SetNewsletterCookie()
Link to the actual js file
If the JS is already included, you could use the onclick attribute. It will run JS code when a link is clicked.
Mailing List
For the second part of your question, I would create two functions. One that shows the popup without checking if the cookie is set, and another (you already have it) that checks the cookie.
Function that shows popup without checking:
function showPopup(){
var id;
id = "popupSignup";
if (jq(".popupWindow").length) {
jq(".popupWindow").prop("id", id);
} else {
jq("#aspnetForm").after('<div id="popupSignup" class="popupWindow"><a class="popupClose" href="javascript:;"></a><div class="popupDetails"></div></div><div class="backgroundPopup"></div>');
}
jq("#" + id + " .popupDetails").html('<iframe class="popupiframe" src="/user/files/newsletter.html"></iframe>');
InitialisePopup(id, 99, false, true);
ShowPopup();
CenterPopup();
}
Function that you already have popup()
jq(function popup() {
if (!AlreadyBeenNewsletter()) {
SetNewsletterCookie();
showPopup();
}
});
Then you can do the following for your link:
Mailing List
By separating the two functions apart like this you are free to show the popup without preventing it from showing again.

How can i add a link to notyjs text message

I've been trying to put a link in a message that im sending using notyjs (http://needim.github.io/noty/). I don't want to use a noty button, just a link.
var n = noty({text: 'Hi there click, here to continue'});
The problem is that the message shows with the link, but when i click. it does nothing.
any ideas? thanks
By default noty closes on clicking anywhere in the container. To prevent this you should change the closeWith parameter. The modified code is as below.
var n = noty({text: 'Hi there click, here to continue',closeWith:['button']});
JS Fiddle : http://jsfiddle.net/nGDvU/

How to add history to jQuery UI tabs using a back button

I've got a PHP file with 5 tabs (jquery ui). Tab four and five contain
forms. Forms and tab work fine - expect to this: I submit the form (POST
method not XHR), then click the right mouse button (Firefox and IE behave
identical) and select back and then select tab five in the page by mouse
click the entered form data is still available.
I try to build a link, that is more convenient for the user.
<a href="#" onClick='history.back();$("#tabs").tabs("select","4");'>modify</a>
If click on my modify link, it still jumps back to tab one and the form fields in tab five are empty.
I read several posts about jQuery UI tabs and the back button, but all seem not to address my problem.
Where is my fault and is the difference between doing this steps by hand and my link with JS?
Javascript stops executing once you leave the page that it's running on -- the second half of your onClick handler never runs.
Following from the comments here is a function that will remember what your last tab was that you selected. It does rely on you using a set "Back" button.
The problem you will find, as far as I can see, is that you can't intercept a user clicking the browser back button. I have found that creating an obvious and clear back button on the site does the job and the feedback I have had so far on our sites seem to back that up.
The function is:
$(function() {
var $previousTab = 0;
var $backButtonUsed = false;
// Initialise tabs
$("#tabs").tabs();
$("#tabs").bind("tabsselect", function(event, ui) {
if ($backButtonUsed)
{
$backButtonUsed = false;
} else {
$previousTab = $("#tabs").tabs('option', 'selected');
}
return true;
});
$("#back").live('click', function() {
$backButtonUsed = true;
$("#tabs").tabs({ selected: $previousTab });
return true;
});
});​
I have also included this in a JSFiddle, so you can see it in action with the HTML and jQuery UI Tabs.
Let me know what you think.

Categories