Develop Reference

implementing html tags of js variable

When I click open first window link a popup opens.
in that popup you will see a grid with two columns.
in that first column i need to combine name and and icon.
so i added span tag before a tag but its not working.
can you guys tell me how to combine.
providing code below.
http://jsfiddle.net/cepzsokp/
var a = $('<span></span><a/>', {
class: 'sportsDataPlayer',
download: 'download.csv',
type: 'text/csv',
href: URL.createObjectURL(data),
html: ev.FileName
});
return a[0].outerHTML;

You can not do that html mark up. easiest thing would be just add the span before the outerHTML
var a = $('<a></a>', {...})
return "<span></span>" + a[0].outerHTML;

I have edited your latest jsfiddle. Here is the working DEMO
I have modified this line of code as below:
return "<span onclick="window.open('" + model.mobileVersion + "', 'popup', 'width=800,height=600,scrollbars=yes,resizable=no')" class='" + skyCloudmageProfilePic + " displayInlineBlock " + kendotxtMenu + "'></span>" + a[0].outerHTML;

How reload src element

How to force browser reload single element of the page ('src' in my case, or 'div', no matter)?
Using this code:
$("div#imgAppendHere").html("<img id=\"img\" src=\"/photos/" + recipe.id + ".png\" height=\"60px\"/>");
It changes page source, but not reload changed element. How to do it?
Thanks in advance.

Patrick Evans, you right, that hack is works.
So my code is:
var someRandQuery = "?" + (Math.random()*100000);
$("#imgAppendHere").html("<img id=\"img\" src=\"/photos/" + recipeId + ".png" + someRandQuery + "\" height=\"60px\"/>");

Json Individual Links in Table column

I have one page with a json table pulling in information from the json api. This works fine. Now my issue is, On the far right column i'm wanting a link to another page of mine, This link will be a unique link. At the moment, As you can see by the code, i can get it to link to the html page 12345, But all the rows link through to this. Which does not help Ha!
I'm ideally wanting the first button to link to 1.html then second button to link to 2.html and so on and so forth.
Here is the code i have so far.
for(var i =0;i < json.results.collection1.length;i++) {
var title = json.results.collection1[i].Name.text;
var venue = json.results.collection1[i].Venue.text;
var date = json.results.collection2[i].Date;
var button = "<button class='redirect-button' data-url='12345.html'>Link</button>";
$("#apple").append("<tbody><tr><td>"+title+"</td><td>"+venue+"</td><td>"+date+"</td><td>"+button+"</td></tr></tbody>");
$("#apple").find(".redirect-button").click(function(){
location.href = $(this).attr("data-url");
});
}
},
Obviously all help would be greatly appreciated. Thanks Sam

Just to explain the comment above
The link you're creating is a <button> but really it's just a string.
So by concatenating the URL part of the string based on something (like your i index in your loop) you can change it to anything you want.
so for example :
var button = "<button class='redirect-button' data-url='" + i + " .html'>Link</button>";
this gives an element that looks like :
<button class='redirect-button' data-url='0.html'>Link</button>
would give you 0.html, 1.html, etc (change the data-url='" + i + " .html' to data-url='" + (i+1) + " .html' and you get 1.html, 2.html, 3.html...)
or if you can change the API to give you a proper link in the return you can make it a bit more readable with:
var button = "<button class='redirect-button' data-url='" + json.results.collection2[i].LinkUrl + " .html'>Link</button>";
results in :
<button class='redirect-button' data-url='abcd.html'>Link</button>
assuming the return is called LinkURL and it's value is 'abcd'
Finally you append this string to the $("#apple") element and then the click event is added that looks for the data-url value and changes the current browser location to that new value.

Jquery multi-line text problem

I have a div with text inside:
<div>A description of dreamstill. It is a music site that is social and other stuff where you cando this and that and pretty much anything that your heart allows. This is probably as long as the description will get.</div>
Then I extract the text and stick it as a data-url attribute on an image:
var desc = div.text();
div.replaceWith('<img class="center" src='+url+' data-desc=' + desc + ' />');
The problem is that the image is being generating like this:
<img class="center" src="http://featherfiles.aviary.com/2011-09-09/aae3b22a952841cd9c0d6a26a5867325.png" data-desc="A" description="" of="" dreamstill.="" it="" is="" a="" music="" site="" that="" social="" and="" other="" stuff="" where="" you="" cando="" this="" pretty="" much="" anything="" your="" heart="" allows.="" probably="" as="" long="" the="" will="" get.="">
What am I doing wrong here?

