I saw similar questions but unfortunately did not find an answer I was looking for.
I have Kendo Confirmation dialog that I need to be displayed under a certain condition when clicking on an "Update" button:
<button class="k-button k-primary" id="btnSave" type="button" #*name="action:Save"*# onclick="CheckSplitCondition()">Update</button>
function CheckSplitCondition()
{
var newResolvedAmount = $('#ResolvedAmount').val();
var isSplit;
var diff = #Model.Amount - newResolvedAmount;
var msg = "Difference between Resolve Amount and Ticket Amount is:" + diff + ".\nThis Amount is going to be put in newly created ticket.\nPress 'OK' to proceed, press 'Cancel' otherwise.\n";
var dispResult = $("#displayResults");
if ((Math.abs(newResolvedAmount) <= Math.abs(#Model.Amount)) && newResolvedAmount != 0) {
//$("#displayResults").css("display", "block");
$("#displayResults").kendoConfirm({
width: "400px",
title: "Alert",
closable: true,
modal: true,
content: 'Are you sure?',
okText: "OK"
}).data("kendoConfirm").result.done(function () { SaveData(); }).fail(function () { alert('2') });
}
else {
SaveData();
}
}
After clicking on "Cancel", confirmation box is not showing and I have JavaScript error telling
"Unable to get property 'result' of undefined or null reference"
Not sure why that happens.
Kendo Confirm is based on Kendo Dialog, which according to the documentation removes the HTML elements from the DOM when it is destroyed:
destroy
Destroys the dialog and its modal overlay, if necessary. Removes the widget HTML elements from the DOM.
This is why it only works the first time around, and you receive a null reference on the second pass because the <div> no longer exists. This behaviour is typical of Kendo widgets which have been destroyed.
The quickest solution would be to call the kendo.confirm() method, as in this demo. Unfortunately, that is a very simple helper method which only allows you to specify the message text as an argument.
Alternatively, you could use jQuery to create a new <div> each time, and then turn that into a Dialog like so (which retains the flexibility to completely customise the Dialog):
var confirmDialog = $('<div />').kendoConfirm({
content: "Are you sure that you want to proceed?",
title: "Custom Title"
}).data('kendoConfirm').open();
confirmDialog.result.then(function () {
kendo.alert("You chose the Ok action.");
}, function () {
kendo.alert("You chose to Cancel action.");
});
Hope this helps.
Related
I've seen many questions posted on this topic but none of the answers/suggestions seemed to work for me. I'm fairly new to JQuery so some assistance will be much appreciated!
I've got a table with links. For some reason I can only open the dialog box for the first record (I can do this multiple times). It doesn't work for any other records.
Here's my code:
$(document).ready(function() {
var dlg=$('#ticketDetails').dialog({
title: 'Ticket Details',
resizable: true,
autoOpen:false,
modal: true,
hide: 'fade',
width:850,
height:700
});
$('#view').click(function(e) {
//testing with static record
dlg.load('displayRecord.php?id=215', function(){
dlg.dialog('open');
});
});
});
all rows in the table has the following table link:
echo '<td>View </td>';
The div to display the dialog:
<div id="ticketDetails"> </div>
I also tried sticking alert('1'); into the $('#view').click function which does not fire for other records.
In your table, each row has the same id, "view". An id is supposed to be unique for a single element on a page, so you should change this to a class:
<td>View</td>
and change your script accordingly:
$('.view').click(function(e) { ... });
Inside the event handler, you can use the event variable e to get the element that was clicked, using its target property:
$('.view').click(function(e) {
alert( $(e.target).text() );
});
Given the following script:
$(function () {
$(".editLink").button();
$('#editPersonDialog').dialog({
autoOpen: false,
width: 800,
resizable: false,
title: 'Edit Person',
modal: true,
buttons: {
"Save": function () {
$("#update-message").html('');
$("#updatePersonForm").submit();
},
"Close": function () {
$(this).dialog('close');
}
},
close: function (event, ui) {
$(this).dialog('close');
}
});
$(".editLink").click(function () {
var dialogDiv = $('#editPersonDialog');
var linkObj = $(this);
var viewUrl = linkObj.attr('href');
$.get(viewUrl, function (data) {
dialogDiv.html(data);
//validation
var $form = $("#updatePersonForm");
// unbind existing validation
$form.unbind();
$form.data("validator", null);
// check document for changes
$.validator.unobtrusive.parse(document);
// re-add validation with changes
$form.validate($form.data("unobtrusiveValidation").options);
// open dialog
dialogDiv.dialog('open');
});
return false;
});
});
function updateSuccess() {
if ($("#update-message").html() == "True") {
$('#editPersonDialog').dialog('close');
$("#commonMessage").html("Update Complete");
$("#commonMessage").delay(400).slideDown(400).delay(3000).slideUp(400);
}
else {
$("#update-message").show();
}
}
If I click the "X" button on the dialog the form closes fine. If I click the "Close" button then it does not close. I have verified that the code for the "Close" button is being called.
Both the "X" button and the "Close" button are both running the same statement: '$(this).dialog('close');'. Why would one work and the other not work?
As an aside the dialog will not open a second time unless I refresh the page. I imagine that these 2 problems may be related.
I have found many people with similar problems and a number of different solutions that worked for them. Unfortunately none of them worked for me.
Further Info:
The dialog displays a partial view in an Ajax form:
#using (Ajax.BeginForm("Edit", "Person", null,
new AjaxOptions
{
UpdateTargetId = "update-message",
InsertionMode = InsertionMode.Replace,
HttpMethod = "POST",
OnSuccess = "updateSuccess"
},
new { #id = "updatePersonForm" }))
{
#Html.ValidationSummary(true)
<div id="update-message" class="hiddenDiv"></div>
<div class="blockGraygradient">
#Html.Partial("_CreateEditCommon")
#Html.HiddenFor(model => model.SelectedPerson.Id)
#Html.HiddenFor(model => model.SelectedPerson.RowVersion)
#Html.HiddenFor(model => model.SelectedPerson.CreateTime)
</div><p/>
}
Try using this instead.
$(this).dialog('destroy');
We had exactly the same problem. In the end, every time you re-opened the dialog it was actually re-injecting the dialog markup into the DOM. Then, when you click close (for the second time) it only closes the first occurrence of the dialog, but not necessarily the one that's open. You can check this using a run-time DOM inspector like FireBug or Chrome's built-in developer tools.
I found out that the cause of both problems (the close button not working and being unable to show the dialog more than once without refreshing the page) was that I had included references to my script files in both my main page and the partial view being displayed by the dialog. Once I removed the script references from the partial view the problems disappeared.
(As an aside this has now raised another problem to do with an Ajax update back onto the main page when the dialog is closed. I think this is the reason that I put the scripts into the partial view in the first place).
You have too much recursion. You don't need to subscribe to the close event of your jQuery dialog and invoke $(this).dialog('close'); inside it. Simply comment this line or remove completely the close event subscription:
$('#editPersonDialog').dialog({
autoOpen: false,
width: 800,
resizable: false,
title: 'Edit Person',
modal: true,
buttons: {
"Save": function () {
$("#update-message").html('');
$("#updatePersonForm").submit();
},
"Close": function () {
$(this).dialog('close');
}
}
});
I am wanting to pass a variable to a jquery dialog window. I am using classic ASP and have onyl really touched on the world of jquery. I have spent a few hours researching and tring to use the .data method but are having trouble. Your time and assitance would be very much apriciated!
Here is my stripped down page:
$(function(){
// Dialog
$('#dialog').dialog({
autoOpen: false,
show: "slide",
hide: "fade",
width: 452,
modal: true,
buttons: {
"Ok": function() {
PostItNote.submit();
$(this).dialog("close");
},
"Cancel": function() {
$(this).dialog("close");
}
}
});
// Dialog Link
$('#dialog_link').click(function(){
$('#dialog').dialog('open');
return false;
});
});
and this is how I call the window:
<a href='#' id='dialog_link' CLASS='OrangeButton'> Show Window </a>
and the contents of my window:
<div ID="dialog" TITLE="Periodic Report">
stuff here
</div>
Why can I not do this:
<a href='#' id='dialog_link(someValue)' CLASS='OrangeButton'> Show Window </a>
Thank you in advance
How it is used in the ASP loop is:
do until Products.EOF
--other code here---
<a href='#' id='dialog_link(Products(0))' CLASS='OrangeButton'>
--other code here---
products.moveNext
loop
The dialog is just a div on your page, so it can't really be "passed" a value. It can be manipulated by any JavaScript variables in scope though. You could change your click handler to use a variable to manipulate the dialog:
var myVariable = "Some new text for the dialog";
$('#dialog_link').click(function(){
//New code to "pass" a value to the dialog
$('#dialog').text(myVariable);
$('#dialog').dialog('open');
return false;
});
Or you could use the open member of the dialog:
...
width: 452,
open: function() { $('#dialog').text(myVariable); },
modal: true,
...
To make changes to the dialog div whenever it is opened.
The code id='dialog_link(someValue)' will not do anything, as the id attribute cannot make function calls, only event handlers like onchange can do that. Even if it could, dialog_link is not a function that can be passed a value. It is just the id of another element.
I'm sure you're probably already aware, but the jQuery documentation is very useful- here are the docs for dialog.
Edit
In response to your comment: I would drop the $('#dialog_link').click(); statement and change the link code to the following:
<a href='#' class='OrangeButton' onclick='openDialog(someValue);'>Show Window</a>
And then add the JavaScript function to be called on the click event:
function openDialog(value) {
$('#dialog').text(value);
$('#dialog').dialog('open');
}
Edit 2
Inside of the ASP loop something like this should do the trick:
Response.Write("<a href='#' onclick='openDialog(" & Products(0) & ");'>Show</a>")
This will create an <a></a> element on the page with an onclick handler that passes the desired value to openDialog, making it accessible by the dialog.
I changed the code for the link slightly so that it all fit on one line, but you could always add back the class='OrangeButton' and all that if you'd like.
I have a div:
<div id="mproEmailAccountPopUp"></div>
I declare a Dialog
var popupdiv = $( '#mproEmailAccountPopUp' );
popupdiv.dialog({
width: 650,
autoOpen: false,
modal: false
});
I then get some html form stuff (this works fine) from a server and update the dialog content:
function ShowEdit(accountId) {
$.ajax({
type: "POST",
async: false,
url: "<%=EmailHandler %>?action=GetEmailAccountEdit",
data: { accountId: accountId },
success: function (result) {
alert("Success GetEmailAccountEdit");
popupdiv.html(result);
popupdiv.dialog("open");
//popupdiv.dialog( "moveToTop" )
}
});
}
This works beautifully the first time, but if you press the close button, and then recall the function. The dialog is updated with the new html, but you can't type in ANY of the text boxes. I have narrowed it down to the modal overlay (as it works with modal:false). The z-index seems to be 1 less than the modal form, and I have even deleted (via firebug) the modal overlay div, but I can still not edit the text boxes.
If I turn modal:false then it works fine, modal:true is causing these problems.
As you can see, i have tried the "moveToTop" method, no effect.
I have also tried destroying the popup, and reinitialising it entirely from within the ShowEdit function.
Anyone have any clue about what I can do to fix this?
I use several jquery ui dialogs in my application to collect input from users and for CRUD operations. When in a page I need a dialog I do the following steps:
First I define the minimum markup and code necessary to initialize the dialog like this
<div id="dialogPanel" style="display:none" title=""></div>
and, when the DOM is ready,
$("#dialogPanel").dialog({
autoOpen: false, hide: 'slide', show: 'bounce', resizable: false,
position: 'center', stack: true, height: 'auto', width: 'auto',
modal: true, overlay: { opacity: 0.5, background: "white" }
});
Then I load content in the dialog when I need it using ajax calls, like this
<button id="addCustomer">Add Customer</button>
and this
$("#addCustomer").button().click(function(event) {
event.preventDefault();
loadDialog("/Customer/Create", "", "Add New Customer");
});
function loadDialog(action, id, title) {
$("#dialogPanel").dialog("option", "title", title);
if (id != "")
action = action + "/" + id;
$.ajax({
type: "get",
dataType: "html",
url: action,
data: {},
success: function(response) {
$("#dialogPanel").html('').html(response).dialog('open');
}
});
}
The ajax call returns a strong typed view that will show inside the dialog and even resize it dinamically. The strong typed view has some buttons that, in turns, does other ajax calls (for example to the controller action that validate and persist on the database). These calls usually returns back HTML code that will be added to the dialog DIV.
Now my question is: How do I close the dialog? I can do it by clicking the "X" button on top right corner of the dialog or by pressing the ESC key but I would like to do it as a consequence of the click to the button that is inside the strong typed view .
However I do not wish to use this kind of code
$("#dialogPanel").dialog('close');
inside a strong typed view that does not defines the #dialogPanel DIV in itself.
What could be a good solution?
Create a closeDialog function in the main form, and call that function from within the dialog. Then any other page that hosts the dialog also needs to define a "closeDialog" function.
Also, you could pass a delegate pointing to the closeDialog function to separate things further.