[Webinar] Streamline your web hosting managementRegister Today

x
?
Solved

jquery generate multiply selects with json

Posted on 2010-04-01
4
Medium Priority
?
398 Views
Last Modified: 2013-11-08
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

0
Comment
Question by:Albert Szczesny
  • 3
4 Comments
 
LVL 83

Expert Comment

by:leakim971
ID: 29410202
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
 
LVL 83

Accepted Solution

by:
leakim971 earned 2000 total points
ID: 29492599
No feedback ? Did I miss something ?
0
 

Author Comment

by:Albert Szczesny
ID: 30002044
Thanks' Everything works fine now.
0
 
LVL 83

Expert Comment

by:leakim971
ID: 30003650
Thanks a lot for the points!
0

Featured Post

Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
In this blog, we’ll look at how improvements to Percona XtraDB Cluster improved IST performance.
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
Suggested Courses

591 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question