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?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

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
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

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
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
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.