I need the following popover to work as follows; When user clicks within popover, it does not close. User clicks anywhere else on form, popover closes. Everything I've tried does not work. Please help!
$('#myAlerts').popover({
"html": true,
trigger: "manual",
placement: "bottom",
title: "Notifications",
boundary: "viewport",
fallbackPlacement: "flip",
content: $('#alertsContainer')[0]
}).on('shown.bs.popover', function () {
showAlerts();
}).click(function () {
$(this).popover('toggle');
});
Related
I am displaying a modal dialog to get "delete this service" or "cancel" options. When I first click on the button that opens the dialog the two buttons are missing. The red x is icon is displayed in the upper right corner and displays the help text without having to hover over the icon.
If I close it and reopen the dialog both buttons appear as they should. I'm not seeing any errors in the console.
I'm using jquery 3.1.1 and jquery ui 1.12.1. I'm calling the dialog out of a toolbar built in paramquery grid.
$("#dialog-confirm").dialog({
resizable: false,
height: "auto",
width: 400,
modal: true,
buttons: {
"Delete this service": function () {
var serviceid = grid.getRecId({rowIndx: rowIndx});
$.ajax($.extend({}, ajaxObj, {
context: grid,
dataType: 'text',
url: "/utilities/ajax_delete_service.php",
data: {serviceid: serviceid},
success: function () {
$("#services_grid").pqGrid("refreshDataAndView");
},
error: function () {
this.removeClass({rowIndx: rowIndx, cls: 'pq-row-delete'});
}
}));
$(this).dialog("close");
},
Cancel: function () {
grid.removeClass({rowIndx: rowIndx, cls: 'pq-row-delete'});
$(this).dialog("close");
}
}
});
UPDATED: I've created a fiddle that shows the problem. Run the fiddle, click on the top row of the grid and select "Delete Service" The buttons don't show. close the dialog. Click on "Delete Service" again and the buttons show.
The function for displaying the dialog is at the top of the fiddle.
JSFiddle
I have a jQuery UI Dialog that is displayed when there are form errors.
Heres the code:
function alert_field_errors (errors)
{
$('<div></div>').dialog({
modal: true,
title: "Error",
open: function () {
$(this).html('The following are required:<br /><br />'+errors+'<br />Please complete these in order to continue.');
},
buttons: {
Ok: function () {
$(this).dialog("close");
}
}
});
}
the errors variable would contain something like First Name<br />Last Name<br />Email Address<br />
It works great, except for the fact that it is not centered. It seems to be positioning itself before the content is loaded, so that when it is displayed, the bottom margin of the dialog is closer to the bottom of the window compared to the top margin of the dialog.
I tried using the position option, but nothing seems to work.
Any help would be greatly appreciated.
Heres how I fixed it:
I created an empty div on the page with the id of error-dialog and gave it css display: none;.
Then I changed my code to this:
$('#error-dialog').html('The following are required:<br /><br /><i>'+$errors+'</i><br />Please complete these in order to continue.');
$('#error-dialog').dialog({
modal: true,
title: "Error",
buttons: {
Ok: function () {
$(this).dialog("close");
}
}
});
Now it is populating the dialog with content before display it, therefore allowing it to center itself properly.
I'm working on a little app which uses Sencha Touch 2 for the user interface. Right now I'm running it in Safari on my iPad and iPhone.
My problem is that whenever I tap a text field, Safari brings up the virtual keyboard and pushes the whole web view upwards, off the screen.
This doesn't look very natural, since the top-toolbar is not visible anymore.
Here are two screenshots which demonstrate the problem.
In the second screenshot you can see the effect when the keyboard is visible.
Is there a way to prevent this behavior, and have Safari resize the user interface instead?
Unfortunately, Apple wants this behavior, but someone suggested a little hack using window.scrollTo():
listeners: {
focus: function() {
window.scrollTo(0,0);
}
}
Putting this code in launch function in app.js worked for me:
if (Ext.os.is.Android) {
Ext.Viewport.on('painted', function () {
Ext.Viewport.setHeight(window.innerHeight);
});
}
if (Ext.os.is.iOS) {
Ext.Viewport.on('painted', function () {
Ext.Viewport.setHeight(window.innerHeight);
});
}
I have found a solution that works for me.
You move the topbar into the container.
xtype: 'container',
docked: 'top',
height: '100%',
html: '',
itemId: 'MyContainer',
width: '100%',
items: [
{
xtype: 'titlebar',
docked: 'top',
itemId: 'topBar',
title: 'Obec Webchat',
layout: {
type: 'hbox',
align: 'start'
},
items: [
{
xtype: 'button',
action: 'back',
id: 'BackButton',
itemId: 'BackButton',
margin: '5 70% 5 15',
ui: 'back',
text: 'Home'
}
]
},
{
xtype: 'container',
docked: 'bottom',
height: '95%',
html: '<iframe src="http://webim.obec.local/" width="100%" height="100%" scrolling="yes"></iframe>',
itemId: 'MyContainer1',
width: '100%'
}
]
}
Hope this helps.
You will need to call the blur() method on textfield
// Assuming the id of textfield - "textFieldId"
Ext.getCmp('textFieldId').blur();
Attempts to forcefully blur input focus for the field.
If you this using html into Sencha elements must remove something tag html. Or can you put tag in the source html code. I hope help you. :)
I have a div:
<div id="mproEmailAccountPopUp"></div>
I declare a Dialog
var popupdiv = $( '#mproEmailAccountPopUp' );
popupdiv.dialog({
width: 650,
autoOpen: false,
modal: false
});
I then get some html form stuff (this works fine) from a server and update the dialog content:
function ShowEdit(accountId) {
$.ajax({
type: "POST",
async: false,
url: "<%=EmailHandler %>?action=GetEmailAccountEdit",
data: { accountId: accountId },
success: function (result) {
alert("Success GetEmailAccountEdit");
popupdiv.html(result);
popupdiv.dialog("open");
//popupdiv.dialog( "moveToTop" )
}
});
}
This works beautifully the first time, but if you press the close button, and then recall the function. The dialog is updated with the new html, but you can't type in ANY of the text boxes. I have narrowed it down to the modal overlay (as it works with modal:false). The z-index seems to be 1 less than the modal form, and I have even deleted (via firebug) the modal overlay div, but I can still not edit the text boxes.
If I turn modal:false then it works fine, modal:true is causing these problems.
As you can see, i have tried the "moveToTop" method, no effect.
I have also tried destroying the popup, and reinitialising it entirely from within the ShowEdit function.
Anyone have any clue about what I can do to fix this?
I use several jquery ui dialogs in my application to collect input from users and for CRUD operations. When in a page I need a dialog I do the following steps:
First I define the minimum markup and code necessary to initialize the dialog like this
<div id="dialogPanel" style="display:none" title=""></div>
and, when the DOM is ready,
$("#dialogPanel").dialog({
autoOpen: false, hide: 'slide', show: 'bounce', resizable: false,
position: 'center', stack: true, height: 'auto', width: 'auto',
modal: true, overlay: { opacity: 0.5, background: "white" }
});
Then I load content in the dialog when I need it using ajax calls, like this
<button id="addCustomer">Add Customer</button>
and this
$("#addCustomer").button().click(function(event) {
event.preventDefault();
loadDialog("/Customer/Create", "", "Add New Customer");
});
function loadDialog(action, id, title) {
$("#dialogPanel").dialog("option", "title", title);
if (id != "")
action = action + "/" + id;
$.ajax({
type: "get",
dataType: "html",
url: action,
data: {},
success: function(response) {
$("#dialogPanel").html('').html(response).dialog('open');
}
});
}
The ajax call returns a strong typed view that will show inside the dialog and even resize it dinamically. The strong typed view has some buttons that, in turns, does other ajax calls (for example to the controller action that validate and persist on the database). These calls usually returns back HTML code that will be added to the dialog DIV.
Now my question is: How do I close the dialog? I can do it by clicking the "X" button on top right corner of the dialog or by pressing the ESC key but I would like to do it as a consequence of the click to the button that is inside the strong typed view .
However I do not wish to use this kind of code
$("#dialogPanel").dialog('close');
inside a strong typed view that does not defines the #dialogPanel DIV in itself.
What could be a good solution?
Create a closeDialog function in the main form, and call that function from within the dialog. Then any other page that hosts the dialog also needs to define a "closeDialog" function.
Also, you could pass a delegate pointing to the closeDialog function to separate things further.