CODEWITHSUNDEEP
javascriptjqueryajaxember.jshandlebars.js
rkg
rkg

Reputation: 69

Ajax Get Method Not Retuning Valiue Using Ember Js

I trying to show drop down with ember js.Using Ajax GET method .but it could not returning any value.

My Requirement only with Ajax

Here's my code:

App.IndexController = Ember.ArrayController.extend({
  model1: function () {
    var Category1 ;
    $.ajax({
      url: 'http://localhost:63951/Home/GetAllCountry',
      type: 'GET',
      datatype: 'application/json',
      async: false,
      success: function (data) {
        alert(data);
        Category1 = data;
      }
    });
    return Category1;
  }.property(),

});

Note Inside my controller alert showing fine.

alert Json are

[{"CountryID":1,"CountryName":"United States"}]

In my html page unable to get that value.

js code here

 <script type="text/x-handlebars">
        <h2>Welcome to Ember.js</h2>
        {{outlet}}
    </script>
    <script type="text/x-handlebars" id="index">

        <div>

            {{view  "select"  id="AddProfile_SelectCountry"  content=model1  prompt="Select Country"  optionValuePath="content.CountryName" optionLabelPath="content.CountryName" valueBinding=default }}

            </div>


    </script>

    <script src="js/libs/jquery-1.10.2.js"></script>
    <script src="js/libs/handlebars-v1.3.0.js"></script>
    <script src="js/libs/ember-1.8.1.js"></script>
    <script src="js/appnew.js"></script>
    <!-- to activate the test runner, add the "?test" query string parameter -->

Upvotes: 2

Views: 143

Answers (2)

Carl
Carl

Reputation: 915

When you do Category1 = data;, you are setting the variable label Category1 to the value of the data. What you want to do is change the object referenced by that label.

Better would be to make Category1 an Ember object, and set its properties by the data. Something like this:

        model1: function () {
        var Category1 = Ember.Object.create();
        $.ajax({
                    url: 'http://localhost:63951/Home/GetAllCountry',
                    type: 'GET',            
                    datatype: 'application/json',
                    async: false,
                    success: function (data) {
alert(data)
                        Category1.setProperties(data); 
                   }
        });       
        return Category1;
            }.property(),

If your data is coming in as an array, but you just want the first element (like you showed above), you would instead do Category1.setProperties(data[0]);

Upvotes: 1

Gnucki
Gnucki

Reputation: 5133

You could try that:

$.ajax({
    url: 'http://localhost:63951/Home/GetAllCountry',
    type: 'GET',            
    datatype: 'application/json',
    async: false,
    success: function (data) {
        App.IndexController = Ember.ArrayController.extend({
            model1: data
        })
    }
});

And that:

{{ view Ember.Select
    id="AddProfile_SelectCountry"
    contentBinding="App.IndexController"
    prompt="Select Country"
    optionValuePath="model1.CountryName"
    optionLabelPath="model1.CountryName"
    valueBinding=default
}}

EDIT:

This one will work for sure but is not really performant:

$.ajax({
    url: 'http://localhost:63951/Home/GetAllCountry',
    type: 'GET',            
    datatype: 'application/json',
    async: false,
    success: function (data1) {
        $.ajax({
            url: 'http://localhost:63951/Home/GetAllCities',
            type: 'GET',            
            datatype: 'application/json',
            async: false,
            success: function (data2) {
                App.IndexController = Ember.ArrayController.extend({
                    model1: data1
                    model2: data2
                })
            }
        })
    }
});

Maybe you could try something like:

App.IndexController = Ember.ArrayController.create({});

$.ajax({
    url: 'http://localhost:63951/Home/GetAllCountry',
    type: 'GET',            
    datatype: 'application/json',
    async: false,
    success: function (data) {
        App.IndexController.extend({
            model1: data
        })
    }
});

$.ajax({
    url: 'http://localhost:63951/Home/GetAllCities',
    type: 'GET',            
    datatype: 'application/json',
    async: false,
    success: function (data) {
        App.IndexController.extend({
            model2: data
        })
    }
});

but I'm not an expert in Ember sorry.

Upvotes: 0

Related Questions