Solved

display dropdown value from a csv file

Posted on 2013-01-16
8
1,148 Views
Last Modified: 2013-01-22
hi experts,

i have a csv named TF.csv with the following contents:

"13. Aviation, passengers","13"
"14. Aviation, freight","14"
"15. Aviation, other","15"
"16. Shipping, passengers","16"
"17. Shipping, freight","17"
"18. Shipping, other","18"
"20. Tourism","20"

i am in need of help for a jquery, ajax or javascript  that can do the following:
-read the TF.csv file
-put the every row of the file in a dropdown named TFvalue
-the display text must start with please choose with a value of 000
-the display text must be --13. Aviation, passengers-- and the value of the option must be --13--
-it a option is not selected when submitting the form an alert must be displayed
-the value will be stored in a database. on retrieval the stored data must show as selected. if the retreival is blank then the please choose is displayed
0
Comment
Question by:eaweb
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 5
  • 3
8 Comments
 
LVL 18

Accepted Solution

by:
nap0leon earned 500 total points
ID: 38783480
This reads the file, populates the dropdown, and runs the validation requested.

With no insight to your server side language that you would be using to connect to the database to save the information or how you would retrieve this information, I ignored that requirement.  You will want to change the "action" so that the form submits to a webpage that can submit the posted information to your database.

For setting the drop-down to the value returned from the database... Lines 28-32: I coded this so that if your server side language is Classic ASP and you do whatever you need to do to connect to your database and get set an ASP variable "valFromDatabase", that value will be selected.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	<title>Q_27997429</title>
	<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>

</head>
<script type="text/javascript">
$(document).ready( function (){
	jQuery.get('http://localhost/e-e/Q_27997429data.txt', function(data) {
		var theList = data;
		var arr_theList = theList.split("\n");
		var newTFOptions = "<option value='000'>Please Choose</option>";
		for (var i=0; i<arr_theList.length; i++) {
			var arrListItems = arr_theList[i].split("\",\"");
			if (typeof arrListItems[1] != 'undefined') {
				var strText = arrListItems[0].substring(1,arrListItems[0].length);
				var strValue = arrListItems[1].substring(0,arrListItems[1].length-2);

				if (strText != '' && strValue != '') {
					newTFOptions += "<option value='" + strValue + "'>" + strText + "</option>";
				}
			}
		}
		$('#TFValue').html(newTFOptions);
		
		//Set this line with your server side code to the value that is returned from the database
		var currentValue = '<%=valFromDatabase%>';
		if ( currentValue != '' ) {
			$('#TFValue').val(currentValue);
		}
	});
});

function validateForm() {
	var errMessages = ''
	if ($('#TFValue').val() == '000') {
		errMessages += 'yo! pick a value for TFValue\n';
	}

	if (errMessages.length > 1) {
		alert(errMessages);
	} else {
		//no errors - submit the form
		document.myForm.submit();
	}
}
</script>
<body>
	<div id="container">
		<form name="myForm" action="" method="GET">
			<select id="TFValue" name="TFValue">
			</select>
			<br/>
			<input type="button" onclick="validateForm()" value="Submit"/>
		</form>
	</div>
</body>
</html>

Open in new window

0
 

Author Comment

by:eaweb
ID: 38784550
hi nap0leon

I'am getting the following error:
Line: 2
Char: 30044
Could not set the selected property. Invalid index.
Code: 0
0
 

Author Comment

by:eaweb
ID: 38784609
Sorry nap0leon. Problem solved.

I had to download the jquery file on my internal server.

Thanks
0
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 

Author Comment

by:eaweb
ID: 38784703
nap0leon,

when testing your code alone it is working fine, but when using your code with jQuery v1.7.2 the dropdown data becomes blank. the latest jquery you are using is jQuery v1.9.0.

is thare a way we can solved this issues since i have other codes working on 1.7.2

attache the jquery file i am using
jquery.js
0
 
LVL 18

Expert Comment

by:nap0leon
ID: 38785113
Hmmm, very odd.  The functions I'm using have been around since 1.4ish...

I won't be able to get back to this until morning (14 hours from now)- will take a look at it then with a 1.7.2 reference.
0
 
LVL 18

Expert Comment

by:nap0leon
ID: 38787283
Works fine when I download the file you attached and reference it as
<script src="Q_27997429-jquery.js" type="text/javascript"></script>

Open in new window

or when pointing to the 1.7.2 library jquery's site:
<script src="http://code.jquery.com/jquery-1.7.2.js" type="text/javascript"></script>

Open in new window


Due to cross-site scripting concerns, make sure you are looking at the page using "localhost" or equivalent.  If you try running it as "file://" it won't work.
0
 

Author Comment

by:eaweb
ID: 38805389
when trying below code part i get [object Object] warning message

//Value that is returned from thedatabase
var currentValue = '05';
if ( currentValue != '' ) {
alert($('#TFValue').val(currentValue));
$('#TFValue').val(currentValue);
}

and i get the please choose option
0
 

Author Comment

by:eaweb
ID: 38806172
hi nap0leon,

I changed the code a bit but the part of when the data is retrieved from the database is still not working. i trie to stimulate 04 as a database data and it doesn't work.

<script type="text/javascript">
$(document).ready( function (){
      jQuery.get('WT.txt', function(data) {
            var theList = data;
            var arr_theList = theList.split("\n");
            //var newTFOptions = "<option value='000'>Please Choose</option>";
            var arrOptions = ["<option value='000'>Please Choose</option>"];
            for (var x=0; x<arr_theList.length; x++) {
                  var arrListItems = arr_theList[x].split("\",\"");
                  if (typeof arrListItems[1] != 'undefined') {
                        var strText = arrListItems[0].substring(1,arrListItems[0].length);
                        var strValue = arrListItems[1].substring(0,arrListItems[1].length-2);

                        if (strText != '' && strValue != '') {
                              //newTFOptions += "<option value='" + strValue + "'>" + strText + "</option>";
                              arrOptions.push("<option value='" + strValue + "'>" + strText + "</option>");
                        }
                  }
            }
            //$('#TFValue').html(newTFOptions).trigger("liszt:updated");
            $('#TFValue').html(arrOptions.join()).trigger("liszt:updated");

            //Value that is returned from the database
            var currentValue = '04';
            if ( currentValue != '' ) {
                  $('#TFValue').val(currentValue);
            }
      });
});
0

Featured Post

Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

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 discusses how to create an extensible mechanism for linked drop downs.
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

739 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