Why do I get this <br> element in a contenteditble div? - javascript

I have a div element that looks like this
<div id="test" contenteditable="true" style="height: 17px;">
</div>
When I do $("#test").html(), I'd expect to see an empty string returned, but in fact, it gives me <br>.
Why would there be a <br> even if I haven't put any there in the div?
Edit: Actually, in between the div tag, I have a Struts2 property tag which outputs a value but this value populated in the backend is empty so I was not expecting to see <br> there.

It's look like strange issue, As far my experience it can be due to these stuff
It may be html tags are not closed
You may have some browser extension which some time do these type weird stuff
so try to disable all extension and check all html tags also try in incognito mode after disable extension, I think it may help you for debugging this issue.

https://jsfiddle.net/47r6p89r/
There is space between <div ...> and </div>.
Also spaces will be detect by HTML but only one by one. The weird thing is that you got
<br>
as output I just got nothing as in the fiddle.
Here like in my fiddle you can detect if #test is empty if not you can see the result.
$(document).ready(function() {
if ($('#test').html() !== "")
$('#console').text($('#test').html());
else
$('#console').text('empty');
});

Related

Passing HTML value to embedded script

So I have a HTML file with an embedded script. A Java application sends a value to this HTML file. Now I wonder how to pass this value from the HTML down to the script. Is this even possible?
Here is the simplified HTML file with my approach:
<html>
<body>
<div id="test">
[VALUE_FROM_BACKEND] // prints "let valueFromBackend = 1234"
</div>
<script>
console.log(document.getElementById('test').value);
// should return: let valueFromBackend = 1234;
// actually returns: undefined
</script>
</body>
</html>
Unfortunately, I can't pass the value from the Java application directly to the script. I got the above approach from here, but this doesn't work.
Other solutions only focus on getting values from remote HTML pages, declaring the HTML files's source in the script tag. But since it is an embedded script here, this also seems not to work.
Does anyone know how to deal with the situation? Help will be much appreciated.
Only HTML input elements have a value in javascript. A div cannot have a value, which is why your code returns undefined.
To access the text inside a regular HTML element, such as a div, use element.innerText instead.
Here is a working code snippet you can try out:
console.log(document.getElementById('test').innerText);
<div id="test">
let valueFromBackend = 1234
</div>
As you want to get value of a div element, so the syntax is:
document.getElementById('test').innerHTML
Remember that getElementById().value works for input and use getElementById().innerHTML for elements like div

EpicEditor text showing as instead of space

Not sure if this is an actual problem per se but I'm using Epic Editor to input and save markdown in my GAE application (webpy with mako as the templating engine).
I've got a hidden input element in the form which gets populated by the EpicEditor's content when I submit the form but all the white spaces are replaced by . Is this an intended feature? If I check the same code on the EpicEditor site, it clearly returns spaces instead of so what's different about mine?
<form>
<!-- form elements -->
<input id="content" name="content" type="hidden" value></input>
<div id="epiceditor"></div>
<button type="submit" name="submit" id="submit">submit</button>
</form>
<script type="text/javascript">
$('button#submit').click(function(){
var content = editor.getElement('editor').body.innerHTML; //all the spaces are returned as and breaks are <br>
$('input#content').html(content);
});
</script>
NOTE: I want to save my content as markdown in a TextProperty field my data store and generate the html tags when I retrieve it using marked.js
I'm the creator of EpicEditor. You shouldn't be getting the innerHTML. EpicEditor does nothing to the innerHTML as you write. The text and code you are seeing will be different between all the browsers and it's how contenteditable fields work. For example, some browsers insert UTF-8 characters for spaces some &nbsp.
EpicEditor gives you methods to normalize the text tho. You shouldn't ever be trying to parse the text manually.
$('button#submit').click(function(){
var content = editor.exportFile();
$('input#content').html(content);
});
More details on exportFile: http://epiceditor.com/#exportfilefilenametype
P.S. You don't need to do input#content. Thats the same as just #content :)
You can do this if you dont find out why:
<script type="text/javascript">
$('button#submit').click(function(){
var content = editor.getElement('editor').body.innerHTML;
content = content.replace(" ", " ");
$('input#content').html(content);
});
</script>
[EDIT: solved]
I shouldn't be using innerHTML, but innerText instead.
I figured out that Epic Editor uses on all spaces proceeding the first one. This is a feature, presumably.
However that wasn't the problem. ALL the spaces were being converted to , eventually, I realised it occurs when Epic Editor loads the autosaved content from localStorage.
I'm now loading content from my backend every time instead of autosaving. Not optimal, but solves it.

jQuery .html(): Missing elements from beginning of div