The issue is that you are missing quotes around the value in the tag, but you can't just add quotes because that will still break if the description text has quotes in it.
Instead, try this.
var desc = div.text();
div.replaceWith(
$('<img />', {
"class": "center",
"src": url,
"data-desc": desc
})
);

The other answers are correct, in that you're missing quotes, but the next problem you'll have will be when a description contains a quote and it breaks the HTML. My recommendation is to append the image, then set the data-desc.
div.replaceWith(
$('<img class="center" src="' + url + '"/>').attr('data-desc', desc)
);

div.replaceWith('<img class="center" src="'+url+'" data-desc="' + desc + '" />');
forgot the " on either side of the desc

You missing quotes. All attributes values should be in " quotes
div.replaceWith('<img class="center" src='+url+' data-desc="' + desc + '" />');
and for url to
src="'+url+'"
from w3c
Attribute values should always be enclosed in quotes
http://www.w3schools.com/html/html_attributes.asp
live demo: http://jsfiddle.net/pzC7b/8/

This will replace quotes with character entity
desc.replace(/\"/g, '"')
Result + encode url:
div.replaceWith('<img class="center" src="' + encodeURI(url) + '" data-desc="' + desc.replace(/\"/g, '"') + '" />');
Example on jsfiddle

jquery: "Exception thrown and not caught" in IE8, but works in other browsers

My code works fine in other browsers, but in IE8 I get "error on page" - and when I click that it says:
"Exception thrown and not caught Line: 16 Char: 15120 Code: 0
URI: http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"
I tried linking to jquery.js (rather than jquery.min.js) and to 1.5.1/jquery.min.js,
but problem still remains.
Can someone correct/improve my code for me, or guide me as to where to look. Thanks
<script type="text/javascript">
function fbFetch()
{
var token = "<<tag_removed>>&expires_in=0";
//Set Url of JSON data from the facebook graph api. make sure callback is set with a '?' to overcome the cross domain problems with JSON
var url = "https://graph.facebook.com/<<ID_REMOVED>>?&callback=?&access_token=" + token;
//Use jQuery getJSON method to fetch the data from the url and then create our unordered list with the relevant data.
$.getJSON(url, function(json)
{
json.data = json.data.reverse(); // need to reverse it as FB outputs it as earliest last!
var html = "<div class='facebook'>";
//loop through and within data array's retrieve the message variable.
$.each(json.data, function(i, fb)
{
html += "<div class='n' >" + fb.name;
html += "<div class='t'>" + (dateFormat(fb.start_time, "ddd, mmm dS, yyyy")) + " at " + (dateFormat(fb.start_time, "h:MMtt")) + "</div >";
html += "<div class='l'>" + fb.location + "</div >";
html += '<div class="i"><a target="_blank" title="opens in NEW window" href="https://www.facebook.com/pages/<<id_removed>>#!/event.php?eid=' + fb.id + '" >more info...</a></div>';
html += "</div >";
}
);
html += "</div>";
//A little animation once fetched
$('.facebookfeed').animate({opacity: 0}, 500, function(){
$('.facebookfeed').html(html);
});
$('.facebookfeed').animate({opacity: 1}, 500);
});
};

Does the code do the job in IE8 or does it break? The reason I ask is because if it works as expected you could just wrap it in a try{ } catch{ \\do nothing } block and put it down to another thing IE is rubbish at.
You may be better off creating an object for the creation of the facebook div. Something like...
var html = $('<div />');
html.attr('class', 'facebook');
Then in your each loop you can do this...
$('<div />').attr('class', 'n').append(fb.name).appendTo(html);
$('<div />').attr('class', 't').append etc...
Then append html to the facebookfeed object
Doing this may remove the scope for error when using single quotes and double quotes when joining strings together, which in turn may solve your issue in IE8
$('.facebookfeed').fadeOut(500, function(){
$(this).append(html).fadeIn(500);
});
Hope this helps!
UPDATE
The append method is used to add stuff to a jquery object. For more info see here
So to surround the div's as you mentioned in the comments you would do something like this...
var nDiv = $('<div />').attr('class', 'n').append(fb.name);
$('<div />').attr('class', 't').append(fb.somethingElse).appendTo(nDiv);
// etc
And then you would need to append that to the html div like so...
html.append(nDiv);
So that would give you
<div class="facebook">
<div class="n">
value of fb.name
<div class="t">
value of fb.somethingElse
</div>
</div>
</div>
So what you have done is created a new jquery object and appended to that, then appended that to the html object which you have then appended to the facebookfeed div. Confusing huh?!