I have the following problem:
I use dialog boxes to show different pages/content inside of them, however when two different dialog boxes are opened it crashes and they cannot be opened again. Everything is fine as long as one box is opened, it can even be opened multiple times. When I open second dialog box neither of them can be reopened. I have already tried to "destroy" the dialog on closing (as suggested here Jquery Dialog opening multiple dialogs) but it didn't help, I still can open only one instance of each box and when two different ones are opened it crashes and neither of them reopens.
I have something like that in html:
<ul>
<li>link1 title</li>
<li>link2 title</li>
</ul>
And then in the javascript:
$("#link1").click(function () {
$(function () {
$('<div>').dialog({
modal: false,
open: function ()
{
$(this).load('somePage.php');
},
height: 500,
width: 1300,
title: 'title1'
});
});
});
$("#link2").click(function() {
$(function () {
$('<div>').dialog({
modal: false,
open: function ()
{
$(this).load('otherPage.html');
},
height: 535,
width: 880,
title: 'title2'
});
});
});
Your $(function () { is not at the right place:
$(function () {
$("#link1").click(function () {
$('<div>').dialog({
modal: false,
open: function ()
{
$(this).load('somePage.php');
},
height: 500,
width: 1300,
title: 'title1'
});
});
$("#link2").click(function() {
$('<div>').dialog({
modal: false,
open: function ()
{
$(this).load('otherPage.html');
},
height: 535,
width: 880,
title: 'title2'
});
});
});
The code inside $(function() {…} is executed at document loading, the perfect time to register event handler on our HTML elements.
Related
I want to display a pop-up box once I click the "Add Component" Link. The first time it's clicked, it will display a proper dialog box, but if I click again and again it will go that URL without the pop-up box, The pop-up box contains another view page. If I close that box, it should say "Closed", and if I click "Add Component" again the pop-up should show. Here is my JavaScript and HTML Code:
<script>
$(document).ready(function () {
$('#lnkCreate').on('click', function (e) {
var url = $(this).attr('href');
$("#dialog-edit").dialog({
title: 'Add Component',
autoOpen: false,
resizable: false,
height: 455,
width: 500,
show: { effect: 'drop', direction: "up" },
modal: true,
draggable: true,
open: function () {
$(this).load(url);
alert(url);
},
close: function () {
$(this).dialog('close');
alert("closed view");
}
});
});
</script>
<p style="padding-left:18em;padding-top:1em">
#Html.ActionLink("Add Component", "Create",null, new { id = "lnkCreate" })
</p>
I have jquery shown below for a jquery dialogue.Here div idTestForm is used as popup window.I want to reuse it for any number of Div's coming under any pages.If that is the case first step i will do is i will create separate .js file i will add this script.But i don't know how to change code in order to make it for any kind of Div's ie, how to pass div from any pages??etc
<script type="text/javascript">
function showBscDetails() {
$("#idTestForm").dialog({
open: function () {
$(this).parents(".ui-dialog:first").find(".ui-dialog-titlebar").addClass("ui-state-error");
},
title: 'Leaf Details',
appendTo: "form",
modal: true,
draggable: true,
resizable: true,
show: 'blind',
hide: 'blind',
width: 1100,
height: 600
}).prev(".ui-dialog-titlebar").css("background", "#6A7667");
$("#idTestForm").on('dialogclose', function (event) {
location.reload(true);
});
}
EDIT
As of now i am calling this function from scriptmanager.registerstartupscript from code behind ie c# file
Following code, but it is not working.
$('#img').on('click', function () {
$("#new").dialog({
autoOpen: true,
position: { my: "center", at: "top+350", of: window },
width: 1000,
resizable: false,
title: 'Add User Form',
modal: true,
open: function () {
$(this).load('#Url.Action("_new", "Help")');
},
buttons: {
"Add User": function () {
addUserInfo();
},
Cancel: function () {
$(this).dialog("close");
}
}
});
return false;
});
I have a partial view name _new in Help Folder Under Views.
Can someone guide me too achieve it. I am using MVC4 framework :)
You have to move the click to the anchor (a) instead of the img. The click event will never reach the img.
See jsfiddle.
here is my code with jquery ui:
jQuery("#nodeliverydate").dialog({
resizable:false,
draggable:false,
modal:false,
buttons:[{text:"Close",click:function(){jQuery(this).dialog("close");}}]
});
It is a very simple code that using jquery dialog as an alert box. I defined one button to close the dialog. However, it runs in a very odd way that the dialog will contain many buttons, and the text on the buttons are all function names such as "each","all","clone","select","size", etc. And after I close it, if the dialog shows again, it will be normal. Does anyone have any idea about why this happens?
jQuery("#nodeliverydate").dialog({
modal: true, title: 'Delete msg', zIndex: 10000, autoOpen: true,
width: 'auto', resizable: false,
buttons: {
Yes: function () {
// $(obj).removeAttr('onclick');
// $(obj).parents('.Parent').remove();
$(this).dialog("close");
},
No: function () {
$(this).dialog("close");
}
},
close: function (event, ui) {
$(this).remove();
}
});
This work pretty well: Yes or No confirm box using jQuery
I am trying to achieve something but I don't know is it possible.
I have a link that point to /ControllerName/ActionName.
When I click on it view is opened and url is like:
localhost:xxxx/ControllerName/ActionName
or
localhost:xxxx/ControllerName/ActionName/9879878927
Now, when I use JQuery UI modal dialog to display the same view it opens in modal view but url isn't changed.
Is this possible in this way that I am making? Am I on the right direction or I did something completely wrong?
$(".openDialog").live("click", function (e) {
e.preventDefault();
$("<div></div>")
.addClass("dialog")
.attr("id", $(this).attr("data-dialog-id"))
.appendTo("body")
.dialog({
open: function (event, ui) {
window.setTimeout(function () {
jQuery(document).unbind('mousedown.dialog-overlay')
.unbind('mouseup.dialog-overlay');
}, 100);
},
title: $(this).attr("data-dialog-title"),
close: function () { $(this).remove() },
modal: true,
width: 600,
height: 'auto',
resizable: false, position: 'top'
}).load(this.href);
});
...
#Html.ActionLink("about", "About", "Home", null,
new { #class = "openDialog", data_dialog_id = "test" })