xml, jquery, ajax

I would like to make the dropdown sorted but not sure how to do it right. For those of you already helped me in the past. Please understand I ran with some trouble with your solutions and always get different results.

I want to re-post and hope to get working sample. Thanks


<select></select>

function fnGetBondNameList(bondState) {
            $.ajax({
                url: "http://localhost:5489/BondList.xml",
                success: function (xml) {
                    parseSelectXML(xml,"bondName","Bond",bondState);
                },
                error: function (xhr, ajaxOptions, thrownError) {
                    alert("Status: " + xhr.status);
                    alert("Error: " + thrownError);
                }
            });
    } 

function parseSelectXML(xml, selectid, xmlnode, bondState) {
    var selecthtml = "", selectBondName = "";
    var options = [];
    $(xml).find(xmlnode).each(function () {
        if (bondState == $(this).find('GeneralInformation').find('State').text()) {
            selectBondName = $(this).find('GeneralInformation').find('Name').text();
        }
    });
    $("#" + selectid).prop("disabled", false);
    $('#' + selectid).html(selecthtml);
    $('#' + selectid + ' option:first').attr('selected', 'selected');
}

<?xml version="1.0" encoding="utf-8"?>
<Container>
  <GeneralInformation UI="BondInfo">
    <State>CA</State>
    <Name>Zebra</Name>
  </GeneralInformation>
  <GeneralInformation UI="BondInfo">
    <State>CA</State>
    <Name>Aardvark</Name>
  </GeneralInformation>
  <GeneralInformation UI="BondInfo">
    <State>CA</State>
    <Name>Marmoset</Name>
  </GeneralInformation>
</Container>

Open in new window

LVL 1
ITsolutionWizardAsked:
Who is Participating?
 
Chris StanyonConnect With a Mentor Commented:
OK. Still guessing on parts of this, but here goes:

function parseSelectXML(xml, selectid, xmlnode, bondState) {
    var selecthtml = '';
    var values = new Array();

    $(xml).find(xmlnode).each(function () {
        if (bondState == $(this).find('GeneralInformation').find('State').text()) {
            values.push($(this).find('GeneralInformation').find('Name').text());
        }
    });

    $.each(values.sort(), function(i, v) {
        selecthtml += '<option value="'+ v +'">'+ v +'</option>';
    });

    $('#' + selectid)
        .html(selecthtml)
        .prop('disabled', false);

    $('#' + selectid + ' option:first').attr('selected', 'selected');
}

Open in new window

0
 
Mayur AgarwalCommented:
You can insert text in an array and then sort the array using array.sort() method. Loop over the array items and fill the dropdown.
If possible,share the jsfiddle or complete code of your page as from above code it is very difficult to understand what you want to achieve. Also you have declared selecthtml variable but never fill value in it.
0
 
Chris StanyonCommented:
You might want to clarify your needs. Currently your code seems to be missing some parts.

Firstly, it looks like you're trying to find all nodes called "Bond" in you XML - there are none!

Secondly, it looks like you're trying to set the HTML of an element to the value stored in the selecthtml variable. That variable is never set to anything othe than an empty string.

You haven't really said what your Dropdown should contain or what you want it sorted on (text / value etc).
0
The 14th Annual Expert Award Winners

The results are in! Meet the top members of our 2017 Expert Awards. Congratulations to all who qualified!

 
ITsolutionWizardAuthor Commented:
use this xml instead please

<Bond>
  <GeneralInformation UI="BondInfo">
    <State>CA</State>
    <Name>Zebra</Name>
  </GeneralInformation>
  <GeneralInformation UI="BondInfo">
    <State>CA</State>
    <Name>Aardvark</Name>
  </GeneralInformation>
  <GeneralInformation UI="BondInfo">
    <State>CA</State>
    <Name>Marmoset</Name>
  </GeneralInformation>
</Bond>

Open in new window

0
 
Chris StanyonCommented:
That still doesn't really make a lot of sense. In your code above, you're looping through the <bond> nodes but in the XML you've just provided, there's only one <bond> node. You then go on to 'find' the state. You're not looping through that so it will only find the first one. If it matches the state, you then assign the first 'name' it finds to a variable called selectBondName but then do nothing with it.

You also haven't cleared up exactly what you want adding to your dropdown.

Still need clarity on exactly what you need.
0
 
ITsolutionWizardAuthor Commented:
Below should be fine.

<Bond>
  <GeneralInformation UI="BondInfo">
    <State>CA</State>
    <Name>Zebra</Name>
  </GeneralInformation>
<Bond>
  <GeneralInformation UI="BondInfo">
    <State>CA</State>
    <Name>Aardvark</Name>
  </GeneralInformation>
</Bond>
<Bond>
  <GeneralInformation UI="BondInfo">
    <State>CA</State>
    <Name>Marmoset</Name>
  </GeneralInformation>
</Bond> 

Open in new window

0
 
Chris StanyonCommented:
OK. We're slowly making progress, but please read through my previous comments - you STILL haven't told us what you want in the Dropdown. You've told us you want it sorting but nothing in your code shows any actual values for the dropdown. I'm guessing that you want to populate the dropdown somehow from your XML file, but we've no idea how.

Please take a few minutes to explain clearly what you're trying to do
0
 
ITsolutionWizardAuthor Commented:
html: <select id="state"></select>
sort the state in xml
<select id="personName">
<option>Aardvark</option>
<option>Marmoset</option>
<option>Zebra</option>
</select>
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.