Solved

Ajax JQuery Dropdown option adding issue

Posted on 2013-01-03
4
630 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

Master Your Team's Linux and Cloud Stack!

The average business loses $13.5M per year to ineffective training (per 1,000 employees). Keep ahead of the competition and combine in-person quality with online cost and flexibility by training with Linux Academy.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
How to hide the rows in Table when the value is empty ? 4 39
servlet example 11 40
How to make a moving character 3 54
jquery datatables, asp.net MVC 9 38
Introduction A frequently asked question goes something like this:  "I am running a long process in the background and I want to alert my client when the process finishes.  How can I send a message to the browser?"  Unfortunately, the short answer …
Introduction If you're like most people, you have occasionally made a typographical error when you're entering information into an online form.  And to your consternation, the browser remembers the error, and offers to autocomplete your future entr…
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the basics of jQuery including how to code hide show and toggles. 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…

813 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

14 Experts available now in Live!

Get 1:1 Help Now