I'm selecting a <div>, like so:
var html = $('div#mydiv').html();
Both in console, and in the DOM when I paste the html var back in, there are two elements missing from the beginning of the div, which is structured like so:
<div id="mydiv">
<input type="checkbox" />
<label for="input"></label>
<div class="notes"></div>
...
</div>
I'm only getting from the 'notes' div on down - NOT the input or label. It's the weirdest thing. Any ideas?
EDIT: By 'ideas', I mean - yes, I know this should work just fine. I'm wondering what bugs could be causing the weirdness. There is some PHP laced into the input and label - but those output just fine in the div where they originate, but do NOT show up in the console or in the div where I'm setting the html via jQuery. I'm looking to see if there's malformed HTML, but I don't think so.

jquery before() is out of order?

I have a page where you can click a link that says "add a keyword" and an input will appear and you can enter the keyword, and then convert it into a span tag on blur or the "return" key. However, I've been adding onto it to allow for an "autocomplete" feature, so I'm trying to insert a
<ul></ul>
after my input in order to do a .load inside the list.
The relevant code I have is:
var addKeywordId = 0;
$('a.add_keyword').live('click', function(){
$(this).before('<input type="text" class="add_keyword" id="addKeyword'+addKeywordId+'" /><ul><li>hi</li></ul>');
$('.add_keyword').focus();
addKeywordId++;
});
The problem is, that my HTML structure ends up looking like this:
<ul><li>hi</li></ul>
<a class="add_keyword">+ add keyword</a>
<input id="addKeyword0" class="add_keyword" type="text />
INSTEAD OF
<input id="addKeyword0" class="add_keyword" type="text />
<ul><li>hi</li></ul>
<a class="add_keyword">+ add keyword</a>
Anybody know why my HTML is added out of the order I specified??
Thanks
EDIT: This seems to be working fine in Google Chrome, but not in Mozilla Firefox.. :(
This is likely due to the weird rejiggering of code Firefox does to try to display things even when there are errors. I've seen it where I miss a closing div, IE freaks out (as it should) and Firefox looks fine, as it ignores that you missed adding the ending div and guesses.
You could try a 2 stage thing. I would add an id to the ul tag, then add the input before it.
$(this).before('<ul id="ulid"><li>hi</li></ul>');
$('#ulid').before('<input type="text" class="add_keyword" id="addKeyword'+addKeywordId+'" />');
Happy haxin.
_wryteowl

Can't set value on hidden input element

I have a problem setting value of an hidden input element. I've tried using jQuery and $("#SomeHiddenElement").val(sSomeValue) function, and plain JS document.getElementById("SomeHiddenElement").value = sSomeValue; but nothing works...
When I set the element to text type it works just fine...
The problem persists both in FF and IE.
Any ideas?
Code:
<input type="hidden" id="SomeHiddenElement" name="SomeHiddenElement" value="" />
document.getElementById("SomeHiddenElement").value = "Testing";
Since I don't believe firebug has a problem updating it's DOM representation, and your code works fine in isolation, and you don't have an issue with text inputs, and I've never had a problem updating hidden inputs myself, I would suggest that something else is acting on hidden inputs to block what you're doing.
I suggest you create a test page stripped of all content except what you've given us here and then incrementally add features to progress towards the state of your real page. At some point it will break and you'll at least know where the problem lies.
Guys I'm so sorry... The problem was in combination of Firebug and my post handling code... I've fixed it...
Moral of the story: double check code and don't blindly believe Firebug.
Thanks for your trouble!
Your code is fine.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Setting the value of a hidden field</title>
</head>
<body>
<input type="hidden" id="SomeHiddenElement" value="">
<script>
document.getElementById('SomeHiddenElement').value = 'Hello World';
</script>
<script>
// Will alert 'Hello World'
alert(document.getElementById('SomeHiddenElement').value);
</script>
</body>
</html>
How are you testing that the value of the hidden field is not being set? Since hidden fields are invisible, you can see what's inside when with JavaScript, or when you post the form.
Can you try:
$('#SomeHiddenElement').attr("value", "some text");
this is just a simple jQuery solution to set the attribute "value" with test text.
Edit:
Well, try this:
alert($("input[type='hidden']").length);
This is to see how many hidden input elements on your page.
These both work:
$('#SomeHiddenElement').attr("value", "some text");
$('#SomeHiddenElement').val("some text");
Verified using Chrome Developer Tools and Firebug
I know it's been a long time, but I had the same issue, and it took me some time to find out that I had more than one element ( to be exact) on page with the same id="" and it seemed that my JS function did not work (which I guess it was modifying value of just the first element). Anyway, this may help someone save some time investigating :)

Categories

Resources