How can I do this with MaterializeCSS?
If a user changed something in the modal and is trying to close it (by clicking outside, Esc button, or close button on modal), I want to confirm that action.
The complete option of the modal constructor only runs after the modal is closed.
This is how I catch the user changing the modal data:
var form_changed = false;
$('.modal').find('input, textarea, checkbox').on('change', function() {
form_changed = true;
});
That doesn't seem possible out-of-the-box.
After peeking at the source code, I came up with this:
function addCloseHandler($modal, handler) {
var modal = $modal[0].M_Modal;
modal._close = modal.close;
modal.close = function () { handler(function () { modal._close(); }); };
}
Usage:
// $('.modal').modal();
addCloseHandler($('.modal'), function (close) {
form_changed ? confirm('Confirm?') && close() : close();
});
Related
In my project, I've added the alert box and try to close the box if the user clicks on disclose button. But I don't know why this if condition is not executed.
can anyone tells me where I did make a mistake?
window.onload = function(){
var button = document.querySelector(".close");
var successMessage = document.querySelector(".messageStackSuccess");
var messageStack = document.querySelector(".messageStackError");
// console.log(successMessage.className);
button.onclick = function () {
if (messageStack.className == "messageStackError") {
messageStack.classList.add("displayNone");
}
else if (successMessage.className == "messageStackSuccess") {
successMessage.classList.add("displayNone");
}
};
};
This is my code. When I click the close button on the child window it will display suresh on the screen but if I call popuponclick() function at the time itself suresh is getting displayed. What I do??
popuponclick = function() {
window.ChildWindow = window.open('GOLF12/shared/launchpage.html',
'popupWindow',
'width=700,height=700');
window.ChildWindow.attachEvent("onunload", OnChildWindowClose());
}
OnChildWindowClose = function() {
document.getElementById("my").innerHTML = "suresh";
window.ChildWindow = null;
};
This will likely work better on your server
It does not run if there is a popup blocker, then you will need to test if ChildWindow was opened correctly
this fiddle works, but stacksnippets fail on the popup blocking
var ChildWindow;
function popuponclick() {
ChildWindow = window.open('GOLF12/shared/launchpage.html',
'popupWindow',
'width=700,height=700');
setTimeout(function() { // we need to have the new page active
ChildWindow.addEventListener("unload",OnChildWindowClose)
},100)
}
function OnChildWindowClose() {
this.opener.document.getElementById("my").innerHTML = "suresh";
this.opener.ChildWindow = null;
};
<button onclick="popuponclick()">Click</button>
<span id="my"></span>
I find it very complex to create a separate menu for mobile/small screen devices, so I decided to go with the main one, however my goal is to display all the links by default (when loading the page), actually the user needs to click on a small icon to display the dropdowdown links, it's very popular practise and most users are comfortable with that however my client insist on showing all links without clicking on anything.
I managed to hide that icon but I'm stuck because I cannot display those links anymore, is there a way to activate that onClick function by default? Or maybe disable dropdown secondary list on mobile?
The code below is navigation:
NavigationView.prototype.initialize = function() {
this.$el.on('click', (function(_this) {
return function(e) {
if (!$(e.target).closest('.navigation').length) {
return _this.$('.navigation .open').removeClass('open');
}
};
})(this));
this.$el.on('focus', '.header-navigation-link.primary-link', (function(_this) {
return function() {
var $menuWrapper;
$menuWrapper = $(_this.$el.find('.has-dropdown.open'));
if ($menuWrapper.length) {
return $menuWrapper.toggleClass('open', false);
}
};
})(this));
return this.$el.on('focus', '[data-is-dropdown] .secondary-link', (function(_this) {
return function(event) {
var $target;
$target = $(event.currentTarget);
return $target.parents('.has-dropdown').toggleClass('open', true);
};
})(this));
};
NavigationView.prototype.toggleNavigation = function(e) {
var $target;
$target = $(e.target);
if ($target.parents().hasClass('has-dropdown')) {
e.preventDefault();
return $target.parent().toggleClass('open');
}
};
return NavigationView;
What I'm trying to change is that ToggleClass; active by default so don't need to click on icon to show secondary-list
I believe this is the syntax you are looking for:
this.$el.on('click', myFunction); //runs myFunction onclick
function myFunction() {
//display dropdown code here
}
myFunction(); //runs myFunction onload
I have modal window where i have function setConfirmation to set modal window buttons(yes,no and ok) based on logic, now when ok button okCallback is called i want to set yes and no button back to modal window because these are default buttons.
Now when user click ok we closed modal window but yes and no blinks for fraction of secs so for that i created another function resetConfirmation that i am calling from successCallBack but (yes and no) buttons still blinks for a sec before modal window close.
How can i execute resetConfirmation function after 1 sec that will resolve the issue i think or any other suggestion will be appreciated as well ?
main.js
var setConfirmationWinButtons = function(hideYesBtn, hideNoBtn, showOkBtn) {
$scope.hideYesBtn = hideYesBtn;
$scope.hideNoBtn = hideNoBtn;
$scope.showOkBtn = showOkBtn;
};
$scope.successMessage = function(mesg) {
setConfirmationWinButtons(true, true, true);
$scope.messageText = mesg;
$scope.confirmationWin.open().center();
$scope.okCallback = $scope.successCallBack;
};
$scope.successCallBack = function() {
$scope.confirmationWin.close();
resetCofirmationWin();
};
var resetCofirmationWin = function() {
setConfirmationWinButtons(false, false, false);
};
1)
inject $timeout, then use code:
$timeout(function() {
resetConfirmationWin();
}, 1000);
2) you also can use simple timeout:
setTimeout(function() {
resetConfirmationWin();
}, 1000);
It is more perfomant, because it does not fire $scope.$apply(), but you can miss model update.
It is not recommended in style guides.
The prompt popup that occurs when I click the button with class 'alert3' does not close.
CLICKMEMEMEMEMEME
and this is the function that I am invoking:
<script>
$(document).on("click", ".alert3", function(e) {
bootbox.prompt("What is your name?", function(result) {
if (result === null) {
Example.show("Prompt dismissed");
} else {
Example.show("Hi <b>"+result+"</b>");
}
});
});
</script>
The popup does not close because you have an error in the callback function, so it crashes before bootbox can make the popup disappear.
The best guess is that Example is not defined in your code. Maybe you took it on the Bootbox website, they are using a javascript object called Example.
If you want to show the result with your callback function, you can add this to your html:
CLICKMEMEMEMEMEME<br/>
<p id='result'></p>
And then change your javascript:
<script>
$(document).on("click", ".alert3", function(e) {
bootbox.prompt("What is your name?", function(result) {
if (result === null) {
$('#result').html("Prompt dismissed");
} else {
$('#result').html("Hi <b>"+result+"</b>");
}
});
});
</script>
Prompt popup in bootbox.js
That is not working because Example function is not defined there.We need to first defined them that using current selector value and text associated with them.here $("#result") is used to show error message in particular div.
html code:
<p>Click here-><a class="alert" href=#>Alert!</a></p><p id='result'</p>
code:
var Example = (
function()
{
"use strict";
var elem,
hideHandler,
that = {};
that.init = function(options) {
elem = $(options.selector);
};
that.show = function(text) {
clearTimeout(hideHandler);
$("#result").html(text);
$("#result").fadeIn();
hideHandler = setTimeout(function() {
that.hide();
}, 4000);
};
that.hide = function() {
$("#result").fadeOut();
};
return that;
}());