This question may be related.
I have a Django recipe app that uses a form containing of a CharField TextArea. This field is used to enter a list of directions (string). I have chosen to separate each direction with a line break (ENTER in form), and use the following in my template (html) to keep line breaks as in original form
<div id="items">
<p>
{{ recipe.directions_field|safe }}
</p>
</div>
This will basically appear as something like
<div id="items">
<p>
Line one <br/>
Two <br/>
Three <br/>
</p>
</div>
What I want to do is to use jQuery to "check" (strikethrough) one single line (may contain of several words) in my template. I have tried the following, but as expected, this checks the entire paragraph.
<script>
$(document).ready(function() {
$("#items p").click(function () {
$(this).toggleClass('stroked');
});
});
</script>
Where my css has
.stroked{ text-decoration: line-through; }
In my Django view I replaced "\n" with html line break in order to make sure line breaks are not removed when shown in template.
directions = directions.replace("\n", "<br/>")
I think a solution like this would work if I could just find an easy way to use <br/> as a splitter instead of ". " or any other symbol. I couldn't make that work with <br/> in the example.
Any suggestions, either using a solution like this or another way? I guess there are many ways to solve this, but hope to find an easy implementation.
Thanks for any reply.
It's much easier if you wrap every single line into <span></span>, like this:
<div id="items">
<p>
<span>line one <br/></span>
<span>line two <br/></span>
<span>line three <br/></span>
</p>
</div>
So what you need to do in javascript is:
$(function(){
$('#items > p > span').click(function(){
if($(this).attr('class') == 'stroked'){
$(this).removeAttr('class');
}
else{
$(this).addClass('stroked');
}
});
});
Related
I have an ArrayList named conversations_client, I want to be able to get the value of conversation[6] for each div.
Each one the the media div represent a conversation.
Here is a part of my code :
<c:forEach var="conversation" items="${conversations_client}" >
<div class="media">
<div class="media-left">
<input class="checkbox" type="checkbox" name="selected-conv">
</div>
<div class="media-body">
<h4 class="media-heading">${conversation[0]}</h4>
<span class="hidden">${conversation[6]}</span>
......
I had first tried to use this code :
<script type="text/javascript">
$('.media').click(function(){
var text = $(this).text();
alert(text);
});
</script>
But it would print not only conversation[6] but others as well since they're all inside the div with class media.
Then I tried this :
<script type="text/javascript">
$('.media').click(function(){
var text = $('.hidden').text();
alert(text);
});
</script>
But it would print the same id for all divs, which is the id of the first one.
How can I do that? and would it be better to wrap those media divs with tags to be able to use a specific action for each one of them? because I am displaying all conversations, then once the user will click on one them I'll have to recover its id to be able to display the messages of that specific conversation and it isn't advisable to write Java code inside of jsp.
Thank you :)
Use find from current element.
$('.media').click(function()
{
var text = $(this).find('#hidden').text();
alert(text);
});
UPDATE:
You are using loop to repeat the markup. It's not good to use ID hidden multiple times as per W3C standards. ID should be unique and should be used once in the page.
Use class instead of id for multiple usages. In this case class="hidden"
Better change <span id="hidden">${conversation[6]}</span> to <span class="hidden">${conversation[6]}</span>
Also change JS to find .hidden
$('.media').click(function()
{
var text = $(this).find('.hidden').text();
alert(text);
});
In an Html file that I have, there is a paragraph tag that basically looks like this:
<p class="col-sm-8 form-control-static wordwrap">
Hey
What's
Up
</p>
The contents of this paragraph are grabbed from a textarea that a user fills out and the value of this textarea is grabbed via jquery and filled into this element.
The output looks like this: Hey What's Up
This paragraph tag ignores the newlines within the paragraph, so the paragraph displays all on one line. Due to the format and layout of the project, I can't necessarily change the html source. I was wondering if there was a way to change this exact element to be:
<pre class="col-sm-8 form-control-static wordwrap">
Hey
What's
Up
</pre>
using only javascript. Is this possible? This is so my output will keep the newlines.
I think you are looking for something like this. you tagged jquery so I used that but this could be done in vanilla js too.
I linked to a onkeyup event if you wanted to change to use the button only if you wanted
$(document).ready(function(){
function updateContent() {
$('#p1').html($('#source').val());
}
$('#update').on('click', function(e){
updateContent();
// add other stuff here
// for only the click event
})
$('#source').on('keyup', updateContent);
})
button {
display:block;
}
#source {
height:100px;
}
#p1{
white-space:pre;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea id="source" placeholder="Update content and click 'update'">new content
add line breaks and <p>html markup</p>
</textarea>
<button id="update" >Update</button>
<p id="p1">THIS WILL CHANGE!</p>
It is very simple and has been asked before... BUT here it is, using DOM:
document.getElementById("p1").innerHTML = "<p>This</p><p>Has</p><p>Changed!</p>";
<p id="p1">THIS WILL CHANGE!</p>
So your piece of code you need is:
document.getElementById("p1").innerHTML = "New text!";
EDIT
This is simpler, easier and more browser friendly than using <pre> tags. Therefore, I would highly recommend you to use this instead.
Im assuming this shouldn't be too difficult to solve, but i'm pretty much a novice when it comes to Javascript or JQuery.
HTML:
<p><span id="AddLine1Summary"></span>,</p>
<p><span id="AddLine2Summary"></span>,</p>
<p><span id="TownCitySummary"></span>,</p>
<p><span id="CountySummary"></span>,</p>
<p><span id="PostcodeSummary"></span></p>
When the customer does not fill in the Address Line 2, there is still a value of "," present so in the summary page it looks like this :
12 Bob Street,
,
BOLTON,
Lancashire,
BL1 1AC
So Im trying to get rid of the whole line <p><span id="AddLine2Summary"></span>,</p> when the customer leaves this blank. So far I have tried and come to this:
<script>
$(document).ready(function () {
if ($('#AddLine2Summary:contains(",")').length == 1) {
$("#AddLine2Summary").parent().hide();
}
});
</script>
parent.hide because I have to hide the whole <p> not just the <span>
Rather than checking length of "," you can also check for text inside span which has ID AddLine2Summary. And if it is empty you can put the code of hiding parent.
It should look like :
if ($('#AddLine2Summary').is(':empty')) {
$("#AddLine2Summary").parent().hide();
}
Firstly, try wrapping your HTML snippet in a container to make selection easier:
<div class="address-container">
<p><span id="AddLine1Summary"></span>,</p>
<p><span id="AddLine2Summary"></span>,</p>
<p><span id="TownCitySummary"></span>,</p>
<p><span id="CountySummary"></span>,</p>
<p><span id="PostcodeSummary"></span></p>
</div>
Then in jQuery, look for empty span elements in here, and hide their parent p.
$('.address-container span:empty').closest('p').hide();
Example fiddle
This will then work for all empty address fields, not just #AddLine2Summary.
I have an HTML code as follows
<div class="editable" ...>
<div class="code">
This is an example.
This is a new line
</div>
</div>
In CSS, code has "word-wrap: pre" attribute, such that the text in the inner DIV will show two lines. I use CKEditor with DIV replacement method to edit it. However, it becomes
<div class="code">
This is an example.This is a new line
</div>
The text inside the HTML tag will become one line long, beginning and trailing spaces and new line are stripped. So in CKEditor, although I have specified the config.contentsCss, it still shows one line because CKEditor has merge those two lines into one (I checked this in Chrome "Inspect Element" in CKEditor's iframe editor). Therefore, I see the source code or saved HTML, two lines format is not preserved because they are only one line.
I've googled and tried the CKEditor HTML writer or addRules to restrict the indent format and new line in begin/close tags, however, those seems work on HTML tags, not the document text. Is there any other methods to preserve line breaks of text?
I found it.
// preserve newlines in source
config.protectedSource.push( /\n/g );
http://docs.ckeditor.com/#!/api/CKEDITOR.config-cfg-protectedSource
$(document).on('paste', 'textarea', function (e) {
$(e.target).keyup(function (e) {
var inputText = $(e.target).val();
$(e.target).val(inputText.replace(/\n/g, '<br />'))
.unbind('keyup');
});
});
Use the <pre> HTML tag. Like this:
<div class="editable" ...>
<div class="code"><pre>
This is an example in a "pre".
This is a new line
</pre></div>
</div>
<div class="editable" ...>
<div class="code">
This is an example NOT in a "pre".
Therefore this is NOT a new line
</div>
</div>
Or you can put a <br/> tag in between your lines. Its the ssame as hitting enter.
In my particular case, it was an extra tag, univis, that I needed to give similar semantics (i.e., leave indentation and inebreaks alone), and what we ended up doing was:
CKEDITOR.dtd.$block.univis=1;
CKEDITOR.dtd.$cdata.univis=1;
CKEDITOR.dtd.univis=CKEDITOR.dtd.script;
But that looks like it might or might not be extensible to classes.
I got some Craft sites running and I don't want to paste the config file everywhere. For everyone else still having the problem: Just use redactor. Install and replace the field type. Correct everything once and you're done.
What I've tried:
mixin simpleDivInject(text)
div
h1 #{text}
mixin simpleDivInject("line one <br/> line two")
Desired outcome
<div>
<h1>line one <br/> line two</h1>
</div>
The actual outcome
<div>
<h1>line one <br/> line two</h1>
</div>
How can I achieve the desired outcome. I have tried a few more things (such as storing the string in a var ect.), but no luck so far.
Actually I just figured it out. Answering here in the hopes it is helpful to someone else down the line. The escaping is not occurring in the mixin argument system, but in the vinilla jade system, so:
mixin simpleDivInject(text)
div
h1!= text
mixin simpleDivInject("line one <br/> line two")
Solves the problem