Passing html data from a div to php - javascript

I am able to get the total text data from a contentEditable div, but I would like to pass the data just as it is in the div with the HTML elements in tact to a PHP file. At the moment only the text is being returned by log stripped of html tags,
First I dynamically add this to the div
var user = "<a contenteditable='false' href='#' >"+name+" </a>";
$("#message").append(user);
But when I try to log the content I only see the text within the 'a' tag returned
var msg = $('#message').html();
console.log(msg);
THi is my HTML
<div name="message" contentEditable="true" id="message" ></div>
So an Example of what I would like to pass is this
"Hello world!<a href='#'>Ned</a> Fails!"
Any help is appreciated, thanks.

See here for a working copy to what I think your looking for. Looks like you just need to ensure the id's of your elements match:
$(function () {
var name = "Ned";
var user = "<a contenteditable='false' href='#' >"+name+" </a>";
$("#message").append("Hello world!" + user + " Fails!");
var msg = $('#message').html();
alert(msg);
})

The $.html() function returns code of child elements.
It does not return the HTML code of the element itself.
Use $("#message").parent().html() to access element's parent.

you are appending your data in element with id -"message"...
$("#message").append(user);
but taling html of element with id -"chat-message"
$('#chat-message').html();
so where is your chat-message element?? might be you are making mistake in choosing the element to display html..

Related

jQuery: Best way to append to html of a paragraph inside a textarea

I have a textarea that contains variable html content which is always wrapped in a paragraph (p) tag.
HTML (before appending):
<textarea rows='7' class='form-control' id='comments'><p>My variable HTML content.</p></textarea>
I fetch this content using the following in jQuery:
jQuery:
$('#comments').val();
Now I need to append HTML at the end of this paragraph but inside the p tag.
HTML (after appending):
<textarea rows='7' class='form-control' id='comments'><p>My variable HTML content. Some appended HTML.</p></textarea>
I can of course replace the last 4 characters of the above (which is the closing p tag), then append my HTML and then add the closing p tag again.
Can someone tell me if there is a better way to achieve the same in jQuery ?
Many thanks in advance for this, Tim.
Parse the string value of the textarea as HTML, and insert whatever you like, then pass the string value of the HTML back
$('#comments').val(function(_, val) {
return $('<div />', {html:val}).find('p').append('content').end().html();
});
FIDDLE
This could do the trick
var html = $('#comments').val();
$('#comments').val(
$(html).append(' Some appended HTML.')[0].outerHTML
);
DEMO
You could insert the value into a temporary div, add an element to the <p>-element inside the temporary div and fetch the renewed content again:
var tmpDiv = $('<div></div>'); //create temporary element
tmpDiv.html($('#comments').val()); // add HTML from textarea
$(someHtml).appendTo($('p', tmpDiv)); // append custom HTML to P inside temp element
newTextAreaValue = tmpDiv.html(); // retrieve new value
Ok. I REALLY love this!
$('#comments').text($($('#comments').text()).append(' a new insert!').text());
Don't look at it too long. Could hurt your eyes :-)

How to read text from textfield using jQuery to the variable?

So, I got the page on my local server, and this page contains textarea and button. I am Trying to write onclick function to button, which would read whatever I typed in text area, and make record to database. Just like when I finish typing my question here, and press Ask Question. The problem is that I can't properly read text in text area, it basically sees only what was in there at the moment of loading a page, and just rewrite it. How should I get text, that I typed right before clicking the button? I just want to know how can I copy that text to some var, which I can PUT to database.
$.getJSON('/link/' + tenderId, function (data) {
var description = '';
description += '<textarea id="description" class="form-control" rows="3">' + data.description + '</textarea>';
$('#description').html(description);
});
Use this code inside your click event
var textareaValue = $('textarea#textareaId').val();
html
<textarea id="textareaId"></textarea>
SO answer: https://stackoverflow.com/a/144836/2772017
You need to use val() (I am guessing you are using text()) to get the text of a Text Area:
$('input#mybutton').click(function() {
var text = $('textarea#mytextarea').val();
});
Of course this is just guesswork as you did not supply any code! :)
Update:
The code you added is also incorrect as it adds a duplicate id of description inside a div with an id of description! ID's need to be unique on a page.
Assuming you want a new id here is a cleaner version of your code:
$.getJSON('/link/' + tenderId, function (data) {
var $textArea = $("<textarea>", {class: "form-control", id: "descriptionText", rows: "3"}).val(data.description);
$('#description').empty().append(description);
});
I can't figure out you method logic; it seems you are pulling some json data then appending it to a textarea while in issue description you said that you are trying to save the textarea content so you have to be sending it throug a POST request.
Also does the <textarea id="description"...> element is there in your page or you will be creating it at each button click?
If such is you case, you can try with the following snippet:
$.getJSON('/link/' + tenderId, function (data) {
var $description = $("<textarea>");
$description.attr({
id:'description',
class:'form-control',
rows:'3'})
.html(data.description);
//you will have then to append this jQuery element, e.g: $("#wrapper").append($description)
});
$('button').click(function(){
var myString = $('#description').val();
})
Then use myString whereever you like.

