Currently I am creating a SweetAlert2 that displays a Froala HTML editor, This is done in a function called CreatePolicyPopUp (which is triggered on a button click). However, when I press the space bar inside the editor it closes the sweet alert. Previously I was using CKEditor for the html editor but this problem did not happen.
This is a stripped down version of the code that creates the sweet alert and initializes the editor.
CreatePolicyPopUp: function (fromTemplate, duplicatePolicyID, allVals) {
$.get("CreatePolicy.html", function (data) {
swal({
html: data,
showCloseButton: false,
showCancelButton: false,
width: 800,
showConfirmButton: false
}).then(function () {
});
/*initialize editor*/
$('#froalatextarea').froalaEditor();
});
},
Could there be anything conflicting between froala and sweetalert2?
Or is there a way to disable close on pressing the space bar?
If needed here is the html for my CreatePolicy.html file and also the whole CreatePolicyPopUp function is included.
Thanks to this post I found with a similar problem on an old version of sweetalert. I found out that the sweet alert 2 plugin is listening out for a space key pressed using charactercodes (the space charcode is 32) so to fix it I removed the space bar character from the close sweet alert event.
The easiest way to remove this in the sweetalert2.min.js file was to find "||32===r" and delete it.
Related
Using Cognos Analtyics 11.1.7IF9.
I have a user who, oddly enough, wants Cognos to make his workflow more efficient. (The nerve!) He thinks that if he can use the TAB button to navigate a prompt page, he'll be faster because he never needs to reach for the mouse.
To test this I created a simple report with a very simple prompt page using only textbox prompts. As I tab I notice it tabs to everything in the browser: browser tabs, the address bar, other objects in Cognos, ...even the labels (text items) I created for the prompts. Oh... and yes, at some point focus lands on a prompt control.
Within Cognos, I see that the tab order generally appears to be from the top down. (I haven't tried multiple columns of prompts in a table yet.) I must tab through the visual elements between the prompts. Also, while value prompts get focus, there is no visible indication of this.
Is there a way to set the tab order for the prompts on a prompt page?
Can I force it to skip the non-prompt elements?
Can the prompts be made to indicate that they have focus?
I tagged this question with javascript because I figure the answer will likely involve a Custom Control or a Page Module.
Of course, then I'll need to figure out how all this will work with cascading prompts and conditional blocks.
I found a similar post complaining about this being a problem in Cognos 8. The answer contains no detail. It just says to go to a non-existent web page.
I had the same frustration as your user and I made a solution a while back that could work for you. It's not the most elegant javascript and I get a weird error in the console but functionally it works so I haven't needed to fix it.
I created a custom control script that does 2 things on a prompt page.
First, it removes the ability to "select" text item elements on the page. If you only have text items and prompts on the page it sets it's "Tabindex" to "-1". This allows you to tab from one prompt field to the next without it selecting invisible elements or text elements between prompts.
Secondly, if you press "Enter" on the keyboard it automatically submits the form. I am pasting the code below which you can save as a .js and call it in a custom control on a prompt page. Set the UI Type to "None"
define( function() {
"use strict";
function AdvancedControl()
{
};
AdvancedControl.prototype.initialize = function( oControlHost, fnDoneInitializing )
{
function enterSubmit (e)
{
if(e.keyCode === 13)
{
try {oControlHost.finish();} catch {}
}
};
function setTab () {
let nL = [...document.querySelectorAll("[specname=textItem]")]
//console.log(nL)
nL.forEach((node) =>{
node.setAttribute('tabindex','-1')
})
};
setTab();
let exec_submit = document.addEventListener("keydown", enterSubmit, false);
try {exec_submit;} catch {}
fnDoneInitializing();
};
return AdvancedControl;
});
I have a php function which reloads one page in hidden iframe before real redirection is done after input button is clicked.
function button_confirm_order_params() {
$url = "somepagetoreloadinbackground.php";
$alert = "alert('you will be redirected to ext. page')";
return "onclick=\"document.all.myFrame.src='$url'; $alert;\"";
}
Everything works good, however I would like to use something more beautiful than browser's alert. So I downloaded SweetAlert and changed return to:
return "id=\"btnShowAlert\" onclick=\"document.all.myFrame.src='$url'; \"";
The problem is that without alert() the page is not being stopped before redirection. It's just shows sweetalert for a moment and then opens another page, so my "somepagetoreloadinbackground.php" is not loaded. Any ideas to handle it?
If you check the examples given on a sweetalert github, it seems there's actually alot of options that can help you: http://t4t5.github.io/sweetalert/
There's a standard timeout version: It's the timer attribute you have to add.
swal({
title: "some title",
text: "some message",
timer: 2000, // timeout in miliseconds
showConfirmButton: false // show ok button or not
});
And also, although it's a confirm instead of an alert, there's a callback function! Just add you redirect to that callback if the timeout version isn't good enough:
swal({
// add all options you want
},
function(){
// the actual callback, triggered by clicking the ok button on the confirm.
document.all.myFrame.src='$url'
});
Always read the docs for the library you're using first. :)
I'm having a big problem using using Jquery dialog. The dialog is displayed when the user clicks on a link. The first time the form is opened, it works fine; the form is submitted to the server,
and the part of the page is updated.However, subsequent attempts to use the form are where the problems start. When i click on the hyperlink for the second time,
(with closing dialog or without closing dialog), it is showing the old values. This happens even if I navigate to a different screen in the application and then return.
The content of the page which is re-rendered after each submission includes the form which makes up the dialog,
so the 'old' values which are being submitted no longer even exist in the page markup.
They are being somehow 'remembered' by JQuery UI.
$(document).on("click", "#hyperLink", function () {
$("#divSection").dialog({
title: "User Details",
resizable: false,
autoOpen: false,
height: 'auto',
width: 300,
appendTo: "form"
});
});
I don't know how to work around this behaviour, can anyone please help me how to resolve this?
I have a dialog setup as follow
$("#myDialog").dialog({
autoOpen: true,
close: function(event, ui) {
$("#myDialog-content").html("");
$(this).dialog("destroy");
}
});
$("#myDialog").css("min-height","");
$("#myDialog-content").html("Loading...");
$.ajax({
...
success: function(response) {
$("#myDialog-content").html(response);
}
});
This working fine I load and close dialog in same page but not able to make it work properly where I move between pages.
Here is a my page flow
From source page(say PageA) I make AJAX call to load the page containing dialog div(say PageB).
Link on this page call above method to display dialog. (For first time it runs OK).
When I click close button. Dialog close and with firebug I can still see dialog div at the end with UI classes but in hidden state.
If I go back to source page (Page A) and reload the PageB.In firebug I can see two div - one originally from JSP and second one from step 3.
Now if I click button to load dialog box - It used hidden to populate new data and never use new div created by jquery. So I just have blank dialog box.
I am not sure if this is jquery Dialog issue or my page flow. One possible solution I though of is use remove in close function to remove dialog div completely but it puts burden to create this div everytime page PageB is loaded. Is there any other way or any thing I am doing wrong in this scenario?
If i understood correctly the situation, You have 2 options:
If you somehow cleaning the content of "Page B", remove the modal
then.
If you do not have the cleaning mechanism like that, just
.remove() content of modal on close
Sidenote: i would advise not to use jquery for .css and .html('Loading...'). Also, it is good to cache jquery elements in variables e.g var dialog = $("#myDialog");
I am trying to disable close on click when clicking the overlay behind the edit form Modal that opens when I edit a row, but I dont know how I have to do it. I were trying something like:
editOptions: {
url: 'foo/edit.html',
mtype: 'PUT',
//some other options
closeAfterEdit: true,
reloadAfterSubmit: true,
onClose: function() {
alert('Hi ^_^');
}
}
But this only triggers if I click at 'X' button. If I click at overlay (out of modal) it closes the modal and that alert never triggers. What I want is to disable that closing function when I click out of modal or remove that overlay.
Thanks.
It's interesting problem. onClose callback will be not called if one clicks on the overlay (if one clicks out of the modal dialog) and the dialog will be closed.
It's funny, but jqModal.js already has the option which would be perfect to implement your requiremens. It's closeoverlay option of $.fn.jqm (see the line). The problem is that jqGrid don't have any public property which allows to set the option. If you just modify jquery.jqGrid.src.js the closeoverlay : true to closeoverlay : false (it corresponds changing closeoverlay:!0 to closeoverlay:!1 in jquery.jqGrid.min.js) then you will have the behavior which you need.
The problem is that I don't see any simple way to realize your requirements without modification of the code jqGrid.
UPDATED: I analysed the code of jqModal.js module one more time and I'v found simple way without changing the source code of jqGrid. The analyse is difficult because the module exist only in minimized form. So it's difficult to read the code.
The solution: you should include the following line which changes defaults of jqModal.js module:
$.jqm.params.closeoverlay = false;
Description: the lines of jqModal.js module initialize $.jqm as
$.jqm = {
hash: {},
open: function (s,t) { ... },
close: function (s) { ... },
params: {}
};
So everywhere after you includes jquery.jqGrid.min.js you have $.jqm.params as empty object. It can be used to provide default values of parameters of jqModal.js (which are not directly specified in the list of parameters of $.jqm). So you can include $.jqm.params.closeoverlay = false; somewhere after jquery.jqGrid.min.js (or jquery.jqGrid.src.js) to deny closing of jqGrid dialog on clicking on the overlay.