How can one make dijit.Dialog to fade in a given time period? Is there any way define it?
I have created above dialog in a method. But I need to call the method frequently. So it will create multiple dialogs. So how to block(not to appear) other dialogs until visible dialog get faded?
<script>
// Require the Dialog class
dojo.require("dijit.Dialog");
// Create counter
var counter = 1;
// Create a new Dialog
function createDialog(first) {
// Create a new dialog
var dialog = new dijit.Dialog({
// Dialog title
title: "New Dialog " + counter,
// Create Dialog content
content: (!first ? "I am a dialog on top of other dialogs" : "I am the bottom dialog") + "<br /><br /><button onclick='createDialog();'>Create another dialog.</button>"
});
dialog.show();
counter++;
} </script> <button onclick="createDialog(true);">Create New Dialog</button>
Related
I have a mobiscroll list. I added an extra button called "Add new" I want to click that button and add a new item to the mobiscroll list.
Is that possible? I've been digging through that api to no avail. I can catch the event with a custom handler and I have the mobiscroll instance available there but no way to add to it.
If so, can I add that new item as custom html? I'm thinking an input so that the user can change that newly added item.
Thanks
The "pretty" way:
/*Create the new item*/
var newOption = document.createElement("option");
newOption.value = "My Value"
newOption.innerHTML = "My Text"
/*Append the new item*/
HTMLSelectControlID.appendChild(newOption)
/*Recreate the list*/
$("#HTMLSelectControlID").scroller('destroy').scroller($.extend(scrollerConfig["select"], { }));
The "dirty" way:
/*Inject the new item*/
HTMLSelectControlID.innerHTML += "<option value='My Value'>My Text</option>"
/*Recreate the list*/
$("#HTMLSelectControlID").scroller('destroy').scroller($.extend(scrollerConfig["select"], { }));
i am trying kendo kendoColorPicker.
with change Events.
when change color and click on apply button its work.(change the font color).
but i want to set if click on cancel button then set default font color.
any idea how its done.
this is simple try.
<div id="example" class="k-content">
<label for="hsv-picker">Font:</label>
<input type="color" id="picker" value="#000000" data-role="colorpicker">
<script>
kendo.init($("#example"));
$("#picker").each(function(){
var colorPicker = $(this).data("kendoColorPicker");
colorPicker.bind({
change: function(e) {
$("#example").css("color",e.value);
console.log("Change in picker #" + this.element.attr("id") + " :: " + e.value);
}
});
});
</script>
</div>
thanks in advance.
By default, the cancel button will revert the color to the previous value so I am not sure that it is necessary for you to control cancel button clicks. You could just set the initial value of the picker to your desired default value.
However, you'll want to use the close event. Here is an example.
$('#hsv-picker').kendoColorPicker({
select: function (e) {
log("Select in picker #" + this.element.attr("id") + " :: " + e.value);
},
change: function (e) {
log("Change in picker #" + this.element.attr("id") + " :: " + e.value);
},
open: function () {
log("Open in picker #" + this.element.attr("id"));
},
close: function (e) {
log("Close in picker #" + this.element.attr("id"));
}
});
Close fires any time the control was closed, regardless of whether change occurred or not. To capture only cancel clicks you'd have to either setup a delegate click event or use some flags between the open, change, and close events. Here's an example of handling the delegate click event.
$('body').on('click', '.k-controls button.cancel', function(){
alert('Cancel clicked');
});
Here's a fiddle.
I have customized grid control which generates table when we give coloumn and table name where there is a feature for searching also available which updates the record and show the updated result in grid while searching through ajax i am getting records updating but not showing in main page
SqlParameter[] sqlParameter = {new SqlParameter("#table",tabelName),
new SqlParameter("#Column1",coloumn1),
new SqlParameter ("#Column2",coloumn2),
new SqlParameter("#AliasName1",aliasName1),
new SqlParameter("#AliasName2",aliasName2)
};
string gridHtml;
if (!isFilterCondition)
{
gridHtml = GenerateHtmlGrid(sqlParameter);
}
else
{
gridHtml = GenerateHtmlGridonSearch();
}
StringBuilder sb = new StringBuilder();
//Opening For Main page Search Control
sb.AppendFormat("<table>");
sb.AppendFormat("<tr><td>");
sb.AppendFormat("<input id='txt_Search' type='text' name='txt_Search'>");
sb.AppendFormat("<input type='hidden' name='{0}' class='WorkItem'>", controlName);
sb.AppendFormat("</td><td>");
sb.AppendFormat("<a href='#' id='searchlink'><img src='../../Content/themes/base/images/16px-Searchtool_right.png' /></a>");
sb.AppendFormat("</td></tr></table>");
//Closing For Main page Search Control
// Opening for the Dialog Box Div
sb.AppendFormat("<div id='dialoggrid' title='{0}' >", popWindowTitle);
sb.AppendFormat("<table>");
sb.AppendFormat("<tr><td></td><td>");
sb.AppendFormat("<select name='foo' id='foo'>");
sb.AppendFormat("<option value=0>{0}</option>", aliasName1);
sb.AppendFormat("<option value=1>{0}</option>", aliasName2);
sb.AppendFormat("</select>");
sb.AppendFormat("</td></tr>");
sb.AppendFormat("<tr><td>");
sb.AppendFormat("<label>Search</label>");
sb.AppendFormat("</td><td>");
sb.AppendFormat("<input id='txtGridSearch' type='text' name='txtGridSearch'>");
//sb.AppendFormat("<a href='#' id='SearchTree'><img src='../../Content/themes/base/images/16px-Searchtool_right.png' /></a>");
sb.AppendFormat("</table>");
sb.AppendFormat("<div id='div_grid'>{0}</div>", gridHtml);
sb.AppendFormat("</div>");
// Closing for the Dialog Box Div
//opening For Script Section
sb.AppendFormat("<script type='text/javascript'>");
//Opening for Document Reddy
sb.AppendFormat("$(document).ready(function() {{ ");
sb.AppendFormat("$('#dialoggrid').dialog({{ autoOpen: false,modal: true,width: 350}});");
//Function For SearchButton on Main Page Click
sb.AppendFormat("$('#searchlink').click(function() {{");
sb.AppendFormat("$( '#dialoggrid').dialog('open');");
sb.AppendFormat("}});");
//Closing For SearchButton on Main Page Click
//opening For Textbox Search inside the Grid on Key Up Event
sb.AppendFormat("$('#txtGridSearch').keyup(function(){{");
sb.AppendFormat("$.post('/CustomeControls/GridSearch')");
sb.AppendFormat("}});");
//Closeing For Textbox Search inside the Grid on Key Up Event
sb.AppendFormat("}});");
//Closing For Document Reddy Function
sb.AppendFormat("</script>");
//Closing for Script Section
return new MvcHtmlString(sb.ToString());
}
I'm making a project where a whole div with buttons is being inserted dynamically when user click a button, and inside that div there's a button, which when the user click on it, it does something else, like alerting something for example.
The problem is when i press on that button in the dynamically added div, nothing happens. The event doesn't fire at all.
I tried to add that div inside the HTML and try again, the event worked. So i guess it's because the div is dynamically added.
The added div has a class mainTaskWrapper, and the button has a class checkButton.
The event is attached using .on() at the end of script.js file below.
Here's my code :
helper_main_task.js : (that's the object that adds the div, you don't have to read it, as i think it's all about that div being dynamically added, but i'll put it in case you needed to)
var MainUtil = {
tasksArr : [],
catArr : ["all"],
add : function(){
var MTLabel = $("#mainTaskInput").val(), //task label
MTCategory = $("#mainCatInput").val(), //task category
MTPriority = $("#prioritySlider").slider("value"), //task priority
MTContents = $('<div class="wholeTask">\
<div class="mainTaskWrapper clearfix">\
<div class="mainMarker"></div>\
<label class="mainTaskLabel"></label>\
<div class="holder"></div>\
<div class="subTrigger"></div>\
<div class="checkButton"></div>\
<div class="optTrigger"></div>\
<div class="addSubButton"></div>\
<div class="mainOptions">\
<ul>\
<li id="mainInfo">Details</li>\
<li id="mainEdit">Edit</li>\
<li id="mainDelete">Delete</li>\
</ul>\
</div>\
</div>\
</div>');
this.tasksArr.push(MTLabel);
//setting label
MTContents.find(".mainTaskLabel").text(MTLabel);
//setting category
if(MTCategory == ""){
MTCategory = "uncategorized";
}
MTContents.attr('data-cat', MTCategory);
if(this.catArr.indexOf(MTCategory) == -1){
this.catArr.push(MTCategory);
$("#categories ul").append("<li>" + MTCategory +"</li>");
}
$("#mainCatInput").autocomplete("option", "source",this.catArr);
//setting priority marker color
if(MTPriority == 2){
MTContents.find(".mainMarker").css("background-color", "red");
} else if(MTPriority == 1){
MTContents.find(".mainMarker").css("background-color", "black");
} else if(MTPriority == 0){
MTContents.find(".mainMarker").css("background-color", "blue");
}
MTContents.hide();
$("#tasksWrapper").prepend(MTContents);
MTContents.slideDown(100);
$("#tasksWrapper").sortable({
axis: "y",
scroll: "true",
scrollSpeed : 10,
scrollSensitivity: 10,
handle: $(".holder")
});
}
};
script.js : (the file where the .on() function resides at the bottom)
$(function(){
$("#addMain, #mainCatInput").on('click keypress', function(evt){
if(evt.type == "click" || evt.type =="keypress"){
if((evt.type =="click" && evt.target.id == "addMain") ||
(evt.which == 13 && evt.target.id=="mainCatInput")){
MainUtil.add();
}
}
});
//Here's the event i'm talking about :
$("div.mainTaskWrapper").on('click', '.checkButton' , function(){
alert("test text");
});
});
It does not look like div.mainTaskWrapper exist.
From the documentation (yes, it is actually bold):
Event handlers are bound only to the currently selected elements; they must exist on the page at the time your code makes the call to .on(). To ensure the elements are present and can be selected, perform event binding inside a document ready handler for elements that are in the HTML markup on the page.
[...]
By picking an element that is guaranteed to be present at the time the delegated event handler is attached, you can use delegated events to avoid the need to frequently attach and remove event handlers.
You might want to bind it to #tasksWrapper instead:
$("#tasksWrapper").on('click', '.checkButton' , function(){
alert("test text");
});
You need to specify a selector with on (as a parameter) to make it behave like the old delegate method. If you don't do that, the event will only be linked to the elements that currenly match div.mainTaskWrapper (which do not exists yet). You need to either re-assign the event after you added the new elements, or add the event to an element that already exists, like #tasksWrapper or the document itself.
See 'Direct and delegate events' on this page.
I know this is an old post but might be useful for anyone else who comes across...
You could try:
jQuery('body')on.('DOMNodeInserted', '#yourdynamicallyaddeddiv', function () {
//Your button click event
});
Here's a quick example - https://jsfiddle.net/8b0e2auu/
I'm building a simple dialog plugin to replace the default link tool. The design calls for a particular layout that is difficult to achieve with the CKEdit dialog definition: We want a single field to appear above the tab elements in the dialog (see illustration).
Can anyone suggest a way that this might be implemented? Thanks!
As far as I can tell it is not possible to achieve this using the built-in dialog definition.
I was able to get around this limitation by building my dialog plugin using the iframedialog plugin. This basically pops up a CKEditor dialog window and loads an external URL into it. You can do anything you want in that iframe, and then return the text to CKEditor when the user presses the OK button.
A simple example:
// plugins/iframelink/plugin.js
CKEDITOR.plugins.add('iframelink', {
requires: ['iframedialog'],
init: function(editor){
CKEDITOR.dialog.addIframe('iframelinkDialog',
// title
'Insert a Link',
// src
this.path + 'dialogs/link.html',
// minWidth
500,
// minHeight
250,
// onContentLoad
);
var cmd = editor.addCommand('iframelink', {exec: iframelinkOnclick});
editor.ui.addButton('iframelink', {
label: 'Insert a Link (Special Link Tool)',
command: 'iframelink',
icon: this.path + 'images/world_link.png'
});
}
});
function iframelinkOnclick(editor){
dialog = editor.openDialog('msiteslinkDialog');
};
// plugins/iframelink/dialogs/iframelink.js
$(function() {
if (typeof(window.parent.CKEDITOR) != 'undefined') {
CKEDITOR = window.parent.CKEDITOR;
var dialog = CKEDITOR.dialog.getCurrent();
var editor = dialog.getParentEditor();
// Get value of the selected text:
var selection = editor.getSelection().getSelectedText();
// Do something when the user presses the OK button:
var okListener = function(ev) {
link = yourFunctionToDoSomethingClever();
this._.editor.insertHtml(link);
dialog.removeListener("ok", okListener);
};
// Bind the OK button to your okListener method:
dialog.on("ok", okListener);
};
}
So you can make the dialog look any way you want: