• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 86
  • Last Modified:

mvc, jquery, html5

I have this simple jquery codes to read xml.
and when the first OnChange I try is working, but when I try to select another state like "FL", it is not working.
Basically, when I select "FL", Contractor 2 should be showed,
when I select "CA", Contractor 1 should be showed.
Can you help me?

 
<Surety>
  <SuretyLine>
    <Commercial>
      <Bond>
        <GeneralInformation UI="BondInfo">
          <Name ID="bondName" PrefillValue="Yes">Contractor 1</Name>
          <State ID="bondState" PrefillValue="Yes">CA</State>
 	</GeneralInformation>
         <Image></Image>
        <Status>Online</Status>
      </Bond>
            <Bond>
        <GeneralInformation UI="BondInfo">
          <Name ID="bondName" PrefillValue="Yes">Contractor 2</Name>
          <State ID="bondState" PrefillValue="Yes">FL</State>
 	</GeneralInformation>
         <Image></Image>
        <Status>Online</Status>
      </Bond>
</Commercial>
</SuretyLine>
</Surety>

<script>
    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 = '';
    $(xml).find(xmlnode).each(function () {
        var selectBondName = $(this).find('GeneralInformation').find('Name').text();
        var selectBondState = $(this).find('GeneralInformation').find('State').text();
        if (bondState == $(this).find('GeneralInformation').find('State').text()) {

            selecthtml += '<option value="' + selectBondName + '">' + selectBondName + "(" + selectBondState + ")" + '</option>';
        }
        //document.writeln(selecthtml);
    });
    //$(selectid).html(selecthtml);
    $('#' + selectid).append(selecthtml);
}
function parseSelectXML1(xml, selectid, xmlnode) {
    //var firstoption = '-- Please select --';
    //var firsthtml = '<option value="">' + firstoption + '</option>';
    var selecthtml = '';

    $(xml).find(xmlnode).each(function () {
        var selectvalue = $(this).find('GeneralInformation').attr('UI');
        var selecttext = $(this).find('GeneralInformation').attr('UI');
        selecthtml += '<option value="' + selectvalue + '">' + selecttext + '</option>';
        //document.writeln(selecthtml);
    });
    //$(selectid).html(selecthtml);
    $('#' + selectid).append(selecthtml);
}
</script>
                                <select class="select2" 
                                        id="bondState" 
                                        name="bondState" 
                                        onchange="fnGetBondNameList(this.options[this.selectedIndex].value);" 
                                        data-placeholder="Choose Bond State...">
                                    <option value=""></option>
                                    <option value="CA">CA</option>
				    <option value="FL">FL</option>
                                </select>
                           
                                <select class="select2"  id="bondName" name="bondName" data-placeholder="Choose bond name(s)...">
                                    
                                </select>
                                
                            

Open in new window

0
ITsolutionWizard
Asked:
ITsolutionWizard
  • 8
  • 8
1 Solution
 
Chris StanyonCommented:
Not really sure about your logic.

As it stands, you keep on adding values to the second dropdown regardless of what you select from the first dropdown. This will result in duplicate values and a constantly growing list.

If you're happy with that and just want to select the value in the second dropdown, then you need to use the val() call but you'd need to refactor your code slightly.

Take a look at this:

function parseSelectXML(xml, selectid, xmlnode, bondState) {
    var selecthtml = '', selectBondName;
    $(xml).find(xmlnode).each(function () {
        if (bondState == $(this).find('GeneralInformation').find('State').text()) {
            selectBondName = $(this).find('GeneralInformation').find('Name').text();
            selecthtml += '<option value="' + selectBondName + '">' + selectBondName + "(" + bondState + ")" + '</option>';
        }
    });
    $('#' + selectid).append(selecthtml).val(selectBondName);
}

Open in new window

0
 
ITsolutionWizardAuthor Commented:
Thank You. For sure, I do not want duplicated the list/value.
and I try your script and does not seem working. The selected state does not work dynamically work the selected bonds / list.

If you can show me the entire codes included html5 and I will try again. Maybe I am missing something
0
 
