I have added a code for listing user selected languages and rankings. At the bottom of the page another dropdown is listed for selecting new languages "Add Languages". All the data are fetching and listing correctly. My purpose is when user select a language from bottom "Add Language" I need to generate rows and save each data from rows in to a table. Now issue is when I select language from bottom dropdown add more is not working. Please check my code and correct me.
js
//fake data for this test
var response = {
availableLanguage: [{
id: "1",
language_id: "English",
title_en: "USEnglish"
}, {
id: "2",
title_en: "Hindi"
}, {
id: "3",
title_en: "Arabi"
}
]
}
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
// get languages
//$.get("/tag/language", function(response){
var optionLang = '';
for (var i = 0; i < response.availableLanguage.length; i++) {
engLangID = response.availableLanguage[i].id;
engLang = response.availableLanguage[i].title_en;
optionLang += '<option value="'+engLangID+'" class="addMore" data-language="'+engLang+'">'+engLang+'</option>';
}
// 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">×</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);
});
$( ".addMore" ).click(function(){
fieldCount++;
language = $( this ).data('language');
languageID = $( this ).val();
$( ".appendRow" ).append('<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;">'+language+'</h4></div><div class="col-md-3" style="padding:5px;"><select class="form-control input-sm"><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>');
});
//});// get languages end
HTML
<div id="languagemodal">
<div class="modal-dialog" style="margin: 54px 0px;"></div>
</div>
You need to use delegate way of doing this because you are adding elements dynamically, So directly attaching event on dynamically loaded element won't work.
$("nearest-already-existing-element-reference").on(event, "dynamically-added-element-reference", function(){
// your code
});
Give the select
the .addMore
class instead of the options and use a change
event on the select
instead of a click
event on the option
.
Then you can find the selected option like so:-
$(".modal-dialog").on('change', ".addMore", function(){
var selected = $( this ).find(':selected');
language = selected.data('language');
languageID = selected.val();
$( ".appendRow" ).append(...);
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.