I am making an OData call which returns the correct data I need (Question, Topic and Score). I then have identified the first record in the array and I am trying to set an HTML cell value (for the Topic) value using jQuery. For whatever reason,
it is not working. Eventually, what I would like to do with this code is that for every question returned in the OData (which will include each question's respective Topic and Score), I would like for jQuery to dynamically create a row per Question in
the HTML table. Here is what I have so far for both jQuery and HTML. FYI--checkAccountType is being called in the OnLoad event handler in CRM:
// Get Scoring records of current Account
//Wait for page to load then check Account Type
//$(document).ready(function () {
// console.log("document).ready fired");
// checkAccountType();
//});
// Check Account Type
function checkAccountType() {
// Validation to check if there is a value in the Organization Type lookup field
var lookup = Xrm.Page.getAttribute("new_customertypeid").getValue();
if ((lookup != null) && (lookup != "undefined")) {
// Call getScoringQuestions
getScoringQuestions();
}
}
// Grabs the specific details from the parent Account record
function getScoringQuestions() {
var accountId = Xrm.Page.data.entity.getId();
var accountFilter = "$select=new_Score,new_ScoringQuestionId,new_new_scoringquestion_new_scoring/new_QuestionTopicId,new_new_scoringquestion_new_scoring/new_SequenceId&" +
"$expand=new_new_scoringquestion_new_scoring&$filter=new_ScoringAccountId/Id eq guid'" + accountId + "'";
SDK.JQuery.retrieveMultipleRecords(
"new_scoring",
accountFilter,
function (results) {
for (var i = 0; i < results.length; i++) {
var topics = results[i].new_new_scoringquestion_new_scoring.new_QuestionTopicId.Name;
var questions = results[i].new_ScoringQuestionId.Name;
var scores = results[i].new_Score;
var firstTopic = results[0].new_new_scoringquestion_new_scoring.new_QuestionTopicId.Name;
var firstQuestion = results[0].new_ScoringQuestionId.Name;
var firstScore = results[0].new_Score;
//console.log(topics);
//console.log(questions);
//console.log(scores);
console.log(firstTopic);
//console.log(firstQuestion);
//console.log(firstScore);
$("#Topic").html(firstTopic);
$("#Question").html(firstQuestion);
$("#Score").html(firstScore);
}
},
errorHandler,
questionRetrieveComplete);
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="../styles/SummaryTable.css"/>
<script type="text/javascript" src="../../ClientGlobalContext.js.aspx"></script>
<script type="text/javascript" src="../../new_SDKJquery"></script>
<!--<script type="text/javascript" src="../scripts/jquery.js"></script>-->
<script type="text/javascript"src="../../new_/scripts/jquery.1.10.2.min.js"></script>
<script type="text/javascript" src="../scripts/sdk/json2.js"></script>
<script type="text/javascript" src="../../new_/sdk/rest.js" ></script>
<script type="text/javascript" src="../scripts/entities/account_scoring.js"></script>
</head>
<body>
<table id="scoringSummary" width="100%" border="1" cellpadding="0" cellspacing="0">
<thead id="theads">
<tr>
<th class="th">Topic</th>
<th class="th">Question</th>
<th class="th">Allowed Values</th>
<th class="th">Score</th>
<th class="th">Is Editable?</th>
</tr>
</thead>
<tbody id="tbody">
<tr>
<td id="Topic"></td>
<td id="Question"></td>
<td id="allowedValues" align="center">
<!-- Dropdown -->
<select id="dropdown">
<option value="optionValue">Option Value</option>
</select>
</td>
<td id="score"></td>
<td id="isEditable">
<input type="radio" name="editable" value="0"/>No
<input type="radio" name="editable" value="1"/>Yes
</td>
</tr>
</tbody>
</table>
</body>
</html>
If anyone could provide some insight, it would be greatly appreciated. Thanks in advance!