How to dropdown selected dynamically if data in table using jquery ajax

Question

I have attached an image of a table. The data (language and ranking) are getting from this table via jQuery AJAX. Please check the sample image of data listing.

My issue is in dropdown I need to show retrieve data (ranking) is selected when page loads. At present German is correct means ranking shows 3 but English dropdown is showing wrong. But ranking response showing alert(getRankingRate); result is 2 and 3.

$.get("/language/ranking/get", function(responseDB){
        var getrankingDB = '';
        var getRankingRate = 0;
        var getRankingID   = 0;
        $.each(responseDB.selectLanguageRankingTagId,function(i, item) {
          getRankingID    = item.id;
          getRankingRate  = item.ranking;
          getLanguageName = item.title_en;
          getrankingDB += '<div class="row"><div class="col-md-8"><h4 style="background-color: lightgrey; border-radius: 10px; background-repeat: repeat; height: 30px; margin:5px 0px; padding:4px 5px;">'+getLanguageName+'</h4></div><div class="col-md-3" style="padding:5px;"><select class="form-control input-sm" id="getRankingLanguage_'+getRankingID+'"><option value="1">1</option><option value="2">2</option><option value="3">3</option><option value="4">4</option><option value="5">5</option></select></div></div>';
          $( ".loadlanguagemodal" ).html('<div class="modal-content"><div class="modal-header loadlanguagemodal"><button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button><h4 class="modal-title">Edit Languages</h4></div><div class="modal-body">'+getrankingDB+'<div class="appendRow"></div></div><div class="modal-footer"><div class="row"><select class="form-control input-sm"><option selected="selected">Add Language</option>'+optionLang+'</select></div><br><button type="button" class="btn btn-default" data-dismiss="modal">Close</button><button type="button" class="btn btn-primary">Save changes</button></div></div>').fadeIn( "slow" );
        //alert(getRankingID);
        $('#getRankingLanguage_'+getRankingID).val(getRankingRate);
        });
});

mv1 · Accepted Answer · 2015-11-10 09:17:30Z

1

You can greatly simplify things here and use jQuery's behavior to select <select> element's option by it's 'value' attribute. Here is an example: https://jsfiddle.net/avkj0qwm/

Your <select> elements should have unique IDs based on their RankingID, e.g.:

<select class="form-control input-sm" id="getRankingLanguage_'+getRankingID+'">

Then you can target the correct <select> and <option> elements, like:

$('#getRankingLanguage_'+getRankingID).val(getRankingRate);

Hope this helps! Let me know if you need more info!

edited Nov 10, 2015 at 9:17

answered Nov 10, 2015 at 9:14

mv1

5784 silver badges8 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Wesley Smith Over a year ago

That would be simpler, could be even shorter with $('#'+getRankingID).val(getRankingRate);

Sarath TS Over a year ago

I have updated my script as per your instructions but issue is not solved. Updated code is added in my question

Wesley Smith · Accepted Answer · 2015-11-10 14:03:36Z

0

Problem 1

In your html you have class="getRankingLanguageOne_' but then in your jQuery, you call $(".getRankingLanguage_" + getRankingID).attr("selected", "selected");

Problem 2

You have an issue with the logic in your loop. To explain the issue, I'll simplify your function and add some comments:

$.get("/language/ranking/get", function(responseDB){
        var getrankingDB = ''; // here you create a varible to hold the html for the rows
        //....
        $.each(responseDB.selectLanguageRankingTagId,function(i, item) { // here you loop over the results
          getRankingID    = item.id;
          getRankingRate  = item.ranking;
          getLanguageName = item.title_en;
          getrankingDB += '....'+getLanguageName+'...'; // here you add the html for this row to the getrankingDB variable
          $( ".loadlanguagemodal" ).html('...<div class="modal-body">'+getrankingDB+'<div class="appendRow">....').fadeIn( "slow" ); // here YOU SET THE CONTENTS OF modal-body TO THE RAW HTML VARIABLE getrankingDB ON EVERY ITERATION OF THE LOOP
          $('#getRankingLanguage_'+getRankingID).val(getRankingRate); // here you set the value of the current select box BUT, on the next iteration you YOU SET THE CONTENTS OF modal-body TO THE RAW HTML VARIABLE getrankingDB which overwites the changes you made here on the last iteration.
            // this means that only the very last itteration will actually get the value
        });
});

