Home/ Questions/Q 354029
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-12T11:53:09+00:00

I have this thing working mostly. What I don’t get is, if I have

  • 0

I have this thing working mostly. What I don’t get is, if I have the file on my desktop and drag it into a browser, it works. If I upload the same file to my website and visit it, it displays nothing in Firefox. Last night it worked in Safari, but today it does not. Is something really weird in this code?
Here is the pastie in case pasting all this in here does not work 🙂

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript" charset="utf-8"></script>

<style type="text/css" media="screen">
    body{
        background: #353535;
        color: #fff;
        font-size: 62.5%;
        padding: 10px;
    }
    p{
        font-size: 1.6em;
        font-family: Arial, "MS Trebuchet", sans-serif;
    }
    span{
        font-size: 1.6em;
        font-variant: small-caps;
    }
    ul {
        list-style: none;
    }
    li {
        font-size: 1.6em;
        text-transform: capitalize;
    }
    img{
        float: left;
        margin: 10px;
    }
</style>

<!-- actual api http://api.tinychat.com/designtalk.json -->
<!-- testing file  test.json -->

  <script>
  $(document).ready(function(){
    $.getJSON("http://api.tinychat.com/designtalk.json",
        function(data){

        $('#name').append(data.name);
        $('#topic').append(data.topic);
        $('#broadcast').append(data.broadcaster_count);
        $('#count').append(data.total_count);
        $('#priv').append(data.priv);

if(!data.name)
{
    alert("Room empty!")
}

    var $nameList = $('<ul></ul>');

    $.each(data.names, function (i, val) {
      $('<li></li>').appendTo($nameList).html(val); 
    });

    $('#container').append($nameList);

    $.each(data.pics, function (i, val) {

        $("<img/>").attr("src", val).appendTo("#images");

    });

        });

  });
  </script>
</head>
<body>
    <p id="name"><span>Room Name:</span> </p>
    <p id="topic"><span>Current Topic:</span> </p>
    <p id="broadcast"><span>Number Broadcasting:</span> </p>
    <p id="count"><span>Total in Room:</span> </p>
    <p id="priv"><span>Number with Privileges:</span> </p>

    <div id="container"><span>Who is Online?</span></div>
    <div id="images"></div>
</body>
</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You can create HTML elements programmatically, to build an HTML List for example:

    $('<div></div>').appendTo('#container').html(data.title);

var $nameList = $('<ul></ul>');

$.each(data.names, function (i, val) {
  $('<li></li>').appendTo($nameList).html(val);
});

$('#container').append($nameList);

    Example here.

    Without jQuery:

    var container = document.getElementById('container'),
    title = document.createElement('div'),
    nameList = document.createElement('ul'), li;

title.innerHTML = data.title;
for (var i = 0; i < data.names.length; i++) {
  li = document.createElement('li');
  li.innerHTML = data.names[i];
  nameList.appendChild(li);
}

container.appendChild(title);
container.appendChild(nameList);

    Example here.

    Edit: In response to your comment, you were missing the Flickr specific parameter jsoncallback to make the JSONP request, and also in the structure of the JSON response the names member doesn’t exists, I think you mean items.

    Check your feed example fixed here.

    • 0