I'm using rails form. In that form, I've a text_area. I want to show pre-filled data in text area of rails. The data is html content.
I tried following,
<% test_val= "<h1>Test Value</h1>" %>
<%= form.text_area(:myval, :value => test_val.html_safe, size: '30x10', :style => 'border: 10;') %>
myval is my form variable. But instead of printing Test Value in bold and bigger font in text area, t showed <h1>Test Value</h1>. I want the content in HTML tag to be printed with HTML formatting. Is it possible? If yes, how do I achieve it?
p.s. I'm using ruby v1.9.3 & rails 3.1.0
This is not possible in a textarea, this is not related to rails but to Html.
Instead you can use a div and set it with contenteditable =true
example:
<div contentEditable="true">content goes here </div>
If you are using javascript you can store the result in a variable like so:
var myvar = document.getElementById("divid").innerHTML
You may want to use a wysiwyg editor.
I suggest you to have a look at
https://github.com/Nerian/bootstrap-wysihtml5-rails
With simple_form you can simple use it as:
<%= f.input :content, as: :wysihtml5 %>
As I said previously, you should probably use a contentEditable unfortunately, you won't be able to use the rails existing helper to send the form, and have to use a little Javascript to build the form, I do not find the method really 'clean' but it works:
<html>
<head></head>
<body>
<form id="my_form" action="#" method="POST">
<div id="editable_div" contenteditable>
<h1>Editable HTML Content</h1>
</div>
<input type="submit" />
</form>
</body>
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script>
var form = $("#my_form");
form.submit(function() {
console.log('submitted');
form.append($('<input/>', {
type: 'hidden',
name: 'html_content',
value: $("#editable_div").html()
}));
});
</script>
</html>
You should be able to adapt this code to your rails one quite easily.
Related
I use Grails 2.3.7 and want to understand the following: I have a controller which sets a flash.message object with HTML markup from an i18n file (messages.properties) and args with no HTML markup.
When I call render, the corresponding GSP renders as expected, with HTML markup. When I call a redirect to another action, that does exactly the same (calling render), the rendered GSP shows the escaped HTML markup.
So what happens to the flash variable during a redirect? A simple println shows no difference. For reference, here is my code:
Controller:
class DebugController {
def testFlashEncoding(){
flash.message=message(code: "debug.flash.test", args: ["inner text with no markup"]) //debug.flash.test=<div style="border:1px solid red;">{0}</div>
flash.each {
println("flash in testFlashEncoding(): " + it)
}
// redirect(action: "index") //redirects to index(), html is rendered as text
render view: "testFlashEncoding" //renders testFlashEncoding.gsp, html is interpreted
}
def index(){
flash.each {
println("flash in index(): " + it)
}
render view: "testFlashEncoding" //renders testFlashEncoding.gsp, html is rendered as text
}
}
GSP:
<!DOCTYPE html>
<html>
<head>
<meta name="layout" content="main">
<title>DEBUG</title>
</head>
<body>
<g:if test="${flash.message}">
<div class="alert alert-success" role="status">${flash.message}</div>
</g:if>
<g:if test="${flash.error}">
<div class="alert alert-danger" role="status">${flash.error}</div>
</g:if>
</body>
</html>
So when I call the testFlashEncoding() action as shown above, the GSP is shown with a red border around the simple text. But when I use the redirect to the index() action instead, the GSP shows <div style="border:1px solid red;">inner text with no markup</div>.
The println statements show the expected values:
flash in testFlashEncoding(): message=<div style="border:1px solid red;">inner text with no markup</div>
flash in index(): message=<div style="border:1px solid red;">inner text with no markup</div>
So the content of flash is not touched, but somehow during the redirect Grails has some kind of switch that tells the rendering engine to escape the flash.message object.
For clarification, I use a freshly setup standard grails application, so my page codec ist set to grails.views.default.codec = "html" and I do know about the possibilities to alter the page codec or to force raw rendering, I just want to know what happens during the redirect (that scenario happens quite often in my current project).
Try either one of these:
${raw(flash.message)}
<%= flash.message %>
Worked for me. It printed correct marked up HTML
I am using laravel 5.0 and trying to use html tags in Response::json(), but the problem is the html elements are converted to plain text.
return Response::json([
'success' => true,
'message' => 'click <a href="#">here<a/>'
]);
the output is: click <a href="#">here<a/>
How should I fix this?
In this situation with output json all right.
I think that you want to display message on your front via javascript?
If yes - you must append data as HTML, not as plain text
Simple examle with using jQuery: (/testJson resturn json string as in your example)
<div id="testBlock"></div>
<script type="text/javascript">
jQuery.post('/testJson').done(function(result){
jQuery("#testBlock").html(result.message);
})
</script>
I am using Simple Form in a Rails 4 app for a #user object and have the line...
= f.input :entity_name
This generates the HTML name='user[entity_name]' inside the input tag. I would like to change it because of some custom processing I am doing in the controller but haven't found a way to do so.
I've tried changing the line to...
= f.input :entity_name, name: 'entity[name]'
...but this doesn't seem to affect the generated HTML at all. So far I haven't found anyone else with this question on Google/Stack Overflow.
Does anyone know if/how it's possible to change the name attribute through the Simple Form helper?
Thanks in advance!
The trick is using the input_html option.
= f.input :entity_name, input_html: { name: 'entity[name]' }
If you're looking to just change the shown label of the field:
= f.input :entity_name, label: 'new_input_field_name'
Can <div contenteditable="true">Some Text</div> be used instead of texarea and then passed trough form somehow?
Ideally without JS
Using HTML5, how do I use contenteditable fields in a form submission?
Content Editable does not work as a form element. Only javascript can allow it to work.
EDIT: In response to your comment... This should work.
<script>
function getContent(){
document.getElementById("my-textarea").value = document.getElementById("my-content").innerHTML;
}
</script>
<div id="my-content" contenteditable="true">Some Text</div>
<form action="some-page.php" onsubmit="return getContent()">
<textarea id="my-textarea" style="display:none"></textarea>
<input type="submit" />
</form>
I have tested and verified that this does work in FF and IE9.
You could better use:
<script>
function getContent(){
document.getElementById("my-textarea").value = document.getElementById("my-content").innerText;
}
</script>
NOTE: I changed innerHTML to innerText. This way you don't get HTML elements and text but only text.
Example: I submited "text", innerHTML gives the value: "\r\n text". It filters out "text" but it's longer then 4 characters.
innerText gives the value "text".
This is useful if you want to count the characters.
Try out this
document.getElementById('formtextarea').value=document.getElementById('editable_div').innerHTML;
a full example:-
<script>
function getContent() {
var div_val = document.getElementById("editablediv").innerHTML;
document.getElementById("formtextarea").value = div_val;
if (div_val == '') {
//alert("option alert or show error message")
return false;
//empty form will not be submitted. You can also alert this message like this.
}
}
</script>
`
<div id="editablediv" contenteditable="true">
Some Text</div>
<form id="form" action="action.php" onsubmit="return getContent()">
<textarea id="formtextarea" style="display:none"></textarea>
<input type="submit" />
</form>
`
Instead of this, you can use JQuery (if there is boundation to use JQuery for auto-resizing textarea or any WYSIWYG text editor)
Without JS it doesn't seem possible unfortunately.
If anyone is interested I patched up a solution with VueJS for a similar problem. In my case I have:
<h2 #focusout="updateMainMessage" v-html="mainMessage" contenteditable="true"></h2>
<textarea class="d-none" name="gift[main_message]" :value="mainMessage"></textarea>
In "data" you can set a default value for mainMessage, and in methods I have:
methods: {
updateMainMessage: function(e) {
this.mainMessage = e.target.innerText;
}
}
"d-none" is a Boostrap 4 class for display none.
Simple as that, and then you can get the value of the contenteditable field inside "gift[main_message]" during a normal form submit for example. I'm not interested in formatting, therefore "innerText" works better than "innerHTML" for me.
I'm a newbie to all this ASP.NET MVC stuff, and I was making some tests for my project. I wanted to ask how is it possible to introduce a javascript function call from the html.radiobutton function. For example, how would you declare this:
<input type="radio" name = "Kingdom" value = "All" onclick="GetSelectedItem(this);" checked ="checked" />
with html.radiobutton. I've been looking for some documentation, but I don't really get to understand, I guess it has something to do with the html object attributes, but don't really know the syntax and I haven't found any example.
Thank you all in advance :)
vikitor
Define the attributes as an anonymous object.
<%= Html.Radiobutton( "Kingdom",
"All",
true,
new { onclick = "GetSelectedItem(this);" } ) %>
or better yet, apply the handler unobtrusively with javascript (ex. uses jQuery).
<%= Html.RadioButton( "Kingdom", "All", true ) %>
<script type="text/javascript">
$(function() {
$('input[name=Kingdom]').click( function() {
GetSelectedItem(this); // or just put the code inline here
});
});
</script>