Trying to populate drop down menus using XML

  • (3 Pages)
  • +
  • 1
  • 2
  • 3

33 Replies - 1569 Views - Last Post: 05 August 2015 - 02:44 PM

#1 Matt_CreativeAudio   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 24
  • Joined: 22-July 15

Trying to populate drop down menus using XML

Posted 22 July 2015 - 01:07 PM

What I am attempting to do is to use an XML file to load the next drop down menu items. It is so you are able to select your car's Make, Model, then year. This is to show customers on my website their vehicle's speaker sizes.
This is what I have right now, but I just cannot get it to work out.

	  <script type="text/javascript">
  $(document).ready(function() {
      var car_data; // variable to hold data in once it is loaded
      $.get('fitguide.xml', function(data) { // get the fitguide.xml file
          car_data = data; // save the data for future use
                              // so we don't have to call the file again
          var that = $('#MAKES'); // that = the courses select
          $('MAKE', car_data).each(function() { // find courses in data
              // dynamically create a new option element
             // MAKE its text the value of the "title" attribute in the XML
             // and append it to the courses select
             $('<option>').text($(this).attr('title')).appendTo(that);
         });
     }, 'xml'); // specify what format the request will return - XML
 
     $('#MAKES').change(function() { // bind a trigger to when the
                                       // courses select changes
         var val = $(this).val(); // hold the select's new value
         var that = $('#MODELS').empty(); // empty the select of times
                                         // and hold a reference in 'that'
         $('MAKE', car_data).filter(function() { // get all courses...
             return val == $(this).attr('title'); // find the one chosen
         }).find('MODEL').each(function() { // find all the times...
             // create a new option, set its text to the time, append to
             // the times select
             $('<option>').text($(this).text()).appendTo(that);  
         });
     });
 });
 </script>
 
 MAKE:
 <select id='MAKES'>
     <option value='0'>----------</option>
 </select>
 <br>
 MODEL:
 <select id='MODELS'>


This is an excerpt from my XML file:
<ROWSET>
<ROW>
<MAKE>ACURA</MAKE>
<Model>CL</Model>
<Year_From>2001</Year_From>
<Year_To>2003</Year_To>
<Front_Location_1>Door</Front_Location_1>
<Front_Size_1>6 1/2</Front_Size_1>
<Front_Location_2>Sail Panel</Front_Location_2>
<Front_Size_2>1    </Front_Size_2>
<Rear_Location_1>Deck</Rear_Location_1>
<Rear_Size_1>6 x 9</Rear_Size_1>
<Rear_Location_2></Rear_Location_2>
<Rear_Size_2></Rear_Size_2>
<Other_Speakers></Other_Speakers>
</ROW>
<ROW>
<MAKE>ACURA</MAKE>
<Model>CL</Model>
<Year_From>1999</Year_From>
<Year_To>1999</Year_To>
<Front_Location_1>Door</Front_Location_1>
<Front_Size_1>6 1/2</Front_Size_1>
<Front_Location_2>Sail Panel</Front_Location_2>
<Front_Size_2>1    </Front_Size_2>
<Rear_Location_1>Deck</Rear_Location_1>
<Rear_Size_1>6 x 9</Rear_Size_1>
<Rear_Location_2></Rear_Location_2>
<Rear_Size_2></Rear_Size_2>
<Other_Speakers></Other_Speakers>
</ROW>


any help would be appreciated!

Is This A Good Question/Topic? 0
  • +

Replies To: Trying to populate drop down menus using XML

#2 ArtificialSoldier   User is offline

  • D.I.C Lover
  • member icon

Reputation: 2162
  • View blog
  • Posts: 6,559
  • Joined: 15-January 14

Re: Trying to populate drop down menus using XML

Posted 22 July 2015 - 02:36 PM

What happens when you run that? Are you checking for Javascript errors?
Was This Post Helpful? 1
  • +
  • -

#3 Matt_CreativeAudio   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 24
  • Joined: 22-July 15

Re: Trying to populate drop down menus using XML

Posted 22 July 2015 - 02:41 PM

This is what I get from the above.

