Not all Ajax content loading on one domain

I have the domain http://whatthecatdragged.in/ forwarded (cloaked) to http://moppy.co.uk/wtcdi/ The root page (index.html) uses [Ajax][1] to load the content. At the original host (moppy.co.uk/wtcdi) the page and all content loads. However, at the domain forwarded domain (whatthecatdragged.in), some of the content does not load. Has it something to do with the way `.each` is used to fire off Ajax calls, as mentioned by [AnthonyWJones][2]? I've attempted to debug this, but peculiarly turning on the [Firebug][3] console in Firefox 3.5 actually seems to make all the content load. ``` // Content building code: $(function() { // Set a few variables (no need for secrecy with Flickr API key). var apiKey = 'myapikey'; // var tags = ''; var tagsArr = new Array(); // Get the photos of flickr user WhatTheCatDraggedIn. // This Ajax call always seems to complete. $.getJSON('http://api.flickr.com/services/rest/?&method=flickr.people.getPublicPhotos&api_key=' + apiKey + '&user_id=46206266@N05&extras=date_taken,tags&format=json&jsoncallback=?', function(data) { // Set some variables to ensure alldata is fecthed from second API // call (below) before building majority of content. var totalExpected = data.photos.total; var totalFetched = 0; var photohtml = ''; // For each photo, do the following: $.each(data.photos.photo, function(i, item) { // Set size of photo thumbnail to display. var size = 's'; var append = ''; if (i == 0) { // Display most recent thumbnail larger, and add a line // break for small pics beneath it. size = 'm'; append = '
' } //Only display thmbnails of 4 most recent catches (1 large, 3 small). if (i <= 3) { var photoSrc = 'http://farm' + item.farm + '.static.flickr.com/' + item.server + '/' + item.id + '_' + item.secret + '_' + size + '.jpg' //Each thumbnail links to that photo's Flickr page. var flickrPage = 'http://flickr.com/photos/' + item.owner + '/' + item.id + '/'; // Each thumbnail has a big tooltip, with tags formatted appropriately. var formattedTags = item.tags.replace(/\s/g, "
"); formattedTags = formattedTags.replace(/cat/, "cat: "); formattedTags = formattedTags.replace(/loc/, "location: "); formattedTags = formattedTags.replace(/victim/, "victim: "); formattedTags = formattedTags.replace(/status/, "status: "); formattedTags = formattedTags.replace(/floor/, " floor"); formattedTags = formattedTags.replace(/toy/, " toy"); //Append the built html to one varable for adding to page shortly photohtml += '' + append + ''; } var photoID = item.id; // Get the detailed photo information (including tags) for the photo. // This is the call that perhaps fails or at least content // generated after this call does not load. $.getJSON( 'http://api.flickr.com/services/rest/?&method=flickr.photos.getInfo&api_key=' + apiKey + '&photo_id=' + photoID + '&format=json&jsoncallback=?', function(data) { if (data.photo.tags.tag != '') { $.each(data.photo.tags.tag, function(j, item) { // Place all tags in an aray for easier handling. tagsArr.push(item.raw); }); // Incrememt number of photos fetched. totalFetched += 1; // Have we got them all? if (totalFetched == totalExpected) fetchComplete(); } }); // Builds a shedload more content once all JSON calls are completed. function fetchComplete() { // ### BUILD VICTIM list ### // format a regex to match tags beginnign : "victim: " var vicRe = /^v[a-z]+:\s([a-z\s]+)/ // Match the regex to the tags and count number of matches per tag. var vicCounts = tagsArr.countVals(vicRe); var victimsHtml = ""; // For each victim. for (var i in vicCounts) { var strippedTag = [i].toString().replace(/\W/g, ""); console.debug(strippedTag); // Add a line of html with the type of victim and the number of victims of that type victimsHtml += "" + [i] + " (" + vicCounts[i] + ")
"; }; // Replace existing HTML with new version. $('#types-dragged').html(victimsHtml); // ### BUILD STATUS PIE CHART ### // Build a theme for chart colours. var wtcdicharttheme = { colors: ['#C66800', '#D3C70B', '#DD3D0B', '#D30729', '#DDA70B' ], marker_color: '#000000', font_color: '#000000', background_colors: ['#ffffff', '#ffffff'] }; // Create a new chart object, include css id of canvas // where chart will be drawn. var g = new Bluff.Pie('status', '275x250'); // Set a theme and stuff. g.set_theme(wtcdicharttheme); // No title, as this exists via the raw page HTML. g.title = ''; g.legend_font_size = "50px"; g.marker_font_size = "20px"; // Build a regex string to match tags beginning "status: ". var statRe = /^s[a-z]+:\s([a-z\s]+)/ // Match regex to tags and return an object with tag // names and number of occurences. var statCounts = tagsArr.countVals(statRe); // For each status. for (var i in statCounts) { // Add data to the chart g.data([i], [statCounts[i]]); }; // Draw the chart. g.draw(); // ### BUILD LOCATION LIST ### // Build a regex that matches tags beginning "loc: " var locRe = /^l[a-z]+:\s([a-z\s]+)/ // Match regex to tags and return an object with // tag names and number of occurences. var locCounts = tagsArr.countVals(locRe); var locatHtml = ""; // For each location. for (var i in locCounts) { var strippedTag = [i].toString().replace(/\W/g, ""); // Add a line of html with the location and the //number of times victims found in that location. locatHtml += "" + [i] + " (" + locCounts[i] + ")
"; }; // Replace existing html with newly built information. $('#locations').html(locatHtml); // ### BUILD CAT LIST ### // Build a regex that maches tags beginning "cat: ". var catRe = /^c[a-z]+:\s([a-z_\s]+)/ //Match regex to find number of catches each cat has made var catCounts = tagsArr.countVals(catRe); // For each cat. for (var i in catCounts) { var strippedTag = [i].toString().replace(/\W/g, ""); // Insert number of catches to div titled "(catname)-catch" $('#' + [i] + '-catch').html( "
" + catCounts[i] + ""); }; } }); // Insert total dragged onto page. $('#total-dragged').html(data.photos.total); // Insert photos onto page. $('#latest-catches').html(photohtml); // Add tooltips to the images from Flickr. $('img').each(function() { $(this).qtip({ style: { name: 'wtcdin' }, position: { target: 'mouse', adjust: { x: 8, y: 10 } } }) }); }); }); ``` **UPDATE 1:** I contacted the domain name company, their advice was basically "don't use [JavaScript][4]". Still can't see why it would work under one domain name and not another... Could it be to do with the fact that they "forward" the domain by means of a frame? [1]: http://en.wikipedia.org/wiki/Ajax_%28programming%29 [2]: https://stackoverflow.com/posts/2021190/ [3]: http://en.wikipedia.org/wiki/Firebug_%28Firefox_extension%29 [4]: http://en.wikipedia.org/wiki/JavaScript

以上就是Not all Ajax content loading on one domain的详细内容,更多请关注web前端其它相关文章!

赞(0) 打赏
未经允许不得转载:web前端首页 » JSON 答疑

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

前端开发相关广告投放 更专业 更精准

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