Calling console.log(editor.state.doc) reveals:
TextLeaf {
text: ["Test Text"],
length: 9,
Symbol(Symbol.iterator): function
}
So the text or editors value is there, however if I call editor.state.doc.text = ["New Test Text"] I get missing text, so it doesn't seem to be the intended way to change it.
How do I actually do it?
Pseudo Code
editor.getDoc().setValue('New Test Text');
The necessary information can be found here: https://codemirror.net/examples/change/
Example:
editor.dispatch({
changes: {from: 0, to: editor.state.doc.length, insert: 'New Test Text'}
});
editor being a EditorView instance.
Related
I am trying to create multiple jBoxes using the data-attributes and I want to feed them with content from other elements.
I assumed this wouldn't be possible (out of the box), so I used a data-jbox-content-from attribute which is supposed to be point to the element with the content.
But I'm confused now: I know that I should be creating a single jBox only - but I do not see how that is doable when on the other hand I need distinct calls per element to provide the content?
And to confirm my uncertainty...the fiddle isn't working. So I hope someone will find a way to do this either my fixing bugs in my "ugly" approach (eaching over the controls) or a smarter use of JS/jBox.
$("[data-jbox-content-from]").each(function() {
new jBox("Tooltip", {
theme: "TooltipDark",
id: "jBoxTooltip_" + $(this).attr("id"),
getTitle: "data-jbox-title",
content: $($(this).attr("data-jbox-content-from")),
attach: "#" + $(this).attr("id")
}).attach();
});
Complete fiddle here
You approach is correct. But you need to put your code into domready:
$(document).ready(function () {
$("[data-jbox-content-from]").each(function() {
new jBox("Tooltip", {
theme: "TooltipDark",
id: "jBoxTooltip_" + $(this).attr("id"),
getTitle: "data-jbox-title",
content: $($(this).attr("data-jbox-content-from")),
attach: "#" + $(this).attr("id")
});
});
});
Also notice that I removed the .attach() method after new jBox. jBox does that when it initializes.
See updated fiddle: https://jsfiddle.net/StephanWagner/kqgxcda1/1/
I am trying to present options to the user to chose from in the form of buttons, like this:
builder.Prompts.choice( session, "Do you want to raise a ticket for this problem?", "Yes|No",
{
maxRetries: 3,
retryPrompt: 'Sorry, that is not a valid input'
},
{
listStyle: builder.ListStyle.button
}
);
However, the web chat channel shows this like so:
Obviously there is something wrong in the way it is done, but I'm not sure what.
How do I correctly use choice prompts with buttons ?
You need to restructure you prompt options to look like the below example. In your code, you separated the options out into two parameters. The method, as a result, is only seeing your first set of options and is defaulting to a simple list. Make this change and it will render correctly.
builder.Prompts.choice(session, "Do you want to raise a ticket for this problem?", "Yes|No",
{
maxRetries: 3,
retryPrompt: 'Sorry, that is not a valid input',
listStyle: builder.ListStyle.button
}
);
Using JSF and PrimeFaces I try to use java script external library (Highcharts) in order to display an image generated dynamically. Data used by the image is loaded from database. Image should be refreshed every n seconds.
In JSF I know that I can run java script function by
< h:outputScript name="js/volatilityChart.js">
but I have to somehow put parameters in order to appropriately display this function. I know there is possibility of calling execute() from RequestContext but I have no idea how to display an image generated in such a way. If knew I could probably use p:poll in order to refreshing it. I've searched the web but couldn't find proper solution.
Any advice will be appreciated.
Edited:
As followed BalusC suggestion and after some digging I managed to create something that suits me (simply speaking accessing bean fields and methods inside javascript code within xhtml). In XHTML I put:
<script>
//<![CDATA[
$(function () {
$('#container_portfolio').highcharts('StockChart', {
chart: {
alignTicks: false
},
rangeSelector: {
inputEnabled: $('#container').width() > 480,
selected: 1
},
title: {
text: ''
},
series: [{
type: 'column',
name: 'Volatility',
data: #{statisticsView.getStatistic()},
dataGrouping: {
units: [[
'week', // unit name
[1] // allowed multiples
], [
'month',
[1, 2, 3, 4, 6]
]]
}
}]
});
});
//]]>
</script>
Above function works and gives what I expected. However, I would like to insert many similar calls. Is it somehow possible to extract them to separate files? It would dramatically increase manageability of the code. Thanks in advance.
I'm using the plugin Leaflet.Control.Search to search markers in a layer group, which works fine. Once the marker has been found, the map already automatically pans to the center of the respective location, and the marker popup is being opened.
Now, on search, I would like to set the map's zoom level to a fixed value.
My map's initial zoom level is 12 – but once someone uses the search i'd like to set it to 16. How could this be achieved? I tried to implement setZoom, but I'm not sure how the correct syntax should be..
The code looks like this at the moment:
var searchControl = new L.Control.Search({layer: markers2, propertyName: 'Name', circleLocation:true});
searchControl.on('search_locationfound', function(e) {
e.layer.openPopup().openOn(map);
map.setZoom(16);
});
map.addControl( searchControl );
Thanks a lot for any hints!
ps: when i put map.setZoom(16); BEFORE e.layer.openPopup().openOn(map); then the zoom works fine, but the popup doesn't open like it should – it only opens when I hit search again…
Have you tried map.setZoom(16);instead of this in your "on location found" listener?
Alternatively, you might want to try the map.setView(). It takes a lat/lng and zoom level. You can either take in the marker's lat/lng or the popup's lat/lng
Try editing the plugin, commenting the zoom option (line 26)
_config: {
country: '',
searchLabel: 'buscar en el mapa...',
notFoundMessage: 'destino no hallado',
messageHideDelay: 3000,
/*zoomLevel: 18*/
},
I did it another way.
After the
propertyName
I put
zoom: 16
The code looks like this:
var searchControl = new L.Control.Search({
layer: allLayers,
propertyName: 'myKey',
zoom: 16
}).addTo(map);
Hopefully someone has an answer because looking at the example code in the documentation and the 'Free Icons' script I just can't see how this isn't working.
My issue is I am trying to create a beanie (hat). This beanie is made up of a number of different sections which I have stored in a variable named 'beanie' like so:
beanie = {
section1: "PATH CO-ORDINATES",
section2: "PATH CO-ORDINATES",
section3: "PATH CO-ORDINATES"
};
Basically the same way the 'Free Icons' are done as mentioned previously. I have then looped through all sections and created each on the paper like so:
for (var section in beanie) {
activeSection = beanieWindow.path(beanie[section]).attr({
'fill': '#ffffff',
'stroke': 'none'
})
.data('section', beanie[section])
.click(function () {
makeActiveSection(this);
})
.hover(
function () {
this.attr('stroke', 'red');
},
function () {
this.attr('stroke', 'none');
}
);
}
This this all works wonderfully, but when inspecting the paths there is no data-section attribute added - not even an 'id' attribute, which Neil mentions in his answer on Raphael, after assigning data, i am not able to get it that the id is provided by Raphael.
Not sure if I'm missing something obvious, but if I am I just can't see it :-/
Any help would be much appreciated!
Thanks in advance,
Mat