JQuery: wrapping variable's contents

I have a variable that contains a bunch of HTML that I retrieve from a HTML5 SQL database.
I can .append() this to an element in the DOM and it appears fine. But I want to .wrap() the HTML contents first, thus I have written:
content = $(content).wrap(function() {
return '<div class="event_holder" />';
});
$('#mydiv').append(content);
However, I get the error
Syntax error, unrecognized expression: ~HTML contents of variable~
I have also tried:
content = $(content).wrap('<div class="event_holder" />');
Would anyone know whats going on here and how I can correctly wrap this?
EDIT: the contents of 'content' is:
<input id="e1coords" class="coords" name="e1coords" type="hidden" value="-27.482359,153.024725">
The problem could be content = $(content).wrap('<div class="event_holder" />'); still returns the inner content not the wrapped element, you need to append the parent of the content.
Try
content = $(content).wrap('<div class="event_holder" />').parent();
Demo: Fiddle
i don't know why are you using callback of wrap() when you can do it directly
content = $(content).wrap('<div class="event_holder" />');
and it will be better if you can show us what actually the content contents..
updated
try this
content = $('#e1coords').wrap('<div class="event_holder" />');
OR
var content = $('#e1coords');
content = content.wrap('<div class="event_holder" />');
I found out the because the content variable was actually retrieved from a (html5) database it was not part of the DOM, thus JQuery was having issues with it.
I did the wrap manually and it worked
content = '<div class="event_holder">' + content + '</div>';

append div to text area?

I've got a text area and I'm attempting to append a div to it. I'm trying to do it with Jquery like this...
var text = '<div class="item"><a class="as">q</a>test</div>';
$('#textArea').append(text);
The code runs without throwing any errors but my text doesn't appear inside the textarea. Why does this happen?
Do you want to add it to the HTML structure or simply show the HTML Code as text ?
If you want to add it to the textarea HTML structure this will not work.
What you are searching for is
$('#textArea').text(text); or $('#textArea').text($('#textArea').text()+text);
.text() sets text of your textArea
.html() would set your html Content
You can't append to a textarea. Its text content behaves like other input.
var text = '<div class="item"><a class="as">q</a>test</div>';
$('#textArea').val( $('#textArea').val() + text);
Try:
$('#textArea').val(text);
If you don't want to render the div's contents but simply want to display the HTML inside the textarea you need to convert the HTML first:
var lt='<';
var gt='>';
var text = '<div class="item"><a class="as">q</a>test</div>';
text = text.replace(/</gi, lt);
text = text.replace(/>/gi, gt);
$('#textArea').append(text);
And the HTML for the text area should look like this:
<textarea id="textArea"></textarea>
If you do want to render the div's contents inside the textarea use:
var text = '<div class="item"><a class="as">q</a>test</div>';
$('#textArea').append(text);
The HTML for the text area is the same as in the other example:
<textarea id="textArea"></textarea>
You cannot put div in textarea but sometimes you need to do so. Good news is that you can do it in other way by using contenteditable property of elements. Like
<div contenteditable="true" style="min-height:50px; width:300px;" id="txtDiv">
</div>
This Div will behave exactly like a Textarea but you can append anything you want. And remember when you want to grab data from inside it in jquery
var ContentofDiv = $('#txtDiv').html();

How to get a selected div portion from a variable containing html code by using javascript?

I have a variable var 'html', it contains some html codes .in it there is a div with id messages. I want to get only that div contents from the 'html' variable into another variable using javascript.
Please help . .
The easiest way with jQuery in my opinion:
var message = $('<div />').append(html).find('#message').text();
//.html();
If it's valid HTML, you don't even have to append it to the DOM:
var html = "<div id='wrapper'><div id='messages'>Messages!</div></div>";
// Create DOM node (subtree) from the string (but don't append to the document):
var node = $(html);
// Find the messages div:
var messages = node.children('#messages');
// Get the contents of the div:
var result = messages.text();
Edit: here's a working example: http://jsfiddle.net/xndKN/1/
// your html code
var html = '...';
// add a temporary div
$('<div id="temp" style="display:none">'+html+'</div>').appendTo('body');
// extract the data inside the 'message' div
var message = $('#temp #message').text();
// remove temporary div
$('#temp').remove();
Now, the variable message will contain the text inside the div with id 'message'
First of all you question is not giving enough information about your situation. You have not posted the code. Anyway if you try the following you will get access the the message div.
var o = $("<html><body><div id='parent'><div id='message'>Hello</div></div></body></html>")
$(o).children("#message").text()
I have tried it on Chrome Developer tool and it is working.
try
var myhtml = "here is my data outside div
<div id='message'>inside div with id message</div>";
var node = $(myhtml);
$(node).append(myhtml);
alert($(node).find('div#message').text());
WORKING DEMO

Categories