Solved

Ajax JQuery Dropdown option adding issue

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

How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

Join & Write a Comment

Introduction JSON is an acronym for JavaScript Object Notation.  It is a text-string data transport mechanism, capable of representing simple or complex data structures in a consistent and easy-to-read manner.  Similar in concept to XML, but more e…
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
This tutorial covers a practical example of lazy loading technique and early loading technique in a Singleton Design Pattern.
The viewer will learn how to dynamically set the form action using jQuery.

747 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

10 Experts available now in Live!

Get 1:1 Help Now