I have a page with several Froala editors that are displayed as the user clicks a reply button, similar to the way Gmail displays its reply boxes.
If I display the editor below without setting a custom option, no error occurs.
<textarea id="editor-{{mail.id}}" froala ng-model="mail.message"></textarea>
But if used with a generic option set in $scope the following error is displayed, and the editor is only displayed in one item.
<textarea id="editor-{{mail.id}}" froala="customOptions" ng-model="mail.message"></textarea>
TypeError: Converting circular structure to JSON
--> starting at object with constructor 'Object'
| property '$$parentForm' -> object with constructor 'Object'
| property '$$controls' -> object with constructor 'Array'
--- index 0 closes the circle
at Object.stringify (<anonymous>)
at new E.Bootstrap (froala_editor.pkgd.min.js:7)
at new $e (froala_editor.pkgd.min.js:7)
at Object.ctrl.createEditor (angular-froala.js:119)
at Object.ctrl.init (angular-froala.js:60)
at Object.link (angular-froala.js:222)
at angular.js:1390
at angular.js:11263
at invokeLinkFn (angular.js:11269)
at nodeLinkFn (angular.js:10588)
This happens if I set a simple option, like setting only my key.
$scope.customOptions = {
key: 'MY-KEY'
};
How can I fix this?
Is there any configuration in the options that is missing?
In V3 you need to initialise the froala in this way.
var editor = new FroalaEditor('selector', options);
JQuery is deprecated externally
Related
Currently I'm creating a new form in SPFx. When reading the fields of the list there is an taxonomyField.
I'm using the PnP Taxonomy control to display the taxonomy labels.
I would like to get the termset id from the taxonomy field and using the following code
var taxField = field as SP.Taxonomy.TaxonomyField;
ctx.load(taxField);
await new Promise((resolveTax, rejectTax) => {
ctx.executeQueryAsync(()=> {
let termSetID = taxField.get_termSetId();
console.log(termSetID);
resolveTax();
}, (sender,args) =>{
console.log("Could not retrieve taxonomyfield termsset id: " + args.get_message());
rejectTax();
});
});
}
I Always receive the following error:
TypeError: Cannot read property 'TaxonomyField' of undefined
at eval (eval at Type.parse (https://...sharepoint.com/_layouts/15/MicrosoftAjax.js:5:10143), :1:13)
at Function.Type.parse (https://...sharepoint.com/_layouts/15/MicrosoftAjax.js:5:10143)
at SP.ClientRequest.$3K_0 (https://...sharepoint.com/_layouts/15/SP.Runtime.js:2:51794)
at Array. (https://...sharepoint.com/_layouts/15/MicrosoftAjax.js:5:307)
at https://...sharepoint.com/_layouts/15/MicrosoftAjax.js:5:51370
at Sys.Net.WebRequest.completed (https://...sharepoint.com/_layouts/15/MicrosoftAjax.js:5:89652)
at XMLHttpRequest._onReadyStateChange (https://...sharepoint.com/_layouts/15/MicrosoftAjax.js:5:84251)
Anybody a suggestion to fix this?
I suggest to use open source tools to work with SharePoint's Taxonomy, for example react-taxonomypicker
This is an elegant Taxonomy Picker control built with TypeScript for React. Initially built for use in Office 365 / SharePoint.
Features:
Retrieve Terms from a Term Set by Term Set GUID.
Support for large Term Set using Async mode
Use SP.Taxonomy.js
Use Promise (polyfill it if needed IE)
You can test it here: https://jquintozamora.github.io/react-taxonomypicker/
I am trying to use the createElement method explained in the following link:
http://htmlunit.sourceforge.net/apidocs/com/gargoylesoftware/htmlunit/html/InputElementFactory.html#createElement-com.gargoylesoftware.htmlunit.SgmlPage-java.lang.String-org.xml.sax.Attributes-
For this I am trying to use the following code:
HtmlPage page = webClient.getPage("http://...");
HtmlCheckBoxInput checkBox = (HtmlCheckBoxInput) page.createElement("checkbox");
But the createElement method returns an HtmlUnknownElement object. How can I create the checkbox element?
The following code is working while creating an input text element:
HtmlElement tmpCheckBox = (HtmlElement) pageClientInput.createElement("input");
Following the suggestion given here I have tried this other way:
HtmlElement tmpInput = (HtmlElement) page.createElement("input");
tmpInput.setAttribute("type", "checkbox");
HtmlRadioButtonInput tmpCheckBox = (HtmlRadioButtonInput) tmpInput;
tmpCheckBox.setChecked(true);
But I am getting an exception casting the HtmlElement to HtmlRadioButtonInput:
java.lang.ClassCastException: com.gargoylesoftware.htmlunit.html.HtmlTextInput cannot be cast to com.gargoylesoftware.htmlunit.html.HtmlRadioButtonInput
I need an HtmlRadioButtonInput in order to use the setChecked method. HtmlElement doesn't have setChecked method available.
Your code wont work because HtmlPage.createElement can't choose the correct Element Factory without attributes. Which you cannot set through this method.
You can access the correct element factory through InputElementFactory and setting the type as checkbox, as below.
WebClient webClient = new WebClient();
webClient.getOptions().setCssEnabled(false);
HtmlPage page = webClient.getPage("http://...");
//Attribute need to decide the correct input factory
AttributesImpl attributes = new org.xml.sax.helpers.AttributesImpl();
attributes.addAttribute(null, null, "type", "text", "checkbox");
// Get the input factory instance directly or via HTMLParser, it's the same object
InputElementFactory elementFactory = com.gargoylesoftware.htmlunit.html.InputElementFactory.instance; // or HTMLParser.getFactory("input")
HtmlCheckBoxInput checkBox = (HtmlCheckBoxInput) elementFactory.createElement(page, "input", attributes);
// You need to add to an element on the page
page.getBody().appendChild(checkBox);
//setChecked like other methods return a new Page with the changes
page = (HtmlPage) checkBox.setChecked(false);
Your createElement call produces an HtmlUnknownElement because there is not checkbox html tag. To create a checkbox you have to create an input with type 'checkbox'.
Start here to read more about html and checkboxes.
im trying to get to work simple pop-up, form the examples, but none is working..
Using 4.3.0.dev.
Tried from here:
http://book.agiletoolkit.org/views/popover.html
$i = $this->add('Icon')->set('window');
$pop = $this->add('View_Popover');
$pop->add('HelloWorld');
$i->js('click', $pop->showJS());
Or from here:
http://www4.agiletoolkit.org/css/popover
//The view to click (can be any element)
$view = $this->add('View')->set('Some text');
//Popover view
$pop = $this->owner->add('View_Popover');
$pop->add('View')->set('Content to show in tooltip');
$this->on('click','#'.$view->name,$pop->showJS($this->js(null, '$(this)'),array(
'width'=>'250px',//You can specify the width of tooltip
'my'=>'left bottom',//Specify the position of the tooltip
'at'=>'left+5 bottom-25',//Specify the margins
'class' => 'atk-popover atk-popover-bottom-left',//Specify where to show
)));
On both examples i get js error:
Uncaught Error: cannot call methods on dialog prior to initialization; attempted to call method 'open' jquery-2.0.3.min.js:4
I don't know what happened yesterday, maybe i was too tired, but it's working now..
Im trying to remove a property element before doing the submission of that element.
$scope.changeTitle = function(song, title){
song.title = title;
delete song.label;
song.put();
}
When doing so it seems that the property "label" is removed. When I do the PUT operation the object actually has the property label.
// This is the object I'm sending (checked from the chrome dev tool - network)
{
artist: "XXXXX"
title: 'XX'
label: []
}
Is there any way to remove a property from an element?
If you inspect the object's put method in Developer console, you'll find that the referenced object is actually your original object (even after changes). In order fix the reference, use Restangular.copy() before you manipulate the object.
Earlier when you wrote something along the lines of:
$scope.song = restangular.one(song, 1).get().$object;
You should instead write:
$scope.song = restangular.copy(restangular.one(song, 1).get().$object);
To see the related issue, checkout: https://github.com/mgonto/restangular/issues/55
You can use underscore's _.omit function (http://underscorejs.org/#omit)
song = _.omit(song,'label');
I want to add new fields or propierties to an calendar event. How can I do it?
Thanks!
You need to
add new section to lightbox form
http://docs.dhtmlx.com/doku.php?id=dhtmlxscheduler:details_form
for new section of lightbox, set map_to value as name of new field
on server side add extra field to the list of fields in render command
This is how you would create a simple href link inside an event:
1) Go to the Event Configuration Console and create a custom field, under the section that says 'CUSTOM FIELD'. Give the field a name. In this example, call it 'url'. Select its type as 'TextArea'.
2) Create another custom field, call it 'link_title'.Also a 'TextArea'. Description is optional.
SAVE
3) Go to the 'Templates' section of the event console. Under the first section (... scheduler.templates.event_text=function(start,end,event){... ) where you can input text, put ->
return "<b> "+event.text+"</b><br><br>" + event.link_title + "";
SAVE
When you go to create your event from the main calendar, you will see extra fields. Type in them, save your event, and voila. Toot Sweet.
What do you mean by calendar event?
Is it adding a new event?, then it must be done using lightbox(built-in option)
scheduler.config.lightbox.sections=[
{ name:"description", height:50, map_to:"text", type:"textarea", focus:true },
{ name:"location", height:43, map_to:"event_location", type:"textarea",
default_value:"Blackheath Avenue London,Greenwich,Greater London SE10 8XJ,UK"},
{name:"recurring", height:115, type:"recurring", map_to:"rec_type",
button:"recurring"},
{ name:"time", height:72, type:"time", map_to:"auto"}
];
each tag used in here is suppoted by the plugin,,,,in you want to have a seperate customize lightbox go to
http://docs.dhtmlx.com/scheduler/custom_details_form.html
This is the preview