On the click of a button, I am opening a kendoWindow which loads partial view.
This partial view also contains a kendo grid inside.
My issue with this is everything works fine in chrome, but there is an issue in IE.
Here is sample code -
if (!$popupContainer.data("kendoWindow")) {
popUpWindow = $(windowId).kendoWindow({
actions: ["Close"],
draggable: true,
modal: true,
resizable: true,
title: title,
width: "900px",
close: onClose,
open: onOpen,
deactivate: function () { this.destroy(); }
});
popUpWindow.data("kendoWindow").center();
popUpWindow.data("kendoWindow").open();
}
win.content('Loading....');
win.refresh
({
url: "some action url which loads a partial view";
});
My issue with IE is it's working fine first and second time but the third time the popup is not opening immediately, it's taking some time and I don't want that.
I want that window to open saying loading and then load the grid.
I tried debugging it and found the that this line: popUpWindow.data("kendoWindow").open();
is not opening the window, it's opening only after the partial view is loaded.
Where as in chrome open() function opens the window immediately thus showing the loading text before the partial view is loaded.
Can anyone help me with this?
I have been trying to resolve this for two days and it's very infuriating.
Okay for someone who is facing into similar issues, I have found the reason for why I am getting this issue. This occurred because I was trying to open the window and refresh content in recursive ajax calls and the UI changes are not being updated in IE until all the requests are completed.
Related
I use multipage (on the same page) with jquery mobile and $.mobile.changePage transition slide.
Obviously I need to go back on pages that I already open via changePage function.
It works perfectly on Firefox but not on safari or chrome.
On safari and chrome when I come back on a page that I already opened then, the page is displayed few milliseconds and the all the page is hidden. If I use "alert('stop');" just after the changePage function, then the page is displayed, "stop" is displayed, the page is still displayed until I close the popup "stop", then the page is hidden.
I found the following code on another page linked to transition issue and you will see how it happens.
if you go back on page that has been open once, then the page is hidden:
http://jsfiddle.net/GYAB7/2/
FYI: if I use
$.mobile.changePage( "#mypage", {
transition: "none",
reverse: true,
changeHash: false
});
instead of
$.mobile.changePage( "#mypage", {
transition: "slide",
reverse: true,
changeHash: false
});
for the transition parameters, then it works fine (but it is not what I want)
Thank you.
PS: page where I found the code link
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.
I have a web-application which was originally designed to be used from standard desktops and laptops, now I am trying to see if it can work "as is" also on tablets.
I tried it on an iPad 2, and I fould one major problem: the application makes heavy use of dialogs, created using jQuery UI 1.8.22, which are used as "popup", that is, each dialog contains an iframe, and when the content overflows the dialog size the vertical scrollbar appears, but I'm unable to scroll the iframe content 'cause it will always scroll the main page content.
How could this problem be solved? Do you think it is an issue with my application or with the iPad browser itself?
If it can be of any use, I'll post the code which creates the dialogs themselves, for now just let me say that, when navigated using a standard computer, there are absolutely no scrolling problems.
EDIT:
I just created this fiddle http://jsfiddle.net/MLGku/1/ which shows how we create such popups, I tried the fiddle with the iPad and in fact I cannot scroll the iframe content, I'd be very grateful for any help you'd be able to give me.
In the end I've been able to solve the problem by using this snipped of code:
if (/iPhone|iPod|iPad/.test(navigator.userAgent)) {
$('iframe').wrap(function() {
var $this = $(this);
return $('<div />').css({
width: $this.attr('width'),
height: $this.attr('height'),
overflow: 'auto',
'-webkit-overflow-scrolling': 'touch'
});
});
}
The code above was found here: http://home.jejaju.com/play/iframe-scroll.html
I'm working on some video controls for the iPad. When the user clicks a button, the video plays and immediately goes fullscreen. When the user clicks the "Exit fullscreen" button, I want the video to pause. If I could disable the "Exit fullscreen" button and force the user to use the "Done" button I would, but that doesn't seem to be an option.
My problem is that the webkitfullscreenchange event does not seem to fire on the iPad. It works flawlessly in Chrome on the desktop. I've read that the iPad browser won't run your event if metadata has not been loaded (which doesn't load until the video is played on the iPad - preload is ignored), but I have confirmed that metadata has been loaded before the fullscreen event is firing. Does anyone have any ideas on why the webkitfullscreenchange event will not fire on the iPad?
<script type="text/javascript">
$(document).ready(function() {
$(".jqVidLink").click(function(e) {
e.preventDefault();
var vidId = $(this).attr("name");
playPause(document.getElementById(vidId));
});
$(".jqVideo").each(function() {
this.addEventListener("webkitfullscreenchange", function(){
alert("hi2"); //never fires
if (document.webkitIsFullScreen == false) {
playPause(this);
}
}, false);
this.addEventListener("loadedmetadata", function() {
alert("hi"); //firing
this.webkitEnterFullscreen();
}, false);
});
});
function playPause(myVideo) {
if (myVideo.paused){
myVideo.play();
}
else
myVideo.pause();
}
reminds me of an article calling the iPad the new IE6. Don't expect the iOS browser to behave like desktop safari.
as a workaround you could show the video inline (--> not with native fullscreen) and add your own controls. downside of this approach is that the browser navigation wastes some vertical-space. upside is you can fully control what's happening. following this idea you can imitate fullscreen by putting the video (and your custom controls) inside a container which then has to be positioned fixed and sized to 100% for width and height - i did that by adding a class as you don't have to worry about the previous size when switching back to normal. instead you simply remove the class again.
one other thing to keep in mind if you wanna do this: you cannot move a video-node via JS inside the container on iOS. Instead you either have to provide the full markup in html or clone the video-node, remove the original and insert the cloned one inside your container.
you can try the .element:-webkit-full-screen css property
I was not able to register a fullscreen exit event for iframes on Safari
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