Saturday, October 1, 2016

Binding DropDown with Ajax query from web service

Binding DropDown with Ajax query from web service 


$(document).ready(function () {

        var jobsVmDiv = new jobsVm();
        jobsVmDiv.init();
        ko.applyBindings(jobsVmDiv, $('#JobsDiv').get(0));

        $("#Job-selector option[value='-1']").attr("selected", true);
         $("#Job-selector").change(function () {
            var selector = document.getElementById("Job-selector");
            var ChangeText = $("#Job-selector option:selected").text();
            var completeUrl = selector.options[selector.selectedIndex].value;
            var indexOfComma = completeUrl.indexOf(',');
            window.location.href = window.location.origin + "/" + completeUrl;

        });

    })

    var jobsVm = function () {

        var self = this;

        self.JobsData = ko.observableArray(),

        self.language = function () {
            var lang = _spPageContextInfo.currentLanguage;
            if (lang == '1033') {
                return "English";
            }
            else {
                return "Arabic";
            }
        },
        self.init = function () {
            $.ajax({
                url: "/_vti_bin/JSONEServices/MoPWWebServices.svc/Vacancies/" + self.language(),
                type: "GET",
                async: false,
                headers: { "ACCEPT": "application/json;odata=verbose" },
                success: function (data) {
                    if (data.length > 0) {
                        for (var i = 0; i < data.length; i++) {
                            console.log(data);
                            $("#Job-selector").append($("<option></option>").val(data[i].Link).html(data[i].Title));
                        }
                    }
                },
                error:
                    function (data) {
                    },
            });
        }
    }
<html>
<select id="Job-selector" />
 <option value="-1"><asp:Literal ID="Literal1" runat="server" Text="<%$Resources:custom,PleaseSelect_Text%>"></asp:Literal></option>
</select>
</html>

No comments:

Post a Comment