Develop Reference

GET request iframe

<div id="result"></div>
<button id="send">Request</button>
JavaScript:
var button = document.getElementById("send"),
div = document.getElementById('result');
button.addEventListener('click', function() {
var result = createIframe("f", "/lorem.txt");
console.log(result.contentWindow);
div.innerHTML = result.contentWindow.document.body.innerHTML;
});
function createIframe(name, src, debug) {
var tmpElem = document.createElement('div');
tmpElem.innerHTML = '<iframe name="' + name + '" id="' + name + '" src="' + src + '">';
var iframe = tmpElem.firstChild;
iframe.style.display = 'none';
document.body.appendChild(iframe);
return iframe;
}
I have on the local server is a file lorem.txt. With hidden frame I am trying to query the contents of this file and paste it into <div id="result"></div>. But for some reason it does not is inserted. What could be the problem?

I believe elements with the ids of "send" and "result", respectively do not exist at the moment when your javascript code is running, therefore the click event will not be attached to the button. You need to make sure that these elements exist when you try to get them by their ids or attach events to them.
Solution: Either make sure your code is running after the document has been loaded or put your relevant script tag below the html you have described in your question.

Add a default image if there is not image in the container

I am working on this pen.All I want to do is if there is no image in the post then default image should be shown.The Jquery I've used is
$(function () {
$(".post").each(function () {
var posthead = $(this).find("h2.post-title").text(),
postlink = $(this).find("h2.posttitle a").attr("href");
if($(this).find("img:first")>=1){
var imageSrc=$(this).find("img:first").attr('src');
}
else{
var imageSrc="http://3.bp.blogspot.com/-P5H7BaGibPg/UjVD-0SIs9I/AAAAAAAADFk/l65svtw9IHg/s320/70-photography-2.jpg";
}
$(this).replaceWith("<div class='post'><img class='thumb' src='" + imageSrc + "'/><div class='posthead'><h2 class='hometitle'><a href='" + postlink + "'>" + posthead + "</a></h2></div></div>");
});
});
According to above if there is an image then its attribute src should be as a var imageSrc but if it is not else condition having a image should be as var imageSrc.

If you want to check if an image is present you need the length property of the jQuery object
Replace
if($(this).find("img:first")>=1){
for
if($(this).find("img:first").length>=1){
Here's the updated codepen

Unable to show images in javascript

I am using javascript to show images .I have 5 images but unable to display them.My code is as follows:
function set()
{
var i;
for(i=1; i<=5; i++)
{
var image = "<img src=images/sl + i + />";
document.getElementById('slider').innerHTML = image;
}
}
setInterval("set()","500");
<div id="slider">
<img src="images/sl1.jpg" />
</div>

Change -
var image = "<img src=images/sl + i + />";
To -
var image = "<img src=images/sl" + i + "/>";
Also I believe you need to append image format in this too(jpg | png etc)
EDIT --
var image = "<img src=images/sl" + i +".jpg"+" style='width:500px;height:300px;' />";

You're always putting the same image right now, the one of end of loop. I can propose this code :
var i = 0;
function set(){
var image = "<img src=images/sl" + i + "/>";
document.getElementById('slider').innerHTML = image;
i = (i+1)%5;
}
setInterval(set, 500);
I fixed a few other bugs/problems. Never pass a string as first argument to setInterval, pass the name of the function or a function expression. And the second needed argument is a number, it doesn't make sense to pass a string literal.
But it would have been cleaner to define the img element in the HTML part of your code and just change the src property instead of the whole slide inner HTML. It would also tell to the browser to change the display only after the image has been loaded.

Assuming that the filenames of the images aresl1, sl2,..., sl5 , it should be
var image = "<img src=images/sl"+i+"/>";

Try this:
function set()
{
var i;
for(i=1; i<=5; i++)
{
var image = "<img src='images/sl" + i + "'/>";
document.getElementById('slider').innerHTML = image;
}
}
setInterval("set()","500");
<div id="slider">
<img src="images/sl1.jpg" />
</div>

Your ' i ' variable is part of your string, you need:
var image = "<img src=images/sl" + i + "/>";

javascript function using jquery addClass() method does not add class

The script works, creates everything correctly, etc., but the jquery addClass method isn't adding the class. I'm new to using jquery methods in a javascript function, any help is appreciated, including alternate methods for adding the appropriate classes without using jquery.
function thumbnail(Img, Element, Modal, ModalTitle) {
"use strict";
/*jslint browser:true*/
/*global $, jQuery*/
//this function will append an anchor tag with the appropriate functionality, accepting inputs on the image filename, attaching element, and modal
//Img = full filename in format of foo.png
//Element = the ID of the element within which the thumbnail anchor will be placed
//Modal = the ID of the modal
//ModalTitle = Text used for title of the modal and title of the caption
var image, element, modal, loc, output, iUrl, modal_loc, modal_output, mtitle;
image = Img;
element = Element;
modal = Modal;
mtitle = ModalTitle;
iUrl = "/design-library/images/thumbs/" + image;
output = "<a href='#' data-reveal-id='" + modal + "'>";
output += "<img class='sample_img' src='" + iUrl + "' alt='" + mtitle + "' />";
output += "</a>";
output += "<p class='caption'>" + mtitle + "</p>";
modal_output = "<h1>" + mtitle + "</h1>";
modal_output += "<img src='" + iUrl + "' alt='" + image + "' /><a class='close-reveal-modal'>×</a>";
//create the modal container
$(modal).addClass('reveal-modal');
modal_loc = document.getElementById(modal);
modal_loc.innerHTML = modal_output;
//the end of the script gets the element and adds the anchor tag that exists in output
$(element).addClass('samples');
loc = document.getElementById(element);
loc.innerHTML = output;
}

Since modal and element are IDs, you should correct your selectors to use them as ones:
$('#' + modal).addClass('reveal-modal');
$('#' + element).addClass('samples');
Side note. Once you have found the DOM element with jQuery, there is no need to perform the second search with getElementById:
var modal_loc = $('#' + modal);
modal_loc.addClass('reveal-modal');
modal_loc.html(modal_output);

if modal is an ID string, you need to do:
$('#'+modal).addClass('reveal-modal');

Try changing:
$(element).addClass('samples');
to
$('#' + element).addClass('samples');

jQuery $().html escapes &-sign

var alt = json_data['alt']; // some text
var url = json_data['url']; // some url
var img_url = '<img src=\'/' + url + '?h=100&w=100\' alt=\'' + alt + '\'>';
$('#imagepreview').html(img_url); // translates to <img src="/some_url?h=100&w=100" alt="some_text">
Why does this happen and how can I prevent this?

& is actually the valid URL, not &

I personally don't see that happen, but nevertheless you should do it this way:
var img = $('<img />', {
src: '/' + url + '?h=100&w=100',
alt: alt
}).appendTo('#imagepreview');
That makes sure any escaping is done properly, such as the alt attribute!

You must use \u0026 instead of &