How to remove apex.widget.waitPopup() when ui dialog opens - jquery-ui

I need to remove waitPopup() when "value required" error is displayed. (Correct errors before saving.)
Do you have any suggestions?
I have DA Before Page Submit:
$('body').append('<div class="apex_wait_overlay"/>');
vWait = apex.widget.waitPopup();
I already have remove when validation error appears. (jQuery Selector -> #APEX_ERROR_MESSAGE)
try{
vWait.remove();
$('body').children('div.apex_wait_overlay').remove();
}
catch(e){}
It would be nice if it was possible on ui dialog too.
waitPopup blocks clicking on dialog
Thanks

Related

JQuery mobile - click event only fires on current page

I have the following:
$(document).on("pageinit", function (event) {
alert("pageinit called");
$('#logout').bind('click', function() {alert("clicked!");});
});
The first time the page runs you get a single alert 'pageinit called'. Clicking the element with id #logout fires the alert 'clicked!'. If I click any other links in this page I still get the 'pageinit called' alert (and I get it multiple times, apparently for each page I have previously navigated as well) but subsequently the handler for #logout is gone and never never re-established.
Can anyone tell me how I can get the handler for #logout to remain? I've tried:
$('#logout').die('click').live('click', function() {alert("clicked!");});
to no avail.
After looking more closely (and as commented by Omar), this problem is caused by a combination of the jquery mobile paging system AND trying to attach to a 'single' element by id.
In my case each time I clicked a link within the page it would load into the jqm paging system a separate page, each one containing its own #logout element. My solution was to query for all the buttons and attach handlers to each one:
var buttons = $("*[id='logout']");
buttons.each(function() {
// handle click or whatever here
});
Instead of:
var button = $('#logout'); // Only hooks into the first #logout element

Enabling button in jquery mobile pop-up

I have a Jquery pop-up that contains a form, and the submit button disabled. The button is supposed to get enabled once all fields have been filled. I ran a javascript script for this. However, it didn't work, and the page got refreshed. I added another button just to test the enabling.
<'button id="submitButton" disabled='true' data-theme="b" data-icon="check">Done<'/button'>
<'button id="x" onclick="enableButton()"'>Enable<'/button'>
The script:
function enableButton()
{
document.getElementById("submitButton").disabled=false;
}
This didn't work. I tried scripting it according to the jquery plugin guidelines like so:
$("#x").onclick(function()
{
$("#submitButton").button('enable');
});
This didn't work either. Any idea why? Again, this form is in a jquery pop-up.
Try:
$("#submitButton").removeAttr('disabled');
In your click event
You can try this;
$("#submitButton").removeClass('ui-disabled');

jQuery Tooltip remains open if it's on a link within an iframe (in FF & IE)

I'm replacing the standard "Reset your password" text link with a help' icon, but I discovered that when a jQuery Tooltip is on a link within an iframe, it remains open once the link is clicked until the parent page is refreshed.
I'm using inline frames, but I also experienced the same problem when linking to another page. I tried moving the title inside a <span> tag, as well as closing the iframe and opening a new one with the functions below, but the tooltip just remains open on the page.
UPDATE - I created a fiddle to demonstrate the problem http://jsfiddle.net/chayacooper/7k77j/2/ (Click on 'Reset Link'). I experience the problem in both Firefox & IE (it's fine in Chrome & Safari).
HTML
<img src="help.jpg">
Functions to close iframe and open new iframe
function close_iframe() {
parent.jQuery.fancybox.close();
}
function open_iframe() {
$.fancybox.open([{href:'reset_password.html'}], { type:'iframe'
});
}
I am using jquery-1.8.2, jquery-ui-1.9.1 and fancyapps2
Could be an incompatibility or bug between the fancybox and the jQueryUI tooltip.
Essentially, the fancybox is showing the second form but the browser is not seeing the mouseout event. You can check this by adding a callback function to the .close() event of the jQueryUI tooltip.
$('a[href="#inline_form1"]').tooltip({
close: function( event, ui ) {
console.log('closing')
}
})
You should be able to see closing in the console in IE, Firefox and Chrome when the mouse moves out of the "Reset Link" anchor. However, when clicking "Reset Link" in Chrome you see the closing log line again but in IE9 it does not appear again. So the browser is missing the event.
We can work around this by manually calling .tooltip('close') when "Reset Link" is clicked, like this:
$('a[href="#inline_form1"]').on('click', function() {
$(this).tooltip('close')
})
There is a small problem with the way in which the tooltips are created which means that with just the above click handler it will error with
Uncaught Error: cannot call methods on tooltip prior to initialization; attempted to call method 'close'
This seems to be caused by using the $(document).tooltip() method which uses event delegation for all elements with a title attribute. This is the simplest way of creating tooltips for all elements so I understand why this is used but it can add unnecessary events and handling to the whole page rather than targeting specific elements. So looking at the error it is telling us that we need to explicitly create a tooltip on the element we want to call 'close' on. So need to add the following initialisation
$('a[href="#inline_form1"]').tooltip();
Sp here is the completed JavaScript
$(function () {
$(".fancybox").fancybox({
title: ''
})
$(".fancybox").eq(0).trigger('click')
$(document).tooltip();
$('a[href="#inline_form1"]').tooltip()
$('a[href="#inline_form1"]').on('click', function() {
$(this).tooltip('close')
})
})
Note: You only need one jQuery document.ready wrapping function - the $(function (){ ... }) part :-)

