stop the flow of program like window.showModalDialog using javascript - javascript

We have a big enterprise application that use window.showModalDialog to display modal windows.
We used them at lots of places to show dialog messages and child forms. Now we want to support all the browsers, because in Chrome window.showModalDialog does not display modal dialog, we are thinking of using overlays div over the content and then display top window with div using higher z-index. It works beautifully, But following is the big problem we are facing -
1. Most of code use the following syntax -
var return = window.showModalDialog();
doSomethingWithReturnValue(return);
method to display modalDialog, now the code will not execute and wait for user to close the window the then the next line of code doSomethingWithReturn() method will execute, This code in used at atleast hundards of places in the code. There there is way in javascript to replace window.showModalDialog() with something like follows -
var return = showDialogWindow() // this will use overlays and div with higher index to // display the content
Our problem is that showDialogWindow() will return immediately and all the code will execute without waiting for user to close the window. Alternative will be to use callback, but then results will be to change the whole code around and more testing and potential for more bugs.
Is there way design showDialogWindow() in such a way that showDialogWidnow will wait as long as user have not close the top div.
Thanks,
If you have more questions please let me know.

Related

alert and confirm boxes do not appear

I have a couple of webpages which i in part build up dynamically (php and JavaScript).
Everything used to work well in the past, but now the various calls to alert and confirm do not cause dialog boxes to appear anymore.
Using the JavaScript debugger in firefox i can verify, for example, that the statement
var r = confirm("Do you really want to save this data?");
is executed, but no dialog window is opened, and the code goes on as if i had pressed "no" (in this step the watch expression for r changes from "undefined" to "false").
The same happens for calls to alert - the code is executed, but no dialog window is shown.
I have not checked these pages in a while, which means there have been various software updates since then.
Strangely however, this seems not to be a browser-wide effect: a different set of similarly built pages does not show this behavior - there, the dialog boxes are shown.
Is it possible that there is some setting in JavaScript or php which prevents dialogs from opening?
Does anybody have an idea how to fix this problem?
I had the same problem before and my problem was solved with the following code. You try it too, maybe it will help you too.
let r = window.confirm("Do you really want to save this data?");

How to modify spin.js to block the UI and show on the center of the screen

I'm already using spin.js in my application. I like it because it's pure JS and at least for me solved some issues that I was having using a loading image. However the default behaviour has two things that I would really like to change.
Here is a simple Fiddle example which is simple but very well illustrates what I would like to achieve.
I have a very long from and at the beginning of the HTML file I have <div id="show-spinner"></div> so when the user clicks Submit I can:
var target = document.getElementById('show-spinner');
var spinner = new Spinner().spin(target);
The problem is that when I'm at the end of the form where the submit button is when I call the spinner it shows in such a way that I may very well not see it at all, as it is in my Fiddle example (at least if you are using some low(laptop) resolution) but no matter the resoution there's always the chance to get so down below that you can't actually see that the spinner is shown. Which kinda leads me to the nex problem which I think is realted to the first - I would like to show the spinner always at the center of media screen (the laptop display for example) and also - since for example I don't want the user to be able to click Submit twice and in I would say, all of the cases, when I show the spinner I would like the user to not be able to interact with the UI - I mean, to click buttons, write stuff in inputs and so on so I would like to show some sort of load mask or I'm not sure how it's called, just like when you call alert()
So to sum it up - from what is it right now in my fiddle example I would like to change it to some alert like behaviour so that no matter where I am on the HTML dom I always get some sort of spinning animation on the center of my screen and mask diasbling the user to interact with the UI.
Since this sounds to me as kind of trivial task, or at least something that have been solved already I would accept answer pointing to plugin that provide such functionality. The only thing - I woul prefer to use something that is pure JS and doesn't use images.. but I will apreciate all suggestions!

Displaying javascript variable without clearing screen [duplicate]

