I have a dojo Enhanced Grid and I'm using formatter to display a button in one of the columns
{field: '_item', name: 'Update Data', formatter: dojo.hitch(context, this.getUpdateData), width: '165px' },
getUpdateData: function(rowItem) {
var button = new dijit.form.Button({
label: '<img src="/public/img/icon_texteditor.png" height="19px" width="19px"/>',
onClick: function(){
alert('hi');
}
});
return button;
}
This works well. The button is correctly rendered and when I click on it, it correctly shows the alert dialog. What I'd like to do is show some text/label and then the button in the grid cell. I've tried creating a div in the formatter and tried adding the button to the div:
getUpdateData: function(rowItem) {
var divNode = dojo.create("div", { innerHTML: rowItem.someText });
var button = new dijit.form.Button({
label: '<img src="/public/img/icon_texteditor.png" height="19px" width="19px"/>',
onClick: function(){
alert('hi');
}
});
button.placeAt(divNode);
return divNode.innerHTML;
}
Even though it renders it correctly (where the text is shown before the button in the table) , when I click on the button nothing happens. The onClick event handler is not called.
My question is: how can show the some text+ a button in a grid cell.
This worked for me:
getUpdateData: function(rowItem) {
var cpane = new dojox.layout.ContentPane (
content: rowItem.someText;
});
var button = new dijit.form.Button({
label: '<img src="/public/img/icon_texteditor.png" height="19px" width="19px"/>',
onClick: function(){
alert('hi');
}
});
button.placeAt (cpane);
return cpane;
}
Related
How do I attach a handler to the navigation buttons in FullCalendar v4? There is nothing specified in the official documentation.
One way to get what you need is to hide the default prev and next buttons and replace with your own custom buttons, for which there are click callbacks.
Please see https://codepen.io/ormasoftchile/pen/NVJeez for a working example.
customButtons: {
customprev: {
text: '<',
click: function() {
alert('clicked custom button 1!');
calendar.prev();
}
},
customnext: {
text: '>',
click: function() {
alert('clicked custom button 2!');
calendar.next();
}
}
}
Regards, Cristian
The only build-in method is the events: fn () callback. From the docs
FullCalendar will call this function whenever it needs new event data.
This is triggered when the user clicks prev/next or switches views.
document.addEventListener('DOMContentLoaded', function() {
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
plugins: [ 'dayGrid' ],
defaultView: 'dayGridMonth',
events: function (info) {
console.log(info);
}
});
calendar.render();
});
I've created an angular directive for a tinyMce where on setup I add 2 handlers: for a blur event to hide a toolbar and for a click event to show it. Also I've created another directive where I have a textarea and a button. On button click I want a toolbar disappear and some action occur.
<body ng-app="MyApp">
<div ng-controller="MyCntrl">
<my-directive></my-directive>
</div>
<script>
var app = angular.module("MyApp", []);
app.controller("MyCntrl", function ($scope) {
}).directive("myDirective", function ( $compile) {
return {
restrict: 'E',
link: function (scope, elem) {
scope.click = function () {
console.log("click");
};
},
template: "<textarea data-tm ></textarea><button ng-click='click()' style='width:200px; height: 74px;' id='btn'>click</button>"
}
}).directive("tm", function ($timeout) {
return {
restrict: 'A',
link: function (scope, element) {
$timeout(function() {
tinymce.init({
mode: 'textareas',
setup: function (ed) {
ed.on('blur', function (e) {
ed.theme.panel.find("toolbar").hide();
console.log("blur");
});
ed.on('click', function (e) {
ed.theme.panel.find("toolbar").show();
});
}
});
});
}
}
});
</script>
Link to the code
If I click inside of a textarea and then on a button the following happens:
when the button's height is relatively small, for example 20px, only blur event occurs, but when the height is relatively big let's say 120px both blur and click events occur.
Could you tell me why is that? My guess is that in the first case the button is overlapped by something but I cannot find but what.
Thanks
Update: It seems like a problem with tinyMCE. I've remove angular and created just a tinyMce editor and a button underneath. The same problem: doesn't work when a button is too small and works either if a button is enough big or placed above the editor.
<script type="text/javascript">
tinymce.init({
mode: 'textareas',
setup: function (ed) {
ed.on('blur', function (e) {
ed.theme.panel.find("toolbar").hide();
console.log("blur");
});
ed.on('click', function (e) {
ed.theme.panel.find("toolbar").show();
});
}
});
function myFunction() {
console.log("click");
}
</script>
<textarea></textarea>
<button onclick="myFunction()" style="height:100px;">click</button>
Plunker
Try setting a little timeout, so the button will stay in it's position during the click event:
$timeout(function() { ed.theme.panel.find("toolbar").hide() }, 100);
See this plunker
When we click on the button a toolbar becomes hidden and the button moves up so when the mouse released it's not over the same object. Mousedown event could be used to solve the problem.
How do I implement this code from qTip for my fullcalendar Events? This is a modal feature of the qTip plugin and I wish to display this modal whenever I click an event in the calendar.
Here is the link for the tutorial:
http://craigsworks.com/projects/qtip/demos/effects/modal#
Here's an example on how to create the qtip when an event gets clicked. For perfomance reasons, the modal is created onclick for the specified event, not onpageload for all events.
$(document).ready(function() {
// watch for click on the event elements
$(document).on('click', '.fc-event', function(){
// qtip already is created for this event -> leave this function -> the modal gets opened
if($(this).data('qtip')) {
return;
}
// no qtip for this event created -> create it
$(this).qtip(
{
content: {
title: {
text: 'Modal qTip',
button: 'Close'
},
text: 'Heres an example of a rather bizarre use for qTip... a tooltip as a <b>modal dialog</b>! <br /><br />' +
'Much like the Boxy plugin, ' +
'but if you\'re already using tooltips on your page... <i>why not utilise qTip<i> as a modal dailog instead?'
},
position: {
target: $(document.body), // Position it via the document body...
corner: 'center' // ...at the center of the viewport
},
show: {
when: 'click', // Show it on click
solo: true // And hide all other tooltips
},
hide: false,
style: {
width: { max: 350 },
padding: '14px',
border: {
width: 9,
radius: 9,
color: '#666666'
},
name: 'light'
},
api: {
beforeShow: function()
{
// Fade in the modal "blanket" using the defined show speed
$('#qtip-blanket').fadeIn(this.options.show.effect.length);
},
beforeHide: function()
{
// Fade out the modal "blanket" using the defined hide speed
$('#qtip-blanket').fadeOut(this.options.hide.effect.length);
}
}
});
// show it after creation
$(this).qtip('toggle', true);
});
});
I have a problem with the jquery-ui pop up dialog.
if i close with default popup close button ok, but if i close with text link then pop up not close.
$(document).ready(function () {
$('a#popup').live('click', function (e) {
var page = $(this).attr("href")
var $dialog = $('<div></div>')
.html('<iframe style="border: 0px; " src="' + page + '" width="100%" height="100%"></iframe>')
.dialog({
autoOpen: false,
modal: true,
height: '500',
width: '85%',
title: "",
buttons: {
"Close": function () {
$dialog.dialog('close');
location.reload();
}
},
});
$dialog.dialog('open');
e.preventDefault();
});
});
$("#close").live("click", function (e) {
alert('hjhhh');
$dialog.dialog('close');
});
call from html
<a id="close" href="#">close popup</a>
thanks a lot before
$dialog is not on the $("#close") function scope.
Try to declare var $dialog under $(document).ready function out side of $('a#popup')
I have a TemplateField in a GridView in an UpdatePanel with a button called btnDelete. Rather than the standard OnClientClick="return confirm('Are you sure?')" I'd like to use jQuery Dialog.
So far, I'm able to set the jQuery using btnDelete.Attributes["onclick"] and setting the jQuery Dialog code in the code-behind. However, it posts back to the server in all cases before I have a chance to click "Confirm" or "Cancel".
Here is the HTML it produces:
<input type="submit" rel="Are you sure?" class="action-link delete" id="ctl00_c1_gvTransfers_ctl02_btnDelete" onclick="return function() {
$('#delete-transfer-confirm').dialog({
buttons: {
'Confirm' : function() { $(this).dialog('close'); return true; },
'Cancel' : function() { $(this).dialog('close'); return false; }
}
});
$('p.message').text($(this).attr('rel'));
$('#delete-transfer-confirm').dialog('open');
};" value="Delete" name="ctl00$c1$gvTransfers$ctl02$btnDelete">
What am I doing wrong that is causing this function not to block until either button is clicked?
Conversely, the standard confirm works just fine:
<input type="submit" class="action-link delete" id="ctl00_c1_gvTransfers_ctl02_btnDelete" onclick="try{if (!window.confirm('Are you sure?')){return false;};}catch(e1){alert("Unexpected Error:\n\n" + e1.toString());return false;};" value="Delete" name="ctl00$c1$gvTransfers$ctl02$btnDelete">
Thanks,
Mark
UPDATE:
Ultimately, I had to use UseSubmitBehavior="false" to get the name="" attribute to render. Then I had to override the OnClientClick, setting the value to "return;" so the default __doPostBack() doesn't get executed. Then I was able to wire up a .live() click handler, which invokes the __doPostBack() on Confirm:
$('input.delete').live('click', function(e) {
var btnDelete = $(this);
alert($(btnDelete).attr('name'));
e.preventDefault();
$('#delete-transfer-confirm').dialog({
buttons: {
'Confirm': function() {
$(this).dialog('close');
__doPostBack($(btnDelete).attr('name'), '');
return true;
},
'Cancel': function() {
$(this).dialog('close');
return false;
}
}
});
$('p.message').text($(this).attr('rel'));
$('#delete-transfer-confirm').dialog('open');
});
Check the selected answer for this question for an example: How to implement "confirmation" dialog in Jquery UI dialog?
A couple of notes:
Don't put your onclick functionality in an onclick attribute. One of the great benefits of jQuery is that it allows you to do Unobtrusive Javascript. Instead, do something like this:
$(function() {
$('.delete').click(function(e) {
e.preventDefault() //this will stop the automatic form submission
//your functionality here
});
});
Also, make sure that your dialog is instantiated outside the click event, so that it is initialized before the first click event happens. So, something like this would be your result:
$(function() {
$("#delete-transfer-confirm").dialog({
autoOpen: false,
modal: true
});
$('.delete').click(function(e) {
e.preventDefault();
$('#delete-transfer-confirm').dialog({
buttons: {
'Confirm': function() {
$(this).dialog('close');
return true;
},
'Cancel': function() {
$(this).dialog('close');
return false;
}
}
});
$('p.message').text($(this).attr('rel'));
$('#delete-transfer-confirm').dialog('open');
});
});
That should do the trick for you.
$(document).ready(function () {
$('#btnCancel').click(function (e) {
e.preventDefault();
$("<div><span><b>Are you sure you want to cancel this order?</b></span></div>").dialog({
modal: true,
draggable: false,
resizable: false,
width: 430,
height: 150,
buttons: {
"No": function () {
$(this).dialog("destroy");
},
"Yes": function () {
$("#btnCancel").unbind();
$(this).dialog("destroy");
document.getElementById('<%= btnCancel.ClientID %>').click();
}
}
});
});
});
Then in the Page Body
<asp:button id="btnCancel" runat="server" cssclass="button_major" text="Cancel" style="float: right"
onclick="btnCancel_ClickEvent" clientidmode="Static" />