CODEWITHSUNDEEP
jquery
Sush
Sush

Reputation: 1457

Jquery code to dynamically generate optgroup tag

Am trying to generate a dynamic <optgroup>

I want to generate <optgroup> tag like below

<select>
  <optgroup label="first">
    <option value="first1">first1</option>
    <option value="first2">first2</option>
  </optgroup>
  <optgroup label="second">
    <option value="second1">second1</option>
    <option value="second2">second2</option>
  </optgroup>
</select>

Using following code to generate dynamic 

 function loadTestScript() {  

        $.ajax({
            type: 'GET',
            url: "/getFolderList",
            success: function (group) {
            alert("first--------"+JSON.stringify(group)); // group prints.....["first","second"]
            var html = '<option value=" ">SELECT</option>';
            for (var i = 0; i < group.length; i++) 
            {
               html += '<optGroup label="' + group[i] + '">';

               $.ajax({
                       type: 'GET',
                       url: "/getTestScripts?folder=" + group[i],
                       success: function (data1) 
                         {
                            alert("second--------"+JSON.stringify(data1));     // prints ["first1","first2"]
                            // prints ["second1","second2"]
                            for (var i = 0; i < data1.length; i++) {
                                html += '<option value="' + data1[i] + '">' + data1[i] + '</option>';
                            }

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

                         }
                    });
              html += '</optGroup>';
            } //for      

          }
      });
    }

But using above code am getting <optgroup> tag as below.All <optgroup> is showing first and all option values are showing one by one at last. whats wrong with my code.Please correct me!!!!

<select>
     <optgroup label="first"> </optgroup>
     <optgroup label="second">  </optgroup>
    <option value="first1">first1</option>
    <option value="first2">first2</option>
    <option value="second1">second1</option>
    <option value="second2">second2</option>

</select>

Upvotes: 0

Views: 951

Answers (3)

Saurabh
Saurabh

Reputation: 1007

Try putting $('#testscripts').html(html); when the getFolderList ajax call is about to complete

as inserting the html before </optgroup> hence modern browsers will put that tag on it's own hence your outcome was that way.

Edit --->

Here is fiddle demo that may help you

Edit -->

ajax calls are asynchronous so here if your data is not to big you may make it synchronous

the async:false property of ajax calls helps you do that easily.

function loadTestScript() { 

    $.ajax({
        type: 'GET',
        async:false,
        url: "/getFolderList",
        success: function (group) {
        var html = '<option value=" ">SELECT</option>';
        for (var j = 0; j < group.length; j++) 
        {
           html += '<optGroup label="' + group[j] + '">';

           $.ajax({
                   type: 'GET',
                   async:false,
                   url: "/getTestScripts?folder=" + group[i],
                   success: function (data1) 
                     {
                        for (var i = 0; i < data1.length; i++) {
                            html += '<option value="' + data1[i] + '">' + data1[i] + '</option>';
                        }
                     }
                });
          html += '</optGroup>';
        } //for      
        $('#testscripts').html(html);
      }
  });
}

Upvotes: 2

cbreezier
cbreezier

Reputation: 1312

The problem is that ajax calls function asynchronously. That is, the code executed in your ajax callback is not necessarily (read: rarely) executed before the next iteration of your for loop.

One possible solution is to store the html in separate strings in an array like so:

$.ajax({
    type: 'GET',
    url: "/getFolderList",
    success: function (group) {
        alert("first--------"+JSON.stringify(group));
        var optgroups = [];
        for (var i = 0; i < group.length; i++) {
            optgroups[i] = '<optGroup label="' + group[i] + '">';
            $.ajax({
                type: 'GET',
                url: "/getTestScripts?folder=" + group[i],
                success: function (data1) {
                             alert("second--------"+JSON.stringify(data1));
                             for (var j = 0; j < data1.length; j++) {
                                 optgroups[i] += '<option value="' + data1[j] + '">' + data1[j] + '</option>';
                             }
                             optgroups[i] += '</optGroup>';
                          }
            });
        }
        var html = '<option value=" ">SELECT</option>' + optgroups.join('');
        $('#testscripts').html(html);
    }
});

This should replace your for loop and the var html = line immediately before it.

Upvotes: 1

Trent Stewart
Trent Stewart

Reputation: 881

the HTML isn't getting passed to proper object with jQuery. use $('#testscripts').html($(html));

Upvotes: -1

Related Questions