I have a ajax function witch gets triggered by the .on function of jquery it looks like this:
//button handler
$('body').on('click', '#btn', function() {
ajaxloader(this);
});
Now if I have a button and I give it the btn id it works all fine. How to do the same with the enter key-event. My pseudo code:
//key handler
$('body').on('onkeyup:13', '.enter', function() {
ajaxloader(this);
});
I want to use it in the same context of the .on function but if this is not possible an other way will only work when I can pas the this variable form the element with the .enter class.
$('body').on('keyup', '.enter', function(e) {
if(e.keyCode === 13) {
ajaxloader(this);
}
});
I hope this will help.
$('#searchbox input').bind('keypress', function(e) {
var code = (e.keyCode ? e.keyCode : e.which);
if(code == 13) { //Enter keycode
//Do something
}
});
not sure if this is what you want..
$('body').on('keyup', '.enter', function(event) {
if (event.keyCode == '13') { /// check if the keypressed is enter.. if yes...
//do your stuff
}
});
with some inspiration of #Jashwant I found how to do it. I use this to get all the attributes of the button witch is clicked but when using enter it does not know witch element it needs so I now appoint an element manually like this:
$('body').on('keyup', function(e) {
if(e.keyCode === 13){
ajaxloader($('.enter'));
}
});
Related
I have a div that i want to screenshot and save,
here is my code
function _download(uri, filename)
{
var el = $('.sf-download-button');
if (el.length)
{
var link = document.createElement('a');
if (typeof link.download === 'string')
{
link.href = uri;
link.download = filename;
document.body.appendChild(link);
//simulate click // this causes page to download an empty html file not sure why
link.click();
//remove the link when done
document.body.removeChild(link);
}
else
{
window.open(uri);
}
}
}
function _save()
{
window.takeScreenShot = function ()
{
var a =document.getElementById("my-div");
html2canvas(document.getElementById("the-div-that-i-want-to-screenshot"), {
onrendered: function (canvas)
{
document.body.appendChild(canvas);
a.append(canvas);
},
width: 220,
height: 310
});
};
$("#btnSave2").click(function ()
{
html2canvas(document.getElementById("data"), {
onrendered: function (canvas)
{
_download_card(canvas.toDataURL(), 'save.png');
}
});
});
}
This is the code i got it from web and added some of my own stuff.code was working i believe but right now, when I click on the button show me the image, it creates the image i can see it but it is just blank.
I tried every possible code combination from jsfiddle and all that and couldn't get anything different as a result.
What could be going wrong here?
I solved the problem by simply changing the browser,
It was not working with Chrome but works perfectly on Mozilla.
Also i changed the code to this,
$("#btnSave").click(function() {
html2canvas($("#card"), {
onrendered: function(canvas) {
theCanvas = canvas;
document.body.appendChild(canvas);
// Convert and download as image
$("#img-out").append(canvas);
// Clean up
//document.body.removeChild(canvas);
}
});
});
Works perfect on Mozilla only.
I have a wrapper around the Editor provided by Draft.js, and I would like to get the tab/shift-tab keys working like they should for the UL and OL. I have the following methods defined:
_onChange(editorState) {
this.setState({editorState});
if (this.props.onChange) {
this.props.onChange(
new CustomEvent('chimpeditor_update',
{
detail: stateToHTML(editorState.getCurrentContent())
})
);
}
}
_onTab(event) {
console.log('onTab');
this._onChange(RichUtils.onTab(event, this.state.editorState, 6));
}
Here I have a method, _onTab, which is connected to the Editor.onTab, where I call RichUtil.onTab(), which I assume returns the updated EditorState, which I then pass to a generic method that updates the EditorState and calls some callbacks. But, when I hit tab or shift-tab, nothing happens at all.
So this came up while implementing with React Hooks, and a google search had this answer as the #2 result.
I believe the code OP has is correct, and I was seeing "nothing happening" as well. The problem turned out to be not including the Draft.css styles.
import 'draft-js/dist/Draft.css'
import { Editor, RichUtils, getDefaultKeyBinding } from 'draft-js'
handleEditorChange = editorState => this.setState({ editorState })
handleKeyBindings = e => {
const { editorState } = this.state
if (e.keyCode === 9) {
const newEditorState = RichUtils.onTab(e, editorState, 6 /* maxDepth */)
if (newEditorState !== editorState) {
this.handleEditorChange(newEditorState)
}
return
}
return getDefaultKeyBinding(e)
}
render() {
return <Editor onTab={this.handleKeyBindings} />
}
The following example will inject \t into the current location, and update the state accordingly.
function custKeyBindingFn(event) {
if (event.keyCode === 9) {
let newContentState = Modifier.replaceText(
editorState.getCurrentContent(),
editorState.getSelection(),
'\t'
);
setEditorState(EditorState.push(editorState, newContentState, 'insert-characters'));
event.preventDefault(); // For good measure. (?)
return null;
}
return getDefaultKeyBinding(event);
}
i have simple dropdown, and i need to hide (fadeout) it by clicking on the document
this is my jquery code:
var expandCheckbox = $('.filterShow'),
formCheckbox = $('.checkboxWrap');
expandCheckbox.click(function(e) {
e.preventDefault();
if ($(this).hasClass('active')) {
$(this).removeClass('active');
$(formCheckbox).fadeOut(200);
} else {
$(this).addClass('active');
$(formCheckbox).fadeIn(100);
}
});
$('body').not('.filterShow, .checkboxWrap').click(function() {
$(formCheckbox).fadeOut(100);
});
SEE JSFIDDLE
Remove "e.preventDefault" which has no use here, add "return false" to prevent event propagation to its parent, use "document" instead of "body" as the selector for fading the dropdownlist upon clicking anywhere on the document.
$(document).ready(function(){
expandCheckbox = $('.filterShow'),
formCheckbox = $('.checkboxWrap');
expandCheckbox.click(function (e) {
if ($(this).hasClass('active')) {
$(this).removeClass('active');
formCheckbox.fadeOut(200);
} else {
$(this).addClass('active');
formCheckbox.fadeIn(100);
}
return false;
});
$(document).click(function (e) {
if (expandCheckbox.hasClass('active')) {
expandCheckbox.removeClass('active');
formCheckbox.fadeOut(200);
}
return false;
});
formCheckbox.find('input:checkbox').click(function (e) {
e.stopPropagation();
});
});
I use next script to focus on input when validation failes (in ASP .NET MVC)
$(function () {
$(".datepicker").datepicker();
var inp = $('.input-validation-error:first').get(0);
if (inp) {
inp.focus();
}
});
But when my input has datepicker it activated and hide error message.
So I need not to show datepicker when I focus on input with this script
Try putting the datepicker() call after you give it focus. Example:
$(function () {
var inp = $('.input-validation-error:first').get(0);
if (inp) {
inp.focus();
}
$(".datepicker").datepicker();
});
$(function () {
$(".datepicker").datepicker();
var inp = $('.input-validation-error:first').get(0);
if (inp) {
inp.focus();
inp.unbind().datepicker(); // this is works
}
});
Is it possible to set turn the default spell checker on by default. Without clicking the button in the toolbar each time?
I am using the default browser spell checker functionality in the browser.
setup: function (ed) {
ed.addCommand('mceSpellCheckRuntime', function() {
t = ed.plugins.spellchecker;
if (t.mceSpellCheckRuntimeTimer) {
window.clearTimeout(t.mceSpellCheckRuntimeTimer);
}
t.mceSpellCheckRuntimeTimer = window.setTimeout(function() {
t._done();
t._sendRPC('checkWords', [t.selectedLang, t._getWords()], function(r) {
if (r.length > 0) {
t.active = 1;
t._markWords(r);
ed.nodeChanged();
}
});
}, 3000); //3 seconds
});
ed.onInit.add(function(ed){
ed.pasteAsPlainText = true;
ed.execCommand('mceSpellCheckRuntime');
});
ed.onKeyUp.add(function(ed, e) {
ed.execCommand('mceSpellCheckRuntime');
});
},
Its quiet possible........:)
Try the below code.......
ed.onInit.add(function(ed, e) {
setTimeout(function () {
tinyMCE.activeEditor.controlManager.setActive('spellchecker', true); tinymce.execCommand('mceSpellCheck', true);
}, 1);
});
Nope, this is not possible due to the fact that there are so many possibilities of using a spellchecker in tinymce. The user may however define on which events the spellchecker should check (that's what you already did).
Working solution for TinyMCE 3
Create a helper function to improve UX:
function delay(fn, ms) {
let timer = 0
return function(...args) {
clearTimeout(timer)
timer = setTimeout(fn.bind(this, ...args), ms || 0)
}
}
Register a new command within TinyMCE Spell Checker plugin:
ed.addCommand('mceSpellCheckAuto', function() {
if (t.active) {
t._removeWords();
ed.nodeChanged();
t._sendRPC('checkWords', [t.selectedLang, t._getWords()], function(r) {
if (r.length > 0) {
t._markWords(r);
ed.nodeChanged();
}
});
}
});
Call your new command from a keyPress event:
ed.onKeyPress.add(delay(function() {
tinymce.execCommand('mceSpellCheckAuto', true);
}, 500));