How can I fill the text fields in page by selecting combo selection by dyanmicaly?

Suppose in the database there is one table (for example student records) with a number of columns, but my HTML page only displays a few of them. For example: a table having the columns sno, sname, addr, age, dept, and dob and my page having only 3 fields: sno, sname, dept. Here I display the dept field in a combo box control and the rest of the fields are text and empty values.

My requirement is: when I select the dept from combobox the corresponding row vlaues like sno and sname have to display automatically in the text fields. How can I do this?

Answers


You make an ajax call to your server when you change the department. Your server returns your object as JSON. Your success handler in your ajax call takes the fields it needs from your JSON object and sets the appropriate html elements to those fields. For example, if you're using jQuery:

var myUrl = "http://some.domain/action/";

var success = function(response) {
  $('#textField1').val(response.sno);
  $('#textField2').val(response.sname);
}

$('#myDropDown').change(function() {
  $.get(myUrl + $(this).val(), success);
});

If you don't want to send back all the properties of your object because you want to minimize bandwidth, you can form your own JSON object, but that's kind of a pain in the neck and if your object is not huge you might as well use whatever JSON serializer is available in the framework you're using and just serialize the object and send it through the wire.

Or here's another option. You could just make one initial AJAX call and then create a map from department to the other fields you want to set. Example:

var map = {};

var success = function(response) {
  for (obj in response.objects) {
    map[obj.department] = { sno: obj.sno, sname: obj.sname };
  }
}

$.get(myUrl, success);

$('#myDropDown').change(function() {
  var obj = map[$(this).val()];
  $('#textField1').val(obj.sno);
  $('#textField2').val(obj.sname);
}

Hope that helps.


Need Your Help

Android: given crash reports, anyway to contact user?

android

The Android Market Developer Console automatically provides stack traces for crashes. This is an amazing feature. However, I would love to be able to contact the user to inquire about exact scena...

How to find the C# component that contains a particular class

c# visual-studio-2010 components

I'm creating an Internet Explorer plugin using C#. I've been following a tutorial where the code imports a couple of classes that I don't have available, namely:

About UNIX Resources Network

Original, collect and organize Developers related documents, information and materials, contains jQuery, Html, CSS, MySQL, .NET, ASP.NET, SQL, objective-c, iPhone, Ruby on Rails, C, SQL Server, Ruby, Arrays, Regex, ASP.NET MVC, WPF, XML, Ajax, DataBase, and so on.