jquery generate multiply selects with json

Hi,
Can any one see this code and tell me what is wrong with my thinking ;)
I can get proper data. I have page which triiger function to create selects depends on already selected number. So if I pick up 3 it should generate table with 3 rows and select box on each with the same data. But it doesn't happen. So please take a look, Ipresume it's not problem, but I sitting too long on it and just starting with jquery.
<script language="javascript" type="text/javascript">
            //<![CDATA[
            $(document).ready(function() {
                $(".no_of_fields").change(function() {
                    FieldsSetup();
                });
            });

            function FieldsSetup() {
                var tbody = $("#Fields_setup > tbody").html(""); // It't table in nodisplay div in main document. Working fine.
                var nof = $("#no_of_fields option:selected").val(); // It's select box with numbers to get how many rows(selects in)
                // function should generate. Works fine.
                var rowText = ""; // Variable for rows.

                for (var i = 1; i <= nof; i++) { // loop for upto selected no.
                    var selId = "#sel" + i; // generates select box ID.
                    rowText = "<tr><th scope=\"row\" class=\"spec\" nowrap>" + selId + " Field - " + i + "</th>" +
                          "<td><select id=\"sel" + i + "\"><option value=\"-1\">-> Select field type <-</option>";
                    $(rowText).appendTo(tbody);

                    $.getJSON("../Dictionaries/getJobTypes.asp", { action: "show" }, function(data) { // Getting data- working fine - verified.
                        for (var j in data) {
                            var arrayResponse = data[j];
                            
                            $("<option>").attr("value", arrayResponse.id).text(arrayResponse.name).appendTo(selId);
                        }
                    });

                    rowText = "</select></td></tr>";
                    $(rowText).appendTo(tbody);
                }

                $(".fields_details").show("slow");
            };
            // ]]>     
    </script>

Open in new window

Albert SzczesnySoftware EngeenierAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

leakim971PluritechnicianCommented:
Hello not2be,

The JSON function don't really run inside your loop, it an asynchrone function so put it in loop don't have sense. What happen is your function FieldsSetup run fine and finish and then, the JSON function is called the number of time you do the call. But again your function already finish its work.

You need to build the select box and fill the tbody directly in the json function, so :


<script language="javascript" type="text/javascript">
	$(document).ready(function() {
		$(".no_of_fields").change(function() {
				FieldsSetup();
			});
		});

		var iSelId; // generates select box ID.
		function FieldsSetup() {
			iSelId = 0;
			var tbody = $("#Fields_setup tbody").html(""); // It't table in nodisplay div in main document. Working fine.
			var nof = $("#no_of_fields option:selected").val(); // It's select box with numbers to get how many rows(selects in)
			// function should generate. Works fine.
			
			for (var i = 1; i <= nof; i++) { // loop for upto selected no.
				$.getJSON("getJobTypes.php", { action: "show" }, function(data) { // Getting data- working fine - verified.
					iSelId++;
					var selId = "#sel" + iSelId;
					rowText = "<tr><th scope=\"row\" class=\"spec\" nowrap>" + selId + " Field - " + iSelId + "</th>" + "<td><select id=\"sel" + iSelId + "\"><option value=\"-1\">Select field type</option>";
					for (var j in data) {
						var arrayResponse = data[j];
						rowText += "<option value=\"" + arrayResponse.id + "\">" + arrayResponse.name + "</option>";
					}
					rowText += "</select></td></tr>";
					$(rowText).appendTo( $("#Fields_setup tbody") );	
				});
			}
			$(".fields_details").show("slow");
		}
</script>

Open in new window

0
leakim971PluritechnicianCommented:
No feedback ? Did I miss something ?
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Albert SzczesnySoftware EngeenierAuthor Commented:
Thanks' Everything works fine now.
0
leakim971PluritechnicianCommented:
Thanks a lot for the points!
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.