Develop Reference

Can't insert line break in Ajax outputString

I have an Ajax script that outputs both the title and description of certain jobs based on user input. While I can get these displaying without issue, I can't seem to insert a line break between the title and description. I have the following:
outputString = savedData[i].firstName + ". Description: " + savedData[i].cardNumber;
var paragraph = $("<p />", {
text: outputString
});
$("#data").append(paragraph);
I have tried inserting a traditional br line break, as well as, \n and \r\n both in the quotation marks before description which just displays the text of the line break rather than breaking the line, and also outside of the quotation marks which breaks any output. How can I successfully implement a linebreak?
Cheers.

As you are providing the outputString string as text, the html <br/> is being displayed as text in the string. You should specify it in as html and use <br/> for line break:
outputString = dataJobs[i].title + ". <br/>Description: " + dataJobs[i].description;
var paragraph = $("<p />", {
html: outputString
});
$("#data").append(paragraph);

If you would like to add a <br/> specifically, then you can do the following:
// assuming that your dataJobs[i].title and dataJobs[i].description are defined
var paragraph = $("<p />");
paragraph
.append(dataJobs[i].title + '.')
.append('<br />')
.append("Description: " + dataJobs[i].description);
$("#data").append(paragraph);
You need to add a <br/> in a separate append call, but not as part of a string. Hope this helps.

In the code below as the P tag has display property set to block by default, so there is no need for using line break.
Setting Title and Description in two different P tags that will solve your problem
Try the following code.
outputString = "<p>Title: "+dataJobs[i].title+"</p><p>description: "+dataJobs[i].description+"</p>";
$("#data").append(outputString);

I think the "jQuery way" should look like this:
var $outputString = $( "<span>" + dataJobs[i].title + ".<br>Description: " + dataJobs[i].description + "</span>" );
$( "#data" ).append($outputString.wrap( "<p></p>" ));

outputString = dataJobs[i].title + ". Description: " + dataJobs[i].description + "<br/>";

title does not work with decodeURIComponent and space

I am trying to write with javasctipt line of code, but decodeURIComponent ignore everything after %20 (space). How to solve this?
$(".intome").append($('<img title=' + decodeURIComponent(filename) + ' src=' + dir + ' />'));
Instead of:
<img title:"some text" src="img.png">
I am geting this:
<img title:"some" text src="img.png">
JSFiddle: https://jsfiddle.net/emnLy1t5/9/
I am an absolute newbie so I would really appreciate any advice. Also I am not native english speaker, so I am sorry for my bad english...

Wrap the output of decodeURIComponent(filename) in quotes.
$(".intome").append(
$('<img title="' + decodeURIComponent(filename) + '" src=' + dir + ' />')
);

javascript load image to div onclick

I want to display image user click from image link in a for loop to a div.
my for loop is as follows.
<a href='' name=my_image[i]
onclick='disp_image('link_image_url')'id=my_image[i] class='popup-open'><img src=my_image[i] width='80' height='65'></a>;
and my javascript function
<script language=\"javascript\">
function disp_image(url){
document.getElementById('image').innerHTML ="<img src=url width='100' height='105'>";
;}
</script>
</script>
However it is not being load in my div content
<div id="image"></div>
can someone has an idea how can i display selected image in a div content dynamically

