I am having a difficult time getting this to work. I have a link that opens a jQuery UI Dialog which contains links. Those links open a Bootstrap popover which contain an input field. For some reason, the input field is not editable.
See: http://www.bootply.com/Z46ZXA133U
Markup :
<div id="dialog">
<a data-placement="bottom" data-toggle="popover" data-title="Login" data-container=".ui-front" type="button" data-html="true" href="#" id="login">Login</a>
</div>
<form id="popover-content" style="display:none">
<input type="text" value="try changing me">
</form>
Script :
$( "#dialog" ).dialog({
height: 300,
width: 350,
modal: true,
});
$("[data-toggle=popover]").popover({
html: true,
content: function() {
return $('#popover-content').html();
}
});
This is because you have
data-container="body"
on your popover. At the same time, ui-widget-overlay and ui-front covers the body area entirely, preventing clicks and keyboard events from being "sent" from body to the popover.
Change to
data-container=".ui-front"
and you are good. Forked bootply -> http://www.bootply.com/AXpc6PKuSO
in my case change data-container="body" to .ui-front did not help!
But the direction is right
I get modal body container selector and use them!
container: '#myModal-2 > section > div.modal-dialog > div',
Try to explain: if you use container='body' and use modal then modal overlay is blocking focus on body elements
Related
I'm using jquery mobile 1.4.5. In some instances, I generate a pop-up when a user clicks a link and fill that popup with the results of an ajax call. The generated code taken from firebug after the ajax call returns looks like:
<div id="detailsPopup-popup" class="ui-popup-container ui-popup-active" tabindex="0" style="max-width: 1250px; top: 68.9967px; left: 146px;">
<div id="detailsPopup" class="ui-content ui-popup ui-body-a ui-overlay-shadow ui-corner-all" data-role="popup" style="width: 971.538px;"><a class="ui-btn ui-corner-all ui-shadow ui-btn-a ui-icon-delete ui-btn-icon-notext ui-btn-right" data-iconpos="notext" data-icon="delete" data-theme="a" data-role="button" data-rel="back" href="#">Close</a>
<div data-theme="a" data-role="header">
...content...
</div>
</div>
</div>
The popup is showing up fine. I'd say 90% of the time, when i click the close button, the popup closes. However, 10% of the time it just sits there. Usually it'll highlight the close button as blue, indicating it is active or something but the window itself stays open. If I click around in the popup box a few times and keep trying, it will eventually close, but it is extremely frustrating and user unfriendly.
I'm not sure why it doesn't work that small fraction of the time? I've included a screenshot of what the modal looks like. I don't know if the parent div (the blue outline) is somehow covering half of the button and so that is catching the clicks sometimes?
any thoughts as to what is going on here? I've only been able to try in android/chrome and not an iphone, so i don't know if it is browser specific.
Thanks!
edit: adding javascript code that parses ajax response and generates window. NOTE: i know i'm putting everything in the header div right now (for padding purposes), however I don't think that's causing the issue. I stripped out a lot of the contents of the window for brevity.
function showPopup(jsonResponse){
// parse json response
var obj = jQuery.parseJSON( jsonResponse );
// close button
var closeBtn = $('Close').button();
// start to construct window contents from response
var content = "<div data-role=\"header\" data-theme=\"a\">";
content += '<table border="0" style="width:100%"><tr>';
content += '<td style="vertical-align:top;">';
content += '<a data-ajax="false" href="show.php?id='+obj.id+'"><img src="'+obj.pic+'" style=\"max-height: 2em;\"></a><br><b>'+obj.title+'</b></div>';
content += '</td></tr></table>';
// close header div
content += '</div>';
// Popup body - set width is optional - append button and Ajax msg (was 1.5 width originally)
var popup = $("<div/>", {
"id": "detailsPopup",
"data-role": "popup",
"class": "ui-content"
}).css({
"width": $(window).width() / 1.3 + "px"
}).append(closeBtn).append(content);
// Append it to active page
$(".ui-page-active").append(popup);
// Create it and add listener to delete it once it's closed
// open it
$("#detailsPopup").on("popupafterclose", function () {
$(this).remove();
}).on("popupafteropen", function () {
$(this).popup("reposition", {
"positionTo": "window"
//x: 150,
//y: 200
});
}).popup({
"dismissible": false,
"history": false,
"theme": "a",
"overlayTheme": "b",
"class" : "ui-content"
}).popup("open");
} // end showPopup
ok, so i finally figured it out. was 100% my fault (as expected). i was overriding some default JQM css, and of course it caused the error. on another part of the page i had to try to fit 3 buttons on the same row, and had used the following to do it.
.ui-btn{
font-size:12px;
}
(originally: 1em)
That shrunk the buttons enough to fit that other requirement, but that also caused the close button to not show properly (as you can see below it was missing the outer border). Thus, I'm guessing it was just a weird offset/padding/etc error caused by the differing font-size that was the reason behind the clicks not registering or being handled properly.
(insert advice to never override jqm css)
thanks!
When adding an ui-icon element to a jquery dialog, something weird is displayed instead of the requested icon - (check here for an example: http://jsfiddle.net/aE2Fb/)
It seems like ui-state-default somehow hides the actual icon, because if I remove it, then icon shows up ok. Note that same issue occurrs with ui-state-hover as well.
<div id="dialog" title="Basic dialog" class="">
<span class="ui-icon ui-state-default ui-icon-plusthick ui-corner-all" ></span>
</div>
$(function() {
$( "#dialog" ).dialog();
});
Similar topic was discussed here:jquery ui Portlet : incorrect effect on hover ( ui-state-hover ), but the "fix" was not explained at all and therefore its not really clear, what is going on...
When you put the div into a jQuery UI dialog, you add a load of extra parents, and extra classes - with the result that the icon image file you wanted is getting over-ridden twice.
The first override is from the css for the standard widget background image, which also sets the image position to '50% 50%' - so putting the middle of the image in your button. This then again gets over-ridden back to the correct icon image file, but without any position settings - so you end up seeing the middle of the icon image in your button.
Try putting the icon span inside another container, and move the ui-state-default and ui-corner-all classes to the container instead:
http://jsfiddle.net/7CLL6/
<div id="dialog" title="Basic dialog" class="">
<span class='ui-state-default ui-corner-all'>
<span class="ui-button ui-icon ui-icon-plusthick"></span>
</span>
</div>
According to the jQuery 1.1.0 Mobile documentation a button should be defined as a link.
Link button
This loads the referenced page.
When using the # it reloads the current page.
Action
How could we define a button that is not a link and simply triggers an event handler when an event on it occurs ?
Edit: my interpretation of what I saw was wrong. Clicking on a button with href="#" doesn't reload the page. I should delete the question because it doesn't make sense.
To my understanding the href="#" does not refresh the page, Example:
http://jsfiddle.net/XNLWS/
Here are the jQM Docs:
http://jquerymobile.com/demos/1.1.0/docs/buttons/buttons-types.html
If you're looking for a custom event, here is an example:
http://jsfiddle.net/XNLWS/1/
JS:
$( "#myButton" ).bind( "click", function(event, ui) {
alert('Custom action here');
});
HTML:
<div data-role="page" id="home">
<div data-role="content">
Link button
</div>
</div>
If you open a dialog when a dialog is already displayed then, by default, the second dialog will not expand past the width of the first dialog. This is true even though the second dialog is not actually enclosed within the first dialog (I get the second dialog by clicking a link in the first dialog).
I can set an explicit width on the second dialog, but this isn't ideal. I really want it to auto-size to its contents (the quasipartikel multiselect), which are wider than the first/background dialog. With an explicit width on the second dialog I generally get two sets of scroll bars: one on the dialog itself, and on on the inner multiselect.
Note that I've only tried sizing the second dialog using an explicit width in the JS .dialog() call, and not via css (which I know almost nothing about).
Does anyone have any idea how to auto-size the second dialog? Thanks.
EDIT
Some code added as suggested:
<div id="dialog-top" title="Tab data">
<form>
...lots of stuff, including id 'addCodeButton', which
...pops up the second dialog
</form>
</div> <!-- dialog-top -->
<div id="dialog-add-code" title="Code selector">
<select id = "codes" ...etc... >
...
</select>
</div>
$(function(){
$('#addCodeButton').click(function(){
// problem: this 'open' will not set the width of the new dialog
// wider than 'dialog-top' unless an explicit width is given
// (see '460' below)
$('#dialog-add-code').dialog('open');
return false;
});
});
var $dialog = $("#dialog-top").dialog({
autoOpen: false,
modal: true,
buttons: {
...
}
});
$('#dialog-add-code').dialog({
autoOpen: false,
width: 460,
modal: false,
buttons: {
...
}
});
I'm not sure what's causing your problem. Here's fiddle demonstrating that what you want does work.
http://jsfiddle.net/brettzink/NASyR/
you tried .dialog({width:"auto"}); ?
I create modal dialog with form inside it (with some text input).
And I just can't enter the text inside the textbox. Dialog blocks keyboard input.
Here is my simplified example:
<div id="modal-dialog">
<label for="my-text">TRY to input text...</label>
<textarea id="my-text" style="position:relative; z-index:1"></textarea>
</div>
<script type="text/javascript">
var dialog = $('#modal-dialog').dialog({ modal: true });
</script>
Note: You may ask - why did I mentioned about "position:relative; z-index:1"? Because it works fine without it. But I can't remove it because of design.
Note: not modal dialog works fine too.
I'm using jQuery 1.6.2 + jQuery UI 1.8.14
The z-index is the problem. Here is an exemple ( http://jsfiddle.net/c3BPP/ ) of your code with a bigger z-index and it works.
You can also lower the z-index of the JQuery dialog:
var dialog = $('#modal-dialog').dialog({
modal: true,
zIndex: 500
});
By default, it is 1000. Of course your relative or absolute positioned elements needing text input need to be greater than the z-index of the dialog still.
I found that the <form> tag in my dialog was getting a z-index of 1, preventing any of the controls from working. Instead of changing the z-index for each control, simply changing the z-index of the <form> tag to 1010 (a value higher than the default of the dialog) worked for me.
Adding tabindex="-1" helped me resolve this problem.
Here's an example:
<div class="modal fade" tabindex="-1" id="error" role="dialog">