I have a dialog with a checkbox inside on a jsp page. This dialog opens when a hyperlink is clicked.
The functionality that I am trying to achieve is governed by following rules:
The dialog should only close when the checkbox inside is checked.
If the dialog is reopened and the checkbox is already checked, the user can click anywhere on the page to close it.
If the dialog is reopened and the checkbox is not checked or unchecked, then user can only close the dialog by checking the checkbox.
function closeDialog() {
var checked = $('.checkboxClass').attr('checked');
$('.ui-widget-overlay').live('click', function() {
if(checked){
$('#'+divId).dialog('close');
}else{
<!-- since unchecked, dialog should not be closed-->
//$(document).unbind('click');
//$('.ui-widget-overlay').unbind('click');
$('.ui-widget-overlay').die('click');
}
});
}
<!-- This detects if checkbox is clicked-->
$('.checkboxClass').live('click', function() {
var checked = $('.checkboxClass').attr('checked');
if(checked){
$('#'+divId).dialog('close');
}
});
I have tried all things to perform step 3, ie, prevent the dialog from being closed if user clicks anywhere outside dialog, but it gets closed. Any Ideas?
I am using jQuery 1.4 and hence would prefer to retain .live() which i know is deprecated.
Try changing your .ui-widget-overlay event bind to
$('.ui-widget-overlay').live('click', function(e) {
...
Then do a e.stopPropagation() in the else?
Related
I've a login modal opened using showModal().
It has no navbar buttons, so ios users cannot close this modal.
Problem: Actually Android users can use hardware back button to close the login modal.
In my login modal I tried to add
BackHandler.addEventListener('hardwareBackPress', function() {
return true;
}
to disallow backbutton on Android, but it simply doesn't works.
I did this because I read what follows on official RN guide:
Android: Detect hardware back button presses, and programmatically invoke the default back button functionality to exit the app if there are no listeners or if none of the listeners return true.
Adding a console.log into this function I see the event fired on 'normal' screens but NOT when I've a modal showed !
What am i doing wrong?
Overriding hardware back button is possible using overrideBackPress property as described here
You can handle the back press in your component:
onNavigatorEvent(event) {
if (event.id === 'backPress') {
//Do your thing
}
}
I'm new to chrome extension development but I'm running into issues debugging and with the extension itself. I currently have a form with a submit button and after the user hits submit I change the html to show the data that was just submitted.
document.addEventListener('DOMContentLoaded', function() {
console.log("1");
document.getElementById("submitButton").addEventListener('click', myFunction);
console.log("2");
//getCurrentTabUrl(function(url) {
// renderStatus(url);
//});
});
function myFunction() {
document.getElementById("formOutput").innerHTML = document.getElementById("formInput").value;
alert("hi");
console.log("test");
);
}
In this, 1 and 2 are displayed to the extension debugging console and the alert runs as well when the button is clicked. The test shows up very briefly and then it disappears.The formoutput value changes very briefly as well and then changes back to the default value I have. Does anyone know why my code/the chrome extension would be doing this?
Thanks!
When button with type submit (This is the default if the attribute is not specified) is clicked, the form data will be sent to server and page will be redirected to new page. Then your content script will be injected again, that's why the it changes back to default value.
To avoid this, you could change button with other types, or calling e.preventDefault to prevent default behavior. Then you would want to use Ajax to send data to server, which ensure the whole page won't be redirected and only parts of UI can be updated.
I have multiple WijDialogs one above the other. Say flow comes like this:
Search Dialog -> Results Dialog -> Save Results Dialog
Consider control is currently in Results dialog which is above Search Dialog, when I move the Dialog I can still see the Search Dialog in the background.
But it is in the blur state because it lost its focus.
I want to make the background dialog completely hidden (make it invisible without closing the search dialog). It should be visible again on closing the Results Dialog .
I tried hiding the Div container of the Search Dialog, but still I can see the title bar.
I can hide the title bar completely by using $(".ui-dialog-titlebar").hide(); but I don’t know how to unhide or show the title bar.
In short, I want to make the background dialog invisible and visible with out losing the values I entered in it previously.
You can call the 'close' method of the first wijdialog to close it and then call its 'open' method in the close event of the second dialog. The data entered in the first dialog is retained until wijdialog is reinitialized. Please see the code below:
$('#dialog2').wijdialog({
autoOpen: false,
stack: true,
modal: true,
open: function () {
$('#dialog1').wijdialog('close');
},
close: function () {
$('#dialog1').wijdialog('open');
}
});
When I click the extension icon, a popup is shown.
After that, when I try to click "URL restrictions", it will open a window, after that when I click the popup again, the popup is overlapping that url restriction window.
The above issue happens on Windows only, not on Linux.
So I have added window.open('','_self').close(); which apparently fixed the issue. But not exactly. Is it correct? I have referred this Link and Link2 but can not understand the meaning.
What is the purpose of window.open('','_self').close();?
EDIT: this is my popup.js
function click(e) {
var windowObj = window.open(site_exception_url, 'url_window', params);
windowObj.focus();
window.close();
window.open('','_self').close();
return false;
}
On Windows the popup isn't closed automatically after a new window is opened from a link within the popup.
Close it in the click handler manually, this won't hurt Linux but will help on Windows:
document.addEventListener("click", function(event) {
if (event.target.localName == "a") {
close();
}
});
The related questions linked in your question don't apply here as the first is for userscripts, not extensions, and the second isn't for popups shown by the browser when you click the toolbar button.
I'm using drupal 6 form, and ahah for ajax form submit. On form submit I perform some validation and allows user to choose options that display on jqModal popup.
JS script that I'm using for jqm popup is:
$(document).ready(function() {
$("#dialog").jqm();
});
and uses tag to open the jqm popup
Choose option
<div class="jqmWindow" id="dialog">
<h2 id="modalHeading">Select one</h2>
x
<form> form values</form>
</div>
Instead of opening popup window, it changes the url by adding # at the end.
Same code is working fine on the other page of my website.
jqModal.js file is included to the page on pageload.
The default trigger is any element with a class of "jqModal", so your anchor element (Choose option) is correct and ought to show the modal when clicked.
Is anything showing up in the javascript console of the page?
Perhaps there's another javascript function that's preventing the click event from bubbling? The .click() events are assigned in a FILO (first-in, last-out) manner, so if another click event return false, the jqModal assigned event may never get called.
You can also be explicit and try;
$(document).ready(function() {
$("#dialog").jqm({trigger: false});
$("a.jqModal").click(function(){
$("#dialog").jqmShow();
});
});