DateTimePicker Bootstrap hiding input field on blur - javascript

So, I'm using this [Bootstrap DateTimePicker] plugin to allow the user to pick a date and time. The plugin works fine, except for one small problem, whenever the user clicks away or blurs the calendar box, the box itself and the input element disappear!
I have looked in the css and js files to find something that might lead me in the right path (focus, blur, etc), but I have not had any luck.
I would appreciate it if someone could point me in the right direction. Thank you!
This is the HTML creating the element:
<div id="eventstartdate" class="input-append date"><input type="text" data-format="dd/MM/yyyy hh:mm:ss" /><span class="add-on">
<i data-time-icon="icon-time" data-date-icon="icon-calendar"></i></span></div>
<script>
$(document).ready(function () {
$('#eventstartdate').datetimepicker({
language: 'en',
pick12HourFormat: true,
format: 'dd/MM/yyyy hh:mm:ss',
maskInput: true
});
});
</script>

I could not find the correct manner to do this, so for the moment being all I did was unbind the hiding of the div like this:
$('#eventstartdate').on('hide', function (e) { e.preventDefault(); });
This works until I find a better solution :/

Same thing happened to me and at last it turns out that , prototype.js was the culprit . The reason is that prototype has these methods called hide and show, that it attaches to every dom element and when bootstrap triggers methods with same name on its components(like dialog,dropdowns etc..), respective method of prototype acts on the dom element itself causing it to hide . As a workaround you can use below code after loading prototype.
if (Prototype.BrowserFeatures.ElementExtensions) {
var disablePrototypeJS = function (method, pluginsToDisable) {
var handler = function (event) {
event.target[method] = undefined;
setTimeout(function () {
delete event.target[method];
}, 0);
};
pluginsToDisable.each(function (plugin) {
jQuery(window).on(method + '.bs.' + plugin, handler);
});
},
pluginsToDisable = ['collapse', 'dropdown', 'modal', 'tooltip', 'popover', 'tab','datepicker'];
disablePrototypeJS('show', pluginsToDisable);
disablePrototypeJS('hide', pluginsToDisable); }

Related

Custom Summernote Button to create links with classes

So I'm thoroughly confused as how to make a custom SummerNote button which will allow me to either add classes to an already inserted HTML element (i.e. links) or even wrap selected text in something like:
<button class="btn btn-primary"> **selected text** </button>
From the Summernote Deep Dive it shows how to create a custom button that inserts static text and I understand how to implement it. However, I can't seem to figure out how to make it dynamic for whatever text is selected. I've tried replacing the 'text' part of the example after context.invoke call but it doesn't convert the text to html, it just prints it.
The need is for creating links as buttons. Ideally I'd wish to access the Insert Link dialog already built into SummerNote to make buttons that will insert links with predefined classes but I'm not sure how complicated that would be.
Does anyone have any suggestions?
var bsButton = function (context) {
var ui = $.summernote.ui;
// create button
var button = ui.button({
contents: 'Btn',
tooltip: 'Create Button',
click: function () {
// invoke insertText method with 'hello' on editor module.
context.invoke('editor.insertText', '<button class="btn btn-primary"></button>');
}
});
return button.render(); // return button as jquery object
}
I've reviewed a ton of different posts but I haven't gotten much further than the example for what I'm trying to accomplish. Thanks in advance to anyone who takes the time to help.
As I was doing more research I stumbled upon Summernote's 'Awesome Summernote' GitHub page which led me to a plugin, summernote-addclass. While this doesn't necessarily answer the heart of the question (i.e. achieving this same thing without a plugin) but it does exactly what I need to do. Maybe this will help someone else in the future. Enjoy!
By using jQuery in summernote callback method onInit I have added custom class for custom button
Here is my custom button code:
var AddPage = function(context) {
var ui = $.summernote.ui;
var button = ui.button({
contents: '<i class="fa fa-plus"/> Add Page',
tooltip: "Set a New Page",
class: "btn-primary",
click: function() {
addPage();
}
});
return button.render();
};
And i use callback methods to add custom class btn-primary to the button
$("#editor").summernote({
airMode: false,
dialogsInBody: false,
toolbar: [["mybutton", ["customButton"]],
buttons: {
customButton: AddPage
},
callbacks: {
onInit: function(e) {
var o = e.toolbar[0];
jQuery(o)
.find("button:first")
.addClass("btn-primary");
}
}
});
});
I think this may be helpful for anyone, even if this is not gud answer.

