jQuery text() ignores leading blank [duplicate] - javascript

This question already has answers here:
Multiple Spaces Between Words in HTML without
(5 answers)
Closed 6 years ago.
I'm working on a script, that should fill a table with some string data.
Using jQuery's append and text function works fine for data without a leading blank symbol.
But if the string starts with one or more blank symbols they are ignored.
Please have a look at this code example: https://jsfiddle.net/e56eb0zx/2/
var blank = " blank ";
var no_blank = "no_blank";
$("tbody").append(
$("<tr>")
.append($("<td>").text("|"+blank+"|"))
.append($("<td>").text(blank)) // why isn't the blank displayed?
);
$("tbody").append(
$("<tr>")
.append($("<td>").text("|"+no_blank+"|"))
.append($("<td>").text(no_blank))
);
How can i fix this behaviour?
Thanks in advance!

jQuery is not the problem. The generated markup contains the blank before and after the word blank. Its a problem with rendering the table.
Set the CSS-Attribute white-space to pre or pre-wrap for your table cells to get the desired behaviour.
See this edited fiddle.

Related

Convert text into HTML elements using jQuery [duplicate]

This question already has answers here:
jquery not working to change inner html?
(4 answers)
Closed 5 years ago.
My html file looks like this:
<div id="myDiv" class="div-sample"></div>
I have a text file which has the following text:
<b>abracadabra</b>
Now after reading the file from an ajax request(via a php script which just reads the file), when I write the following jQuery code:
$('#myDiv').innerHTML = text;
inspite of showing abracadabra it showing with the tags.
what is going on here?
The first line var text = '<b>abracadabra</b>' sets the variable text to be equal to the string with the open and closing tags.
The second line sets the contents of the $('#myDiv') to be equal to that variable '<b>abracadabra</b>'. Because they are valid html tags they get parsed and this is why you don't see them in the browser.
When you log the content of the variable text you get it's value not parsed by the browser with the tags which is '<b>abracadabra</b>'

Function variables in jQuery [duplicate]

This question already has answers here:
jQuery attribute selector for multiple values
(2 answers)
Closed 7 years ago.
This is pretty simple, but I need to be able to toggle showing columns in a table.
The idea is to have a function that will take the name of the column (all the rows have the same data-field in the same column) and hide it, adjusting the width of the table as it goes.
Using Chrome's inspector, I came up with a simple proof of concept
$('[data-id="column"],[data-field="column"]').toggle()
After running the above, I need to adjust the width of the element plus / minus 4 pixels for the table to fit correctly - The table renders a white box on the right hand side where the column(s). This is just a proof of concept and the actual width will be stored in a variable that will be manipulated to allow multiple columns to be hidden.
$(".oe_list_content").width($(window).width()+/-4)
I made a simple function to come up with the initial idea, but when I run the function, it returns undefined and doesn't make the changes. I'm fairly certain that it can, but is the jQuery selector not able to take a function variable?
function rowToggle(row){
// Verify the rows even exist in the DOM
if($('[data-id="'+row+'"]').length){
$('[data-id="'+row+'"]','[data-field="'+row+'"]').toggle();
if($('[data-id="'+row+'"]').is(':hidden')){
$(".table").width($(window).width()+4);
}else{
$(".table").width($(window).width()-4);
}
}
}
This really seems like a variable problem because
var row = "column";
$('[data-id="'+ row +'"]').toggle();
doesn't actually toggle the field. Am I missing something?
This line
$('[data-id="'+row+'"]','[data-field="'+row+'"]').toggle();
Should be:
$('[data-id="'+row+'"],[data-field="'+row+'"]').toggle();
It's a single selector string. Not two strings separated by a comma as you had it.
Further reference to this issue: jQuery attribute selector for multiple values

How to split html tags in jquery? [duplicate]

This question already has answers here:
How to strip HTML tags with jQuery?
(5 answers)
Closed 8 years ago.
Consider, this is some response data I got from Ajax.
<table width=100%><tr><td>This content is applicable for users.
</td</tr><tr><td align='center'><button class='btn' onclick='hidethis();'
type='button'>OK</button></td</tr></table>
Here, I need to get only the contents This content is applicable for users. by splitting the html tags. Normally, we use like
var tokens = this.value.split(" ");
Based on Array tokens[0], tokens[1], we will get the values.
How can I get the values by splitting html <table> tags.
Any help would be highly appreciated.
I want to use only jquery to achieve this. And it should be simplified.
as you have received the data as string, you can create the constructor and then get required text from first td element:
var response="<table width=100%><tr><td>This content is applicable for users.</td</tr><tr><td align='center'><button class='btn' onclick='hidethis();' type='button'>OK</button></td</tr></table>";
var tdcontent=$(response).find('td:eq(0)').text();
NOTE: You need to reformat the DOM to make above solution work. you have broken html in string. td elements are not closed properly.

How to stop a div from recognizing HTML tags when inserting text on it with innerHTML? [duplicate]

This question already has answers here:
How to insert HTML as Text
(5 answers)
Closed 8 years ago.
div.innerHTML = my_text;
The code above has a problem: HTML tags are rendered. I want the opposite behavior: I want <b> to render as the string, not making anything bold. I also want to be able to use "\t" and "\n" as newline and tab characters. What can I do?
To prevent HTML from being rendered, simply escape it:
div.innerHTML = my_text.replace(/</g,"<");
This will still allow HTML entities such as é from being parsed. If you also want these to appear raw, tag this to the end of the line:
.replace(/&/g,"&");
Alternatively, try this "cleaner" option:
while(div.firstChild) div.removeChild(div.firstChild);
div.appendChild(document.createTextNode(my_text));
You are using div.innerHTML when you should be using div.innerText.
innerText is not cross browser, I recommend you to use a library like jQuery so you don't have this type of issues:
using jQuery you could write something like
$('#you_div').text(str.replace(/\t/g," "));
The replace above replaces your '\t' to "\t" so you will see \t on the text.
Anyway the standard seems to be the property textContent.
Here is some info in the MDN.
A different solution that better suites your needs probably is to get the text encoded and then replace the '\t' with , in this solution use the property innerHTML instead.

Set the caret position always to end in contenteditable div [duplicate]

This question already has answers here:
How to move cursor to end of contenteditable entity
(8 answers)
contenteditable, set caret at the end of the text (cross-browser)
(4 answers)
Closed 9 years ago.
In my project, I am trying to set the caret position always to the end of the text. I know this is default behaviour but when we add some text dynamically, then the caret position changes to starting point in Chrome and firefox (IE is fine, amazing).
Anyway to make it to work properly in chrome and firefox?
Here is the fiddle
<div id="result" contenteditable="true"></div>
<button class="click">click to add text</butto>
var result = $('#result');
$('.click').click(function () {
var preHtml = result.html();
result.html(preHtml + "hello");
result.focus();
});
I tried adding setStart and setEnd as mentioned in this link but no use.
I got the solution here thanks to Tim down :). The problem was that I was calling
placeCaretAtEnd($('#result'));
Instead of
placeCaretAtEnd(($('#result').get(0));
as mentioned by jwarzech in the comments.
Working Fiddle

Categories

Resources