Replace JQuery for contenteditable element event binding - javascript

I'm using JQuery in my project, and the only line it gets used is the following:
$('#div').on('input', function() { ... });
Is there a more lightweight lib/polyfill I can use instead, which allows to register an input event on a contenteditable div?

In pure javascript you can do something likes that :
document
.getElementsByTagName("div")
.addEventListener('input', function() { ... }));
And add this html attribute contenteditable="true" on your div.

Related

trigger click event of the span tag using Javascript

I'm trying to trigger click event on tag inside the div tag.here is my code
$(document).ready(function () {
$("#span").on('click',function(e){
console.log("clicked in link");
});
});
and here is the html structure (this is a PDF-tron Pdf viewer)
but , it doesn't work. How could I trigger the click event using pure Java script?
Thank you.
The issue is that span is a tag name, not an ID, so instead of $("#span") you should do $("span"), but be careful, there might be other span elements there as well.
"How could I trigger the click event using pure Java script?"
The trick for PDFTron WebViewer is that it reners the document in an iFrame.
So, to access the iframe DOM element, you can do this in the WebViewer constructor, for example:
Webviewer(
{
/// ...
},
document.getElementById('viewer')
).then((instance) => {
instance.iframeWindow.document.querySelector('put_your_selector_here').addEventListener('click', () => {
console.log('clicked');
});
});
Use jQuery.click:
$("span.link").click()
#Spectric has half of the answer really
$("span.link").click()
will click on the span but you incorrectly set the click function
$("#span").on('click',function(e){
the # is for ids not for all elements. So it should be changed to
$("span").on('click',function(e){
or better yet to be more specific like #Spectric said
$("span.link").on('click',function(e){

how to replace element contents with new html without loosing javascript function?

I'm trying to do is replace the contents of $('#product_blocks') with new html while preserving the jQuery listeners events on a similar element id.
var thenewhtml= '<div id="clickme">hello this text will be replace on click</div>';
$('#product_blocks').html(thenewhtml);
the jquery event:
$( "#clickme" ).click(function() {
$("#clickme").html("yayImChanged");
});
BUT my problem is once I replace #products_block with new html, $("#clickme" ) does not work.. does not carry forward to new html... This is what I'm looking to solve.
You can use jQuery .on() method signature for defining event handlers e.g.
$(document).on('click', '#userclickedhere', yourClickHandlerFunction);
jQuery .on() doc
Updated Answer:
It will still work.
$(document).on('click', '#clickme', function(e) {
$(this).html("yayImChanged");
});
Here is a CodePen demo
Because the page structure looks the same - it's only the content of the span that's been changed - you can select the new content of the span, and replace the old span's content with it:
const $userclickedhere = $('#userclickedhere');
$userclickedhere.on('click', () => console.log('click'));
const thenewhtml = `<span id="userclickedhere">new data</span>`
const newSpanContent = $(thenewhtml).text();
$userclickedhere.text(newSpanContent);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="product_blocks"> <span id="userclickedhere">click me</span> </div>
This will preserve any listeners on #userclickedhere.
(of course, you also need to use .html on jQuery collections to set their HTML - .innerHTML is a method on native DOM elements, which are not the same thing)
You can use DOMSubtreeModified:
const newHtml = '<div id="clickme">hello this text will be replace on click</div>';
const attachEventClickHandler = () => $('#clickme').one('click', () => {
console.log('Clicked...');
$('#product_blocks').html(newHtml);
$('#clickme').on('click', () => {
console.log('yayImChanged...');
$('#clickme').html('yayImChanged');
});
});
$('#product_blocks').one('DOMSubtreeModified', () => attachEventClickHandler());
attachEventClickHandler();
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="product_blocks"> <span id="clickme">click me</span> </div>
When jQuery registers an event, it looks for that selector in DOM. it will only register events for only available DOM elements.
Here, you are adding thenewhtml later the jQuery registered the events.
Hence, you have to register click event on #clickme again once after you replace the HTML. just after the line: $('#product_blocks').html(thenewhtml);
This is the flow of jQuery click event on particular selector.
But, there's also an another way to register events on those html elements which do not exist in DOM when page load.
i.e. $(document).on() method.
here you can do it both the ways.
1. define click event after replacing html in #product_blocks.
2. define click event using $(document).on() anywhere.
$(document).on('click','#clickme',function() {
/* your code here */
});
or
$('#product_blocks').html(thenewhtml);
$('#clickme').click(function() {
$(this).html("yayImChanged");
});

Set a JavaScript ondblclick event to a class inside tinyMCE editor

Some words in my tinyMCE textarea editor are in a span tag with a specific class called "myclass". For instance, the word Hello that is visible in the tinyMCE textarea editor is in the source code with the following HTML code:
<span class="myclass" id="hello">Hello</span>
I try to launch a function on double click on the word Hello.
The usual jQuery code does not work for words inside the tinyMCE editor:
$(document).ready(function() {
$('.myclass').dblclick(function() {
alert('class found');
});
});
The function does not fire when I double click on the word Hello that is in the editor.
How can I bind the function to the tinyMCE editor?
TinyMCE uses an iframe element, so you cannot use $('.myclass') on your "main" scope in order to get elements inside that iframe (The content of the iframe is a different scope).
Instead - you need to run $('.myclass').dblclick in the scope of that iframe.
To do so you can use the setup callback and the editor.on("init" event that TinyMCE gives you:
tinymce.init({
selector:'textarea',
setup: function(editor) {
editor.on("init", function(){
editor.$('p').on('dblclick', function() {
alert('double clicked');
});
});
}
});
Live demo here.
Note that editor.$ is not a jQuery object, so you cannot do everything you are used to with jQuery, however it's pretty close.

How can I listen for an element being inserted into the DOM with jQuery without using custom triggers?

I want to listen for another piece of code that inserts some html into the page. I don't control that code, so I can't do .trigger('custom_event') and $(document).on('custom_event')
Additionally, the inserted div that I want to listen for is nested inside of the inserted html.
Here's what I have right now:
$(document).on('DOMNodeInsertedIntoDocument', "#inserted", function () {
console.log("Inserted into document:", $(this));
});
$(document).ready(function () {
var new_node = $('<div><div id="inserted">New Div</div></div>');
$("body").append(new_node);
});
http://jsfiddle.net/AeHxQ/5/
Why doesn't the event get triggered?
You can use CSS animations with a little JavaScript, to detect when an element has been added to the DOM. The technique is explained here: http://davidwalsh.name/detect-node-insertion

getting contents with tinyMCE?

I have a tinyMCE textarea #frmbody and am using the jquery instance of it.
<textarea class="tinymce" name="frmbody" id="frmbody" cols="30" rows="20"></textarea>
I'm trying to get the contents of the textarea as the user types.
$("#frmbody").live('keyup', function(e) {
alert("keyup");
});
The code above is not working and I'm not sure why. If I remove the tinyMCE instance, the code above works fine. Any ideas?
That's because an instance of TinyMCE isn't a true textarea, so keyup events aren't detected. Try the onchange callback instead.
You can make tinyMCE own listener by:
http://www.tinymce.com/wiki.php/API3:event.tinymce.Editor.onKeyUp
or write your own and use built-in function getContent:
http://www.tinymce.com/wiki.php/API3:method.tinymce.Editor.getContent
One could just grab the contents of the editor using :
tinymce.activeEditor.getContent();
If you want to attach an onchange event, according to this page, http://www.tinymce.com/wiki.php/api4:class.tinymce.Editor, create the editor using the following code :
var ed = new tinymce.Editor('textarea_id', {
init_setting_item: 1,
...
}, tinymce.EditorManager);
ed.on('change', function(e) {
var content = ed.getContent();
$("#textarea_id").val(content); // update the original textarea with the content
console.log(content);
});
ed.render();
Please note that onchange is fire when the user unfocuses, press enter, or press a toolbar button instead of every keystroke.
It is very easy to write an own handler and assign it to the editor iframe document.
There are tinymce handlers for various events already defined like keyUp
Here is the standard way to assign an own handler to the editor iframe document
var my_handler = function(event) {
alert('my handler fired!');
};
var ed = tinymce.get('my_editor_id');
$(ed.getDoc()).bind('keyup', my_handler);
TinyMCE hides the Text Area and creates a html container. If you write content in the box its a iFrame with the name "TEXTAREANAME_ifr".
So try this:
$("#frmbody_ifr").live('keyup', function(e) {
alert("keyup");
});
I think as Thariama already said the EventHandler from TinyMCE would be the best way.

Categories