Kendo - how to close modal window from view - javascript

I have a modal window that displays two text boxes (customer id and customer name). When the user clicks on 'save', I'd like to close the modal window. I tried using $('#NewCustomer').hide() but that doesn't seem to close the window. So how do I close a kendo window from a different function from my ViewModel? Any help would be appreciated.
Thanks!
JS
var viewModel = kendo.observable({
ShowNewCustomerForm: function () {
var newCustomerWindow = $('#NewCustomer').kendoWindow({
title: "Add New Customer",
modal: true,
width: 500,
height: 300
}).data("kendoWindow");
newCustomerWindow.center().open();
$('#AddNewCustomerBtn').hide();
},
SaveCustomer: function (e) {
// close #NewCustomer here
$('#NewCustomer').hide();
}....

Kendo Window widget exposes a lot of API. open() & close() methods are available for you to programmatically handle the window.
Here is a demo we have on Kendo Window API methods - http://demos.telerik.com/kendo-ui/window/api
Do take a look at how it has been done in the demo and you can follow the same procedure.

OK -- I was able to figure it out. This is the working code:
var viewModel = kendo.observable({
ShowNewCustomerForm: function () {
var newCustomerWindow = $('#NewCustomer').kendoWindow({
title: "Add New Customer",
modal: true,
width: 500,
height: 300
}).data("kendoWindow");
newCustomerWindow.center().open();
$('#AddNewCustomerBtn').hide();
},
SaveCustomer: function (e) {
// close #NewCustomer here
$("#NewCustomer").closest(".k-window-content").data("kendoWindow").close();
}

Related

Loading backbone js view iframe inside jquery ui dialog

I'm creating a view for iframe of my report.
<div id="aDialog"></div>
Here is ReportView :
define(["jquery" ,
"underscore" ,
"backbone",
],function($, _, Backbone){
var ReportView = Backbone.View.extend({
el : "#agingFrame",
initialize: function() {
this.$el.html('<iframe src="http://ipadressofreportserver/jasper/blahblah"></iframe>');
},
render: function(){
}
});
return ReportView;
});
Then I have another view that can let the user print the iframe above, here is the main view action :
'printingReportIcon' : function(){
var page = "http://localhost/Source/#ReportView";
var $dialog = $('#aDialog')
.load(page)
.dialog({
autoOpen: false,
modal: true,
height: 625,
width: 500,
title: "Some title"
});
$dialog.dialog('open');
Problem
The dialog is opened with all the source code in ReportView but no iframe.
Any idea what could be causing this
I'm not sure, but i believe that the problem is the ReportView is not been instantiated(renderized) on the second view. You are just getting the relative url for that view, but not render the content.
Try to:
Use the render method to render the content in ReportView.
Return this content and use it to open the dialog.
I guess that this is the problem.
Hope it helps

MVC4, Render Partial View in Dialog Box with jQuery, How to refresh

I have a partial view that is popping up in a dialog with the code below. However, after the user saves the partial view the data does not refresh in that partial view when I click the ActionLink again until I stop debugging and restart the app. However, the new record is in my databsae. The other issue is when I restart the app I cannot update the record because of the error below. What am I missing? Thanks.
An object with the same key already exists in the ObjectStateManager. The ObjectStateManager cannot track multiple objects with the same key.
The div tag in my View
<div id="assign-dialog"></div>
The ActionLink in the same view
#Html.ActionLink("Assign", "Edit", "Assignment", new { id = Model.InfoId}, new { #class = "assign-modal" })
The jQuery
$(function () {
$(function () {
$('#assign-dialog').dialog({
autoOpen: false,
width: 400,
height: 500,
resizable: true,
modal: true
});
$('.assign-modal').click(function () {
$('#assign-dialog').load(this.href, function () {
$(this).dialog('open');
});
return false;
});
});
The HTTP GET action
[HttpGet]
[Authorize(Roles="Admin")]
public ActionResult ViewAssignment(int id = 0)
{
RequestAssignment query = _assignmentRepository.GetCurrentAssignment(id);
return PartialView("_ViewAssignment", query)
}
UPDATE:
I originally followed the steps in javascript/jquery modal popup dialog MVC 4 / render partial view under the dynamic section of Jasen's answer, but did not know what to put in the "Client Partial, empty for now "
...okay so going off some other posts I have read this is what I was able to come up with, but nothing happens when I click my link.
View html
Assign
<div id="assign-modal">
</div>
jQuery
//Dialog Box for Assignments
$(".dialog-trigger").on("click", function(event) {
event.preventDefault();
var infoId= $(this).data("infoId");
$.ajax({
url: "RequestAssignment/Edit/" + infoId,
type: "GET"
})
.done(function(result) {
$("#assign-modal").html(result).dialog("open");
});
});
so after some long searching, I decided to use Ajax.ActionLink. I know there are better ways out there, but this one was working for me. I want to thank #MattBodily for all the help along the way.
#Ajax.ActionLink("Approve", "QuickAssign", "Assignment", new { id = Model.InfoId}, new AjaxOptions { HttpMethod = "GET", UpdateTargetId = "result", InsertionMode = InsertionMode.Replace, OnSuccess = "openDialog" })
then my javascript function
function openDialog() {
//set the diaglog properties
$("#result").dialog({
title: 'Assign',
width: 550,
height: 'auto',
modal: true
});
$("#result").dialog("open");
}

Kendo UI Window widget - Dynamic title using templates

Is it possible to have dynamic window titles using templates?
Something like this:
wnd = $("#details").kendoWindow({
title: #= ItemName #,
modal: true,
visible: false,
resizable: false,
width: 300}).data("kendoWindow");
I added ItemName in the title field merely to indicate the concept. Any idea?
You can do it with setOptions api method, something like:
// Setting some options
wnd.setOptions({
title: "dynamic title",
width: "60%"
});
First initialize your window with your code and on some events (button click may be), use window object to set its options.
If its not clear, lets play with example: I am setting the window title on kendo-grid custom command button click:
<div class="k-content">
<div id="noteswindow"></div>
</div>
<script>
$(document).ready(function () {
$("#noteswindow")
.kendoWindow({
actions: ["Refresh", "Maximize", "Minimize", "Close"],
visible: false
})
});
function onNotesClick(e) { // Custom button click
e.preventDefault();
var dataItem = this.dataItem($(e.currentTarget).closest("tr"));
rData = dataItem;
// Using same window variable again and again for successive clicks with dynamic content
var nWin = $("#noteswindow").data("kendoWindow");
// Setting some options
nWin.setOptions({
title: "Notes on " + dataItem.AssetOrShotName,
width: "60%"
});
nWin.refresh({
url: "../Task/Notes",
data: { AssignId: rData.Id }
});
nWin.open().center();
}
</script>
This is easy way i have show event title in title header like that
API.get('/Scheduler/GetEventDetailById', detailParams).then(function (data) {
$('.k-window-title').text(data.EventTitle);
});

trigger an jQuery UI Dialog if user not authorized

On my website I have two ways to login. The first is used then an user is pushing the Logon button, which trigger an jQuery UI Dialog to open. The second is an normal view, which is used, if an user isn't Authorized, which redirect to an normal login view. But what i liked to do instead, is if an user is not Authorized, it opens the Login jquery ui dialog instead of redirection to the view the user is intended.
This is how i currently are opening the dialog,
$(".openLoginDialog").on("click", function (e) {
e.preventDefault();
$("<div></div>")
.addClass("dialog")
.attr("id", $(this).attr("data-dialog-id"))
.appendTo("body")
.dialog({
title: $(this).attr("data-dialog-title"),
create: function (event, ui) {},
close: function () { $(this).remove() },
open: function (event, ui) {},
modal: true,
position: ['center', 130],
minWidth: 510,
resizable: true,
zIndex: 20000
})
.load(this.href);
});
Because the content in the dialog is an partialView it's called like this:
<div class="items iconlogin highligth-br"><a class="openLoginDialog" data-dialog-id="LoginDialog" data-dialog-title="Login" href="#Url.Action("LogOn", "Authentication", new { returnUrl = Request.Url.ToString() })">Login</a></div>
Also to help me controlling the not Authorized, i have overriden this calls.
public override void OnAuthorization(AuthorizationContext filterContext)
{
filterContext.Result = new RedirectToRouteResult(new
RouteValueDictionary(new { controller = "Authentication", action = "AccessDenied" }));
}
Last resort would be to redirect to an access denied page, with just an white background, which opens on load, a dialog.
I have a MVC intranet solution that employs functionality similar to what you describing, however it is using windows auth not forms.
Basically I have something like this in the Index...
var userExists = "#ViewBag.User";
// require the user to register if they are not found
if (userExists == "") {
$.get('Home/Register/', function (data) {
$("#Register").html(data);
$("#Register").dialog({
resizable: false,
closeOnEscape: false,
dialogClass: 'no-close',
typeDelay: 250
});
});
}
And then in the controller I just set 'ViewBag.User' to the username if they exist.
Have a look at this example:
http://jqueryui.com/dialog/#modal-form
Notice the autoOpen: false
I'm not familiar with asp.net so I wont be able to help with actual implementation. One approach would be to check where the request came from and if the user is not authorized redirect them back to that page and hit them with a dialog.
Another approach would be to know if the user is authenticated on the page load and override links that require authentication
$(".authRequired").on("click", function (e) {
e.preventDefault();
//fancy logic here to load form and dialog
});

A working method to open a webpage in new window?

I have been trying to write a code in sencha touch, which has a button and when i click on that , it should open a webpage as a pop-up in a new window .
Window.open()-I cannot use this method because it doesn't work fine
in phones.Though I realise this is the easiest way to open a new
browser window.
document.location.href=url - This method opens the URL in the same
page , but I want it to be opened in a new window as pop-up.
Is there any other way to open a page in a new window when a user clicks a button, Below is my code
Ext.application({
name: 'Opening new page',
launch: function() {
Ext.create("Ext.tab.Panel", {
fullscreen: false,
items: [
{
xtype: 'button',
text: 'click to open google',
ui: 'confirm',
handler: function() {
document.location.href=("http://www.google.com/");
}
}
]
});
}
});
Please try this code:
handler: function() {
var link = Ext.getDom('hidden_link');
link.href = 'http://www.google.com'/;
var clickevent = document.createEvent('Event');
clickevent.initEvent('click', true, false);
link.dispatchEvent(clickevent);
}
I don't know exactly how to do it in Ext.js, but I was basically thinking along the same lines as #bunlong-van. Create a anchor tag that targets a new window, add it to the page, and then click it.
This is how it could be done in jQuery:
$('button').bind('click',function(e){
var $me = $(this);
e.preventDefault();
e.stopPropagation();
$('<a />')
.attr('href', $me.data('href'))
.attr('target', '_blank')
.css({display:'none'})
.appendTo($('body'))
.get(0).click();
});
Full Sample: http://jsbin.com/adakur/edit
Hey #coding you can that is a Overlay is a type pop-up, try this into handler event,
var overlay = new Ext.Panel({
floating : true,
modal : true,
centered : true,
width : 500,
height : 500,
styleHtmlContent : true,
html: '<div><iframe style="width:100%;height:100%;" src="http://www.sencha.com/products/touch">Your device does not support iframes.</iframe></div>',
}).show('pop', true)
And please use your brain, I do not I can be doing your homework. I hope this helps. :) Ciao
Use window.open() in your handler as mentioned below:
handler: function() {
window.open("http://www.google.com/", "_blank");
}
Create a pop up window(a simple window) in your working page and make its visibility to false.. when you click on the button, change its visibility to true and give the focus to it..
also you can open anything in that popup window..
or you can use this jQuery code
$(document).ready(function() { tb_show(title, "testpage.aspx?id=" + url + "&TB_iframe=true&width=700&height=600", null); });
in this you can pass the parameters you want. this will open as a new popup window.

Categories