Does jQuery UI dialog box text have a newline option? - javascript

I'm making a website using data from Pokemon and trying to execute a dialog box. I've tried using JS newline character in the text:
function alertBox(monster) {
$("#dialog").dialog();
$("#dialog").dialog("option", "title", monster);
$("#dialog").text("Height: " + pokemon.height[monster] + "\n" +
"Weight: " + pokemon.weight[monster]);
}
...And I've also tried using the html line break tag:
function alertBox(monster) {
$("#dialog").dialog();
$("#dialog").dialog("option", "title", monster);
$("#dialog").text("Height: " + pokemon.height[monster] + "<\br>" +
"Weight: " + pokemon.weight[monster]);
}
But neither seems to be returning the newline effect I'm looking for! The JS newline just acts as a space and the html line break tag just concatenates to the string. Is there a way to force a newline in the dialog text?

The jQuery .text() function automatically escapes HTML entities, so your <br /> tag is no longer being interpreted as HTML, but instead gets converted to escaped text.
To prevent this HTML escaping, you need to use .html() instead of .text() to set the contents:
function alertBox(monster) {
$("#dialog").dialog();
$("#dialog").dialog("option", "title", monster);
$("#dialog").html("Height: " + pokemon.height[monster] + "<br />" +
"Weight: " + pokemon.weight[monster]);
}

Consider adding:
$("#dialog").css("white-space","pre-wrap");
This will make the \n significant, and it will render as such.
Alternatively, consider using some actual HTML. For instance, your dialog could be:
$("#dialog").html("<ul>" +
"<li><b>Height:</b> "+pokemon.height[monster]+"</li>" +
"<li><b>Weight:</b> "+pokemon.weight[monster]+"</li>" +
"</ul>");
For more complex layouts, I'd suggest using a templating system instead of hardcoding HTML into your JavaScript.

