Wednesday 12 February 2014

Display/Get Data from SharePoint list using REST with JQuery (Ajax)

<html>
<head>

</head>

<body>
<script type="text/javascript">
    var json;
    var currentSiteUrl = $().SPServices.SPGetCurrentSite();
    var QuestionSet = new Array();
    var responseListName = "Quiz Responses";
    var accountName = $().SPServices.SPGetCurrentUser({
        async: true,
        fieldName: "Name",
        debug: true
    });

var questionUrl = currentSiteUrl + "/_vti_bin/listdata.svc/QuizQuestions?$filter=Active eq true&$orderby=DisplayOrder";
        $.ajax({
            url: questionUrl,
            type: 'GET',
            dataType: 'JSON',
            sortable: true,
            rownumbers: true,
            async: false,
            success: function (jsonData) {
                json = jsonData;
            },
            error: function () {
              alert("Error CallQuestion");
            }
    CallAnswer();
        });

function CallAnswer() {
        $(document).ready(function () {
            $("div#question").html("<span style='padding-top: 2px;'>" + json.d.Question + "</span></br><div style='border-bottom: solid #ddd 1px;padding-bottom:5px;'>");
            if (json.d.Answer1 != null) {
                $("div#answer").append("<span><input type='radio'  name='optionGroup' value='" + json.d.Answer1 + "' class='optionAnswer'>" + json.d.Answer1 + "</input></span></br>")
            }
            if (json.d.Answer2 != null) {
                $("div#answer").append("<span><input type='radio'  name='optionGroup' value='" + json.d.Answer2 + "' class='optionAnswer'>" + json.d.Answer2 + "</input></span></br>")
            }
            if (json.d.Answer3 != null) {
                $("div#answer").append("<span><input type='radio'  name='optionGroup' value='" + json.d.Answer3 + "' class='optionAnswer'>" + json.d.Answer3 + "</input></span></br>")
            }
            if (json.d.Answer4 != null) {
                $("div#answer").append("<span><input type='radio'  name='optionGroup' value='" + json.d.Answer4 + "' class='optionAnswer'>" + json.d.Answer4 + "</input></span></br>")
            }
            if (json.d.Answer5 != null) {
                $("div#answer").append("<span><input type='radio'  name='optionGroup' value='" + json.d.Answer5 + "' class='optionAnswer'>" + json.d.Answer5 + "</input></span></br>")
            }
            if (json.d.Answer6 != null) {
                $("div#answer").append("<span><input type='radio'  name='optionGroup' value='" + json.d.Answer6 + "' class='optionAnswer'>" + json.d.Answer6 + "</input></span></br>")
            }
        });
    }
</script>
<div>
    <div id="question">
    </div>
    <div id="answer">
    </div>
    <div id="comment">
    </div>
    <div id="anotherComment">
    </div>
    <div>
        <input type="button" name="btnSubmit" value="" id="btnSubmit" />&nbsp;
        <input type="button" name="btNext" id="btnNext" value="" />
    </div>
</div>
</body>
</html>

No comments:

Post a Comment