Is it possible to have a loading spinner, called by $.mobile.loading, within a jQuery mobile dialog, and have it position relative to that dialog?
It's not possible directly, but you could do it in a hacky way :
On the pageinit of the dialog, clone the <div/> with .ui-loader class.
var loader = $(".ui-loader").clone();
Then add it into our dialog, like this :
$page.find('[data-role="content"]').html(loader); //$page is the dialog
Create a class called .ui-loader-altered and add position:relative to it. Add the class to the loader inside dialog. This will make loader stay within dialog.
$page.find(".ui-loader").addClass("ui-loader-altered");
Now that you've got the dialog, why dont you show it up?
$page.find(".ui-loader-altered").show();
Full code :
$(document).on("pageinit", "#second", function () {
$page = $(this);
$(this).on("click", "#show", function () {
//clone
var loader = $(".ui-loader").clone();
//add to dialog
$page.find('[data-role="content"]').html(loader);
//add class which makes dialog position relative to div
$page.find(".ui-loader").addClass("ui-loader-altered");
//show it up
$page.find(".ui-loader-altered").show();
})
});
Demo : http://jsfiddle.net/hungerpain/P2XJt/3/
Related
I have a kendo MVC grid in a page.in that page i have button. when i click button i want to open a kendowindow popup.
so here is my issue.
when i am clicking that button am saving grid values and i am opening kendo window popup. so if i have a errors in grid then i dont want to open kendo window popup. how to achieve this. below is my button click code.
$("#btnAddProject").click(function (e) {
var grid = $("#Grid").data("kendoGrid");
grid.saveChanges();
var myWindow = $("#AddProjectWindow");
myWindow.data("kendoWindow").open();
myWindow.data("kendoWindow").center();
});
Here am included below datasource events.
events.Error("error_handler").RequestEnd("gridRequestEnd")
but these datasources functions are calling after click event finish.
but i want wait for grid.saveChanges() to finish and check whether save is success or fail. if fail i dont want to open kendo popup. here datasource functions are calling after finishing button click function
This is because save changes is an asynchronous function. So the rest of the code will execute not matter the result of the save function.
A simple and quick method will be to set a global variable just before you call save changes. Then once the save result is received from server, the grid will fire the onRequestEnd method. You can open the popup window there if the global variable is set.
$("#btnAddProject").click(function (e) {
var grid = $("#Grid").data("kendoGrid");
isSavingChanges = true;
grid.saveChanges();
});
function gridRequestEnd(e) {
if (e.Response){//Response is not null means it is most probably ajax result
if(isSavingChanges == true){
isSavingChanges = false;
var myWindow = $("#AddProjectWindow");
myWindow.data("kendoWindow").open();
myWindow.data("kendoWindow").center();
}
}
}
I have a Kendo window which is defined as follows:
With Html.Kendo().Window().Name("tranferwindow")
.Title("Select Transfer Destination")
.Content("")
.Resizable()
.Modal(True)
.Events(Function(events) events.Open("WindowToCenter"))
.Events(Function(events) events.Refresh("transferopen"))
.Draggable()
.Width(400)
.Visible(False)
.Render()
End With
The window is opened each time by using the refresh and passing a new URL.This is to allow dynamic data to be displayed dependent on what the user clicked on a grid.
function transferitem(e) {
var dataItem = this.dataItem($(e.currentTarget).closest("tr"));
wwindow.data("kendoWindow").open(); //Display waiting window while refresh happens
var twindow = $("#tranferwindow")
twindow.data("kendoWindow").refresh('/Home/TransferList?agentid=' + agentid + '&tenantid=' + tenantid + '&SessionID=' + dataItem.MediaID);
}
The Window is opened at the end of the refresh event to make sure the user doesn't see the previous content.
function transferopen() {
wwindow.data("kendoWindow").close(); //Close the 'wait' window
var twindow = $("#tranferwindow")
twindow.data("kendoWindow").center().open();
}
This all works well and the window can be closed and reopened as often as I like.
However I needed to access the resize event of the window from within the Partial View to resize the Grid which is inside the window. To achieve this I added the following to the partial view that is returned from the url.
$("#tranferwindow").kendoWindow({
resize: function (e) {
// resizeGrid();
}
});
Adding this event mapping causes the issue where I cannot open the Window more than once.
I assume I need to 'unregister' for the event somehow before closing?
Found a solution: much cleaner and no VB Razor needed :)
I changed the approach to create a new window each time I wanted to display one.
I created a div to hold the Window.
<div id="windowcontainer"></div>
Then when the user selected a command on the grid , I create the whole window appending it to the div. The key here is the this.destroy in the deactivate event.
function transferitem(e) {
var dataItem = this.dataItem($(e.currentTarget).closest("tr"));
$("#windowcontainer").append("<div id='tranferwindow'></div>");
var mywindow = $("#tranferwindow")
.kendoWindow({
width: "400px",
title: "Select Transfer Destination",
visible: false,
content: '/Home/TransferList?agentid=' + agentid + '&tenantid=' + tenantid + '&SessionID=' + dataItem.MediaID,
deactivate: function () {
this.destroy();
},
open: WindowToCenter,
refresh:transferopen
}).data("kendoWindow");
mywindow.refresh();
}
Then on the refresh function
function transferopen() {
var twindow = $("#tranferwindow")
twindow.data("kendoWindow").center().open();
}
Now I can have the event binding inside the Partial View which works fine and the window can be re opened as many times as I want. :)
Update: Adding the event binding inside the Partial View stops 'Modal' from working. Working on trying to fix this...
I have been tooling around with this all day and can't figure it out...
I have a list of buttons (utilizing the jQuery UI buttonset() functionality) and I am wanting to keep the ui-active class even after I hover off of a button, but for some reason, jQuery UI functionality keeps removing the class and erases the highlight from the button (this is bad because the user then wouldn't know what button they are on).
Here is the code so far:
function showSection(sectionIndex){
$('.listSection').hide();
$('#listSection' + sectionIndex).show();
$('.listSectionHeader.ui-state-active').each(function(){
$(this).removeClass('ui-state-active');
});
$('#listSectionHeader' + sectionIndex).addClass('ui-state-active');
}
var buttons = $( "#listHeader a" );
$.each(buttons, function(){
$(this).bind('mouseleave.button', function(){
if($(this).hasClass('ui-state-active'))
return;
});
});
Something like this: http://jsfiddle.net/4yamQ/ ? Would require an extra class in the css such as:
ui-state-active,
ui-mycustomclass
{
jquery ui styling...
}
Edited to add the solution suggested by #alistair-laing.)
After reading this post reply by #jek, I could make multiple links on my page that would pass an id variable through the URL so that the content of the dialog could be loaded in on the fly. However, I really want this to be a modal dialog:
(edited to include the fix; nb: the original script was in the post linked to above, all I did was break it)
$(function (){
$('a.ajax').click(function() {
var url = this.href;
var dialog = $('<div style="display:none"></div>')
.appendTo('body')
// load remote content
dialog.load(
url,
{},
function (responseText, textStatus, XMLHttpRequest) {
dialog.dialog({
modal: true,
width: 500
});
}
);
//prevent the browser to follow the link
return false;
});
});
quiet a few things. Try move the content from your first .dialog into your second .dialog which you call as part of the the .load callback. What youare doing is creating dialog then injecting content into it only to call it again. You could also remove the the autoOpen so that the dialog opens with the content.
How do I get the jQuery-UI sortable feature working on iPad and other touch devices?
http://jqueryui.com/demos/sortable/
I tried to using event.preventDefault();, event.cancelBubble=true;, and event.stopPropagation(); with the touchmove and the scroll events, but the result was that the page does not scroll any longer.
Any ideas?
Found a solution (only tested with iPad until now!)!
https://github.com/furf/jquery-ui-touch-punch
To make sortable work on mobile.
Im using touch-punch like this:
$("#target").sortable({
// option: 'value1',
// otherOption: 'value2',
});
$("#target").disableSelection();
Take note of adding disableSelection(); after creating the sortable instance.
The solution provided by #eventhorizon works 100%.
However, when you enable it on phones, you will get problems in scrolling in most cases, and in my case, my accordion stopped working since it went non-clickable. A workaround to solve it is to make the dragging initializable by an icon, for example, then make sortable use it to initialize the dragging like this:
$("#sortableDivId").sortable({
handle: ".ui-icon"
});
where you pass the class name of what you'd like as an initializer.
Tom,
I have added following code to mouseProto._touchStart event:
var time1Sec;
var ifProceed = false, timerStart = false;
mouseProto._touchStart = function (event) {
var self = this;
// Ignore the event if another widget is already being handled
if (touchHandled || !self._mouseCapture(event.originalEvent.changedTouches[0])) {
return;
}
if (!timerStart) {
time1Sec = setTimeout(function () {
ifProceed = true;
}, 1000);
timerStart=true;
}
if (ifProceed) {
// Set the flag to prevent other widgets from inheriting the touch event
touchHandled = true;
// Track movement to determine if interaction was a click
self._touchMoved = false;
// Simulate the mouseover event
simulateMouseEvent(event, 'mouseover');
// Simulate the mousemove event
simulateMouseEvent(event, 'mousemove');
// Simulate the mousedown event
simulateMouseEvent(event, 'mousedown');
ifProceed = false;
timerStart=false;
clearTimeout(time1Sec);
}
};
The link for the top-voted Answer is now broken.
To get jQuery UI Sortable working on mobile:
Add this JavaScript file to your project.
Reference that JS file on your page.
For more information, check out this link.