CODEWITHSUNDEEP
javascriptphpjquery
Sarath TS
Sarath TS

Reputation: 2462

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

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);
        });
});

enter image description hereenter image description here

Upvotes: 1

Views: 338

Answers (2)

Wesley Smith
Wesley Smith

Reputation: 19571

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

Upvotes: 0

mv1
mv1

Reputation: 568

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!

Upvotes: 1

Related Questions