Solved

Ajax JQuery Dropdown option adding issue

Posted on 2013-01-03
4
632 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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

Announcing the Most Valuable Experts of 2016

MVEs are more concerned with the satisfaction of those they help than with the considerable points they can earn. They are the types of people you feel privileged to call colleagues. Join us in honoring this amazing group of Experts.

Question has a verified solution.

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

Suggested Solutions

The Confluence of Individual Knowledge and the Collective Intelligence At this writing (summer 2013) the term API (http://dictionary.reference.com/browse/API?s=t) has made its way into the popular lexicon of the English language.  A few years ago, …
PROBLEM: The other day I was working on adding an ajax request to a webpage that already had a dialog box on the page.  The dialog box was using relative positioning to be positioned next to a form field I had on the page.  Everything was working…
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.

740 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