Simple way of displaying images from parse.com database using javascript

Question

I was working on a very simple page which just pulls and displays images from a table in parse.com. I do not have much experience with javascript which might be evident from the code below.

I need the images to show up in a chronological order. With the current code, it works fine most of the times but is a little buggy.

There are 2 main problems:

1) Sometimes, randomly, one particular new image might not come on the top and instead show up somewhere in between.

2) This page works on Firefox and Chrome but NOT on IE.

Is there a better way to implement this or is there something that I should change? Any help would be appreciated.

Page source-

<!doctype html>
<head>
  <meta charset="utf-8">

  <title>My parse images</title>
  <meta name="description" content="My Parse App">
  <meta name="viewport" content="width=device-width">
  <!-- <link rel="stylesheet" href="css/reset.css"> -->
  <link rel="stylesheet" href="css/styles.css">
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
  <script type="text/javascript" src="http://www.parsecdn.com/js/parse-1.2.0.min.js"></script>
</head>

<body>

  <div id="main">




  <script type="text/javascript">
    Parse.initialize("xxxxxxxxxxxxxxxxxx", "xxxxxxxxxxxxxxxx");

    var config = {
    parseAppId: 'xxxxxxxxxxxxxxxxxxx',
    parseRestKey: 'xxxxxxxxxxxxxxxxxx',
    streamName: 'parse-demo'
};


var getPhotos = function() {
  var userImages = Parse.Object.extend("userImages");
  var query = new Parse.Query(userImages);

  query.find({
    success: function(results) {


      $('#photo-container').children().remove();


      for(var i=results.length - 1; i>=0; i--){

          var img = new Image();
          img.src = results[i].get("image").url;
          img.className = "photo";
          document.body.appendChild( img );


      } 



    },
    error: function(error) {
      alert("Error: " + error.code + " " + error.message);
    }
  });
};

  function refresh (timeoutPeriod){ 
    refresh = setTimeout(function(){window.location.reload(true);},timeoutPeriod); 
  }


$(document).ready(function() {

  getPhotos();

 // refresh(10000);

});

  </script>
</body>

</html>

Héctor Ramos · Accepted Answer · 2013-04-18 20:41:20Z

2

Internet Explorer blocks mixed content. Since Parse's JavaScript SDK requires SSL, you need to host your app using HTTPS as well in order to access it from IE.

answered Apr 18, 2013 at 20:41

Héctor Ramos

9,2716 gold badges38 silver badges39 bronze badges

2

You can find the IE blog post about the subject here: blogs.msdn.com/b/ieinternals/archive/2010/05/13/… IE admitted this was "overly broad" and changed their stance in later versions. The blog also includes a sample workaround for mixed-mode hosting.

Thomas Bouldin
– Thomas Bouldin

04/19/2013 23:19:48
Commented Apr 19, 2013 at 23:19

Add a comment |

Monika Yadav · Accepted Answer · 2014-05-19 07:11:56Z

Hey you made one mistake. it was not working for me. Then i found that it is url() not url. The amendment is img.src = results[i].get("image").url();

<!doctype html>
<head>
<meta charset="utf-8">

<title>My parse images</title>
<meta name="description" content="My Parse App">
 <meta name="viewport" content="width=device-width">
 <!-- <link rel="stylesheet" href="css/reset.css"> -->
  <link rel="stylesheet" href="css/styles.css">
  <script type="text/javascript"    src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
 <script type="text/javascript" src="http://www.parsecdn.com/js/parse-1.2.0.min.js">
 </script> 
 </head>

 <body>

  <div id="main">




   <script type="text/javascript">
      Parse.initialize("xxxxxxxxxxxxxxxxxx", "xxxxxxxxxxxxxxxx");

      var config = {
      parseAppId: 'xxxxxxxxxxxxxxxxxxx',
      parseRestKey: 'xxxxxxxxxxxxxxxxxx',
      streamName: 'parse-demo'
      };


      var getPhotos = function() {
      var userImages = Parse.Object.extend("userImages");
      var query = new Parse.Query(userImages);

      query.find({
      success: function(results) {


       $('#photo-container').children().remove();


       for(var i=results.length - 1; i>=0; i--){

        var img = new Image();
        img.src = results[i].get("image").url();
        img.className = "photo";
        document.body.appendChild( img );


      } 



     },
      error: function(error) {
      alert("Error: " + error.code + " " + error.message);
      }
    });
    };

   function refresh (timeoutPeriod){ 
         refresh = setTimeout(function(){window.location.reload(true);},timeoutPeriod);

}

$(document).ready(function() {

getPhotos();

// refresh(10000);

});

Collectives™ on Stack Overflow

Simple way of displaying images from parse.com database using javascript

2 Answers 2

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Your Answer

Sign up or log in

Post as a guest

Related