Populate multiple fields based on select value from JSON

Question

I am trying to populate multiple form fields with JSON data after a user makes a choice from a select box. I am very new to jquery so sorry if I am getting something elementary wrong. I don't want to include the JSON in my html because it will be changing often and it is a very large file. Here is what I have:

<script type="text/javascript">

$.ajax({
  url: '../includes/json/data/abbc.json',
  success: function(data) {

    $("#rig").html("<option >--select--</option>");

     $.each(rigdetaillist.rigs,function(){
           var rigName=this.rig;
         $("#rig").append("<option value=" +rigName + ">" +rigName + "</option>");
     });

     $("#rig").change(function(){
         var rigValue=$(this).val();
      $.each(rigdetaillist.rigs,function(i){
        var rigName=this.rig;

        if (rigName==rigValue){
          $(".rigdetail").val("");
          $.each(rigdetaillist.rigs[i].rigdteails,function(i){
            var rigdetailName=this.rigdetail
            $(".rigdetail").eq(i).val(rigdetailName);
          });
        }
      });
     });

  }
}); 

</script>

Answer 1

There are a few things here that you want to consider, one of the major things being that you want to do as little DOM manipulation as possible, as its one of the major causes of performance issues.

Unfortunately, I don't have the time to rewrite your code and give you what you should write. Although I do have the time to explain to you what you need to consider and hopefully it'll lead you down the right path :-)

(1) Your data var in success: function (data) { isn't being used. I'm assuming you mean it to be used for the rigdetaillist, most likely something like var rigdetaillist = data['rigdetaillist']; depending on your JSON. In either case, data is your json return value, of which you aren't referencing at all...which you probably need to. :-)

(2) As I said earlier, you want to do as little DOM manipulation as possible. So you probably will want to either pull out the #rig and cache it in javascript (to be put back into the DOM later), or create a new $(<script>) obj and then copy its html into $('#rig')'s when you are done. I would suggest creating the new script tag as detaching is a very nice feature of jquery, but can have its problems (such as when you go to append it back in, it appends at the bottom of the container instead of where you originally had it).

(3) The change function is being created on every json request. There is more than likely a way to globalize that so you don't have to create a new change function every time. You could possibly store the necessary information in a global variable and just reference that variable in change function, or I'm sure you could do some other really cool scope tricks, but that would be the simplist.