I am in the process of modifying a drupal 7 website for a client and have come across a problem trying to get a jQuery Login box working correctly as required.
You can see a working version of the site at http://www.tztesting.com
The idea is that when a user hovers over the Login link a login box should appear. When the user leaves the hover or submits the Login form the box must close.
I can get the box to open with no problem when I hover on the Login link and I can get the box to close when I leave the box without completing the form. The problem I am having is the box completing before the form is filled out. As far as I can tell this is happening because I am not using the mouseleave event correctly to close the box.
Here is my JS:
jQuery( document ).ready(function( $ ) {
jQuery('ul.menu.nav.navbar-nav.secondary li.last.leaf').hover(function() {
var $loginContainer = jQuery(loginContainer);
$loginContainer.fadeIn();
}, function() {
jQuery('.login-overlay-container').mouseleave(function(){
var $loginContainer = jQuery(loginContainer);
$loginContainer.fadeOut();
});
});
});
The horrible looking selector is because of the way Drupal builds its menu structure.
In the html there is a block of text inside a class called login-overlay-container.
I would appreciate it if someone could show me a way to allow the user to fill out and submit the form without the mouseleave event from firing and calling the fadeout function
Could you please try with below approach:
jQuery( document ).ready(function( $ ) {
jQuery('ul.menu.nav.navbar-nav.secondary li.last.leaf').hover(function() {
var $loginContainer = jQuery(loginContainer);
$loginContainer.fadeIn();
}, function() {
jQuery('.login-overlay-container').mouseleave(function(){
var hasFocus = false;
jQuery('.login-overlay-container input').each(function(){
if($(this).is(":focus"))
{
hasFocus = true;
}
});
if(!hasFocus){
var $loginContainer = jQuery(loginContainer);
$loginContainer.fadeOut();
}
});
});
});
In this approach we are checking whether any of textfield or checkbox has the focus. If any of them has focus then don't close the overlay otherwise close it.
Related
I have a few different modals on a page, and it all works as it should, but if a user makes some input on form fields in a modal and then accidentally clicks outside of the modal (which closes it), they loose their changes, since if the user clicks the same button they pressed to open the modal, the data they entered will be overwritten with data pulled from the database.
So I'd like to have a function for "reopen last closed modal" that simply shows the modal again in it's last used state - with whatever data was in it.
Essentially like a Ctrl-Z for accidentally closing a modal.
It's really simple if you know the ID of the modal. Such as:
$('#myModal1').modal('show'); });
But because I have several different modals available on a page, and I don't want to have a bunch of "restore" buttons, I need to be able to detect the ID of the last closed modal.
If there's not a simpler way, I could capture the ID each time a modal is closed, and then use that ID if the modal needs to be reopened without changing its data. Something like this:
$('#myModal1').on('hidden.bs.modal', function (e) {
var LastModal = '#myModal1';
})
$('#myModal2').on('hidden.bs.modal', function (e) {
var LastModal = '#myModal2';
})
function reOpen() {
$(LastModal).modal('show');
}
But I'm guessing there's a way that's simpler and doesn't require me to state all my modals ID's in JS/jQuery. Any ideas?
I've made a few tweaks, and this is working well for me now, with essentially no other hassle than a few short lines of code in my script file.
var LastModal;
$('.modal').on('hidden.bs.modal', (e) => {LastModal = $(e.target).attr('id'); })
function reOpen() { $('#'+LastModal).modal('show');}
Just use the style class "modal" for your modals, and to call the "reOpen", just have something like:
<span onclick='reOpen();'>Reopen</span>
Thanks #marekful for your suggestion!
Also, if you want to access this (or any other function) by pressing Ctrl+Z, you can add this:
// press Ctrl+Z to restore modal
$(document).keydown(function(evt){
if (evt.keyCode==90 && (evt.ctrlKey)){
evt.preventDefault();
reOpen();
}
});
PRE EDIT: It turned out that it was not about the disability of the button, but making some other actions after save. I debugged the page and found out that after making changes on a saved form, then page loses the javascript functionality in the (document).ready part. I've added the solution as an answer.
I have an entry page which has two buttons save and approve. The mechanism is something like, you can fill the form and save, then approve. You can also reach a saved page by refreshing the page or from the list of your saved pages.
The approve button is disabled if the form is not saved. I enable it from code behind after saving. Approve button also has a confirm button extender which takes its confirm text from javascript. I load it in (document).ready and its code is:
$(document).ready(function () {
$("#ASPxSplitter1_ContentPlaceHolder1_uctActivityEntry1_tbActivity_tbHistory_btnApproveActivity_btnApprove").click(function () {
$("#ASPxSplitter1_ContentPlaceHolder1_uctActivityEntry1_tbActivity_tbHistory_btnApproveActivity_lblMessage").text(GetConfirmTextForApprove());
});
});
,where GetConfirmTextForApproval() makes some calculations and returns the confirm text.
Now, my problem is, as the button is disabled when you open the form, the code above is not rendered at the first page load. This leads to the problem that, when I start to fill a form and save it, then approve it, I don't get any confirm text, because it does not run the function. But after refreshing the page or after I go to a saved form's page from another page, I get the proper confirm text.
So, how can I solve this problem? How can I get the proper confirm text even though the button is disabled at the first page load?
Note: I have to add that after saving, the url of the page is changed. The query string is added. That might also cause the problem.
You can use
// Disable #x
$( "#x" ).prop( "disabled", true );
// Enable #x
$( "#x" ).prop( "disabled", false );
But not when document ready, you need enable button when you want. Then you need create a event listener
$("#button").click(function(){
//Your code
if(GetConfirmTextForApproval()){
//You active the button and the text that you want show.
}
});
Solved my own problem:
As it was said in the pre edit of the question, the problem was caused because of making changes after the save. I've changed my function as:
$(document).ready(function () {
SetConfirmMessageForApproval();
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler);
});
function EndRequestHandler(sender, args) {
SetConfirmMessageForApproval();
}
function SetConfirmMessageForApproval() {
$("#ASPxSplitter1_ContentPlaceHolder1_uctActivityEntry1_tbActivity_tbHistory_btnApproveActivity_btnApprove").click(function () {
$("#ASPxSplitter1_ContentPlaceHolder1_uctActivityEntry1_tbActivity_tbHistory_btnApproveActivity_lblMessage").text(GetConfirmTextForApprove());
});
}
This helps, if anyone else needs it.
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.
So I've been looking around for hours, testing multiple versions, testing some of my own theories and I just can't seem to get it working.
What I'm trying to do is use alert or confirm (or whatever works) so popup a dialog when a user tries to navigate away from a purchase form. I just want to ask them "Hey, instead of leaving, why not get a free consultation?" and redirect the user to the "Free Consultation" form.
This is what I have so far and I'm just not getting the right results.
$(window).bind('beforeunload', function(){
var pop = confirm('Are you sure you want to leave? Why not get a FREE consultation?');
if (pop) {
window.location.href('http://www.mydomain/free-consultation/');
} else {
// bye bye
}
});
$("form").submit(function() {
$(window).unbind("beforeunload");
});
This is showing confirm dialog to user, want to stay or leave page. Not exactly what you looking for but maybe it will be useful for start.
function setDirtyFlag() {
needToConfirm = true; //Call this function if some changes is made to the web page and requires an alert
// Of-course you could call this is Keypress event of a text box or so...
}
function releaseDirtyFlag() {
needToConfirm = false; //Call this function if dosent requires an alert.
//this could be called when save button is clicked
}
window.onbeforeunload = confirmExit;
function confirmExit() {
if (needToConfirm)
return "You have attempted to leave this page. If you have made any changes to the fields without clicking the Save button, your changes will be lost. Are you sure you want to exit this page?";
}
Script taken from http://forums.devarticles.com/showpost.php?p=156884&postcount=18
Instead of using the beforeunload and alert(), I decided to check whether or not the users mouse has left the document. See code below:
$(document).bind('mouseleave', function(event) {
// show an unobtrusive modal
});
Not sure whether it will help.
You need to stop the propagation before showing the Confirm / Alert.
Please refer http://jonathonhill.net/2011-03-04/catching-the-javascript-beforeunload-event-the-cross-browser-way/
Look at the last comment.
Try this:
window.onunload = redirurl;
function redirurl() {
alert('Check this Page');
window.location.href('http://www.google.com');
}
I've been battling with this issue all day. I am hoping someone has an answer for me. I did a bunch of searching and can't seem to find an answer.
I have a page that has 3 forms on it. I am working within the 2nd form. None of the forms are embedded within another form.
I have a hidden div that contains two form elements, a drop down list and a text box, and a submit button that I anticipated it posting to the form it is enclosed in. On another button within the form itself (not submit button), I have javascript that launches jquery.Dialog, that code looks like this:
function showReleaseDiv() {
var div = $("#ReleaseHoldsDiv");
var f = div.closest("form");
div.dialog({ width: 270, height: 187, modal: true, title: 'Bulk Hold Resolution' });
div.parent().appendTo(f);
}
This part does function correctly. I've overcome the typical jquery issue where it pulls the contents of the dialog out of the form, so I put it back in the form, but wonder if this is causing my real issues which are:
The drop down list and text box are both required before I post, so I default the submit button to disabled, then I have an onchange event on the drop downlist, and the onkeyup on the text box call the following javascript:
function enablePopupRelease() {
var button = $("PopupReleaseButton");
if (button && button != null) {
button.attr("disabled", "disabled");
if ($("#ResolutionTypeCode").val() != "" && $("#ResolutionComments").val() != "") {
button.removeAttr("disabled");
}
}
return true;
}
Both events fire correctly and I step through the code; all seems fine, but the button disable state does not change.
Please help.
I believe you are missing a hash on this line:
Change:
var button = $("PopupReleaseButton");
to
var button = $("#PopupReleaseButton");
firstly I would clean some code as follows:
function enablePopupRelease() { var button = $("PopupReleaseButton"); if (button) { button.attr("disabled", "disabled"); if ($("#ResolutionTypeCode").val() && $("#ResolutionComments").val()) { button.removeAttr("disabled"); } } return true; }
Let me know if makes any difference please?
if you break through the code ... does it stop at button.removeAttr("disabled"); please?
Are you using the jQuery UI button widget for the form's submit button? If so, you will need to call
$("#PopupReleaseButton").button({disabled: true});
to disable the button.
disabled isn't an attribute, it's a property -- try using button.prop('disabled',true) and button.prop('disabled',false) instead.
http://api.jquery.com/prop/