jQuery to change dropdown with AJAX

Question

I need a radio button to change a dropdown and have most if it working just not sure about a few things. I want to have CreativeID as the ID and CreativeName as the name. Here's my AJAX:

$('input[name=creativeType]').change(function(){
        $.ajax({
            url: '/app/components/MailingsReport.cfc',
            //POST method is used
            type: "POST",
            //pass the data 
            data: {
                method: "getCreative",
                CreativeType: $('input[name=creativeType]:checked').val(),
                datasource: "shopping_cart"
                 },
            dataType: "xml",
            //contentType: "application/text; charset=utf-8",
            success: function(xml){
                $('#creative option').remove();
                    $(xml).find('number').each(function()
                    {

$("#creative").append('<option value="' + $(this).text() + '">' + $(this).find('CREATIVENAME').text() + '<\/option>');

                    });                
            }
        });

Here's my return data:

<wddxPacket version='1.0'><header/><data><recordset rowCount='3' fieldNames='CREATIVEID,CREATIVENAME' type='coldfusion.sql.QueryTable'><field name='CREATIVEID'><number>52.0</number><number>65.0</number><number>77.0</number></field><field name='CREATIVENAME'><string>Product One</string><string>Product Two</string><string>Product Three</string></field></recordset></data></wddxPacket>

My Question: I just have no idea how to populate the dropdown so the ID is the value AND the product name shows between the option tags. Any help on this would be appreciated!

Davuth · Accepted Answer · 2012-07-26 00:45:09Z

2

var numbers = $(xml).find('number');
var strings = $(xml).find('string');
for (var i = 0; i < numbers.length; i++) {
    $("#creative").append('<option value="' + numbers[i].innerHTML + '">' + strings[i].innerHTML + '<\/option>');
}

answered Jul 26, 2012 at 0:45

Davuth

5853 gold badges9 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

user1431633 Over a year ago

Thanks @Davuth -- I'm getting correct number of rows, but the value and the string say 'undefined' any idea why?

Davuth Over a year ago

hmm.. I use the xml straight away without using ajax, and it shows correct value. hmm.. ok, how about you try console.log(numbers) or console.log(strings) and see their values in Firebug? You will see an array of elements. Just pick one element and go through its properties to see which property that holds the value u want. Hope I'm not confusing you.

user1431633 Over a year ago

This is my code, but firebug is saying: ReferenceError: numbers is not defined success: function(xml){ $('#creative option').remove(); var numbers = $(xml).find('number'); var strings = $(xml).find('string'); for (var i = 0; i < numbers.length; i++) { $("#creative").append('<option value="' + numbers[i].innerHTML + '">' + strings[i].innerHTML + '<\/option>'); } }

user1431633 Over a year ago

$("#creative").append('<option value="' + numbers[i].textContent + '">' + strings[i].textContent + '<\/option>');

Collectives™ on Stack Overflow

jQuery to change dropdown with AJAX

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related