So, that's what's wrong, here's how I would do it.

And a jsFiddle

//fake data for this test
var responseDB = {
    selectLanguageRankingTagId: [{
        id: "1",
        user_id: "11",
        language_id: "English",
        ranking: "2",
        title_en: "English"
    }, {
        id: "2",
        user_id: "11",
        language_id: "German",
        ranking: "3",
        title_en: "German"
    }, {
        id: "3",
        user_id: "11",
        language_id: "French",
        ranking: "4",
        title_en: "French"
    }

    ]
}

var $languagemodal = $('#languagemodal'); // get the modal and the dialog div
var $dialog = $languagemodal.find('.modal-dialog');

$languagemodal.modal({show: true}); // just to show the modal for the demo

var optionLang = ''; // not sure what this is supposed to be...

// load the modal content div
$dialog.html('<div class="modal-content"><div class="modal-header "><button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button><h4 class="modal-title">Edit Languages</h4></div><div class="modal-body"><div class="appendRow"></div></div><div class="modal-footer"><div class="row"><select class="form-control input-sm"><option selected="selected">Add Language</option>' + optionLang + '</select></div><br><button type="button" class="btn btn-default" data-dismiss="modal">Close</button><button type="button" class="btn btn-primary">Save changes</button></div></div>');

// get the modal body we just added
var $modalBody = $dialog.find('.modal-body');

// loop over your data, you would have this in your $.get function 
$.each(responseDB.selectLanguageRankingTagId, function (i, item) {
    // make the row
    var $newRow = $('<div class="row"><div class="col-md-8"><h4 style="background-color: lightgrey; border-radius: 10px; background-repeat: repeat; height: 30px; margin:5px 0px; padding:4px 5px;">' + item.title_en + '</h4></div><div class="col-md-3" style="padding:5px;"><select class="form-control input-sm" id="' + item.id + '" data-item="' + item + '"><option value="1">1</option><option value="2">2</option><option value="3">3</option><option value="4">4</option><option value="5">5</option></select></div></div>')
    // set the select value
    $newRow.find('select').val(item.ranking);
    // add the row to the modal body
    $modalBody.append($newRow);

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<div id="languagemodal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog"></div>
</div>

This is why your code does not work, but milenvoutchev's approach would be much simpler.

The

edited Nov 10, 2015 at 14:03

answered Nov 10, 2015 at 9:13

Wesley Smith

19.6k22 gold badges93 silver badges135 bronze badges

10 Comments

Sarath TS Over a year ago

Thanks, I have updated my code but problems not resolved

Wesley Smith Over a year ago

@samsam Can you post a jsfiddle with the generated html? If you could add a sample of responseDB that would also be very helpful

Sarath TS Over a year ago

jsfiddle.net/avkj0qwm/3 Initially load a default language div. When we click on that div it will hide and load "loadlanguagemodal". Now in code datas are dynamic. I didn't change to static. If you need that I will convert things to static. Response datas are hardcoded in html side.

Wesley Smith Over a year ago

@samsam Ok , I see the problem, I have to take my kids to school. Ill finish a fix for you when I get back

Wesley Smith Over a year ago

@samsam You're welcome, That should get you fixed up and explain the issues.

|

Collectives™ on Stack Overflow

How to dropdown selected dynamically if data in table using jquery ajax

2 Answers 2

2 Comments

Problem 1

Problem 2

So, that's what's wrong, here's how I would do it.

10 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Problem 1

Problem 2

So, that's what's wrong, here's how I would do it.

10 Comments

Your Answer

Sign up or log in

Post as a guest

Related