This question already has answers here:
Document.write clears page
(6 answers)
Closed 8 years ago.
I am learning how to develop and I wanted to work on a simple "clicker" game using HTML5, CSS3, and JavaScript. I'm looking to practice creating something similar to Cookie Clicker. I have created three icons and they each serve a purpose. I would like to figure out how to display a modified variable on a portion of the screen without clearing the screen or having to resort to a window popup.
Here is the link to the project if anyone is interested in helping:
https://github.com/HandleThatError/Practice
The function in question is the displayPoints function in the master.js file. I currently have the following:
function displayPoints() {
confirm(numClicks);
}
This does what I want. It displays the correct number of clicks. If I click on the middle button twenty times and then click the "Display Points" button, it'll display the right number of points. However, it does it in a popup window. How can I display the number of points inside the browser without using a popup window?
I tried the following code:
function displayPoints() {
document.write(numClicks);
}
This code worked inside the browser but it cleared the screen of the icons, so it's not possible to keep generating points by clicking on the second button.
tl;dr - How can I update variables in real time, on the browser screen, without using a popup window and without clearing the screen? Any help would be much appreciated.
You can use an html element on the page and fill it with data such as:
<span id="numClicksResult"></span>
<script>document.getElementById('numClicksResult').innerHtml=10;</script>
This is an important concept that links HTML and JS:
You need an element to store what you're going to update. This is usually a div.
<div id="myDiv"></div>
Then, in your JS, you need a way of accessing the div.
document.getElementById("myDiv");
This gives you the element, but you need to update the element's value.
document.getElementById("myDiv").innerHTML;
So, you can access the value, but you need to update it whenever there's a click. When the user clicks, you do all of the work you need on your variable and then...
document.getElementById("myDiv").innerHTML = myVar;

(Capybara) access modal window

I am writing request specs ... I use Capybara... And I am in trouble with some modal windows.
What I actually want in my test is to fill in a form that pops up in a modal window.
The modal is created with Bootstrap from Twitter (http://twitter.github.com/bootstrap/javascript.html#modals)... and it's going through a set of transitions (but I don't know if this is relevant to what I'm about to say).
I have tried a few workarounds I found on the web, like:
A) switching between pages with page.driver.browser.window_handles
page.driver.browser.switch_to.window(page.driver.browser.window_handles.last)
B) using wait_until to make sure that the modal loads
def modal_wrapper_id
'#modal-edit'
end
def modal_visible
wait_until { find(modal_wrapper_id).visible? }
rescue Capybara::TimeoutError
flunk 'Expected modal to be visible.'
end
but none of those worked... so I thought to render the number of window handles at the moment when the modal window is active...
So I did this:
puts page.driver.browser.window_handles.length.should == 2
And I got this:
Failure/Error: page.driver.browser.window_handles.length.should == 2
expected: 2
got: 1 (using ==)
From what I understand, practically my modal window doesn't exist.
Any help on this one would be much appreciated.
Thank you.
I didn't use Capybara, but your problem has to do with the fact that Bootstrap's modal dialog is actually a pseudo-modal, in that it's actually just a div element and a transparent overlay behind it. A true modal dialog would be one created using window.confirm, for example, which can indeed be queried using your sample code. In your case you should give the modal div element an id, and use that as a handle to query it from Capybara and wait until its display is "block". Didn't test anything though.
Capybara by default uses :rack_test driver. Can you confirm you're using Selenium WebDriver or other driver where opening a modalbox is actually possible?

Proper check to ensure scrollbars

Ok, so I've got a pop up window from Javascript. However, this window has dynamically generated content - a person could add dozens of entries, which would fill the box, but because the box is frequently generated with little content in it, it does not naturally have a scrollbar.
How would I add a test in Javascript to make sure that everytime this script runs, a test to see if a scrollbar should be implemented is run, and then how would I implement the scrollbar?
window.open ("http://www.javascript-coder.com", "mywindow","scrollbars=1");
Or, you may be able to take this into the hands of CSS:
In the popup:
body {overflow-y:auto !important};

Categories