We Keep Coding

Dynamically replacing HTML with getJSON by click of button

I have a webpage that displays a news story in the main body, and has a side navigation bars where four other stories are listed. I am trying to use json files to swap out the html text in the main body. Each story has it's own json file. Here is my current javascript code:
$(document).ready(function() {
$("#nav_list a").click(function(evt) {
buildName = "../json_files/" + $(this).attr("title") + ".json";
alert(buildName);
document.getElementById("main").innerHTML = "";
$.getJSON(buildName, function(data) {
$.each(data, function() {
$.each(this, function(key, value) {
$("#main").append(
"<h1>" + value.title + "</h2>" +
"<img src='" + value.image + "'>" +
"<h2>" + value.month + "<br>" + value.speaker + "</h2>" +
"<p>" + value.text + "</p>";
);
}); // inner each
}); // outer each
)}; // end of getJSON
}); // end click
}); // end ready
Notes:
The alert(buildName) is for my own testing.
The next line (w. the innerHTML) should clear the current body content.
** NOTE: This works if I have the $.getJSON method commented out! Otherwise both this and my alert() are entirely ignored.
Because each store has it's own json file, I questioned the necessity of the muliple $.each methods within the getJSON. It didn't make a difference (the format I have below is from my textbook and has worked on a single json file with multiple entries).
I even tried not clearing the initial innerHTML and overwriting, but I may have had some syntax wrong. Here is that attempt:
$.getJSON(buildName, function(data) {
$.each(data, function(key, value) {
$("#main").append(
("#main h1").innerHTML.replace("<h1>" + value.title + "</h2>");
("#main img").innerHTML.replace("<img src='" + value.image + "'>");
("#main h2").innerHTML.replace("<h2>" + value.month + "<br>" + value.speaker + "</h2>");
("#main p").innerHTML.replace("<p>" + value.text + "</p>");
)
}); // endeach
)}; // end of getJSON
What do you guys think? I am absolutely stumped.

Remove the semi-colon at the end inside your .append(). Otherwise, I'm not sure. I wanted to comment this instead of answering but I lack the reputation. With your second attempt, those replace calls shouldn't be made inside the .append(). Good luck!

I think that the problem might be your json path that you construct.
Try using a standard path "../file.json" or "file.json" to check if you have the result you want or if the $.getJSON() is still ignored.
About the other errors: What is your devel. environment?
I also noticed that you have a bracket mismatched in your append function at the title part. So,
"<h1>" + value.title + "</h2>" +
would have to be changed to..
"<h1>" + value.title + "</h1>" +

