How to create html page in the ajax response in jQuery

Question

We are using jQuery ajax in our application.

For example to get the states in a country ,after getting the result from server then we are doing the following thing.

$.each(results , function(index,value){

  $('#id').append('<option value="'+index+'">'+value+'</option>');

});//Here `id` the select box id

It is working perfectly. But I need a better readable solution. Is there any other way to do this?

What he ment is that, this is a question to post on http://codereview.stackexchange.com/ instead of here on SO. The reason for that, is that it is already working code, you just need it better. — Nick N., May 03 '13 at 13:37
ok so on ajax you are executing the above $.each to dynamically populate a select input, what's wrong with this, what are you trying to achieve that is "better"? — Jay Rizzi, May 03 '13 at 13:38
@PSR Flag your question and ask it to be migrated to Code Review? — dsgriffin, May 03 '13 at 13:43
Have a look at this SO question, there are several good responses http://stackoverflow.com/a/171007/1593273 — Colin Bacon, May 03 '13 at 14:26
You would be much better of using http://knockoutjs.com/ to manage UI. You then would just have templates and bind JavaScript objects to them, it makes managing UI a breeze. — Tomas Kirda, May 03 '13 at 15:16

score 1 · Answer 1 · answered May 03 '13 at 13:45

Just a simple optimization should be enough:

(function () {
    var str = "";
    $.each(results, function (index, value) {
        str += '<option value="' + index + '">' + value + '</option>';
    });
    document.getElementById('id').innerHTML += html;
})();

How to create html page in the ajax response in jQuery

1 Answers1