I guess my attachment didn't want to cooperate.

Posted Image
Was This Post Helpful? 0
  • +
  • -

#4 ArtificialSoldier   User is offline

  • D.I.C Lover
  • member icon

Reputation: 2162
  • View blog
  • Posts: 6,559
  • Joined: 15-January 14

Re: Trying to populate drop down menus using XML

Posted 22 July 2015 - 02:49 PM

That error message says that $ is not defined, did you include jQuery on that page before running that code?
Was This Post Helpful? 1
  • +
  • -

#5 Matt_CreativeAudio   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 24
  • Joined: 22-July 15

Re: Trying to populate drop down menus using XML

Posted 22 July 2015 - 02:54 PM

This is what I have above the title.

<head>
<script src="jquery-1.11.3.min.js"></script>
</head>



Here is a live test version -
http://creativenight.../xmltest_1.html
Was This Post Helpful? 0
  • +
  • -

#6 ArtificialSoldier   User is offline

  • D.I.C Lover
  • member icon

Reputation: 2162
  • View blog
  • Posts: 6,559
  • Joined: 15-January 14

Re: Trying to populate drop down menus using XML

Posted 22 July 2015 - 03:10 PM

It looks like that error message is gone now, and I see it populating the dropdown list with a bunch of entries, but they are all blank. That probably means you're getting the wrong XML attribute or element to show in the list.

That looks like this line:

$('<option>').text($(this).attr('title')).appendTo(that);


You're telling it to use the title attribute of the XML node, but there is no title attribute, the make is the text content of the node.
Was This Post Helpful? 0
  • +
  • -

#7 Matt_CreativeAudio   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 24
  • Joined: 22-July 15

Re: Trying to populate drop down menus using XML

Posted 22 July 2015 - 03:19 PM

Okay, now we're getting somewhere. what do you suggest i change that to, and do you know of any way that I will be able to have it not list "Acura" for every car Acura makes, just once for the brand?

possibly using getElementsByTagName("ROW");, but I'm not quite sure how to add that in. I'm fairly new to JS.
Was This Post Helpful? 0
  • +
  • -

#8 Matt_CreativeAudio   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 24
  • Joined: 22-July 15

Re: Trying to populate drop down menus using XML

Posted 29 July 2015 - 07:30 AM

Still working on getting this up and running, if anyone has more input for me it would be very appreciated.
Was This Post Helpful? 0
  • +
  • -

#9 modi123_1   User is online

  • Suitor #2
  • member icon



Reputation: 14501
  • View blog
  • Posts: 58,125
  • Joined: 12-June 08

Re: Trying to populate drop down menus using XML

Posted 29 July 2015 - 07:49 AM

It's been about seven days since your last post. Would you mind bringing everyone up to speed on your current issues, errors, and code?
Was This Post Helpful? 0
  • +
  • -

#10 Matt_CreativeAudio   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 24
  • Joined: 22-July 15

Re: Trying to populate drop down menus using XML

Posted 29 July 2015 - 07:53 AM

I am currently working an internship, and only venture to this store once a week, so I am actually exactly at the same stage as I was. I've been trying to do more research into how javascript syntax should look, but I'm still really confused about it all. I'm not sure if I also need to revamp my XML spreadsheet to work better with this since every single different car has a <MAKE> and a <MODEL> tag.
Was This Post Helpful? 0
  • +
  • -

#11 ArtificialSoldier   User is offline

  • D.I.C Lover
  • member icon

Reputation: 2162
  • View blog
  • Posts: 6,559
  • Joined: 15-January 14

Re: Trying to populate drop down menus using XML

Posted 29 July 2015 - 10:00 AM

The line I referenced in post 6 is what you need to change. You're telling it to get the title attribute, but this does not have a title attribute:

<MAKE>ACURA</MAKE>

You want the text content of the XML node, not the title attribute. Get the text content.

As far as duplicates, one option would be to build an array of values where you check if a value is already in the array before adding it. Then you loop through the array to build the dropdown options.
Was This Post Helpful? 0
  • +
  • -

