I just need a little help here about displaying KendoUI window.
My situation is I have a button that will call the window. At first click of button, the window dialog will appear but after closing the window by clicking the 'x' button I can't make it appear again by pressing the same button.
I don't know where's my error.
Here's my code:
<script type="text/javascript">
$(document).ready(function() {
$(".test").click(function (){
$("#window").kendoWindow({
actions: ["Refresh","Maximize","Minimize","Close"],
draggable: true,
height: "300px",
modal: true,
resizable: false,
title: "Purchase Order Supplier Detail",
width: "500px"
});
});
});
</script>
<div id="window" style="visibility: hidden;"></div>
<input type="button" class="test" value="test" />
Put kendo window out of button click like this,
<script type="text/javascript">
$(document).ready(function() {
$(".test").click(function (e) {
$("#window").data("kendoWindow").open();
e.preventDefault();
});
$("#window").kendoWindow({
actions: ["Refresh", "Maximize", "Minimize", "Close"],
draggable: true,
height: "300px",
modal: true,
resizable: false,
title: "Purchase Order Supplier Detail",
width: "500px",
});
});
</script>
<div id="window" style="display:none;"></div>
<input type="button" class="test" value="test" />
Div style is "display:none;" insted of "visibility: hidden;".
Related
I'm trying to show a modal confirm dialog on delete link in a list action of a mvc 3 application.
<script language="javascript" type="text/javascript">
$(document).ready(function () {
$("#dialog-confirm").dialog({
autoOpen: false,
modal: true,
resizable: false,
height: 180
});
});
$(document).delegate(".deleteLink", "click", function (e) {
e.preventDefault();
alert('test');
var $link = $(this);
var $dialog = $('#dialog-confirm')
.dialog({
autoOpen: false,
modal: true,
resizable: false,
height: 180,
buttons: {
'button text': function () {
alert("button"); //this is the button, do something with it :)
}
}
});
$dialog.dialog('open');
});
<div id="dialog-confirm" title="Delete the item?" >
<p><span class="ui-icon ui-icon-alert" style="float:left; margin:0 7px 20px 0;"></span>This item will be deleted. Are you sure?</p>
and this is the link
#Html.ActionLink("حذف", "Delete", "Need", new { id = item.NeedID }, new { #class = "deleteLink", title = "حذف" })
when i remove the buttons option it works but when i add it , it doesn't show up anymore
where i'm doing wrong?
At a very quick glance - it would seem that buttons is an array. Try pasting in the sample from the documentation:
... {
autoOpen: false,
modal: true,
resizable: false,
height: 180,
buttons: [ { text: "Ok", click: function() { $( this ).dialog( "close" ); } } ]
}
I need a modal pop up for a button using jquery. I have worked with modal popups for an action link, nut I need it to work with a button only.
The jquery that I used for the action link:
<%: Html.ActionLink("Create", "Create_By_SupAdmin", null, new { #class = "openDialog",
data_dialog_id = "newPostDialog", data_dialog_title = "Create New Profile" }) %>
Is:
$(document).ready(function () {
$('.openDialog').live('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'),
close: function () {
$(this).remove()
window.location.reload()
},
modal: true,
width: 500
})
.load(this.href);
});
});
Problem
I need to apply this same behavior for the button.
You could use jQuery UI Dialog. If you made it work with an ActionLink it would be the same with a button. Define a button and a placeholder for the dialog:
<input type="button" id="btn" value="Show modal" />
<div id="dialog"></div>
and then subscribe to the click event of the button and show the dialog:
$('#btn').click(function() {
$('#dialog').dialog().html('some contents');
});
and here's a live demo.
Now that you have shown your code here's how to adapt it to work with a button:
<input type="button" value="Create" class="openDialog" data-dialog-id = "newPostDialog", data-dialog-title="Create New Profile" data-url="<%= Url.Action("Create_By_SupAdmin") %>" />
and then:
$(document).ready(function () {
$('.openDialog').live('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'),
close: function () {
$(this).remove();
window.location.reload();
},
modal: true,
width: 500
})
.load($(this).attr('data-url'));
});
});
Iam in parent view while clicking the button in the parent view I want to load content of another view in jquery ui dialog. I tried with the following code. but jquery ui dialog initially show the content of the another view, then it doesn't show the content of the another view.
<button id="btn_newtrade" name="btn_newtrade" class="newtrade">New Trade</button>
<script type="text/javascript">
$(function () {
$('#dialog').dialog({
autoOpen:false,
width: 1400,
height:600,
resizable: false,
title: 'New Trades',
modal: true,
open: function(event, ui) {
$(this).load('#Url.Action("NewTrade","Trade")');
},
buttons: {
"Close": function () {
$(this).dialog("close");
}
}
});
});
$('.newtrade').click(function () {
$('#dialog').dialog('open');
});
</script>
<div id="dialog" style="display:none;"></div>
You could try something like this
$('.newtrade').click(function () {
$('#dialog').load('#Url.Action("NewTrade","Trade")').dialog('open');
});
and remove the open event handler.
I am loading a partial view in a popup using the following code
$(document).ready(function () {
//define config object
var dialogOpts = {
title: "Mypopup",
modal: true,
autoOpen: false,
height: 300,
width: 700,
open: function () {
//display correct dialog content
$("#Mydiv").load("MyAction");
}
};
$("#Mydiv").dialog(dialogOpts); //end dialog
$("#MyButton").click(
function () {
$("#Mydiv").dialog("open");
return false;
}
);
});
the action MyAction loads a partial view say "Myview" successfully, "Myview" contains a close button and on the click of this button I want to close the popup, How can I do this? I tried following code but this does not work.
$('#Close').click(
function () {
$(this).parent("close");
return false;
});
Can you please help?
Here is my html for the partial view.
#Code
Using (Html.BeginForm())
#<div id="master">
<img alt ="" src ="../../Images/Question.gif" height ="50" width ="50" />#Html.DisplayFor(Function(model) model.ConfirmationMessage) #Html.HiddenFor(Function(model) model.Key )<br /><br />
<div><input id="Yes" type="submit" class ="btn" name="button" value="Yes" /><input id="No" type="submit" class ="btn" name="button" value="No" /></div>
</div>
End Using
End Code
<script type="text/javascript">
$("#No").live("click", function(){ $("#MyDiv").dialog("close"); }); </script>
You could try:
$("#MyDiv").dialog("close")
or add the close buttons in the initialization of it
$( "#MyDiv" ).dialog({
resizable: false,
height:140,
modal: true,
buttons: {
"Close": function() {
$( this ).dialog( "close" );
}
}
});
I think i see it now. That button is loaded dynamically so
$("#MyButton").live("click", function(){ $("#MyDiv").dialog("close"); });
It will work we need to refer the following jQuery,jquery-ui.js and jquery-ui.css.
$(function () {
$("#dialog").dialog({
modal: true,
autoOpen: false,
title: "jQuery Dialog",
width: 500,
height: 250
});
$("#btnShow").click(function () {
$('#dialog').dialog('open');
});
});
function Close() {
$('#dialog').dialog('close');
};
</script>
for more details http://www.infinetsoft.com/Post/How-to-open-and-close-a-popup-in-asp-net-mvc-using-Jquery/99#.V0LlETV97cs
I am a completely new to mvc and trying to create a dummy application to learn mvc 3.
I have worked my way through the music store example and now I am trying to extend it slightly into a more real world application.
With the example whenever you want to any new item you are redirected to the Create view which is fine however I want instead of doing a full page post back I want to use the jquery.dialog to open a modal popup which will allow the user to insert a new item.
so far I have
<script type="text/javascript">
$(function () {
$('#dialog').dialog({
autoOpen: false,
width: 400,
resizable: false,
title: "hi there",
modal: true,
buttons: {
"Close": function () {
$(this).dialog("close");
}
}
});
$('#my-button').click(function () {
$('#dialog').dialog('open');
});}); </script>
<div id="dialog" title="Create Album" style="overflow: hidden;">
#Html.Partial("_CreateAlbumPartial")</div>
Problems with this is the partial view is loaded everytime not through ajax and I dont really know where I should be placing the partial view. Shoukld it be in the shared location or in the folder with the other views?
How do I update the controller class to cater for the partial view?
Sorry if these are easy to do, im 3 days into mvc :)
Try something like this:
<script type="text/javascript">
$(function () {
$('#dialog').dialog({
autoOpen: false,
width: 400,
resizable: false,
title: 'hi there',
modal: true,
open: function(event, ui) {
//Load the CreateAlbumPartial action which will return
// the partial view _CreateAlbumPartial
$(this).load("#Url.Action("CreateAlbumPartial")");
},
buttons: {
"Close": function () {
$(this).dialog("close");
}
}
});
$('#my-button').click(function () {
$('#dialog').dialog('open');
});
});
</script>
<div id="dialog" title="Create Album" style="overflow: hidden;">
We used the open function which is triggered when the dialog is opened and inside we send an AJAX request to a controller action which would return the partial:
public ActionResult CreateAlbumPartial()
{
return View("_CreateAlbumPartial");
}
To improve Darin answer, we can move the div loading code in the button click event.
In this way all position's alghorithms of the dialog works on the new text, and so the dialog is placed correctly.
<script type="text/javascript">
$(function () {
$('#dialog').dialog({
autoOpen: false,
width: 400,
resizable: false,
title: 'hi there',
modal: true,
buttons: {
"Close": function () {
$(this).dialog("close");
}
}
});
$('#my-button').click(function () {
//Load the CreateAlbumPartial action which will return
// the partial view _CreateAlbumPartial
$('#dialog').load("#Url.Action("CreateAlbumPartial")",
function (response, status, xhr) {
$('#dialog').dialog('open');
});
});
});
</script>
<div id="dialog" title="Create Album" style="overflow: hidden;">