Chris StanyonCommented:
Sure. Here's the full code. Tested and working fine:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>EE 29065188 // Chris Stanyon</title>

        <script src="//ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
        <script type="text/javascript">
         function fnGetBondNameList(bondState) {
            $.ajax({
                url: "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;
            $(xml).find(xmlnode).each(function () {
                if (bondState == $(this).find('GeneralInformation').find('State').text()) {
                    selectBondName = $(this).find('GeneralInformation').find('Name').text();
                    selecthtml += '<option value="' + selectBondName + '">' + selectBondName + "(" + bondState + ")" + '</option>';
                }
            });
            $('#' + selectid).append(selecthtml).val(selectBondName);
        }
        </script>
    </head>
    <body>

        <select class="select2" id="bondState" name="bondState" onchange="fnGetBondNameList(this.options[this.selectedIndex].value);" data-placeholder="Choose Bond State...">
            <option value=""></option>
            <option value="CA">CA</option>
            <option value="FL">FL</option>
        </select>
                                   
        <select class="select2"  id="bondName" name="bondName" data-placeholder="Choose bond name(s)..."></select>

    </body>
</html>

Open in new window

0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

 
ITsolutionWizardAuthor Commented:
The filter does not work. When I select "CA", "FL" list is still shown up

 
<Surety>
  <SuretyLine>
    <Commercial>
      <Bond>
        <GeneralInformation UI="BondInfo">
          <Name ID="bondName" PrefillValue="Yes">Contractor 1</Name>
          <State ID="bondState" PrefillValue="Yes">CA</State>
       </GeneralInformation>
         <Image></Image>
        <Status>Online</Status>
      </Bond>
  <Bond>
        <GeneralInformation UI="BondInfo">
          <Name ID="bondName" PrefillValue="Yes">Contractor 2</Name>
          <State ID="bondState" PrefillValue="Yes">CA</State>
       </GeneralInformation>
         <Image></Image>
        <Status>Online</Status>
      </Bond>
            <Bond>
        <GeneralInformation UI="BondInfo">
          <Name ID="bondName" PrefillValue="Yes">Contractor asdfasd</Name>
          <State ID="bondState" PrefillValue="Yes">FL</State>
       </GeneralInformation>
         <Image></Image>
        <Status>Online</Status>
      </Bond>
</Commercial>
</SuretyLine>
</Surety>
0
 
Chris StanyonCommented:
Works perfectly for me !

What browser are you using?

Post up your full page code.
0
 
ITsolutionWizardAuthor Commented:
I use firefox
0
 
Chris StanyonCommented:
same as me ... and your code ?
0
 
ITsolutionWizardAuthor Commented:
I think it is because the issue you mentioned about the duplicated adding up to the value
0
 
Chris StanyonCommented:
Just had a thought - when you say FL is still showing up - do you mean it's still selected in the dropdown or is still listed in the drodown (but not selected)?
0
 
Chris StanyonCommented:
Sorry - think I see what you mean now. Simple enough to sort out. Change this line:

$('#' + selectid).append(selecthtml).val(selectBondName);

to this:

$('#' + selectid).html(selecthtml).val(selectBondName);

You don't need to append to the <select> - you just need to set the html of it. That would remove all the other previous options.
0
 
ITsolutionWizardAuthor Commented:
I will check soon ... for sure - u are the man !!! Good help
0
 
ITsolutionWizardAuthor Commented:
It still has one issue.

Assume I first selected CA and get 5 plans in CA, and I selected 1st plan in CA.
Then, I select FL, then now I see 1st plan in CA(The one I selected previous) & see 5 plans in FL (Which is right)

So, I think, the solution will be: If there is a way to clear all previous selected value first, then i may work. But I am not expert so I need your suggestion.. .Thanks
0
 
Chris StanyonCommented:
You're going to have to post you code up. When you select a new value from the 1st dropdown, it should clear the second one and add a  whole new set of options. If that's not what's happening, I'll need to see your code
0
 
ITsolutionWizardAuthor Commented:
The issue is there sure.

<!DOCTYPE html>
<html>
<head>
    <title></title>
	<meta charset="utf-8" />
</head>
<body>
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="utf-8">
        <title>EE 29065188 // Chris Stanyon</title>

        <script src="//ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
        <script type="text/javascript">
         function fnGetBondNameList(bondState) {
            $.ajax({
                url: "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;
            $(xml).find(xmlnode).each(function () {
                if (bondState == $(this).find('GeneralInformation').find('State').text()) {
                    selectBondName = $(this).find('GeneralInformation').find('Name').text();
                    selecthtml += '<option value="' + selectBondName + '">' + selectBondName + "(" + bondState + ")" + '</option>';
                }
            });
            $('#' + selectid).append(selecthtml).val(selectBondName);
        }
        </script>
    </head>
    <body>

        <select class="select2" id="bondState" name="bondState" onchange="fnGetBondNameList(this.options[this.selectedIndex].value);" data-placeholder="Choose Bond State...">
            <option value=""></option>
            <option value="CA">CA</option>
            <option value="FL">FL</option>
            <option value="TX">TX</option>
        </select>

        <select class="select2" id="bondName" name="bondName" data-placeholder="Choose bond name(s)..."></select>

    </body>
</html>
</body>
</html>

Open in new window

0
 
Chris StanyonCommented:
OK. I've already explained the problem you're having.

On line 37, you have this:

$('#' + selectid).append(selecthtml).val(selectBondName);

It should be this:

$('#' + selectid).html(selecthtml).val(selectBondName);
0
 
ITsolutionWizardAuthor Commented:
i already replaced it. the issue is still occurred.
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.

Join & Write a Comment

Featured Post

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

  • 8
  • 8
Tackle projects and never again get stuck behind a technical roadblock.
Join Now