I have re-created a sample of your site and it all seems to run fine using your code and .json files.
I just needed to modify the code as shown below. In this case, if you have a heading it will also clear the heading in your website.
<!--json retrieve script starts here -->
<script>
$(document).ready(function(){
$(":button").click(function() {
buildName = "../json_files/" + $(this).attr("title") + ".json";
alert(buildName);
//$("#main").empty();
document.getElementById("main").innerHTML = "";
$.getJSON(buildName, function(data){
//$.each(data, function() {
// $.each(data, function(key, value){
$("#main").append(
"<h1>" + data.title + "</h2>" +
"<img src='" + data.image + "'>" +
"<h2>" + data.month + "<br>" + data.speaker + "</h2>" +
"<p>" + data.text +"</p>"
);
// });
//});
});
});
});
</script>
<!--json script end here -->
NOTE: I have swapped the link with button to wire the event for this example.
You can also use multiple file entries in a single .json file in the format shown below:
{
"story1":"/jsonfile1.json",
"story2":"/jsonfile2.json",
"story3":"/jsonfile3.json"
}
which you would then parse with an $.each(data,function(key,value) where value would be the filename to be requested via $.getJSON so you can have multiple entries handled by a single file.

There were a few syntax errors - a parenthesis and curley bracket out of order, misplaced semi-colon, things of the like. The logic was correct.
Thanks all for the replies!

creating '<a href onclick=function... with javascript I get error: Uncaught ReferenceError: popup is not defined

I have puled data from server and created a list of thumbnails and some other data from twitch TV.
I need to create popup tab with video stream in it.
Therefore I have put thumbnail in anchor tag and called a popup() function onclick. (I am planing to put parameters for playing video in that function.)
Also I have created function for that popup() but no matter where I place it I get an Error in console when I click on thumbnail.
ERROR: Uncaught ReferenceError: popup is not defined
This is the JS code:
$(document).ready(function(){
$.getJSON( "https://api.twitch.tv/kraken/streams", function( data ) {
var items = [];
var videoHTML ='<ul>';
//Popup Tab with streaming video
$.each(data.streams, function(i, video){
videoHTML += '<li class="video-stream ' + video.channel.language + '">';
videoHTML += '<img class="user-logo" src="' + video.channel.profile_banner + '">';
videoHTML += '<p class="user-name">' + video.channel.display_name + '</p>';
videoHTML += '<a href="#" onClick="popup()">';
videoHTML += '<img class="video-image" src="' + video.preview.medium + '"></a>';
videoHTML += '<h1 class="game-name">' + video.game + '</h1><br/>';
videoHTML += '<i></i>';
videoHTML += '<span class="views-number">' + video.viewers + '</span>';
videoHTML += '<p class="short-date-format date' + i + '">' + video.created_at + '</p>';
videoHTML += '</li>';
var d = new Date(video.created_at);
//var dateClass = 'date' + i; console.log(dateClass);
//$(dateClass).html = d.toDateString();
//console.log(video._id);
//console.log(data.streams[i].game);
//console.log(data.streams[i]._links.self);
//console.log(data.streams[i].preview.medium);
});
videoHTML += '</ul>';
$('#placeholder').html(videoHTML);
}); //getJson
//popup tab
function popup(){
alert('wow');
}
}); //end ready
Can You please help me with this becasue I can not find an answer on the internet?
-How to get popup() function running?
-How to implement parameter into this function?
(Also, I have tried to write anchor in HTML and add function and then everything works fine but when I create HTML with JS then I have this problem.
Thank You in front!
Sincerely,
Denis

You defined the function popup inside $(document).ready(function()). So popup can only be used within it.
Move it outside the $(document).ready(function()) function like this
$(document).ready(function(){
// code
})
function popup(){
// code
}

How to add my photostream?

I want to add my photostream to my website I have tried multiple bits of code
https://gist.github.com/willdurand/5705453 (cant find the set id)
and
jQuery.getJSON("http://api.flickr.com/services/feeds/groups_pool.gne?id=675729#N22&lang=en-us&format=json&jsoncallback=?", function(data){
jQuery.each(data.items, function(i,item){
jQuery("<img/>").attr("src", item.media.m).appendTo("#images")
.wrap("<a href='" + item.link + "'></a>");
});
});
suppose I need to find id to add the public feed to my photostream?
edit this seems to work but throws a 403.
<script>
jQuery(function(){
var apikey = 'xxxxxxx';
var userid = 'xxxxxx';
jQuery.getJSON('http://api.flickr.com/services/rest/?&method=flickr.people.getPublicPhotos&api_key='+apikey+'&user_id='+userid+'&format=json&jsoncallback=?',
function(data){
jQuery.each(data.photos.photo, function(i,item){
var purl = 'http://farm' + item.farm + '.static.flickr.com/' + item.server + '/' + item.id + '_' + item.secret + '_m.jpg';
var pid = item.id;
var container = '<div class="image-container" style="background: url(' + purl+ ');"></div>';
jQuery(container).appendTo('#images');
});
});
});
</script>
this works just have to set the images to public.

I have taken the exact code you have posted below and applied it to a JSFiddle.
jQuery.getJSON("http://api.flickr.com/services/feeds/groups_pool.gne?id=675729#N22&lang=en-us&format=json&jsoncallback=?", function(data){
jQuery.each(data.items, function(i,item){
jQuery("<img/>").attr("src", item.media.m).appendTo("#images")
.wrap("<a href='" + item.link + "'></a>");
});
});
http://jsfiddle.net/mYnQy/
The images are returned correctly and the links are working too, I would imagine that you should check that you have a div with an ID of "images" located on your page and that you have no other javascript that is causing an error on your page.
Check this by using developer tools in your browser of choice and taking a look at the Console.

How to get more JSON data on scroll or while scrolling?

I have the following code below which returns some results when the user searches a term.
Once i get some results,I want to add feature which will allow me to get more data when scrolling down ward?
NOTE: I dont want to use any plugin(s).
$(document).ready(function() {
$("#submit").click(function (event) { // wire up this as an onclick event to the submit button.
var searchTerm = $("#search").val(); // get the user-entered search term
var URL = "http://api.flickr.com/services/feeds/photos_public.gne";
//var URL = "http://api.flickr.com/services/feeds/photos_public.gne";
var ID = "25053835#N03";
//var MYID-"84215563#N08";
//var tagmode="&tagmode=any";
//var format ="&format=json";
var tags="&tags="+ searchTerm;
var tagmode="&tagmode=any";
var jsonFormat = "&format=json&jsoncallback=?";
var ajaxURL= URL+"?jsoncallback=?id="+ID+tags+tagmode+jsonFormat;
//var ajaxURL= URL+"?"+tags+tagmode+jsonFormat;
$.getJSON(ajaxURL,function(data){
//$("h1").text(data.title);
//alert(data.length);
var photoHTML;
$("#photos").empty();
if (data.items.length) {
alert(data.items.length);
$.each(data.items, function(i,photo) {
//var photoHTML = "<h4>" +photo.tags + "</h4>";
photoHTML = "<p>";
photoHTML += '<a href="' + photo.link + '">';
photoHTML += '<img src="' + photo.media.m + '" alt="' + photo.media.m + '" title="' + photo.media.m + '"></a>';
photoHTML = "</p>";
$('#photos').append(photoHTML).fadeIn(200);
});
} else {
alert(data.items.length);
photoHTML = "<h2> No Results</h2>";
$('#photos').append(photoHTML).fadeIn(200);
}
//$('#photos').append(photoHTML).fadeIn(200);
});
});
});

You could use the jquery .scroll() method. You have two options, save all data when page loads then display as user scrolls OR make ajax request every time there is a scroll down request.
$("#yourSelector").on('scroll', function(){
// do stuff
});
or simply using the shortcut:
$("#yourSelector").scroll(function(){
// do stuff
});
I hope this helps!
Here is a link to jquery scroll api to know about the options (such as specifying scroll DOWN): http://api.jquery.com/scroll/

You can also bind scroll event using jquery:
Put your whole code into a function:
function myfun(){
//-- you code
}
and call myfun() from both event:
on click event-
$("#submit").click(function (event) {
myfun();
});
on scroll event -
$("#yourSelector").scroll(function(){
myfun();
});

web service not working on safari

I have created a web service and call it from my javascript using ajax. It works on internet explorer to some extent but fails when i call try to run it on safari or firefox. Does anyone know why?
Here is my js code:
function GetTopApps() {
var serviceUrl = "http://localhost:2975/GetData.asmx?wsdl";
var soapMessage ='<soap:Envelope xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:xsd="http://www.w3.org/2001/XMLSchema" xmlns:soap="http://schemas.xmlsoap.org/soap/envelope/"><soap:Body><HomeScreenApps xmlns="http://tempuri.org/" /></soap:Body></soap:Envelope>'
$.ajax({
url: serviceUrl,
type: "post",
datatype: "xml",
data: soapMessage,
complete: GenerateList,
contentType: "text/xml; charset=\"utf-8\""
});
return false;
}
function GenerateList(xmlHttpRequest, status) {
$(xmlHttpRequest.responseXML)
.find('HomeScreenAppsResult')
.each(function () {
parseXML(xmlHttpRequest);
});
}
function parseXML(xmlHttpRequest) {
var xmlDoc = xmlHttpRequest.responseXML;
var appIdArray = xmlDoc.getElementsByTagName('application_id');
var appNameArray = xmlDoc.getElementsByTagName('application_name');
var appRatingArray = xmlDoc.getElementsByTagName('average_rating');
var appCount = appIdArray.length;
var appList = document.getElementById('TopApps');
var htmlString = "<small><small><small><small><small><small><small><ul data-role='listview' data-filter='false' id='list'>";
for (i = 0; i < 5; i++) {
htmlString = htmlString + "<li><a id='" + appIdArray[i].xml + "' onclick='AppSelected(id);'>";
htmlString = htmlString + "<img src='' alt='Logo' class='ListAppLogo'>";
htmlString = htmlString + "<h3>" + appNameArray[i].xml + "</h3>";
htmlString = htmlString + "<p>" + appRatingArray[i].xml + ".0/5.0</p>";
htmlString = htmlString + "<input type='hidden' value='" + appIdArray[i].xml + "'></a></li>";
}
htmlString = htmlString + "</ul></small></small></small></small></small></small></small>";
appList.innerHTML = htmlString;
$('#list').listview();
}

You can find out yourself by using a Javascript debugger such as Firebug for Firefox, or the built-in web inspector for Safari.
First check your javascript error log and console for any parsing errors, if there are none use breakpoints to step through your code to see how it executes. If you find anything specific which you dont understand feel free to ask about that.
Also consider the error might be in your webservice, not where you call it.

Safari is more secure than IE or Chrome.
You would easily be able to run on chrome or IE because safari needs certificate of that server whose service you are calling.
ensure that you create certificate for that server if you wanted to run that on mac or Iphone