Jquery looping return value

Hi,

I have following two functions and  I would like to return the html of the Complete table once the loop is complete. Basically I want the WritePhotos Element  to return a string that includes the HTML of the Complete table. Any help is greatly appreciated.


                   //get the Photos
                  function WritePhotos(Site) {
                     
                       $.getJSON("/_vti_bin/listdata.svc/Findings?$filter=SiteId eq" + " " + Site.Id, function (data) {
           
                           var photoTable = "<table>";
                                 $.each(data.d.results, function (i, result) {
                               var thumbnailUrl = "/Lists/Findings/Attachments/" + result.Id + "/thumbnail.jpg";
                               if (UrlExists(thumbnailUrl)) {
                                   photoTable += "<tr valign='top'><td><div>" + "<img src='/Lists/Findings/Attachments/" + result.Id + "/thumbnail.jpg" + "\'" + "title='" + result.Description + "\'" + "height='60' width='60' style='border:1px solid black;margin:2px;'" + "onclick='showModalDialog('" + "/Lists/Findings/Attachments/" + result.Id + "/photo.jpg" + "\'" + "," + "\'" + "\'" + "," + "\'" + "dialogHeight:480px;dialogWidth:640px;status:no;" + "\'" + ")" + "\'" + "/>" + "</div></td></tr>";
                               }

                           });

                           photoTable += "</table>";
   
                       });

                       
                   }




                  function UrlExists(url) {
                       var http = new XMLHttpRequest();
                       http.open('HEAD', url, false);
                       http.send();
                       return http.status != 404;
                   }

TechsavyAsked:
Who is Participating?
 
chaitu chaituCommented:
some syntax errors were there in your code.re modied.

$(document).ready(function() {

            
                           var photoTable = "<table>";
						   var arr = [ "a", "b" ];      


                    $.each(arr, function (i, result) {

                          //     var thumbnailUrl = "/Lists/Findings/Attachments/" + result.Id + "/thumbnail.jpg";
                           //    if (UrlExists(thumbnailUrl)) {
					//	    alert(result)




                                   photoTable += "<tr valign='top'><td><div>" + "<img src='/Lists/Findings/Attachments/" + result + "/thumbnail.jpg" + "\'" + "   title='" + result + "\'" + "height='60' width='60' style='border:1px solid black;margin:2px;" +  "onclick='showModalDialog('" + "/Lists/Findings/Attachments/" + result + "/photo.jpg" + "\'" + "," + "\'" + "\'" + "," + "\'" + "dialogHeight:480px;dialogWidth:640px;status:no;" + "\'" + ")'" + "\'" + "/>" + "</div></td></tr>";





								   
                             //  }

                           });

						  

                           photoTable += "</table>";

		  document.write(photoTable);
		  alert(photoTable)
    
                  //     });


   //   });
});

Open in new window

0
 
ProculopsisCommented:

Here's a generalised method:

<html>
<head>
<title>http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/Q_27499376.html</title>
<meta http-equiv="X-UA-Compatible" content="IE=8" />
<script type="text/javascript" src="http://filedb.experts-exchange.com/incoming/2011/05_w20/458595/jquery-1.5.2.min.js"></script>
<script type="text/javascript">

var data = [
  [ "A", "B", "C" ],
  [ "P", "Q", "R" ],
  [ "X", "Y", "Z" ]
];

function makeTable() {
  var result = $("<table/>").attr({border:1});
  $(data).each( function( index, value ) {
    var row = $("<tr/>");
    $(value).each( function( index, value ) {
      row.append( $("<td/>").text( value ) );
    });
    result.append(row);
  });
  return result;
}

jQuery(document).ready( function() {

  $("#test").append( makeTable() );

});

</script>
<body>

<div id="test"></div>

</body>
</html>

Open in new window

0
 
TechsavyAuthor Commented:
Hi Proculopsis,

I trried below based on your code, however, it looks like you created an Array for the data that I am looping for. and how can i do that with a ajax call using .getJSON? Can you please adapt your concept for the below code block? I appreciate your help. All i need is a string that is returned bu WritePhotos(site) function. Because, I need to concatenate the string returned by this function, to another string.
The returned string ofcouse is a well formed HTML table.



  //get the Photos
                  function WritePhotos(Site) {

                      var photoTable = "<table/>";

                      $.getJSON("/_vti_bin/listdata.svc/Findings?$filter=SiteId eq" + " " + Site.Id, function (data) {

                          $.each(data.d.results, function (i, result) {

                              var photoRow = "<tr/>";
                              var thumbnailUrl = "/Lists/Findings/Attachments/" + result.Id + "/thumbnail.jpg";
                              if (UrlExists(thumbnailUrl)) {
                                  photoColumn = "<td><div>" + "<img src='/Lists/Findings/Attachments/" + result.Id + "/thumbnail.jpg" + "\'" + "title='" + result.Description + "\'" + "height='60' width='60' style='border:1px solid black;margin:2px;'" + "onclick='showModalDialog('" + "/Lists/Findings/Attachments/" + result.Id + "/photo.jpg" + "\'" + "," + "\'" + "\'" + "," + "\'" + "dialogHeight:480px;dialogWidth:640px;status:no;" + "\'" + ")" + "\'" + "/>" + "</div></td>";
                              }

                              photoRow.append(photoColumn);

                              photoTable.append(photoRow);
                          });


                      });

                      return photoTable;
                   }




                  function UrlExists(url) {
                       var http = new XMLHttpRequest();
                       http.open('HEAD', url, false);
                       http.send();
                       return http.status != 404;
                   }
0
 
ProculopsisCommented:

Please can you post an example of the returned JSON string.

0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.