Question

196

How can i load data from ajax to Chosen jquery?

rated 0 times [ 200] [ 4] / answers: 1 / hits: 30279 / 9 Years ago, thu, september 24, 2015, 12:00:00

I have use chosen at http://harvesthq.github.io/chosen/ . Ok, i testing it load data from ajax . I founding anywhere, maybe no someone success with them.

<script src=theme/js/jQuery-2.1.3.min.js></script>

    <link href=theme/chosen_v1.4.2/chosen.css rel=stylesheet />

    <script src=theme/chosen_v1.4.2/chosen.jquery.js></script>

      <script type=text/javascript charset=utf-8>

       $(document).ready(function () {

           $(.cb_bu_info).chosen({

               width: 95%,

               source: function (data) {

                   $.ajax({

                       type: POST,

                       url: ../BUS/WebService.asmx/LIST_BU,

                       contentType: application/json; charset=utf-8,

                       dataType: json,

                       success: function (data) {

                           $(#cb_info).html('');

                           //$.each($.parseJSON(data.d), function (idx, obj) {

                           $.each(data, function (idx, obj) {

                               $(#cb_info).append('<option value=' + obj.BU_ID + '>' + obj.BU_NAME + '</option>');

                           });  

                          //$(#cb_info).trigger(liszt:updated);

                       },

                       error: function (data) {

                           console.log(data.d);

                       }

                   });

               }

           });



           $(#cb_info).trigger(liszt:updated);

        });

    </script>

<select id=cb_info class=cb_bu_info></select>

The data form ajax as

[{BU_ID:B01,BU_NAME:Agro Feed,BU_DES:Agro Feed,EDIT_DATE:2015-05-05T00:00:00,EDIT_BY:,FLAG:false},{BU_ID:B02,BU_NAME:Agro Farm,BU_DES:Agro Farm,EDIT_DATE:2015-05-05T00:00:00,EDIT_BY:,FLAG:false}]

Well , it's look ok , but when i run it , result not show in select option, see browser dev tool , I've not seen error. Anything is ok.What's the problem happen in here? Notes: only use Chosen Jquery

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

kristinsonjab

Add To Favorites

Follow

Total Points: 364

Total Questions: 98

Total Answers: 98

Location: Christmas Island

Member since Mon, Oct 19, 2020

4 Years ago

kristinsonjab questions

1 is it possible to install canvas with M1 chip

Fri, Mar 4, 22, 00:00, 2 Years ago

1 React-router v6 Route composition. Is it possible to render a custom Route?

Sat, Jan 15, 22, 00:00, 2 Years ago

1 Next.js router locale issue

Fri, Jan 22, 21, 00:00, 3 Years ago

1 Sort array of objects by multiple properties of string type

Wed, Sep 2, 20, 00:00, 4 Years ago

1 Can't scroll down screen in react JS

Fri, Aug 14, 20, 00:00, 4 Years ago

View All

answered 9 Years ago lamontm · Accepted Answer

After checking out the Chosen docs, there seems to not be a source option. What you need to do is first run your Ajax call, then fill your select options. Once the select is all filled, then run Chosen on that select element.

I would use the following JS code:

var url = ../BUS/WebService.asmx/LIST_BU;

$.getJSON(url, function(json){

    var $select_elem = $(#cb_info);

    $select_elem.empty();

    $.each(json, function (idx, obj) {

        $select_elem.append('<option value=' + obj.BU_ID + '>' + obj.BU_NAME + '</option>');

    });

    $select_elem.chosen({ width: 95% });

})