Hope it will help to see how text() val() and html() works
$(document).ready(function () {
$("#dialog").html("Height: " + 11 + "<br>" +
"Weight: " + 22);
$("#dialog2").val("Height: " + 11 + "\n" +
"Weight: " + 22);
$("#dialog3").text("Height: " + 11 + "\n" +
"Weight: " + 22);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="dialog"></div>
<textarea rows="5" cols="20" name="text" id="dialog2"></textarea>
<textarea rows="5" cols="20" name="text" id="dialog3"></textarea>

Related

Trying to escape quotes in a href tag

I have the following line of code,
$("#busdata").append("<div>" + data.response.results[i].webUrl + "</div>");
I essentially want the "data.response.results[i].webUrl" to replace the url string, but I'm not quite sure how to escape the quotes properly.
You can escape quotes by replacing them with \"
or just use single quotes - '
So "<div><a href="url">" becomes
"<div><a href=\"url\">" or "<div><a href='url'>"
a single quote ' and a string concatenator +
$("#busdata").append("<div><a href='"+ data.response.results[i].webUrl +"'>" + data.response.results[i].webUrl + "</a></div>");
Your syntax is wrong. You need to escape quotes. Change your <a href="url"> to <a href=\"url\"> like this:
$("#busdata").append("<div>" + data.response.results[i].webUrl + "</div>");
Or if you feel that's a bit tough, you can exchange the quotes, ' for ":
$("#busdata").append('<div>' + data.response.results[i].webUrl + "</div>");
Else, if you are trying to add the URL from the response:
$("#busdata").append("<div>" + data.response.results[i].webUrl + "</div>");
if url is a variable
$("#busdata").append("<div><a href='" + url +"'>" + data.response.results[i].webUrl + "</a></div>");
and if you want to write by yourself
$("#busdata").append("<div><a href='url'>" + data.response.results[i].webUrl + "</a></div>");
You can store it in variable instead :
var url = data.response.results[i].webUrl;
$("#busdata").append("<div>" + url + "</div>");
Hope this helps.
Simply do it following my example:
var a = $('<a />', {
href: 'url here',
text: 'text here'
}); $('body').append(a);
You could do this :
$("#busdata").append("<div><a href='"+data.response.results[i].webUrl +"'>" + data.response.results[i].webUrl + "</a></div>");
Since you are using double quotes for the string to append, you can use single quotes around the variable in the href attribute and then add that variable.
This is most easily achieved by not building HTML by smashing strings together in the first place.
$("#busdata").append(
$("<div />").append(
$("<a />").attr("href", data.response.results[i].webUrl)
)
);
Escaping quotes is not necessary
$("#busdata")
.append("<div><a href="
+ data.response.results[i].webUrl
+ ">"
+ data.response.results[i].webUrl
+ "</a></div>"
);

PL/SQL CHR(13)||CHR(10) returning 0

I'm using the EMail function in PL/SQL.
The function getting called by Javascript after button got clicked.
This working very fine.
My Problem is that I generate the EMail Body in Javascript using PL/SQL variables.
Code Looks like
var content = "Hello " + '|| chr(13)||chr(10)||' + " " + " Name: " + "'||v_name ||'" + '||chr(13)||chr(10) ||' + " ";
So here the problem chr(13)||chr(10) returning the character 0 in the string.
But i want a Newline.
I tried with \r\n which didn't worked.
HTML-Tags also don't work because my Email Provider giving me th HTML-Tags out.
Excuse my english :)
Hope someone can help me.
I tried with the '\r\n' in javascript and it worked for me.
var content = "Hello " + '\r\n' + " " + " Name: " + "'||v_name ||'" + '\r\n' + " Test";
alert(content);
below is the sample jsfiddle for the same.
https://jsfiddle.net/njbjusmk/.
I'm not sure yet, but you might've messed something up with your apostrophes.
Maybe you should try parsing your content as follows:
var content = "'Hello '||CHR(13)||CHR(10)||' Name: ||" + v_name + "'||CHR(13)||CHR(10)||' " + " Message body "+ "'";

Javascript creating a li element and assigning text to data-attribute is being truncated

In javascript I am creating a li element as per below which contains only the problem I am seeing.
The data-videoUrl is showing the full url, so all good there.
The issue is the entry.link and entry.title, while debugging, I verified the strings are within quotes. i.e. "This is a pod cast." The data-videoTitle and data-videoDesciption are being truncated though. i.e. "This" will show from the previous example.
I'm not sure what is occuring in the latter two data assignments as I've verified the text is not double quoted etc. What is occuring with the html5 data elements? I can provide a more complete example if needed.
var podItem = document.createElement("li");
podItem.innerHTML = entry.title
+ "<a data-videoUrl=" + entry.link + " "
+ "data-videoTitle=" + entry.title + " "
+ "data-videoDescription=" + entry.contentSnippet + " "
+ "</a>";
document.getElementById("podCastList").innerHTML += podItem.innerHTML;
Here is a the html being generated.
<a data-videourl="http://rss.cnn.com/~r/services/podcasting/studentnews/rss/~3/d3y4Nh_yiZQ/orig-sn-060614.cnn.m4v" data-videotitle="CNN" student="" news="" -="" june="" 6,="" 2014="" data-videodescription="For" our="" last="" show="" of="" the="" 2013-2014="" school="" year,="" cnn="" takes="" a="" look="" back,="" ahead,="" and="" at="" stories="" making="" ...="" <=""></a>
I'm sure there's something I'm not fully understanding. Why would the first data element get the text correctly, and the next two data elements break up the text as in: [data-videotitle="CNN" student="" news=""]. The text is a straight forward sentence quoted i.e. "CNN student news..."
Why would videoUrl work correctly and the other two not?
You need to add some quotes around the attributes...
podItem.innerHTML = entry.title
+ "<a data-videoUrl=\"" + entry.link + "\" "
+ "data-videoTitle=\"" + entry.title + "\" "
+ "data-videoDescription=\"" + entry.contentSnippet + "\" "
+ "</a>";
You'll also want to make sure you escape any quotes that are inside the attributes as well.

How can I concatenate multiline string in javascript?

There are lots of results for the correct syntax for appending <li>'s, however I am trying to find a solution where +this['name']+ values are included in the <li>'s. firebug is displaying 'SyntaxError: unterminated string literal' and jslint is displaying 'Unclosed string'. I've tried many different variations of the placements of the commas but I haven't been able to get it to work.
$.each(data.result, function() {
$("ul").append("<li>Name: "+this['name']+"</li>
<li>Age: "+this['age']+"</li>
<li>Company: "+this['company']+"</li>
<br />");
});
Thank you.
you can escape end of line with backslash character \, like so:
$.each(data.result, function(){
$("ul").append("<li>Name: " + this['name'] + "</li> \
<li>Age: " + this['age'] + "</li> \
<li>Company: "+this['company']+"</li> \
<br />");
});
This is due to the fact that Javascript automatically insert semi-columns sometime on line end. And in this case, you string weren't close. Another solution is to close each string on each line, and using + to concat them all.
$.each(data.result, function(){
$("ul").append("<li>Name: " + this['name'] + "</li>" +
"<li>Age: " + this['age'] + "</li>" +
"<li>Company: "+this['company']+"</li>" +
"<br />");
});
(Unrelated, but you <br/> aren't allowed inside a <ul> element)
This should be much faster
li = '';
$.each(data.result, function(){
li += "<li>Name: " + this['name'] + "</li>" +
"<li>Age: " + this['age'] + "</li>" +
"<li>Company: "+this['company']+"</li>" +
"<br />"; // could remove this and use css
});
$("ul").append(li);
See http://net.tutsplus.com/tutorials/javascript-ajax/10-ways-to-instantly-increase-your-jquery-performance/
You actually don't want to concatenate this at all! Consider for a moment what will happen to variable data that contains HTML or HTML-like data. Using your method, it will be parsed as such, possibly breaking things and even opening you up to XSS attack methods.
You're already using jQuery, so the proper way is easy:
$('ul').append(
$('<li/>').text('Name: ' + this.name),
$('<li/>').text('Age: ' + this.age),
// etc.
);
(Note: I believe .append() allows as many parameters as you give it. If not, try using an array of elements as you append.)

Javascript Parameter Passing Not Working

The code dynamically creates a listview which works but i want to make it so when a listview item is clicked it sends the a url paramater to another method. When i set a paramater it doesnt alert the paramater, but when i give no parameter it works.
var output =
"<li onclick='openURL()'><h3> Module Code: " +
results.rows.item(i).module
+ "</h3>Room: "
+ results.rows.item(i).room +
"</li>";
The above works - No parameter in openURL();
var output =
"<li onclick='openURL('" + results.rows.item(i).url + "')'><h3> Module Code: " +
results.rows.item(i).module
+ "</h3>Room: "
+ results.rows.item(i).room +
"</li>";
The above doesnt work - I have done alert(results.rows.item(i).url) and it has a value.
function openURL(url) {
alert("opening url " + url);
}
Could someone explain what i'm doing wrong, i've been trying to solve the problem for hours.
Cheers!
You are using single quotes to open the HTML attribute, you can't use it as JavaScript String because you'll be closing the HTML attribute, use double quotes:
var output =
"<li onclick='openURL(\"" + results.rows.item(i).url + "\")'><h3> Module Code: " +
results.rows.item(i).module
+ "</h3>Room: "
+ results.rows.item(i).room +
"</li>";

Categories