In a web application that I am working on I have partial view that I display on a "details" page via a JqueryUI Dialog box. I am trying to add a JqueryUI tooltip for the close button, in the top right corner of the header, that comes stock with the dialog box. Below I have some of my code. I know the scripts will work from the location they are at currently in this web application due to my second function below. '.ui-dialog-titlebar-close' is the class that is applied to the close button in the dialog header (based off chrome firebug). The closest answer I've found to the solution was here https://forum.jquery.com/topic/tooltip-in-a-dialog-pop-up-without-hovering
Found this question similar to mine...
How to change the 'X' button in a jquery dialog box to read 'Close'
...any way I could manipulate the close button achieve what I asked like this? For example a ".addTitle()"?? About to tinker with this idea.
Any and all help or information is appreciated.
<script>
$(function() {
$('.ui-dialog-titlebar-close').tooltip({
content: function () {
return "test";
}
});
});
$(function () {
$('#testThing').tooltip();
});
</script>
With many thanks,
Rock
I would try using the create event on your dialog:
$("yourSelector").dialog({
create: function(){$(".ui-dialog-titlebar-close").attr("title","Your text goes here");}
});
This can be fixed by editing line which has
.addClass("ui-dialog-titlebar-close ui-corner-all")
in 'jquery.ui.dialog.js' or ('jquery.ui.all.js') page, It currently reads
.attr('role', 'button')
simply change it to
.attr({'role': 'button', 'title': "close (Esc)")
this will solve the issue
I think the easiest solution is to update the options configuration of jQuery UI dialog. Like:
$("#dialogConfirm").dialog({
autoOpen : false,
modal : true,
resizable : false,
dialogClass : "confirm-dialog",
closeText : "Click to Close the dialog" // Here is the Gem
});
Related
I dont know a lot about js and jQuery. I bought a WP theme and I want to do a few changes on it.
In this page: https://websitesdevs.com/search-services/
You can see a div with a text saying "Apply Filters" and when you click on it, it opens a popup with all the filters. The thing is that I want a search box, and then a button to open this popup with the filters.. I've been trying it but I can't do it.. I would like to open that popup with any other CSS class. Do you know how can I do it?
I think that the popup opens with this JS & jQuery script
//filter dropdown
jQuery('.mmobile-floating-apply,.wt-mobile-close').on('click', function() {
var _this = jQuery(this);
_this.parents('aside.wt-sidebar').toggleClass('show-mobile-filter');
});
This code is located at workreap_callbacks.js
Thanks for your time, I really need this
As far as I understand your question, you can run this:
$('.mmobile-floating-apply,.wt-mobile-close')
.parents('aside.wt-sidebar')
.toggleClass('show-mobile-filter');
from any place in your code.
I'm writing protractor tests for an existing app.
I have a button called 'Decline' in a modal window, and I'm trying to click it using:
element(by.buttonText('Decline')).click();
But I receive the below error:
UnknownError: unknown error: Element is not clickable at point (,). Other element would receive the click:
May be because I have another button called 'Decline' outside the modal window?
How do I click on the modal window's Decline button ?
Found that this is the js code that displays this Decline button.
.....
var content = {
title: 'Decline',
htmlBody: '<p>...</p> ',
okButton: 'Decline',
onOk: function() {
.....
As there are two buttons with button text Decline, How do we identity the one in modal?
One way to approach that would be to improve your locator to work in the scope of the modal content. But, since you have not provided an HTML representation of the modal I cannot provide you with a specific answer. Here are the samples that you can improve to fit your use case:
element(by.css(".modalContent button[ng-click*=ok]")).click();
element(by.css(".modalContent")).element(by.buttonText("Decline")).click();
Another approach could be to find all buttons with a specific text and filter the visible one:
element.all(by.buttonText("Decline")).filter(function (button) {
return button.isDisplayed().then(function (isDisplayed) {
return isDisplayed;
});
}).first().click();
My Colleague recommended this and it worked:
Clicking on First Decline button opens up a modal,
Sleep for some time,
Now click on the second Decline button.
element(by.buttonText('Decline')).click();
browser.sleep(2000);
element(by.cssContainingText('.btn', 'Decline')).click();
Thanks for all your help :)
Write the code
which needs to display under modal window,
inside form tag.
And serialize that form with the existing form.
Just search the button by its text and use the function click. So for you it should look like that:
element(by.buttonText('Cancel')).click();
try the below code,
var DeclineBtn = element(by.buttonText('Decline'));
browser.executeScript("arguments[0].click()",DeclineBtn.getWebElement())
Can someone please help me with hiding/disabling a button on jQuery dialog box?
Scenario: On button click I am opening a dialog box with 'Add' and 'Update' button.
Inside the dialog I have 2 text box containing date and message.Both will populate data if data already present in database else they will be blank allowing user to add data.
Now, If text box has pre-populated data(message exist in db) I have to hide Add button as user can only update the message.I tried few tricks which I got from stackoverflow but none of them is working as I am opening dialog box on button click so I guess I am creating button dynamically and I cannot hide them on fly.
I also tried giving an id to dialog button and hiding/disabling it using below code:
$('#id').hide();
$('#id').attr('disabled','disabled');
I looked into the below fiddle which is exactly what I want but If I adopt this then I have to make a lot of code change. So, was wondering if anyone can provide me an easy solution.
[http://jsfiddle.net/kkh2a/1/]
Thanks in advance.
$('#dialog-form').dialog({width:350,height:300,
resizable:false,
modal:true,
closeOnEscape: true,
draggable:false,
show:{effect:"fade"},
buttons:{
Add:{
text:'Add',
id:'AddMsg',
click:function(){
}},
Update:function(){
},
Cancel:function(){
$(this).dialog("close");
}
}});
Try this:
$('#dialog-form').dialog({
...
buttons : {...},
open : function() {
$('#dialog-form')
.dialog('widget')
.find('div.ui-dialog-buttonpane div.ui-dialog-buttonset button')
.eq(0)
.button('disable');
}
});
Hy all,
I use this way:
$("#myDivForLoadingDialog").dialog({
modal: true,
resizable: false,
height: "auto",
draggable: false,
closeOnEscape: false,
open: function (event, ui) {
$("#myDivForLoadingDialog").prev().hide();
}
})
without setting button in the option it does not show any button inside
set closeOnEscape: false to avoid your loading message been closed by "esc" button
in the opencallback hide alle the title box (and the close button it has inside).
I prefer to avoid drag, resize and all features not needed by loading message.
it works with jQuery 1.11.1 (and maybe with all previous version)
I have created a popup using the lightweight jQuery plugin: bPopup.
I want the popup to appear on page load, and as such have the following code:
<script>
;(function($) {
$(window).load(function(){ //see edit below
$('#popup').bPopup({
opacity: 0.6,
modalClose: true
});
});
})(jQuery);
</script>
the customisation modalClose: true controls weather or not the popup is closed/dismissed on clicking on the popup, or surrounding overlay (see API)
However my popup successfully appears but does not dismiss, either when clicking on overlay OR when clicking on the element with the class that controls dismissal (by default, any element with class 'b-close' will also close the popup.
Any thoughts on where I am going wrong, or how I can find out what aspect is not working? Thanks
EDIT:
As per a suggestion in comments I have altered $(window).load(function(){ to $(document).ready(function(){however my problem persists
Discovered I was using 0.7.1 version of the popup, updated to 0.9.1 and that seems to have resolved the issue. Thanks to those who took a look.
I have just started working in jQuery and ASP.NET MVC. I want the same modal form mentioned in the example of JQuery site - http://jqueryui.com/demos/dialog/#modal-form
$("#divSchedule").dialog({
autoOpen: false,
show: "slide",
modal: true
});
$("#btn").click(function () {
$("#divSchedule").dialog("open");
return false;
});
Dialog appears on the page but user can click on any of the background controls. Can you please suggest something to disable(blur) the background? Is it something to do with CSS?
Basically you made a mess of your dialog definition, try this http://jsfiddle.net/tctc2/1/
The quick answer for his question is:
use modal: true in order to
make background darker
disable any interaction with background functionality