Use this:
var _leng = my_image.length
, td = "<td><a href='#url#' onclick='displaying(/image#url#)' id='/image#url#'><img src='#url#' width='80' height='65' /></a></td></tr><tr>"
, i;
for (i=0; i < _leng; i++) {
str += td.replace(/#url#/g, my_image[i])
}
Check this example:
http://jsfiddle.net/hMfRG/

You have mismatched quotes so the string isn't being generated properly, or at all... you probably have errors in the console.
str += "<td><a href='" + my_image[i] + " onclick='displaying()' id='/image" + my_image[i] + "'><img src='" + my_image[i] + "' width='80' height='65' /></a></td></tr><tr>";
You can't use these special quotes ‘’ or ”, only use these single or double quotes ' or ".
Example:
document.getElementById('image')
You have displaying() in the loop but below, its called displayImage(). Also, the function expects an argument which you're not supplying in the call.

Look at the syntax highlighting of your post. You can clearly see that your quotes are all over the place. For instance, you have src='"+url+'", which is wrong. You also have "smart quotes" in places. Fix the quotes and it should stop throwing syntax errors.
But most importantly, your onclick function calls displaying(), whereas the function is called displayImage and takes an argument.

I've done it this way:
<div id="result" style="width:450px;height:296px;">
<img name="main" src="/images/image.jpg" alt="">
</div>
function change_pic(img_name,img_src)
{
document[img_name].src=img_src;
}

Blinking page title

I'm trying to get some notifications working for AJAXChat. To do this all I want to do is get the title of the page to blink until focused. To do this I'm using the jquery-titlealert plugin. The problem is the html that is generated for the onload event is generated inside a js file shown here
return '<div id="'
+ this.getMessageDocumentID(messageID)
+ '" class="'
+ rowClass
+ '">'
+ this.getDeletionLink(messageID, userID, userRole, channelID)
+ dateTime
+ '<span class="'
+ userClass
+ '"'
+ this.getChatListUserNameTitle(userID, userName, userRole, ip)
+ ' dir="'
+ this.baseDirection
+ '" onload="$.titleAlert('New Message');">'
+ userName
+ '</span>'
+ colon
+ this.replaceText(messageText)
+ '</div>';
return
When I use this, it breaks the page. If I replace ('New Message') with (New Message) the page loads again but the notification isn't working. I think this is because its displaying a Javascript function inside Javascript. Anyone see anything here I'm missing?

Have you tried escaping your quotes? I.e.:
+ '" onload="$.titleAlert(\'New Message\');">'
Any single quote (') inside a single quoted string (or double quote (") inside a double quoted string) needs a backslash (\) before it. See the MDN String Literals documentation for more information about strings and proper character escaping.

You need to escape the quotes.
Change this
'" onload="$.titleAlert('New Message');">'
to this
'" onload="$.titleAlert(\'New Message\');">'

Try escaping the apostraphe's correctly:
+ '" onload="$.titleAlert(\'New Message\');">'

Daily image/link rotation javascript question

I have this daily image rotation script, which works great. I need the images to be clickable though. Any help is appreciated.
<!-- Begin
today = new Date();
day = today.getDay();
arday = new Array
("http://www.magnatexpumps.com/imagesnew/featured/featuredProduct_3575.jpg",
"http://www.magnatexpumps.com/imagesnew/featured/featuredProduct_mp_mpl.jpg",
"http://www.magnatexpumps.com/imagesnew/featured/featuredProduct_mph.jpg",
"http://www.magnatexpumps.com/imagesnew/featured/featuredProduct_mmp.jpg",
"http://www.magnatexpumps.com/imagesnew/featured/featuredProduct_mep.jpg",
"http://www.magnatexpumps.com/imagesnew/featured/featuredProduct_mst.jpg",
"http://www.magnatexpumps.com/imagesnew/featured/featuredProduct_s.jpg",
"http://www.magnatexpumps.com/imagesnew/featured/featuredProduct_maxp.jpg",
"http://www.magnatexpumps.com/imagesnew/featured/featuredProduct_mpt.jpg",
"http://www.magnatexpumps.com/imagesnew/featured/featuredProduct_mta.jpg",
"http://www.magnatexpumps.com/imagesnew/featured/featuredProduct_me.jpg",
"http://www.magnatexpumps.com/imagesnew/featured/featuredProduct_sm.jpg");
document.write("<img src='" + arday[day] + "'>");
// End -->
</SCRIPT>

Why don't write an <a> element as well?
document.write('<a href="LINK_HERE" title="TITLE_HERE"><img src="' + arday[day] + '"><\/a>');

Clickable to where?? You've got to add a url to each "row" in addition to the img src.
Eg instead of each row being just "http://www.magnatexpumps.com/imagesnew/featured/featuredProduct_3575.jpg", do instead:
{ img: "http://www.magnatexpumps.com/imagesnew/featured/featuredProduct_3575.jpg",
url: "LINK GOES HERE" },
Then the last line can do:
document.write('<img src="' + arday[day].img + '" />');

The example below creates a link around your image, hjust change the href attribute's value :
document.write("<a href='#'><img src='" + arday[day] + "' border='0'></a>");

Few general tips:
Always declare your variables (var today = ..., not just today = ...)
Drop new Array in favor of more concise (and just as compatible these days) "[" and "]" syntax.
Don't repeat host name in array of links. It's a maintenance nightmare and a waste of bandwidth.
Drop HTML comments from within your script contents. Browsers that need them are obsolete by now.
Always provide "alt" attribute on your images. When you wrap them with anchor, don't forget to give title to anchor.