Solved

display dropdown value from a csv file

Posted on 2013-01-16
8
981 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
  • 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
 

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
Find Ransomware Secrets With All-Source Analysis

Ransomware has become a major concern for organizations; its prevalence has grown due to past successes achieved by threat actors. While each ransomware variant is different, we’ve seen some common tactics and trends used among the authors of the malware.

 
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

Enabling OSINT in Activity Based Intelligence

Activity based intelligence (ABI) requires access to all available sources of data. Recorded Future allows analysts to observe structured data on the open, deep, and dark web.

Join & Write a Comment

How to build a simple, quick and effective accordion menu using just 15 lines of jQuery and 2 css classes
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
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…

757 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

Need Help in Real-Time?

Connect with top rated Experts

26 Experts available now in Live!

Get 1:1 Help Now