Coffeescript: How to retrieve element content after it has changed - coffeescript

This is probably a fairly rudimentary Coffeescript question: I want to retrieve the content of a textbox element AFTER is has changed. I have tried the following:
$("#notes").change (e) ->
alert("Note content changed. Is now " + $("#notes").text())
where "notes" is the ID of a textbox.
This does not work. It always displays the original content of the "notes" textbox. I suspect it is because the coffeescript is being compiled to javascript at load time.
Is what I want to do possible with Coffeescript? If so, please show me.
Thanks.

You read value from textarea in wrong way.
Without jQuery:
$("#notes").change (e) ->
alert("Note content changed. Is now #{ e.currentTarget.value }")
https://jsfiddle.net/sr3tkaw7/3/
With jQuery:
$("#notes").change (e) ->
alert("Note content changed. Is now #{ $(e.currentTarget).val() }")
https://jsfiddle.net/sr3tkaw7/4/

Related

How to update content of an existing jodit editor in a function

i use jodit in my website and wonder, how the content of an existing jodit editor can be updated within a function.
first i do....
$( document ).ready(function() {
var editor_adressblock = new Jodit('#adressblock', {
fullsize: false
});
});
and the editor is correctly created.
I have a function, which can be executed by the user and then should load content (via json-request) and then put the content into the existing jodit textarea.
Here is my try (for this example i have simplified the function) :
function takeover_adressblock(kunde_id, kunden_adresse_id) {
// get data by ajax.... not shown in this example
var data_by_ajax="test";
editor_adressblock.value=data_by_ajax; // this fails....
}
Means, i don't know how i can send data to the existing jodit texteditor...
I am a jquery beginner, so please don't be too hard ;-)
Best regards
Daniel
Per the documentation you seem to have the right format, so it would help to see the code for the ajax request you're making in case the issue is there.
Otherwise, I would suggest initializing the editor without jQuery in case it's a reference or scoping issue:
const editor = Jodit.make('#editor');
editor.value = '<p>start</p>';

MS Word, IF field code with dropdown box

I'm trying to get the IF field code to work based on a selection in a drop-down box in a document.
The simplified version looks like this..
No. of people: (drop-down box)
one
There { if "{ REF Dropdown1 }" = "one" "is one person" "are many people" }
in the drop down box, the choices are "one" or "many"
For some reason, the situation above returns "There are many people" even though my selection is "one". { REF Dropdown1 } returns "one"
Did I miss something?
Some possibilities (I'm assuming that "Calculate on exit" is checked for the dropdown, which seems to be confirmed by the value you are seeing for { REF Dropdown }
You haven't used the special field code braces on the nested field
(i.e. the { REF Dropdown1 } inside the { IF } field. i.e. you need
the sort you can insert using ctrl-F9 on Windows.
The bookmark "Dropdown1" has been modified so it covers a bit more
than the dropdown. That does seem to be possible in some
circumstances, although I generally find that the bookmark is
correctly re-applied if you go into the field properties dialog box,
re-enter the bookmark name and click OK. If you use something like
a{ REF Dropdown1 }b
you may be able to see any extra characters that are "covered" by
the bookmark. The syntax in the IF field isn't quite what you have
posted, e.g. there is a space before the inner "{" or some such.

silverstripe backend linebreaks in content do not show up in frontend

I have a textareaField in Silverstripe Backend in Edit Page View... The text to insert contains linebreaks. If I save the Page the text shows correctly with linebreaks in the textareaField. The linebreaks are for sure saved correctly to the database. But how do I display the text correctly in the frontend? It´s always outputted without linebreaks in a single line.
I tried already $Text.RAW, $Text.XML,... nothing works.
Thanks for the help,
Kind regards,
Florian
Assuming that you are using 3.0 this is a bug. You can see it here http://open.silverstripe.org/ticket/7596
A work around is to write your own function calling nl2br on your text field.
Here is an example:
public function NiceDescription () {
return (nl2br (Convert::raw2xml ($this->Description), true));
}
You can replace "Description" with the name of your text property.
Then in your template file if you need to display the description field you will call the function:
$NiceDescription
to visually render the newlines in html, you need to convert them to <BR> tags.
see http://php.net/manual/de/function.nl2br.php

Value of textbox when using Google Closure AutoCompleteBasic is incomplete

I use Google Closure's AutoCompleteBasic for some text boxes I have on the form. When the user fills in the text box after typing a key or two and then using arrow keys to pick one of the suggestions of the autocomplete, the value of the textbox just seems to be whatever keys the user typed in though the form renders the full text of the autocomplete word in the textbox. I use document.getElementById(id_of_textbox).value to get the value
Is this expected behavior of autocomplete and textbox interaction?
How can I get the full complete string instead of just the first few keystrokes? Or is there some other way to read the value?
I haven't looked into using AutoCompleteBasic, but here's some code that might help:
example.setupSearchListener = function(){
var searchbox = goog.dom.getElement('your-textbox');
var delay = new goog.async.Delay(function(){example.handleSearch();}, 500);
goog.events.listen(searchbox, goog.events.EventType.KEYUP, function(){
delay.start();
});
};
This will wait until the user stops typing, and then call example.handleSearch() to do whatever.

Test to see if you are in a specific content block in TinyMCE and not allow a plugin to add to that content block if in it

So I have a TinyMCE form on my page and it is pre-filled with "sections" (divs with specific class names).
I have a couple of plugins that will add to TinyMCE with more "sections".
I need it so when I push the plugin button it will test to make sure the cursor is not inside a "section" and paste a "section" inside another "section".
Not sure the direction I need to take to accomplish this. Any help would be great.
more info:
So below is an example of a plugin that adds a button that just inserts a simple dov into the editor at the selection/cursor.
ed.addButton('pluginbutton', {
title : 'MyPlugin',
image : 'img/test.png',
onclick : function() {
ed.selection.setContent('<div>test</div>');
}
});
I am currently thinking that onBeforeSetContent is the API event handler I need to set to process whether or not I am in another section and if so send a message to the screen. If not just do the setContent method. I am not sure exactly how to set that up though so I am still figuring that out. Any help here?
Since it seems like you have control over the plugin, here is how I would edit it to work.
Note: I am using the jQuery method closest. I figured since you are on the jQuery core team, you are probably using it for this project. If not, just refactor that line as needed. The important part is that selection.getNode() returns the DOM element that is the parent of both the start and end selection points.:
ed.addButton('pluginbutton', {
title : 'MyPlugin',
image : 'img/test.png',
onclick : function() {
if( !$(ed.selection.getNode()).closest('div.section').length ){
ed.selection.setContent('<div class="section">test</div>');
}
}
});
Additional thoughts
Also, to make your plugin aware enough so it won't put a div as the child of a p tag, you could do something like this:
Replace onclick above with this:
onclick: function(){
var $node = $(ed.selection.getNode());
if( !$node.closest('div.section').length ){
// Get highest element that is a direct child of the `body` tag:
var $parent = $node.closest('body > *');
// Wrap with our special section div
if($parent.length) $parent.wrap('<div class="section"></div>');
}
}
I don't know TinyMCE specifically, but it should be possible to extract the current DOM element from ed.selection. If that is possible (I'm sure it is using some sort of getter function or property), you should be able to do the following:
Mark a "forbidden" area using an id or class ("<div class='protected'> ")
traverse through the selection's ancestry (using the parentNode property of the element) and check whether one of the parent elements has the "protected" class or ID.
If the ID was found, do not execute setContent(); otherwise execute it.