#12 Matt_CreativeAudio   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 24
  • Joined: 22-July 15

Re: Trying to populate drop down menus using XML

Posted 29 July 2015 - 10:07 AM

I've actually came a long way from that post earlier! I'm starting to understand a bit more now, and this is where I am now:

<!DOCTYPE html>
<html>

  <head>
    <script data-require="[email protected]*" data-semver="2.1.4" src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
	<script type="text/javascript">
	jQuery(document).ready(function($){

  var $xml;

  var make = $('#make');
  var model = $('#model');
  var year = $('#year');

  $.get('http://creativenights.creativecaraudio.net/test/dropdown/fitguide3.xml', function(data){
    $xml = $(data);
    var rows = $(data).find('ROWSET ROW');
    var makes = [];
    
    $.each(rows, function(index, element){
      var _make = $(element).find('MAKE').text();
      makes.push('<option value="' + _make + '">' + _make + '</option>');
    });
    
    makes = $.unique(makes);
    make.append(makes.join('\n'));
  
    
  }, 'xml');
  
  $('#make').on('change', function(){
    var _value = $(this).val();
    var _models = $xml.find('ROWSET ROW:contains("'+_value+'")');
    var models = [];
    
    console.log(_models);
    
    $.each(_models, function(index, element){
      
      var _model = $(element).find('Model').text();
      models.push('<option value="' + _model + '">' + _model + '</option>');
    });
    models = $.unique(models);
    model.append(models.join('\n'));
    
  });

  
});
	
</script>
  </head>

  <body>
    <select id="make">
	    <option value='0'>----------</option>
		</select>
    <select id="model"></select>
    <select id="year"></select>
  </body>

</html>



and my revised XML:
<?xml version="1.0"?>
<ROWSET>
<ROW>
<MAKE>ACURA</MAKE>
<Model>CL</Model>
<YEAR>2001-
2003</YEAR>
<Front_Location_1>Door</Front_Location_1>
<Front_Size_1>6 1/2</Front_Size_1>
<Front_Location_2>Sail Panel</Front_Location_2>
<Front_Size_2>1    </Front_Size_2>
<Rear_Location_1>Deck</Rear_Location_1>
<Rear_Size_1>6 x 9</Rear_Size_1>
<Rear_Location_2></Rear_Location_2>
<Rear_Size_2></Rear_Size_2>
<Other_Speakers></Other_Speakers>
</ROW>
<ROW>
<MAKE>ACURA</MAKE>
<Model>CL</Model>
<YEAR>1999-
1999</YEAR>
<Front_Location_1>Door</Front_Location_1>
<Front_Size_1>6 1/2</Front_Size_1>
<Front_Location_2>Sail Panel</Front_Location_2>
<Front_Size_2>1    </Front_Size_2>
<Rear_Location_1>Deck</Rear_Location_1>
<Rear_Size_1>6 x 9</Rear_Size_1>
<Rear_Location_2></Rear_Location_2>
<Rear_Size_2></Rear_Size_2>
<Other_Speakers></Other_Speakers>
</ROW>

<ROW>
<MAKE>ACURA</MAKE>
<Model>CL</Model>
<YEAR>1997-
1998</YEAR>
<Front_Location_1>Door</Front_Location_1>
<Front_Size_1>6 1/2</Front_Size_1>
<Front_Location_2>Sail Panel</Front_Location_2>
<Front_Size_2>1    </Front_Size_2>
<Rear_Location_1>Deck</Rear_Location_1>
<Rear_Size_1>6 x 9</Rear_Size_1>
<Rear_Location_2></Rear_Location_2>
<Rear_Size_2></Rear_Size_2>
<Other_Speakers></Other_Speakers>
</ROW>
<ROW>
<MAKE>ACURA</MAKE>
<Model>ILX</Model>
<YEAR>2013-
2014</YEAR>
<Front_Location_1></Front_Location_1>
<Front_Size_1></Front_Size_1>
<Front_Location_2></Front_Location_2>
<Front_Size_2></Front_Size_2>
<Rear_Location_1></Rear_Location_1>
<Rear_Size_1></Rear_Size_1>
<Rear_Location_2></Rear_Location_2>
<Rear_Size_2></Rear_Size_2>
<Other_Speakers></Other_Speakers>
</ROW>