manual click event only triggers on second click

I build a small color-picker module. But it only opens up (and then works) when pickColor is called a second time. I also tried to wrap the _openColorPicker into a setTimeout but that didn't work either. In fact, the color-picker didn't show up at all when I did that.
What I found interesting is that the binding to the change event works, so the $ selector must have found the element already.
So I have two questions:
1) why is the picker only showing after the second call to _openColorPicker?
2) why didn't the picker open at all when I wrapper the _openColorPicker call in a setTimeout?
Edit: The _openColorPicker functions gets executed after the user has right-clicked into the document and then clicked on context-menu which is now showing.
Complete Code:
const ColorUtils = {
_initialized: false,
_openColorPicker: function () {
$('#color-picker').click();
},
pickColor: function (onChangeCallback, context) {
if (!this._initialized) {
$('<input/>').attr({
type: 'color',
id: 'color-picker',
display: 'hidden',
value: '#ffffff'
}).appendTo('#centralRow');
this._initialized = true;
$('#color-picker').on('change', onChangeCallback.bind(context));
}
this._openColorPicker();
// version with timeOut
const scope = this;
setTimeout(function () {
scope._openColorPicker();
}, 1000);
}
};
export default ColorUtils;
Above code is used like ColorUtils.pickColor(onColorPicked, this);
Check out this post. Looks like you can't trigger a click on an invisible color picker. That answer suggests giving the element an absolute position and placing it off screen, like so:
position:absolute;
left:-9999px;
top:-9999px;
I tried to replicate your case (for what I understood) : JSFIddle
I made some changes.
I moved the $('<input/>') in a property of the object ColorUtils and appended it to the DOM with absolute position and outside the screen.
(And also commented display:'hidden' because it's either display:none or visibility:hidden and as a CSS property, not Html attribute)
On right clic on the document I instantiate the picker (and register the callback + context) then add a button to the DOM to trigger the picker again.
Does it fulfill your requirements ?

Jssor list-slider and X-Editable

I have a Jssor list slider and I would like to make the thumbnail text editable in place with X-Editable:
example
Both functions work on the page together with separate elements, but I cannot find a way of causing the link text to become editable.
There are no errors, the text element simply does not show the pop-up editable box.
I presume this is because the class="t" declaration informs Jssor to control the thumb div interfering with X-editable's attempt to do the same.
X-Editable requires that the editable text be wrapped in an element:
superuser
But this seems to be interfered with by Jssor.
Can anyone point me in the right direction?
------------------UPDATED in response to answer------------------
Thanks for taking the time to help me out :)
I was unable to change the default behaviour from on click to onmousedown in the x-editable library, but I did find a work around to allow activation of the editable element with the click of another element external to the slider container.
In the body:
$(document).ready(function() {
$.fn.editable.defaults.mode = 'popup';
$('#doit').click(function(e){
e.stopPropagation();
$('#username').editable({
send: 'never',
title: 'Enter text',
placement: 'right',
toggle: 'manual',
display: function(value) {
$('#username').text(value);
}
});
$('#username').editable('toggle');
});
});
...and the elements:
<span id="username" data-type="text" data-pk="1" data-url="/post" data-title="Enter username">superuser</span>
<a id="doit" href="#">testlink</a>
If the span is outside of the slider container clicking the testlink functions as expected and opens the pop-up editor input field, but once it is placed inside the slider:
<div class="t">
<span id="username" data-type="text" data-pk="1" data-url="/post" data-title="Enter username">superuser</span>
</div>
...there is no response.
I looked for the function you highlighted and think I found the one you meant, 'ContentClickEventHandler', but clearing this function did not solve the problem.
Thanks again for you help, and for releasing this wonderful product to the likes of me :D
Please try the following 3 approaches.
I guess X-Editable detects click event to make an element editable. If you can revise the library, please change the event from click to mousedown.
Not sure it would work or not, please have a good try.
Add nodrag="true" for the link element.
Open jssor.slider.js, replace
function SlidesClickEventHandler(event) {
if (_LastDragSucceded) {
$Jssor$.$StopEvent(event);
var checkElement = $Jssor$.$EventSrc(event);
while (checkElement && _SlidesContainer !== checkElement) {
if (checkElement.tagName == "A") {
$Jssor$.$CancelEvent(event);
}
try {
checkElement = checkElement.parentNode;
} catch (e) {
// Firefox sometimes fires events for XUL elements, which throws
// a "permission denied" error. so this is not a child.
break;
}
}
}
}
with
function SlidesClickEventHandler(event) {
}

