I am using jquery sortable library where i will drop item from one list to another.In the process of dropping item i will change html content.I have data attribute also.
onAdd: function (evt) {
var df="hm "+evt.item.innerText;
alert(df);
var content='<div class="list-group-item " >'+evt.item.innerText+' its modified <span class="badge badge-primary badge-pill float-right" data-job='+df+'>14</span></div>';
$(evt.item).replaceWith(content);
},
in alert i get correct appended value but in data-job it will set only hm and evt.item.innerText will not append
Can any one help me to append it properly.
Thank you
You are missing quotes in the expression
Use below code
data-job="'+df+'"
Since you have space between the text, the text after the space is treated as another attribute of the element. You should wrap the text with quotes data-job="'+df+'".
Though I prefer using Template literals which is more cleaner and easier to use:
Template literals are string literals allowing embedded expressions. You can use multi-line strings and string interpolation features with them. They were called "template strings" in prior editions of the ES2015 specification.
Demo:
function test(evt) {
var df="hm "+evt.target.innerText;
var content=`<div class="list-group-item">evt.target.innerText its modified <span class="badge badge-primary badge-pill float-right" data-job='${df}'>14</span></div>`;
console.log(df);
console.log(content);
$('body').append(content);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<div onclick="test(event)">test</div>
Related
I have a JSON file that contains among it values for a specific property that is a string. In many of these strings, there are embedded <a href=".... </a> tags with different links. I want to go through the whole object and remove all of these tags, while leaving what is inside the tags.
1) Remove all <a .... >
2) Remove all </a>
You could try regex or pass the content to an Element as HTML and get back as text. Please check the example below.
var data = {
"content": "First part of the text. <b>This could be bold</b>. <span class=\"highlight\">Span with attribute.</span>"
};
var divElement = document.createElement('div');
divElement.innerHTML = data.content;
document.getElementById('text-content').innerHTML = divElement.innerText;
<div id="text-content"></div>
You could use a Regex to remove all <a ...> and </a> tags:
jsonObject.someString = jsonObject.someString.replace(/<[\/]{0,1}(a|A)[^><]*>/g,"");
If your object is large and would like to recursively remove all anchor tags within the object tree, take a look at this answer
JSFiddle
maybe is way to turn off auto-formating HTML code in CKEditor version 3.6.4?
I found only how to disable auto </br> after <td> in CKEditor?, but i need to turn off this function.
Now i try to save code:
{if key is 1}<li>custom text</li>{/if}
and i get:
<li>
{if key is 1}</li>
<li>
custom text</li>
<li>
{/if}</li>
CKEditor works with a valid HTML only and text outside <li> tags is not valid. Quoting CKEditor basic concepts:
CKEditor is not a tool that will let you input invalid HTML code. CKEditor abides by W3C standards so it will modify code if it is invalid.
You can however try to use config.protectedSource to hide these template's markers, but you would need to create a good RegExps to hide only real tags and not any text between { and }. The simplest implementation that could work would be:
config.protectedSource = [
/{\/?[\w]+(?: [\w\s]+)?}/g
];
But the real on will depend on what really may be used in these tags.
I want to add text to a span container on runtime by calling a javascript function into the HTML node like so :
<span class="muted">
<script>
//Here I want to add the string returned to outer span. (I also use jinja tags)
getGenericObjName("{{n.news_type}}",{{n.news.object_id}});
</script>
</span>
The reason I do this is because I iterate over a news feed. And i know that the function returns the correct value.
I also tried to use document.write(...) but it seems to override the whole page.
Thanks!
<span class="muted">
<script>
//Here I want to add the string returned to outer span. (I also use jinja tags)
document.write(getGenericObjName("{{n.news_type}}",{{n.news.object_id}}));
</script>
</span>
If you are already using jQuery a better solution might be:
<span class="muted"></span>
<script>
//Here I want to add the string returned to outer span. (I also use jinja tags)
$('.muted').html(getGenericObjName("{{n.news_type}}",{{n.news.object_id}}));
</script>
In this case don't put the javascript inside/before the span because it will be called before the span is in the DOM.
Do the other way round, via JS (using jQuery):
<script type="text/javascript">
$(".muted").html(getGenericObjName("{{n.news_type}}",{{n.news.object_id}}));
</script>
HTML:
<span class="muted"></span>
I've just started using javascript and am trying to do the following:
My html doc contains divs and span elements like below.
I want to create a variable which will store the value of my-new-id for a specific div child element.
The only information I have to go on, is that I always know what the span text will be cause it's based on a username.
Therefore, how would I get the value of my-new-id for user1?
I have already figured out how to navigate to the correct div elemenet using the document.getElementById method. I then try to use a jquery selector such as :contains, but get stuck.
Many thanks on advance.
<div id=1>
<span my-new-id=x>user1</span>
<span my-new-id=y>user2</span>
<span my-new-id=z>user3</span>
</div>
<div id=2>
<span my-new-id=x>user10</span>
<span my-new-id=y>user1</span>
<span my-new-id=z>user30</span>
</div>
Using jQuery:
var val = $('span:contains("user1")').attr('my-new-id');
A couple of additional points:
Do not use IDs that begin with a number. This is not allowed in the HTML4 spec, and can cause unexpected behavior in some browsers. Instead, prefix your ID's with an alphabetic string, like this:
<div id="container1">
...
</div>
I would recommend that you use data-* attributes instead of making up non existent attributes. You can make data attributes like this:
<span data-new-id="x">user1</span>
You can then retrieve this value using:
$('span:contains("user1")').data('newId');
Note that the attribute name has been stripped of dashes and camel-cased.
Is there a way to preserve formatting (e.g. bold, italic) of text when using the letterings.js plugin? I am using the "word" wrapping function (https://github.com/davatron5000/Lettering.js/wiki/Wrapping-words-with-lettering%28%27words%27%29) and it seems to destroy any formatting made of the text.
Here's an example:
<div class="text-block">This is a <i>sentence</i> <b>with <i>formatting</i></b>.</div>
After using letterings.js, it turns into:
<div class="text-block">
<span class="word1">This</span>
<span class="word2">is</span>
<span class="word3">a</span>
<span class="word4">sentence</span>
<span class="word5">with</span>
<span class="word6">formatting.</span>
</div>
This is the function I'm using in jQuery:
$('.text-block').lettering('words');
I've found that I can preserve bold or italic (unfortunately not both) doing this:
$('.text-block b').lettering('words');
-OR-
$('.text-block i').lettering('words');
You can't use both ( i.e. $('.text-block b,.text-block i') ) at the same time.
If it's not possible with letterings.js, is there another plugin or method to wrap each word in spans but preserve the formatting?
If you change the method in line 15 from .text() to .html(), you can use
$('.text-block').lettering('words');
as is and it will not strip the tags.
Use this link to get the source:
https://gist.github.com/klatchbaldar/6956474