Solved

Ajax JQuery Dropdown option adding issue

Posted on 2013-01-03
4
629 Views
Last Modified: 2013-01-08
Hi,

I want to set the options for dropdown list in a form using ajax and jquery.

My code looks like this:


$('select#project').live('change',function(event) {
                          var $country=$(this).val();
                          $.get('select.do',{countryname:$country},function(responseJson) {  
                              var $select = $('#department').get($(this).index());  
                              var $option = $('#department option');
                              $option.remove();
                              $.each(responseJson, function(key, value) {              
                                    $('<option>').val(key).text(value).appendTo($select);      
                              });
                        });
                    });

This works fine and retrieves the value from action servlet and sets the value to the option list.

But, it always sets the value to the first row's dropdown NOT to the current row.

I am adding multiple rows using jquery dynamically.

Code for adding is below:

$(document).ready(function() {
                        var $button = $('#add-row');
                              $row = $('.timesheet-row').clone(false);

                        $button.click(function() {
                              $row.clone(false).insertBefore( $button );
                        });
});

Below is my html form code:
<div class="timesheet-row">

                        <label>Project:
                              <select name="project[]" id="project" required>
                                    <option value="1">Project-1</option>
                                    <option value="2">Project-2</option>
                                    <option value="3">Project-3</option>
                                    <option value="4">Project-4</option>
                                    <option value="5">Project-5</option>
                              </select>
                        </label>

                        <label>Department:
                              <select name="department[]" id="department" required>
                              <option value="" />
                              </select>
                        </label>

                        <label>Task:
                              <select name="task[]" required>
                              <option value="" />
                              </select>
                        </label>

                        <label>Hours:
                              <input type="number" step="0.25" name="hours[]" width="1" placeholder="2.0" required />
                        </label>

                        <label>Comment:
                              <input type="text" name="comment[]" width="50" />
                        </label>

                  </div>

                  <input type="button" id="add-row" name="add-row" value="Add row" />

Please refer the image attached.

Can anyone help to set the dropdown option to current row instead to the first row always.

Thanks
dropdown.png
0
Comment
Question by:arjunarajan
  • 2
  • 2
4 Comments
 
LVL 11

Assisted Solution

by:un1x86
un1x86 earned 500 total points
ID: 38742814
Hi

I can't really test it as I am missing some of the functions. But one thing I see is that you are using id="" and you are using the same id everytime you create a new row. ID has to be unique

You could use class="department" instead and then select it with

var $select = $('.department').get($(this).index()); 

Open in new window

0
 

Author Comment

by:arjunarajan
ID: 38742938
you mean, it is not required to have a unique name for class when we create multiple rows?

I am not much familiar with JQuery. Can you pls give me the sample code snippet ?
0
 

Author Comment

by:arjunarajan
ID: 38742964
You said 'I can't really test it as I am missing some of the functions'

Probably, you will be missing the action servlet to send the option list which i call in the onChange event :

 $.get('select.do',{countryname:$country},function(responseJson)

You can just write a simple action to resturn a JSON map and test
0
 
LVL 11

Accepted Solution

by:
un1x86 earned 500 total points
ID: 38742971

you mean, it is not required to have a unique name for class when we create multiple rows?

I am not much familiar with JQuery. Can you pls give me the sample code snippet ?

id is a unique name that can only exist once. When you create multiple copies you will have multiple times the same id.

Read here
http://www.w3schools.com/css/css_id_class.asp

If you need to specify multiple times the same name use class instead.

Change

 <select name="department[]" id="department" required>

to 

 <select name="department[]" class="department" required>

Open in new window


and change

var $select = $('#department').get($(this).index());  
                              var $option = $('#department option');

to

var $select = $('.department').get($(this).index());  
                              var $option = $('.department option');

Open in new window


Do the same for id="project"
0

Featured Post

DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

Question has a verified solution.

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

Introduction Knockoutjs (Knockout) is a JavaScript framework (Model View ViewModel or MVVM framework).   The main ideology behind Knockout is to control from JavaScript how a page looks whilst creating an engaging user experience in the least …
Introduction This article is the second of three articles that explain why and how the Experts Exchange QA Team does test automation for our web site. This article covers the basic installation and configuration of the test automation tools used by…
The viewer will learn how to implement Singleton Design Pattern in Java.
The viewer will learn how to dynamically set the form action using jQuery.

861 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

Need Help in Real-Time?

Connect with top rated Experts

24 Experts available now in Live!

Get 1:1 Help Now