Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 580
  • Last Modified:

JSON Data Output in a tabular grid (invoked a jsp modal upon ajax success from a js file)

I have been trying to seek help on this kind of question.

Here's mine. Need somebody who can help me paint the data upon ajax success on a modal window.


$.ajax({
                  type: 'post',
                  url: something.do,
                  data: $('#someForm').serialize(),
                  success: function(jsonResponse) {
                        if(jsonResponse.errorMap != null) {
                              alert(jsonResponse.errorMap);
                        } else if (jsonResponse.transactionPage != null) {
                              showData(jsonResponse.transactionPage); // instead of this I want it to loop and iterate and paint data as given below...
                        }
                  }
            });  





This showData method gets me unformatted data. I want to format it in a tabular grid in a modal window (JSP).

This is the data that is getting returned

{
  "transactions":
  [
    {
      "error": "",
      "ctrNum1": "123456789",
      "successful": true
    },
   
    {
      "error": "",
      "ctrNum2": "123456791",
      "successful": true
    },
    {
      "error": "",
      "ctrNum3": "123456792",
      "successful": true
    },
    {
      "error": "",
      "ctrNum4": "123456793",
      "successful": true
    }
  ]
}


Also I need iterate or loop in dynamically.



I want to paint the data in a tabular format upon success.

success: function(jsonResponse) {
               if(jsonResponse.errorMap != null){
                alert(jsonResponse.errorMap);
               }else if(jsonResponse.transactionSummary != null){
                  var trans = jsonResponse.transactionSummary;
                  var date =  json.transactionDate;
                      var html = "";
                        alert(jsonResponse.transactionSummary);
                        alert(jsonResponse.transactionSummary.ctrNum);
                        for (var i=0; i < trans.length; i++) {
                              html += "<div><div>" +  (i + 1) + "</div><div>" + trans.ctrNum + "</div>";
                             
                              if (trans.successful == true) {
                                    html += "<div>Successful</div></div>"
                              } else {
                                    html += "<div>" + trans.error + "</div></div>"
                              }
                        }
                 
                  //showData(jsonResponse.transactionSummary);
                  }
              }


0
mahaq
Asked:
mahaq
1 Solution
 
ProculopsisCommented:

Try something like this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/Q_26851670.html</title>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<script type="text/javascript">

jQuery(document).ready(function() {

var jsonResponse = {};
jsonResponse.transactionPage = {
  "transactions": 
  [
    {
      "error": "",
      "ctrNum1": "123456789",
      "successful": true
    },
    
    {
      "error": "",
      "ctrNum2": "123456791",
      "successful": true
    },
    {
      "error": "",
      "ctrNum3": "123456792",
      "successful": true
    },
    {
      "error": "",
      "ctrNum4": "123456793",
      "successful": true
    }
  ]
};

showData(jsonResponse.transactionPage);

function showData( transactionPage ) {
  var row = $("<tr/>");
  for ( var column in transactionPage.transactions[0] ) {
    row.append( $("<th/>").html( column ) );
  }
  $("#status").append( row );

  for ( var index in transactionPage.transactions ) {
    var row = $("<tr/>");
    for ( var column in transactionPage.transactions[index] ) {  /////alert(transactionPage.transactions[index][column])
      var cell = transactionPage.transactions[index][column];
      cell = ( cell.toString() != "" )? cell : " ";
      row.append( $("<td/>").text( cell ) );
    }
    $("#status").append( row );
  }
}


  $("#dialog")
  .dialog({
    autoOpen: false,
    width: "auto",
    height: "auto",
    modal: true,
    draggable: false,
    resizable: false
  });

  $("#paypal").click( function() {
    $("#dialog").dialog( "open" );
  });

});

</script>
</head>
<body>

<input id="paypal" type="button" value="Click me!!!" />

<div id="dialog" title="JSON Data">
  <table id="status" border="1"></table>
</div>

</body>
</html>

Open in new window

0
 
mahaqAuthor Commented:
It was a great solution, simplified too, thanks a lot.
0

Featured Post

Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now