I am working for mobile app. I am showing popup with content, If content is too long i feel to use scroll. Is possible to use iscroll in dialog popup?
$('#checkout').click(function() {
var jqxhr = $.post("/app/Trip/checkout", {
}, function(missing_info) {
$('#checkout').simpledialog( {
'mode': 'blank',
'prompt': false,
'forceInput': false,
'useModal': true,
'fullHTML': missing_info
})
});
});
I am getting popup with content but don't know how to implement iscroll in dialog. isroll for normal div working fine for me. This popup is jQuery mobile simple dialog. Anyone can help me?
yes of course you can use iscroll for a pop up div but that popup should be nested under a parent which should be a direct child of a body. set no styles for the parent and then take the id of popup and set iscroll once content is added.
var tempscroll;
tempscroll = new iScroll('id_of_popup');
thatsi
Related
I am trying to do something similar to what this page is doing.
The only difference is that the jQuery UI dialog I use is modal.
I tried editing the script in the page to make the jQuery UI dialog modal.
$("#dialog-modal").dialog(
{
modal: true, // added this line to make dialog modal
width: 600,
height: 400,
open: function(event, ui)
{
var textarea = $('<textarea style="height: 276px;">');
$(textarea).redactor({
focus: true,
maxHeight: 300,
initCallback: function()
{
this.code.set('<p>Lorem...</p>');
}
});
}
});
I then clicked on the insert link button(the 3rd button from the right in the toolbar). This shows another jQuery UI modal dialog with a form.
I noticed that I cannot get the focus of the text fields. I cannot type anything into them.
The code works fine if I don't make the the first dialog modal.
Any idea how to circumvent this?
I ran into the same problem. This behavior is a result of jQuery UI handling focusin.dialog event on the document, and putting the focus back to the last jQuery UI dialog in the stack (using selector ".ui-dialog:visible:last"). I solved the problem by calling this code right after my modal dialog was created:
setTimeout(function() {
$(document).unbind("focusin.dialog");
}, 100);
I used setTimeout, because jQuery UI also uses setTimeout to bind this event. I was able to fix it thanks to this answer: jQuery UI Focus Stealing. I also tried upgrading to jQuery UI 1.11.4 but that does not solve the problem.
In my jQM - Backbone app I add a dialog programmatically if a certain condition is true, like this
$('body').append('<div data-role="dialog" id="interlink" data-theme="b" data-close-btn="none" data-url="insignificant"></div> ');
// remove dialog from DOM on pagehide
$("#interlink").on('pagehide', function () {
$(this).remove();
// remove this views popup-containers
$('#interlink-video-popup-popup').remove();
});
Beside other content in the dialog there is a button to open a popup widget to play a video clip and a close button to close the dialog. The code for closing the dialog looks like this:
backBtnHandler: function(e) {
e.preventDefault();
$('#interlink').dialog('close');
$(this).remove(); // all DOM listeners get removed as well by jQuery
}
This works all well if the video clip is watched in full length, the popup widget closes on ended and the user clicks the dialog close button to close it.
A requirement is when the video clip is playing and the user scans another NFC tag the video should stop, trigger an ended event and close the popup. This is also working, however the dialog should also close. Here is a simplified code snippet with a timeout to simulate a NFC scan:
INTERPRETOUR.interlinkVideoPlayer = $('#interlink-video-player')[0];
// bind onended event to close the popup
$(INTERPRETOUR.interlinkVideoPlayer).on('ended', function() {
$('#interlink-video-popup').popup('close');
INTERPRETOUR.interlinkVideoPlayer = 'undefined';
$('#interlink-back-btn').trigger('click');
});
// play video
INTERPRETOUR.interlinkVideoPlayer.src = 'http://mydomain.ca' + this.model.get('video')[0].url;
INTERPRETOUR.interlinkVideoPlayer.play();
setTimeout(function() {
$.publish('item', '2479');
}, 5000);
The issue is that $('#interlink-back-btn').trigger('click'); invokes the backBtnHandler but pagehide is never triggered and so the dialog doesn't close.
Any help to resolve this issue would be much appreciated.
Instead of invoking a button using .trigger('click'), bind closing when popupafterclose event triggers.
Demo 1 / Demo 2
Static Popup
$('#popupID').on('popupafterclose', function () {
$('#dialogID').dialog('close');
});
Dynamically generated Popup
$(document).on('popupafterclose', '#popupID', function () {
$('#dialogID').dialog('close');
});
I have two pages .I am able to show page on clicking the button but i need to show same content as a dialog box on same screen without changing the screen. I need to show dialog box having same field in page .Here is my code in fiddle. on clicking the add button new page is open but i need the dialog box.
http://fiddle.jshell.net/ravi1989/nLJR7/
Are you looking for this?
$.mobile.changePage($("#UserSettingScreen"), {
transition: "slide",
reverse: false,
changeHash: false,
role: 'dialog' // you can use role: 'dialog' to open a dialog
});
Here is jsFiddle demo.
UPDATE
1) You can close a dialog programmatically by calling dialog('close') method like so
$("#case_dialog_cancel").on("click", function(){
$("#CaseInformationScreen").dialog('close');
});
Here is updated jsFiddle.
2) You can theme an overlay. Read more about overlayTHeme. If you for some reason want to get rid of the overlay completely or make it transparent - google for hakish ways. Here is one link Transparent jQuery mobile dialogs
I'm using the jquery ui dialog for a modal popup dialog. It's working great in Firefox/Chrome but terrible in ie6.
Problem:
When I show the dialog in ie6, the browser window grows and automatically scrolls down to the bottom. The height increase and automatic scroll-down is equal to the height of the jquery dialog.
I can scroll up and then use the dialog as normal, but the behavior where it grows the window and drops is maddeningly unacceptable.
Here is how I'm launching the window:
<div id="dialogWindow"></div>
...
$(document).ready(function() {
var $dialog = $("#dialogWindow").dialog({
autoOpen: false,
modal: true,
minWidth: 560,
width: 560,
resizable: "true",
position: "top"
});
$('.addButton').click(function(e) {
e.preventDefault();
$('#dialogWindow').load('http://myurl');
$dialog.dialog('open');
});
});
I am already using the bgiframe plugin for jquery which is key for ie6 overlay issues. But this seems unrelated to that. Has anyone seen this before and found a work around?
I've seen this behavior before and it is usually caused by the overlay. When you use the {modal: true} option an overlay is created and rendered with bgiframe support if the plug-in is loaded.
First off, try turning {modal: false} and see if you aren't getting page blow-out then we know it's the overlay.
there are a few things to check if that is the culprit;
check that the styles for the overlay are loading correctly, you'll need to include the jquery-ui dialog.css
try experimenting with position: and float: styles
try moving your dialog markup just above the < / body> tag, allowing the modal overlay to escape correctly.
I had a similar problem at one point.
$('.addButton').click(function(e) {
e.preventDefault();
$('#dialogWindow').load('http://myurl');
var y = window.pageYOffset;
var x = window.pageXOffset
$dialog.dialog('open');
window.scrollTo(x, y); // horizontal and vertical scroll targets
});
What the above should do is grab your current scroll coordinates and saves them. Once the dialog opens you then scroll back to the prior position in memory. Should be near instant and unseen by the user.
I want to show a popup screen on my page using JQuery UI Dialog widget.
To implement this I have a <div class="popup-placeholder"> on my page. Actually there are more than one on the page (If this makes a difference to the solution)
On click of a button, I am initializing the dialog and 'open'ing it. The initialization of the popup is inside the action click because it is supposed to make an Ajax call to get the content of the popup. (I tried taking the initialization out of the click event, but that did not work $('div.popup-placeholder').dialog(); )
var popupContext = $('#' + contextControl.id + ' > .popup-placeholder');
popupContext.html(formHtml);
$(popupContext).dialog({
bgiframe: true,
modal: true,
autoOpen: false,
closeOnEscape: false,
dialogClass: '',
draggable: true,
position: 'center',
resizable: false,
width: 600
});
On click of the action button, the form shows and does what it is supposed to.
Now, I have a close link on the popup WHICH IS NOT A DIALOG BUTTON, but just another link with an event binded to it.
It does this...
$('#popup-placeholder-61').dialog('close');
where #popup-placeholder-61 is the same as $(popupContext)
The problem I am facing now is that, on close of the popup, the same action button does not show the popup again. The issues seems to be that the <div class="popup-placeholder"> has been removed from the mark-up.
I tried the solutions on the following page but did not help -
Jquery Dialog Close on StackOverflow
So, I need more help
After struggling a bit, i came up with a best solution. Please use below line instead of dialog('close')
$('#popup-placeholder-61').dialog("destroy");
This will allow div to retain its position
My issue has been resolved, but I will be looking into why my earlier approach did not work.
What I was doing earlier was that I had multiple place-holders with different IDs, and I was making only one of them the dialog. I used some Jquery selectors to select the appropriate div for the dialog box and had issues as described above.
The only change I did now is that I have a single div which acts as the placeholder. And that now works. It also initialized fine outside my event.
So, maybe it was something to do with my selectors? I will try more and if I find something will post it as a follow up.
Thanks.
Try taking the initialization code out of the click event it may be that by trying to rebind everything again it's failing to pop the dialog open with the second click ... I had a similar problem which I "resolved" by creating the the markup for the dialog every time the dialog was to be opened.
The ajax bit of your problem is not hold back for you to take the initialization out of the click event, just load your ajax content on the click event and show the dialog with dialog('open').
The main problem was that I was looking for the dialog div in the wrong place.
See this post for more details ...
Jquery Dialog - div disappears after initialization