Jquery Opens Multiple Dialog boxes in MVC 4.0
In _layout file I have this code:
<script type="text/javascript">
$(function () {
$("#tabs").tabs();
$("#dialog").dialog({
autoopen: false,
height: 600,
width: 800
});
});
</script>
and when I use an Ajax call using this:
success: function (data) {
$("#dialog").html(data);
}
it show a lot more 100 of dialog boxes and keeps opening until closed forcely,
but when I use only
success: function (data) {
alert(data);
}
it shows only 1 alert box containing data,
Please lead me to some Solution,
Try this code
<script type="text/javascript">
function show()
{
$("#dialog").dialog({
autoopen: false,
height: 600,
width: 800
});
}
</script>
success: function (data) {
$("#dialog").html(data);
show();
}
Related
I am using knockout to render a page with rows of data. On each row there is a link which should call a controller function which returns a partial view.
knockout script for link is (inside foreach loop)...
<a class="lnkEdit" data-bind="attr: {'href': '#Url.Action("ControllerActionName", new RouteValueDictionary() { { "Controller", "ControllerName" } })/'+ id}">Details</a>
Script section...
$(document).ready(function () {
$.ajaxSetup({ cache: false });
$("#dialog-edit").dialog({
title: 'Details',
autoOpen: false,
resizable: false,
position: ['center', 50],
width: 700,
show: { effect: 'drop', direction: "up" },
modal: true,
draggable: true,
open: function (event, ui) {
$(".ui-dialog-titlebar-close").hide();
$(this).load(url);
}
});
$(".lnkEdit").on("click", function (e) {
url = $(this).attr('href');
$("#dialog-edit").dialog('open');
return false;
});
$("#btncancel").on("click", function (e) {
$("#dialog-edit").dialog("close");
return false;
});
ko.applyBindings(new UnitViewModel());
})
My page has div as place holder for dialog...
<div id="dialog-edit" style="display: none">
Problem: When I click on link for details; the controller returns partial view but jquery is not able to generate dialog so the page opens as normal view. What is wrong with this?
<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
I'll Check Your code and is working...
just add CSS and JS proper.
I use jquery webcam in a jquery dialog it works fine in Chrome but it does not show anything in IE.
$("#camera-dialog").dialog({
autoOpen: false,
width: 380,
resizable: false,
height: 320,
open: function(event, ui){
$(this).load("#Url.Action("Popup")");
},
show: {
effect: "blind",
duration: 1000
},
hide: {
effect: "fadeOut",
duration: 1000
}
});
and this is my partial view Popup
<script type="text/javascript">
$("#camera").webcam({
width: 320,
height: 240,
mode: "save",
swffile: "#Url.Content("~/Scripts/jscam.swf")",
onTick: function () { },
onSave: function () { },
onCapture: function () {
webcam.save("#Url.Content("~/Cap")/");
},
debug: function () { },
onLoad: function () { }
});
</script>
<div id="camera">
</div>
and if I do not use the dialog but just put it on a page then it works fine too.
What's happening and how can I make this work in IE too?
Thank you in advance.
Hi I'm trying to load a script to create some charts in a dialog box using JQuery.
In my view I have a partial ready and waiting that is in the dialog when I inspect it with Chrome Tools:
<div id="mydialog">
#Html.Partial("_fooChart", "Home")
</div>
I then have the dialog box that fires on click, the dialog opens but it is blank. If you inspect it with Chrome Tools you can see the elements from the partial are there. (The elements don't contain content, the function will create the content based on id's.)
Here is the dialog:
$(function () {
$('#mydialog').dialog({
autoOpen: false,
height: 800,
width: 800,
resizable: false,
open: function () {
$('#mydialog').load($('#mydialog'), function () {
fooChartLoad()
});
},
title: 'Foo Chart',
modal: true,
buttons: {
"Close": function () {
$(this).dialog("close");
}
}
});
$('#my-button').click(function () {
$('#mydialog').dialog("open")
});
});
And here is the script I am trying to load:
function fooChartLoad() {
setTimeout(function () {
createFooChart();
$('#fooChartContainer').bind("kendo:skinChange", function (e) {
createFooChart();
});
}, 200);
}
Basically I'm trying to figure out why the dialog is not loading up the fooChartLoad when I call it with the open -> load function in JQuery dialog.
I had attempted to have a partial populate the dialog HTML before the .load called the scripts that would render data visuals, but .load it would appear works better when I loaded the partial and scripts at the same time as below:
open: function () {
$('#fooChartDialog').load($('#fooChartDialog').data('url'), function () {
fooChartLoad()
});
I have a modal popup just for comfirmation. When 'continue' is clicked it closes and it goes to the controller Action Delete and it returns. But after returning back to the view, the summary message validation div is not being showed which is what I want.
Here is the modal with div code:
<div id="delete-dialog" title="Confirmation">
<p>Are you sure you want to delete this?</p>
</div>
<script type="text/javascript" lang="javascript">
//$(document).ready(function () {
$(function () {
var deleteLinkObj;
$('.delete-link').click(function () {
deleteLinkObj = $(this); //for future use
$('#delete-dialog').dialog('open');
return false; // prevents the default behaviour
});
$('#delete-dialog').dialog({
autoOpen: false,
width: 400,
height: 250,
resizable: false,
modal: true, //Dialog options
buttons: {
"Continue": function () {
$.post(deleteLinkObj[0].href, function (data)
{ //Post to action
if (data == '')
{
}
else
{
}
});
$(this).dialog("close");
},
"Cancel": function ()
{
$(this).dialog("close");
}
}
});
});
//})
</script>
So what i basically want it to do, is going to the controller if 'continue' is clicked, and show the summary message.
So how can I 'stop' the execution of the jquery function after comming from the controller?
I got the modal code from this site
You should use .append of jQuery inside your callback, after the post.
As you did not show any div. I'm assuming the div as
<div id="summary"></div>
This is how you the final dialog is :
$('#delete-dialog').dialog({
autoOpen: false,
width: 400,
height: 250,
resizable: false,
modal: true, //Dialog options
buttons: {
"Continue": function () {
$.post(deleteLinkObj[0].href, function (data)
{ //Post to action
if (data == '')
{
}
else
{
$('#summary').append(data); // this will append the content in data to your div with id as summary
}
});
$(this).dialog("close");
},
"Cancel": function ()
{
$(this).dialog("close");
}
}
});
Hope it helps
I using jquery ui dialog with dynamic height. When it opens it’s centered, but when it loads the content it’s expanding toward the bottom of the page.
Here is my function:
$(this.document).ready(function () {
$(".openDialog").live("click", function (e) {
e.preventDefault();
$("<div></div>")
.addClass("dialog")
.attr("id", $(this)
.attr("dialog-id"))
.dialog({
autoOpen: false,
title: $(this).attr("dialog-title"),
close: function () { $(this).remove() },
modal: true,
width: $(this).attr("dialog-width"),
heith: 'auto',
resizable: false,
draggable: false,
show: 'scale',
hide: 'puff',
position: ['center', 'middle']
})
.load(this.href).dialog("open");
});
$(".close").live("click", function (e) {
e.preventDefault();
$(this).closest(".dialog").dialog("close");
});
});
I was able to fix this by setting autoOpen:false and creating the dialog content with my ajax call in the create method. Once that returned, and the content created, I called open on the dialog. Works great!
Above ans not work for me.
$(document).live("ajaxStop", function (e) {
$("#myDiagDiv").dialog("option", "position", "center");
});