I'm trying to add an additional class to my jQuery dialog with the dialogClass property. Here's the javascript:
$(function(){
$( "#toogleMAmaximized" ).dialog({
title: 'Missions and Achivments',
autoOpen: false,
height: 500,
width: 700,
modal: true,
dialogClass: 'noPadding',
buttons: {
Cancel: function() {
$( this ).dialog( "close" );
}
},
close: function() {
allFields.val( "" ).removeClass( "ui-state-error" );
}
})
$( "#toogleMAminimized" ).click(function() {
$( "#toogleMAmaximized" ).dialog( "open" );
$( "#toogleMAmaximized" ).dialog({dialogClass:'noPadding'});
});
})
<div id="toogleMAminimized" style="" class="noPadding">
<div class="" style="cursor: pointer;position: absolute;right: 0;top: 45px;"><img src ="images/MAminimized.png" alt="missions and achivments"/></div>
</div>
Just in case you need it, my html code
<div id="toogleMAmaximized" >
<div id="missions">
<div id="mission1" missiontitle="A new home!" missionpoint="1" missionicon="images/missions/icon/anewhome-icon.png" missionimage="images/missions/anewhome.png" made="f" class="mission notDone"> </div>
</div>
<div id="achivments">
<div id="achivment1" achivmenttitle="Lucha sin cuartel!" achivmentpoint="10" achivmenticon="images/achivments/icon/1.png" achivmentimage="images/achivments/icon/luchasincuartel-plata-ico.png" made="t" class="achivment done"> </div>
</div>
</div>
As you can see, I've tried to add the class in many ways, I've tried all possible combinations but keep getting the same result: no noPadding class
Your noPadding class is being added successfully to the dialog. I have confirmed this by placing your markup and scripts within a fiddle, and loading jQuery UI 1.8.16 (the version you were testing with). This test is available online at http://jsfiddle.net/QHJKm/3/.
I suspect the confusion here is with the expected effect noPadding is going to have on the dialog itself. It could be that you interpreted its lack of effect as an indication it wasn't added to begin with. As you'll note in my example, I've got with a rather bold style, a red background. This quickly confirms that the class is indeed being added to the dialog.
Related
Solution Here: http://jsfiddle.net/lookitstony/24hups0e/6/
Crimson's comment lead me to a solution.
I am having an issue with KO and the Jquery UI dialog. The dialogs are not being destroyed with the template that loaded them.
I was previously storing an instance of the dialog and reusing it over and over without using the binding handler. After reading a few posts about the included binding handler I felt perhaps that was the best way to handle the dialogs. Am I using knockout wrong? Should I stick with the stored reference or does KO have a better way to handle this? If this was an SPA, how would I manage this if I was swapping between pages that may or may not have these dialogs?
You can witness this behaviour by checking out my example here: http://jsfiddle.net/lookitstony/24hups0e/2/
JAVASCRIPT
(function () {
ko.bindingHandlers.dialog = {
init: function (element, valueAccessor, allBindingsAccessor) {
var options = ko.utils.unwrapObservable(valueAccessor()) || {};
setTimeout(function () {
options.close = function () {
allBindingsAccessor().dialogVisible(false);
};
$(element).dialog(options);
}, 0);
//handle disposal (not strictly necessary in this scenario)
ko.utils.domNodeDisposal.addDisposeCallback(element, function () {
$(element).dialog("destroy");
});
},
update: function (element, valueAccessor, allBindingsAccessor) {
var shouldBeOpen = ko.utils.unwrapObservable(allBindingsAccessor().dialogVisible),
$el = $(element),
dialog = $el.data("uiDialog") || $el.data("dialog");
//don't call open/close before initilization
if (dialog) {
$el.dialog(shouldBeOpen ? "open" : "close");
}
}
}
})();
$(function () {
var vm = {
open: ko.observable(false),
content: ko.observable('Nothing to see here...'),
templateOne: ko.observable(true),
templateTwo: ko.observable(false),
templateOneHasDialog: ko.observable(true),
showOne: function(){
this.templateTwo(false);
this.templateOne(true);
},
showTwo: function(){
this.templateOne(false);
this.templateTwo(true);
},
diagOpt: {
autoOpen: false,
position: "center",
modal: true,
draggable: true,
width: 'auto'
},
openDialog: function () {
if(this.templateOneHasDialog()){
this.content('Dialog opened!');
this.open(open);
} else {
this.content('No Dialog Available');
}
}
}
ko.applyBindings(vm);
});
HTML
<div id='ContentContainer'>
Experience Multiple Dialogs
<ul>
<li>Click "Open Dialog"</li>
<li>Move the dialog out of the center and notice only 1 dialog</li>
<li>Close Dialog</li>
<li>Now click "One" and "Two" buttons back and forth a few times</li>
<li>Now click "Open Dialog"</li>
<li>Move the dialog and observe the multiple dialogs</li>
</ul>
<button data-bind="click:showOne">One</button>
<button data-bind="click:showTwo">Two</button>
<!-- ko if: templateOne -->
<div data-bind="template:{name:'template-one'}"></div>
<!-- /ko -->
<!-- ko if: templateTwo -->
<div data-bind="template:{name:'template-two'}"></div>
<!-- /ko -->
</div>
<script type="text/html" id="template-one">
<h3>Template #1</h3>
<p data-bind="text:content"></p>
<div><input type= "checkbox" data-bind="checked:templateOneHasDialog" /> Has Dialog </div>
<button data-bind="click:openDialog">Open Dialog</button>
<!-- ko if: templateOneHasDialog -->
<div style="display:none" data-bind="dialog:diagOpt, dialogVisible:open">
The Amazing Dialog!
</div>
<!-- /ko -->
</script>
<script type="text/html" id="template-two">
Template #2
</script>
When using dialog inside template the init method will be called every time when the template is shown and hence multiple dialogs are appeared in your case. To resolve this place the dialog outside the template.
<div style="display:none" data-bind="dialog:diagOpt, dialogVisible:open">
The Amazing Dialog!
</div>
Place this outside the template and now the issue will be resolved.
Updated fiddle: Fiddle
Edit: I went through your code and found that the ko.utils.domNodeDisposal.addDisposeCallback has not been triggered in your case. And hence the dialog has not been destroyed on template change which in returns shows multiple dialog.
But why ko.utils.domNodeDisposal.addDisposeCallback has not called?
The ko.utils.domNodeDisposal.addDisposeCallback will be triggered when the element(rendered using custom binding) in the template is removed from DOM. But in your case, the dialog element is appended to the body instead of template and so it was not triggered
Solution
The jquery ui 1.10.0+ have option to specify where the dialog element has to be appended using appendTo option we can use that to resolve this.
diagOpt: {
autoOpen: false,
position: "center",
modal: true,
draggable: true,
width: 'auto',
appendTo: "#DesiredDivID"
},
<script type="text/html" id="template-one">
<h3>Template #1</h3>
<p data-bind="text:content"></p>
<div><input type= "checkbox" data-bind="checked:templateOneHasDialog" /> Has Dialog </div>
<button data-bind="click:openDialog">Open Dialog</button>
<!-- ko if: templateOneHasDialog -->
<div id="DesiredDivID"></div>
<div id="dlg" data-bind="dialog:diagOpt, dialogVisible:open">
The Amazing Dialog!
</div>
<!-- /ko -->
</script>
Now the dialog element will be appended to the #DesiredDivID and destroyed on template change.
See the updated fiddle: Updated one-April-1
I'm trying to create dynamic dialog, with one input field and with some texts. Problem is, that dialog remembers value of old input fields and is not updating them. I created JSfiddle example of my problem. If you click on <li> element than dialog will come up. There is one input field, that is changing content of <li> element and some pointless text. Problem comes if, when you change content of input field and save it, from this time is stopped being dynamic and become pure static field. I totally don't understand why. PS Sorry for my bad english
HTML
<div id="dialog" title="text">
<input type="text" id="xxx" value="test">Some text
</div>
<ul>
<li id="menu-item-1">one</li>
<li id="menu-item-2">two</li>
<li id="menu-item-3">three</li>
</ul>
JavaScript
$('li').click(function () {
$('#xxx').attr("value", $(this).text());
$("#dialog").dialog('open').data("opener", this.id);
});
$("#dialog").dialog({
autoOpen: false,
modal: true,
buttons: {
Save: function () {
$('#' + $("#dialog").data("opener")).text($("#xxx").val());
$(this).dialog('close');
},
Storno: function () {
$(this).dialog('close');
}
}
});
jsfiddle
Change the dialog to a <form>, then use its reset() method.
$('li').click(function() {
$('#xxx').attr("value", $(this).text());
$("#dialog").dialog('open').data("opener", this.id);
});
$("#dialog").dialog({
autoOpen: false,
modal: true,
buttons: {
Save: function() {
$('#' + $("#dialog").data("opener")).text($("#xxx").val());
$(this).dialog('close');
this.reset();
},
Storno: function() {
$(this).dialog('close');
this.reset();
}
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" rel="stylesheet" />
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<form id="dialog" title="text">
<input type="text" id="xxx" value="test">Some text</form>
<ul>
<li id="menu-item-1">one</li>
<li id="menu-item-2">two</li>
<li id="menu-item-3">three</li>
</ul>
I think you can easily achieve what you want to achieve by setting the input value with the jquery val() method on the input.
Here is what i mean
Change this
$('#xxx').attr("value", $(this).text());
to this
$('#xxx').val($(this).text());
And here is a working jsfiddle http://jsfiddle.net/gzx3z6e5/
I have tried to get a dialog (#dialog) stay inside a container div (#dialogContainer), i.e. I don't want it to be possible to drag the dialog outside the boundaries of the container div in the ui, but no success. I thought that the "appendTo" setting would fix this, but not. Any help is appreciated!
Here is an example that shows that it is indeed possible:
https://jqueryui.com/dialog
Code:
<div id="dialogContainer" style="width:600px;height:500px;border:1px solid blue;"></div>
<div id="dialog" title="Dialog Title">
This is dialog content.
</div>
<script type="text/javascript">
$(document).ready(function () {
$("#dialog").dialog({
position: {
my: 'left top',
at: 'left',
of: $('#dialogContainer')
},
draggable: true,
appendTo: "#dialogContainer",
modal:true
});
});
</script>
You can use the following code to restrict the dialog so it can't be dragged outside a container:
$("#dialog").dialog({
...
})
.parent().draggable({
containment: '#dialogContainer'
});
See here for a Fiddle.
I have the following html:
<ul id="sortable">
<li class="ui-state-default">1
<div class="dialog-modal" title="Animal Facts" style="display:none;">
<p>What is the fastest animal on Earth?</p>
</div>
</li>
<li class="ui-state-default">2
<div class="dialog-modal" title="Animal Facts" style="display:none;">
<p>What is the largest animal on Earth?</p>
</div></li>
and the following jQuery code:
$( ".dialog-modal" ).dialog({
autoOpen: false,
height: 300,
width: 350,
modal: true
});
$('.ui-state-default').click(function() {
$(this).find("div").dialog( "open" );
});
This does not open the modal dialog on click, what am I missing?
Thanks for the help.
This is a current behavior of the jQuery UI dialog.
When defined the jQuery UI dialog is created and appended to the body.
The workaround solution is to append the dialog to its original parent after the creation like:
$(function () {
$(".dialog-modal").each(function (index) {
var origContainer = $(this).parent();
$(this).dialog({
autoOpen: false,
height: 300,
width: 350,
modal: true,
create: function () {
$(this).closest('div.ui-dialog')
.click(function (e) {
e.stopPropagation();
});
}
}).parent().appendTo(origContainer);
});
$('.ui-state-default').click(function (event) {
$(this).find("div").find(".dialog-modal").dialog("open");
});
});
An important note: look at the create event defined; it's necessary because, the open dialog method executed on the .ui-state-default class elements click is triggered on every click inside the dialog! It's formally correct because now the dialog is contained inside its parent and the click is propagated to the parents with .ui-state-default class. With stopPropagation the problem is solved.
It's a bit hackish, but it works.
Working fiddle: http://jsfiddle.net/IrvinDominin/Avtg9/8/
With the future version of jQuery UI 1.10.0 will be added the option appendTo, to handle this situation without any workaround http://api.jqueryui.com/dialog/#option-appendTo
Okay, so I'm trying to display a dialog, and the contents of that dialog is from a partial view, _TestPartial.
Here is the partial view:
<%# Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl" %>
<div id="test" title="Basic dialog">
<p>This is just a test</p>
</div>
Now, if I put the test div in my .aspx that is displaying the dialog, it will show just fine. Or if I call the partial right from my page it will show 'This is just a test' just fine. I just have no idea how to make a jquery dialog display a partial. I've tried a few things, such as having my dialog call an Action, TestAction, which renders the _TestPartial, but that doesnt even work. I have a feeling I'm missing a key piece of code somewhere tho. Here is my dialog code(its called automatically based on a select list choice):
if ($('#SelectListID option:selected').text() == 'Test') {
$('#test').dialog({
width: 400,
resizable: false,
title: 'Test dialog',
open: function(event, ui) {
$(this).load("#Url.Action('TestAction')");
},
buttons: {
"Close": function (){
$(this).dialog("close");
}
}
});
}
I remember having a similar problem before. We added a dialog container and then loaded the partial view in an inner div.
<div id="dialogcontainer">
<div id="dialogcontent"></div>
</div>
$("#dialogcontainer").dialog({
width: 400,
resizable: false,
title: 'Test dialog',
open: function(event, ui) {
$("#dialogcontent").load("#Url.Action('TestAction')");
},
buttons: {
"Close": function (){
$(this).dialog("close");
}
}
});