I using ReactJS and SemanticUI, want to use modal but look like it's not support html inside it, right? just display plain text. well, I made a compontent for displaying modal called Alert:
<Modal
open={this.props.open}
size={this.props.size}
content={this.props.content}
actions={[
{ key: 'no', content: this.props.actions, positive: false, onClick: this.props.close }
]}
/>
In a page I display alert on click:
goBuy = (e) => {
let obj = {
size: 'tiny',
actions: 'nope',
click: this.goSpend,
content: 'Are you sure?',
}
this.setState({
alert: obj,
alertOpen: true,
})
}
It working fine, but now I want to add some html code in content like this:
content: 'Are you <b>sure</b>?',
But this not working and display html code like plain text and not make it bold. Any idea how can I solve this?
Are you <b>sure</b>?
But want this:
Are you sure?
The problem here is the Modal itself thinks the value you are passing to content is a text value so the modal displays exact same word you have provided. So instead of passing your <br> tag there, you can pass jsx as a content and render it like this.
const content = {
return(<p>Are you <b>sure</b></p>);
}
goBuy = (e) => {
let obj = {
size: 'tiny',
actions: 'nope',
click: this.goSpend,
content: {content },
}
this.setState({
alert: obj,
alertOpen: true,
})
}
No need to using jsx with return just go this way:
const someHtml = (<p>Are you <b>sure</b>?</p>);
You can pass jsx as a content and render it.
Related
I got a JSON file where I specify dynamic different button but clicking on button does not call the function.
Here is my JSON file structure:
export const liveButtonData = [
{ title: 'My Name', function: 'getName()'}
{ title: 'My Title', function: 'getTitle()'}
{ title: 'My Status', function: ''}
}];
In my Angular HTML code
// the following clicking on the button does nothing
<button title={{button.title}}
(click)=button.function>
</button>
or
<button title={{button.title}}
(click)="button.function">
</button>
// this is not allowed
// the following throws an error
<button title={{button.title}}
(click)={{button.function}}>
</button>
Not sure what other syntax to try. Any help is appreciated and thanks in advance.
In your case the JSON file holds the function names as:
string names (not directly refer to the real method objects)
with () at the end. If we would like to invoke a method via string name should remove the () from the string name
Possible solution:
export const liveButtonData = [
{ title: 'My Name', function: 'getName'}
{ title: 'My Title', function: 'getTitle'}
{ title: 'My Status', function: ''}
}];
<button title={{button.title}}
(click)="functionWrapper(button, button.function)">
</button>
function functionWrapper (functionSource, functionName) {
functionSource[functionName]();
}
Then when we have the name/key of the function. We take it from it's source object with []. And call it with () at the end. And in the case above the () are not a string but real JavaScript invoke.
I have a JSF commandButton that calls onclick function to confirm the action. See:
<h:commandButton actionListener="#{myMB.go}" onclick="return confirmYesOrNo('Remove Row','Are you sure ?')" />
The problem is my commandButton is clicked independent of result in confirmYesOrNo function. See:
function confirmYesOrNo(title, content, actionYes, actionNo) {
var confirmReturn;
if (!actionYes){
actionYes = function(){
return true;
}
}
$.confirm({
theme: themeDefault,
title: title,
content: content,
buttons: {
sim: {
text: 'Sim',
action: confirmReturn = actionYes,
},
nao: {
text: 'Não',
action: confirmReturn = actionNo
}
}
});
return confirmReturn;
}
AS you can see i'm trying to catch the return of button Yes(Sim) and Button No(não) to send as a return (confirmReturn). The problem is that variable confirmReturn returns before user can click in a option.
If i use normal confirm() everything works fine, the javascript waits for a option and return to onclick, but i need a more "pretty" component than default confirm().
I think you should add for both buttons :
action: function () {
return actionYes
}
action: function () {
return actionNo
}
and remove the return from below
I have a config list for buttons like this:
var config = [{
name: 'first',
insertionConfig: {
title: 'first button',
onsubmit: function(){
// do sth
}
}
},{
name: 'second',
insertionConfig: {
title: 'second button',
onsubmit: function(){
// do sth
}
}
}
]
and in my TinyMce plugin I want to add all buttons according to their config. So it would end up like this:
tinymce.PluginManager.add('myPlugin', function(editor, url) {
for (var i in config) {
item = config[i];
editor.addButton(item.name, {
text: item.name,
onclick: function() {
editor.windowManager.open({
title: item.insertionConfig.title,
onsubmit: item.insertionConfig.onsubmit
}
};
}
});
but when I click on first button, it shows the second button's title. all configs of buttons refer to last added button. I know problem is something about the 'item' in the loop (all buttons refer to same item object which is the last one) but I don't know how to fix it.
Try creating a locally scoped variable for item inside the onclick function:
The issue you are running into is how variables are managed in JavaScript at the time the function is actually run. The click function is not actually run until you click an item and at that time item is pointing to the last item in the array.
EDIT: Check out this TinyMCE Fiddle for how this may happen: http://fiddle.tinymce.com/REfaab/1
I am creating a widget in ck-editor where when user clicks a toolbar button,a dialog is opened.In a dialog there is text field and one search button,rest area in a dialog is for search results to be shown.
Is it possible that user enters some text in a text field , hit search button and by using some API I display some 50 search results(scrollable) in a dialog of a plugin below the text field and search button?
Right now I am using this code (just a dummy to check if I can add elements dynamically)-
CKEDITOR.dialog.add('simplebox', function(editor){
return {
title: 'Reference',
minWidth: 600,
minHeight: 400,
onShow: function() {
alert(CKEDITOR.dialog.getCurrent().definition.getContents("new_reference").elements);
},
contents: [
{
id: 'new_reference',
label:'New Reference',
elements: [
{
id: 'type',
type: 'select',
label: 'Type',
items: [
[ editor.lang.common.notSet, '' ],
[ 'Book' ],
[ 'Journal' ],
[ 'URL' ],
[ 'PHD Thesis']
]
},
{
type: 'text',
id: 'reference',
label: 'Reference',
validate: CKEDITOR.dialog.validate.notEmpty( "Search field cannot be empty." )
},
{
type: 'button',
align:'horizontal',
id: 'referencebutton',
label:'Search',
title: 'My title',
onClick: function() {
var linkContent = { type : 'html', id : 'test', html : '<div>just a test</div>' };
// this = CKEDITOR.ui.dialog.button
var dialog = CKEDITOR.dialog.getCurrent();
//alert(dialog.getContentElement('new_reference','reference').getValue());
var definition = dialog.definition;
//alert(definition.title);
definition.getContents("new_reference").add(linkContent);
// CKEDITOR.dialog.addUIElement('list',function(){
// definition.getContents("new_reference").add(linkContent);
// });
alert(CKEDITOR.dialog.getCurrent().definition.getContents("new_reference").elements);
}
}
]
},
{
id: 'old_reference',
label:'Old Reference',
elements: [
{
id:'author',
type:'text',
label:'Author'
}
]
}
]
};
});
Inside onShow method I am printing the no. of UI elements inside a content of a dialog.It shows 3 objects. After click of a button,it shows 4 objects since one has been added via code but it does show in the UI?
Any clues on this?
Thanks
Your approach is OK but by calling
definition.getContents("new_reference").add(linkContent);
you're modifying CKEDITOR.dialog.definition, which is used only the first time the dialog is opened – to build it. Then, once built, if you close the dialog and open it again, the editor uses the same DOM to display it. What I mean is that CKEDITOR.dialog.definition is a blueprint, which is used once and has no further impact on the dialog.
To interact with live dialog, use the following
CKEDITOR.ui.dialog.uiElement-method-getDialog,
CKEDITOR.dialog-method-getContentElement (returns CKEDITOR.ui.dialog.uiElement),
CKEDITOR.dialog-method-getValueOf,
CKEDITOR.dialog-method-setValueOf
like
onClick: function() {
var dialog = this.getDialog();
// get the element
console.log( dialog.getContentElement( 'tabName', 'fieldId' ) );
// get the value
dialog.getValueOf( 'tabName', 'fieldId' ) );
// set the value
dialog.setValueOf( 'tabName', 'fieldId', 'value' ) );
}
One way to get around this problem is to use the onShow function and insert an html object in the dialog tab.
onShow : function() {
var element = document.createElement("div");
element.setAttribute('id', "someId");
document.getElementsByName("new_reference")[0].appendChild(element);
}
Then in the onClick function, just access the element and set the content you want, like this:
onClick : function() {
document.getElementById("someId").innerHTML='<div id="example-'+count+'">Hello World</div>';
}
By doing this, you should be able to get data to show in your dialog. Hope it helps.
bootstrap tooltip allows me to specify tooltip for the element by merely specifying the "title" attribute:
<div title="This is a test tooltip"> ... </div>
Is there any way to avoid hardcoding the tooltip content and specify a javascript function instead? I tried title="javascript:myFunction()" but it doesn't resolve it.
I looked at the booststrap code and it seems to contain support for function call I just can't figure out the syntax:
Snippet from bootstrap tooltip:
, getTitle: function () {
var title
, $e = this.$element
, o = this.options
title = $e.attr('data-original-title')
|| (typeof o.title == 'function' ? o.title.call($e[0]) : o.title)
return title
}
http://twitter.github.io/bootstrap/javascript.html#tooltips
Give your div an id and call
function titleSetter(node) {
return "My Tooltip text";
}
$('#my-div-id').tooltip({
title: 'My Tooltip text'
});
// or
$('#my-div-id').tooltip({
title: titleSetter
})
I dont know how to use a function, but I use a config file to hold the title/body of my tooltips. I then use a data-attribute for the title and body and leave it in my html. Here is my config file (really just some json):
var help = {
'001': {
title: 'Title 1',
description: 'Body 1'
},
'002': {
title: 'Title 2',
description: 'Body 2'
}
}
My html looks just like it sounds:
<div data-help="001"></div>
I then make the title and content return a function in my tool tips, like so:
var tooltipOptions = {
trigger: 'manual',
title: function() {
return help[$(this).attr('data-help')].title;
},
content: function() {
return help[$(this).attr('data-help')].description;
}
};
And I now have a dynamic body and title for my tool tips.
I believe this will solve the problem you were encountering in your question. Good luck!
if you are using bootstrap 3, you can put a id in your div
<div id="title-text" title="This is a test tooltip"> ... </div>
and then use this code
$("#title-text").attr('data-original-title', "the title");