(Capybara) access modal window - javascript

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?

Related

How to make pages progress stepwise on a popup?

Can someone please explain how can I go about creating the following page and what techniques should I adopt:
The user should be able to click on a button which should result in a popup.
The popup should have a static page with instructions and button to click which takes the user to the next step in the same popup.
At the next step the functionality should run to take input from the user and save it to the server.
The user should see a confirmation finally and on clicking finish, the popup should hide.
From what I understand, I should try the following:
use javascript onclick and fadeIn function to create the popup.
continue changing the same div using onclick and AJAX to create stepwise kind of a format and carry out the functionality.
use XMLHTTPRequest to upload data acquired and finally use fadeOut to hide the popup.
The reason why I am thinking in these lines is because I have had very little exposure to web designing and hence would love to get some expert views on if this is the right approach and if not then what should be a better way to do it. Is there is some existing literature/method which talks about it?
Any help would be much appreciated.
For first step
Use javascript onclick function. But before this keep your static content ready and than use jQuery UI to appear it as good Dialog Box. For example see this
For second step
The user will never know that you have changed the dialog. Just you can load new dialog with new content in it. When you click button on first page, make that first dialog box is closed.
For third step
Instead of static content make the response set to dialog, here you may use Ajax/post call.
Las step
Its not compulsion to use XMLHTTPRequest. You can even submit form in jQuery post/ajax. Than you can reload the page with confirmation message send in response from server or you may use jQuery to make the confirmation message appear.

Custom SharePoint 2013 Lists/Forms in content editor modal pop up only opens in list the form lives in... Not in pop up

I'm having issues getting my forms to open in modal pop up after applying code to the content editor web part... The code I'm using is below:
http://sitename/_layouts/Upload.aspx?List={A42810A0-786D-4028-B5C8-4B8BAE083CDA}&RootFolder=");
javascript:return false;"
target="_self">
Global Navigation Request
Please note that I am extremely new to javascript or any coding for that matter. This code has worked well for me in the past (in SharePoint 2010), but now the form won't open in pop up... It only opens up inside the list it lives in and we can't have that... Our users don't need to see any other entries that have been submitted to that specific list...
Is there anything I can do to fix that issue?
Your code seems incomplete, but I will assume it's part of an anchor (<a> tag), right? That by itself will not open a modal popup.
If you are opening a form's view or edit items from the built-in webparts, whether or not they open in a modal popup depends on a setting of the list. Go to the list's settings, then Advanced, and finally set Launch forms in a dialog? to Yes.
If you want to force modal popups on anything that is not built-in, you have to code, but it's pretty simple. You have to use a global function of SharePoint, SP.UI.ModalDialog.showModalDialog. Usage goes like this:
function openModal(pageToOpen) {
SP.UI.ModalDialog.showModalDialog({
url: pageToOpen,
width: 800,
height: 600
});
}
And in any html element:
<foo onclick="openModal('http://sitename/_layouts/Upload.aspx?List={A42810A0-786D-4028-B5C8-4B8BAE083CDA}&RootFolder=')">
If it's an anchor, you still have to keep it from navigating away from the page. A simple return false may not work on all browsers, so I suggest you also make a search here in Stack Overflow about that.
Back to SP.UI.ModalDialog.showModalDialog - you pass to that function a single parameter, a simple object with some properties. The properties I passed above are:
url: the page that should be opened in the modal popup;
width and height: arbitrary values, really. You don't have to pass these unless you want an arbitrary size for the popup.
More on this method may be found in the official documentation. You can see that the parameter object may have more properties than the ones in my example. This documentation is for SharePoint 2010, but this function did not change between SP2010 and SP2013. Good luck and happy coding :)

JQuery / Javascript popup box and form submission creation

I have a jquery/javascript question. For a site I am working on in PHP/JQuery I have the need to create a dialogue box with an ok/cancel button and a message and then submit a form based on if the user says ok or not. I know in javascript I can create a new window that links to a styled page and then I can do a select for if the user hits the ok button and submit the windows parent form using that but the last time I coded something similar to it I felt like it took a lot of lines of code and was wondering if JQuery supported dialogue box creation and if I could do some similar functionality using it (with hopefully less lines of code since everytime I use jquery instead of standard javascript it seems like it really reduces my codebase). If anyone knows of a resource to learn how to do this I would appreciate a link or a second of your time for some pointers.
Thanks!
I think you are looking for something along the lines of the jquery ui dialog.

how to show a dialog in jQuery Mobile

I have a toolbar in jquery mobile, made up of a bunch of links, which load "pop" modal dialog boxes on top of my javascript application.
Like this:
Info
Where the div with id="about" has a data-role="page". I'd like to open the same dialog from the code, perhaps as part of a button handler, but I can't find any way to do this.
This code does not work. It only shows the elements of the "about" page transparently ontop of my currect page (without styling). How do I do this?
$("#buttAbout").click(function () {
$('#about').show();
return false;
});
It looks like jQuery mobile's dialogs are quite different to jQuery UI. This should do what you want:
$.mobile.changePage('#about','pop',false,true)
The documentation for changePage is here. Basically, the first argument is the string to find the page you want (can be an element id, jQuery object, or a page URL), second argument is the page transition, third is the direction of the transition (false for forwards, true for backwards), and the final argument is whether you want the page URL to update after the transition. I think you'll also need to make sure that the data-role attribute is correctly set to dialog on the div for your dialog, in order to ensure the correct history/styling behaviour.

Trouble having a modal dialog to open a secondary dialog

I have a modal dialog form which has some "help links" within it which should open other non-modal panels or dialogs on top of it (while keeping the main dialog otherwise modal).
However, these always end up behind the mask. YUI seems to be recognizing the highest z-index out there and setting the mask and modal dialog to be higher than that.
If i wait to panel-ize the help content, then i can set those to have a higher z-index. So far, so good. The problem then is that fields within the secondary, non-modal dialogs are unfocusable. The modal dialog beneath them seems to somehow be preventing the focus from going to anything not in the initial, modal dialog.
It would also be acceptable if i could do this "dialog group modality" with jQuery, if YUI simply won't allow this.
Help!
By default, YUI manages the z-index of anything that extends YAHOO.widget.Overlay and uses an overlay panel. It does this through the YAHOO.widget.Overlay's "bringToTop" method. You can turn this off by simply changing the "bringToTop" method to be an empty function:
YAHOO.widget.Overlay.prototype.bringToTop = function() { };
That code would turn it off for good and you could just put this at the bottom of the container.js file. I find that approach to be a little bit too much of a sledge hammer approach, so we extend the YUI classes and after calling "super.constuctor" write:
this.bringToTop = function() { };
If you do this, you are essentially telling YUI that you will manage the z-indices of your elements yourself. That's probably fine, but something to consider before doing it.
The original dialog can't be modal if the user is supposed to interact with other elements—that's the definition of modal. Does the original dialog really need to be modal at all? If so, have you tried toggling the modal property of the original dialog before you open the other elements?

Categories