I'm building a comment module for my web application.
In the application I need commenting. When a user posts a comment, I would like jQuery to grab the TextArea's value and then insert it into the page <p>. Problem is that when it inserts the contents it loses the HTML formatting, mainly page breaks/returns which confuses users. How can I fix the code to retain the HTML styling?
Snippets:
comments.js
var textsubmitted = $("#write-new-comment-textarea").val();
var commentStr = '<li><div class=\"comment-header\"><span class=\"comment-avatar\"><img src=\"' + data.profilepicsrc + '\" /> </span><span class=\"comment-author\"> <b>' + data.personname + '</b> </span><span class=\"comment-timestamp\">just now</span> </div><div class=\"comment-body\"><p>' + textsubmitted + '</p></div></li>';
Thanks
You need to escape your textsubmitted string . If you set the text property of a div , jquery automatically does that . So you can build only the HTML part of your commentsStr , append it to dom and then assign it the text value later .
var textsubmitted = $("#write-new-comment-textarea").val();
var commentStr = '<li><div class=\"comment-header\"><span class=\"comment-avatar\"><img src=\"' + data.profilepicsrc + '\" /> </span><span class=\"comment-author\"> <b>' + data.personname + '</b> </span><span class=\"comment-timestamp\">just now</span> </div><div class=\"comment-body\"><p></p></div></li>';
$("div.comment-body").text(textsubmitted);
try this..
demo
var textsubmitted = $("#write-new-comment-textarea").val();
var commentStr = '<li><div class=\"comment-header\">'+
'<span class=\"comment-avatar\">'+
'<a href=\"/user-view/' + data.personid + '/\">'+
'<img src=\"' + data.profilepicsrc + '\" />'+
'</a>'+
'</span>'+
'<span class=\"comment-author\">'+
'<a href=\"/user-view/' + data.personid + '/\">'+
'<b>'+ data.personname + '</b>'+
'</a>'+
'</span>
<span class=\"comment-timestamp\">just now</span>'+
'</div>'+
'<div class=\"comment-body\">'+
'<p>' + brbr(textsubmitted) + '</p>'+
'</div></li>';
function brbr(str) {
var breakTag = '<br>';
return (str + '').replace(/([^>\r\n]?)(\r\n|\n\r|\r|\n)/g, '$1'+ breakTag +'$2');
}
This ended up working nicely too:
var textsubmitted2show = $('#write-new-comment-textarea').val().replace(/\n/g,'<br />');
Related
I am working with javascript also am a newbie in js so actually, I want to get the current index and then update a specific field to the realtime if somebody helps me out I will thankful to him here is my script where I fetch the data in realtime firebase and I put my value inside inner HTML format so I want when user press specific buttons its pending data update to booked.
userDataRef.once("value").then(function(snapshot) {
snapshot.forEach(function(childSnapshot, index) {
console.log(childSnapshot.val());
key = childSnapshot.key;
userid = childSnapshot.val().userid;
var carid = childSnapshot.val().carid;
var imageload = childSnapshot.val().imgurl;
var loadfirstname = childSnapshot.val().userfirstname;
var loadcarname = childSnapshot.val().carname;
var loadlastname = childSnapshot.val().userlastname;
var loadphonenumber = childSnapshot.val().phoneNumber;
var loaddropoffadd = childSnapshot.val().dropoffaddress;
var loadpickupadd = childSnapshot.val().pickupaddress;
loadprice = childSnapshot.val().price;
var appenddata =
'<div class="container rounded" style="background-color: #00829E" id="datalist">' +
'<div class="row">' +
'<div class="col-md-12">' +
'<div class="row">' +
'<div class="col-md-4 mt-2 mb-2 ml-2">' +
'<div class="container rounded"style="background-color: #efefef">' +
'<center>' +
'<img src="' + imageload + '" id="loadimage" style="height: 100px; width: 100px;">' +
'</center>' +
'</div>' +
'</div>' +
'<div class="col-md-6 mt-2 mb-2">' +
'<div class="container rounded para">' +
'<h5 id="loadcarname">' + loadcarname + '</h5>' +
'<p id="loadfirstname">First Name: ' + loadfirstname + '</p>' +
'<p id="loadlastname">Last Name: ' + loadlastname + '</p>' +
'<p id="loadphone">Phone Number: ' + loadphonenumber + '</p>' +
'<p id="loadpickup">Pickup Address: ' + loadpickupadd + '</p>' +
'<p id="loaddropoff">Dropoff Address: ' + loaddropoffadd + '</p>' +
'</div>' +
'</div>' +
'<div class="col-md-2"></div>' +
'</div>' +
'<div class="row">' +
'<div class="col-md-4"></div>' +
'<div class="col-md-4"></div>' +
'<div class="col-md-2 para1 mt-2">' +
'<p id="loadprice">Price:' + loadprice + ' Sum/Day</p>' +
'</div>' +
'<div class="col-md-2 mb-3">' +
'<button class="btn btn-info btn-sm rounded-pill check" id="approvebutton" value ="Booked" onclick="myFunction(this.value)" aria-pressed="true">Approve</button>' +
'</div>' +
'</div>' +
'</div>' +
'</div>' +
'</div>';
$("#listshow").append(appenddata);
});
});
when user press the button I call function named Myfunction I just want to update specific id in that function
my function name script
function myFunction(value) {
approvecar = document.getElementById('loadprice').value;
firebase.database.ref("carBooking/" + userid).update({
status: ""
});
}
To be able to write a value in the database, you need to know the complete path to that node. Right now, you know what value to write, but you've lost information about what key (the -M.... value) to write it to.
So you'll need to pass the key of the item the user clicked on, from your HTML into the myFunction function.
The simplest way to do that is something like:
'<button class="btn btn-info btn-sm rounded-pill check" id="approvebutton" value ="Booked"
onclick="myFunction(\''+key+'\', this.value)" // 👈 is changed
aria-pressed="true">Approve</button>' +
There may be some syntax problems in this part as I'm having a hard time parsing your HTML construction code.
Now that you're passing both the key and the value, you can update the correct node with:
function myFunction(key, value) {
approvecar = document.getElementById('loadprice').value;
firebase.database.ref("carBooking").child(key).update({
status: ""
});
}
i want to pass dynamic imei number , instead of static imei. i want to pass
obj[i].DeviceImei
inside the href tag at the place of 1009 for the google map marker info window view more option.
var contentString = '<div id="content">' +
'<div id="siteNotice">' +
"</div>" +
'<div id="bodyContent">' +
"<p><b>Location: " + obj[i].location + "<br>"
+ "\n" +"IMEI: " + obj[i].DeviceImei +"<br>"
+ "\n" + "PRV Trip: " + obj[i].PRV_T + "<br>"
+'<a href="http://hostname/1009">' +
"View More" +
"</p>" +
"</div>" +
"</div>";
You can scape quotes with \", so in your case it would be:
+'<a href=\"http://hostname/' + obj[i].PRV_T + '\">' +
I have a param called "exraData" which can be a string or array (depends on some conditions).
I have to display some content using java script.
in case "exraData" is a String the content is displayed well by the following code:
this.resulto = '<div class="avatarHeight">' +
'<div class="avatar">' + spanPic + '</div>' +
'<div class="info ' + company + '">' + item.show +
'<div class="tt-hint">' + exraData + '</div>' +
'</div>' +
'</div>';
In case it is array I use the following code but nothing is displayed:
this.resulto = '<div class="avatarHeight">' +
'<div class="avatar">' + spanPic + '</div>' +
'<div class="info ' + company + '">' + item.show
for(var i=0;i<exraData.length;i++){
+'<div class="tt-hint">' + exraData[i] + '</div>'
}
+'</div>' +
'</div>';
You can't have a for loop inline. Here is the for loop outside with the desired result.
var spanPic='tempPic';
var company='xyz';
var item={};
item.show='temp';
var exraData=['one','two','three'];
this.resulto = '<div class="avatarHeight">' +
'<div class="avatar">' + spanPic + '</div>' +
'<div class="info ' + company + '">' + item.show;
for(i=0;i<exraData.length;i++){
this.resulto +='<div class="tt-hint">' + exraData[i] + '</div>';
}
this.resulto+='</div>' + '</div>';
document.write(this.resulto);
When I parse an html string with $.parseHTML(), the outer most div disappears.
Given the html string:
var myCode = '<div class="outer">' +
' <div class="inner">' +
' <div>' +
' <p>Hello!</p>' +
' </div>' +
' <div>' +
' <p>Hello!!' +
' </p>' +
' </div>' +
' </div>' +
'</div>';
When I call parse this html, the outer most div (class="outer") isn't present.
var $myHtmlObject = $($.parseHTML(myCode))
console.log($myHtmlObject.html()) // no "outer" div present.
I made a jsfiddle to show the behavior
I can easily get around this by wrapping everything in another div before I parse it, but that seems like a hack for something that should otherwise work.
Because .html() gives the inner html of the first element of the set of element on which it was called. What you are looking for here is the outerHTML
console.log($myHtmlObject[0].outerHTML)
console.log($myHtmlObject.prop('outerHTML'))
Also there is no need to use parseHTML() in this case
var log = (function() {
var $log = $('#log');
return function(msg) {
$('<p/>', {
text: msg
}).appendTo($log)
}
})();
var myCode = '<div class="outer">' +
' <div class="inner">' +
' <div>' +
' <p>Hello!</p>' +
' </div>' +
' <div>' +
' <p>Hello!!' +
' </p>' +
' </div>' +
' </div>' +
'</div>';
var $html = $(myCode);
log('html: ' + $html.html())
log('outer-html: ' + $html.prop('outerHTML'))
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="log"></div>
I have a function to generate data-content for bootstrap popover from Json .
The problem with the function is that, if I pass json object in which a member contains a single quote then the popover content is not set.
function setupopoverContent(content) {
var json = JSON.parse(content);
var contents = '<div style="">'
contents += '<div id="hellobar" class="large right remains_at_top row-fluid" style="background-color: ' + json.BarColor + '; color: ' + json.TextColor + '; border-radius: 5px;font-family: Helvetica,Arial,sans-serif;"> ';
contents += '<div id="hb_msg_container" class="span11"> <span id = "topbar_message" style="padding-bottom:14px;"> ';
contents += HtmlEncode(json.Message);
contents += '</span> ';
contents += '<a id = "topbar_linktext" class="hellobar_cta hb-button" href= "' + json.LinkURL + '" target="_blank" style="color: ' + json.ButtonTextColor + '; background-color: ' + json.ButtonColor + '; border-color: #000000"> ';
contents += HtmlEncode(json.LinkText);
contents += '</a></div> ';
contents += '</div></div>';
return contents;
}
Suppose that json.Message=All go'es here, then the popover content is not set.
How can i solve this problem?
Have you tried omitting HtmlEncode?
http://jsfiddle.net/z6gnpnr5/