Now I am working on getting the years to populate, and once they do I want them to return the rest of the information of each vehicle as a result.

Here is my current working version:
http://creativenight...n/xmltest3.html
Was This Post Helpful? 0
  • +
  • -

#13 Matt_CreativeAudio   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 24
  • Joined: 22-July 15

Re: Trying to populate drop down menus using XML

Posted 30 July 2015 - 07:47 AM

This is what I have going on now, while trying to get the years to populate, I tried to re-use part of the code from above to bring in the values, but it's not doing anything more than what I have done already:
    <script data-require="[email protected]*" data-semver="2.1.4" src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
	<script type="text/javascript">
	jQuery(document).ready(function($){

  var $xml;

  var make = $('#make');
  var model = $('#model');
  var year = $('#year');

  $.get('fitguide3.xml', function(data){
    $xml = $(data);
    var rows = $(data).find('ROWSET ROW');
    var makes = [];
    
    $.each(rows, function(index, element){
      var _make = $(element).find('MAKE').text();
      makes.push('<option value="' + _make + '">' + _make + '</option>');
    });
    
    makes = $.unique(makes);
    make.append(makes.join('\n'));
  
    
  }, 'xml');
  
  $('#make').on('change', function(){
    var _value = $(this).val();
    var _models = $xml.find('ROWSET ROW:contains("'+_value+'")');
    var models = [];
    
    console.log(_models);
    
    $.each(_models, function(index, element){
      
      var _model = $(element).find('Model').text();
      models.push('<option value="' + _model + '">' + _model + '</option>');
    });
    models = $.unique(models);
	model.find('option').remove();
    model.append(models.join('\n'));
    
  });
  $('#model').on('change', function(){
    var _value = $(this).val();
    var _years = $xml.find('ROWSET ROW:contains("'+_value+'")');
    var years = [];
    
    console.log(_years);
    
    $.each(_years, function(index, element){
      
      var _model = $(element).find('years').text();
      models.push('<option value="' + _year + '">' + _year + '</option>');
    });
    years = $.unique(models);
	year.find('option').remove();
    year.append(models.join('\n'));
    
  });
  
});


working version is the same as listed above. I got it to clear the old results with the addition of
" model.find('option').remove();" but that's as far as i got.
the XML file is the same as above.
Was This Post Helpful? 0
  • +
  • -

#14 Matt_CreativeAudio   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 24
  • Joined: 22-July 15

Re: Trying to populate drop down menus using XML

Posted 30 July 2015 - 07:57 AM

Changed models.push to years.push,
  $('#model').on('change', function(){
    var _value = $(this).val();
    var _years = $xml.find('ROWSET ROW:contains("'+_value+'")');
    var years = [];
    
    console.log(_years);
    
    $.each(_years, function(index, element){
      
      var _model = $(element).find('year').text();
      years.push('<option value="' + _year + '">' + _year + '</option>');
    });
    years = $.unique(models);
	year.find('option').remove();
    year.append(models.join('\n'));
    
  });
  
});

Error I'm getting is:
xmltest3.html:58 Uncaught ReferenceError: _year is not defined(anonymous function) @ xmltest3.html:58n.extend.each @ jquery-2.1.4.min.js:2(anonymous function) @ xmltest3.html:55n.event.dispatch @ jquery-2.1.4.min.js:3n.event.add.r.handle @ jquery-2.1.4.min.js:3
Was This Post Helpful? 0
  • +
  • -

#15 ArtificialSoldier   User is offline

  • D.I.C Lover
  • member icon

Reputation: 2162
  • View blog
  • Posts: 6,559
  • Joined: 15-January 14

Re: Trying to populate drop down menus using XML

Posted 30 July 2015 - 09:29 AM

Right, you're trying to use a variable called _year that was never defined.
Was This Post Helpful? 0
  • +
  • -

  • (3 Pages)
  • +
  • 1
  • 2
  • 3