How to use the UndoManager to determine if document has unsaved changes

I'm quite new to the ACE editor and javascript in general however I have managed to achieve most of what I intended apart from the following:
I would like to enable or disable a 'save' button depending on whether there are outstanding modifications to the document and I have attempted to do this with 'change' event:
UndoManager.reset();
$('#save').addClass("disabled");
editor.on('change', function() {
if (UndoManager.hasUndo()) {
$('#save').removeClass("disabled");
}
else {
$('#save').addClass("disabled");
}
});
On loading a document the 'disabled' class is removed immediately.
Many thanks in advance if anyone can show me how it should be done.
Call editor.session.getUndoManager().reset() after loading the document
and use isClean, markClean methods on undoManager.
var saveButton = document.getElementById("save")
var editor = ace.edit("editor")
// using input event instead of change since it's called with some timeout
editor.on("input", function() {
saveButton.disabled = editor.session.getUndoManager().isClean()
});
saveButton.addEventListener("click", function() {
editor.session.getUndoManager().markClean()
saveButton.disabled = editor.session.getUndoManager().isClean()
})
<script src="http://ajaxorg.github.io/ace-builds/src/ace.js"></script>
<button id="save">save</button>
<div id="editor" style="height:200px"></div>
Your solution has a disadvantage: after saving, you are not able to undo. Most modern editors allow undo after saving.
I suggest that you record down the original text and do a comparision whenever text changes. if text equals origin, disable save button.

JQuery Multi File event not firing

I have the following code in aspx
<input id="fileControl" type="file" class="multi" name="fileControl"/>
and
$(document).ready(function () {
var fileSelections = [];
$('#fileControl').MultiFile({
onFileAppend: function () {
//$('#F9-Log').append('<li>onFileAppend - '+value+'</li>')
fileSelections.push(value);
},
onFileSelect: function () {
fileSelections.push();
},
afterFileSelect: function () {
fileSelections.push();
},
afterFileAppend: function () {
fileSelections.push();
}
});
});
I have added the following files as part of jQuery multifile plugin
jquery.MetaData.js
jquery.MultiFile.js
jquery.MultiFile.pack.js
But when I add or remove a file the events are not fired. Why is this?
I ran into this same issue and the problem is that if you want to subscribe to events, you can't set the class in the input element.
So, your input element should look like this:
<input id="fileControl" type="file" name="fileControl"/>
Then it should work.
I imagine this isn't an issue for you anymore, but in case this is ever needed by anyone else.
Just seen this.... have updated the documentation accordingly
http://www.fyneworks.com/jquery/multiple-file-upload/
I can hardly find the time to keep the docs up to date, but this is a huge issue (the reason behind most support queries I receive) so thanks for pointing it out!

Categories