Solved

display dropdown value from a csv file

Posted on 2013-01-16
8
1,189 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
Quiz: What Do These Organizations Have In Common?

Hint: Their teams ended up taking quizzes, too.

 

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

Turn Insights Into Action

You’ve already invested in ITSM tools, chat applications, automation utilities, and more. Fortify these solutions with intelligent communications so you can drive business processes forward.

With xMatters, you'll never miss a beat.

Question has a verified solution.

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

PROBLEM: The other day I was working on adding an ajax request to a webpage that already had a dialog box on the page.  The dialog box was using relative positioning to be positioned next to a form field I had on the page.  Everything was working…
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. 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.: (CODE)

691 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