jQuery Mobile display spinner

I am developing a jQuery Mobile website and am using the jQuery validation plugin to validate my forms. On some forms I have set data-ajax="false", but still wanted to show the loading spinner when the submit button is clicked.
To display the spinner I use the following code
// Display spinner
$(document).delegate('.ajaxSpinner', 'click', function () {
if($(".ajaxValidate").length == 0 || $(".ajaxValidate").valid()) { // Show spinner if no validation or form is valid
$.mobile.showPageLoadingMsg();
}
});
The form submit button has a class of 'ajaxSpinner', and the form itself has a class of 'ajaxValidate'.
On most forms this works great, if the form is invalid when submit is clicked you don't see the spinner, whereas if the form is valid, the spinner is displayed.
I have just one single form that isn't playing nice....the spinner shows regardless of whether the form is valid or not. The form is quite long, so I'm wondering if the validation hasn't completed before my manual display spinner code fires.
I'm not very proficient with jQuery so can anyone spot the flaw in my code?
Could it be a timing issue? If it is, is there a good way to make sure the validation has completed before the click function fires?
I think you need to call the spinner inside your validation function.
So, using the validation plugin, you may normally have something like this:
$(".ajaxValidate").validate({
submitHandler : function(form) {
// START YOUR SPINNER HERE
$.mobile.showPageLoadingMsg();
$(form).ajaxSubmit({
success: function() { // YOUR FORM WAS SUBMITTED SUCCESSFULLY
// DO SOMETHING WHEN THE FORM WAS SUBMITTED SCESSFULLY ...
// ...
// STOP THE SPINNER EVENTUALLY
//$.mobile.hidePageLoadingMsg()
}
});
}
});
Hope this helps. Let me know if this works for you.

WatiN: Print Dialog

I have a screen that pops up on load with a print dialog using javascript.
I've just started using WatiN to test my application. This screen is the last step of the test.
What happens is sometimes WatiN closes IE before the dialog appears, sometimes it doesn't and the window hangs around. I have ie.Close() in the test TearDown but it still gets left open if the print dialog is showing.
What I'm trying to avoid is having the orphaned IE window. I want it to close all the time.
I looked up DialogHandlers and wrote this:
var printDialogHandler = new PrintDialogHandler(PrintDialogHandler.ButtonsEnum.Cancel);
ie.DialogWatcher.Add(printDialogHandler);
And placed it before the button click that links to the page, but nothing changed.
The examples I saw had code that would do something like:
someDialogHandler.WaitUntilExists() // I might have this function name wrong...
But PrintDialogHandler has no much member.
I initially wasn't trying to test that this dialog comes up (just that the page loads and checking some values on the page) but I guess it would be more complete to wait and test for the existence of the print dialog.
Not exactly sure about your situation, but we had a problem with a popup window that also displayed a print dialog box when loaded. Our main problem was that we forgot to create a new IE instance and attach it to the popup. Here is the working code:
btnCoverSheetPrint.Click(); //Clicking this button will open a new window and a print dialog
IE iePopup = IE.AttachToIE(Find.ByUrl(new Regex(".+_CoverPage.aspx"))); //Match url ending in "_CoverPage.aspx"
WatiN.Core.DialogHandlers.PrintDialogHandler pdhPopup = new WatiN.Core.DialogHandlers.PrintDialogHandler(WatiN.Core.DialogHandlers.PrintDialogHandler.ButtonsEnum.Cancel);
using (new WatiN.Core.DialogHandlers.UseDialogOnce(iePopup.DialogWatcher, pdhPopup)) //This will use the DialogHandler once and then remove it from the DialogWatcher
{
//At this point the popup window will be open, and the print dialog will be canceled
//Use the iePopup object to manage the new window in here.
}
iePopup.Close(); // Close the popup once we are done.
This worked for me:
private void Print_N_Email(Browser ie)
{
//Print and handle dialog.
ie.Div(Find.ById("ContentMenuLeft")).Link(Find.ByText(new Regex("Print.*"))).Click();//orig
Browser ie2 = Browser.AttachTo(typeof(IE), Find.ByUrl(new Regex(".*Print.*")));
System.Threading.Thread.Sleep(1000);
PrintDialogHandler pdh = new PrintDialogHandler(PrintDialogHandler.ButtonsEnum.Cancel);
new UseDialogOnce(ie2.DialogWatcher, pdh);
ie2.Close();
}
You still might want to check your browser AutoClose property ie.AutoClose

Resources