Jump to content



Photo

[jquery] Populate select box from external file?

jquery javascript html

  • Please log in to reply
9 replies to this topic

#1 Axel

Axel

    --[Est. 1986]--

  • Joined: 05-August 03
  • Location: Milton Keynes, UK

Posted 20 May 2013 - 17:22

Hi all,

I suspect what I'm trying to achieve is relatively simple to some of you experts but I'm stumped.

I want to create a CSV file with a bunch of addresses. The address will be in one column, and the corresponding google maps link in the column next to it.

I then want to populate an option box with the addresses. Then have the relevant google maps link fill a text box below the address that has been selected.

Does this make sense?

Many thanks,

Alex


#2 lunamonkey

lunamonkey

    Ten years on Neowin.

  • Joined: 28-May 03
  • Location: Swindon, England

Posted 20 May 2013 - 17:36

Look up the $.load() in query. That can reference an external file.

Or just $.ajax() and then manipulate the results. Split the string on the comma.

You might be better off with a proper XML file, as it might be easier to grab the nodes. Then you don't have to worry about the NewLines and commas.

Any reason it's a CSV?

#3 OP Axel

Axel

    --[Est. 1986]--

  • Joined: 05-August 03
  • Location: Milton Keynes, UK

Posted 20 May 2013 - 17:52

Any reason it's a CSV?


Only to make it easier for the people in the office to edit the value's if and when they change. I'm definitely not a pro with this stuff so my solution may be a bit arse about face.

I'm trying to create a form to stick on the company's web portal. The idea is that the user (in the office) can fill in the fields which then get loaded into a standard email template and then sent to the client in a standard email format.

i.e.

Hi NAME,

Your appointment is booked on DATE at TIME at LOCATION. etc.

It's all manual at the moment so it's a bit of a nightmare. Anything to streamline to operations!

#4 threetonesun

threetonesun

    Neowinian Senior

  • Tech Issues Solved: 1
  • Joined: 26-February 02

Posted 20 May 2013 - 17:59

I want to create a CSV file with a bunch of addresses. The address will be in one column, and the corresponding google maps link in the column next to it.


Really? You really want to do this? :laugh:

Sounds like the perfect place to use a database of some sort, be it XML or SQL of some sort. I think, based on your use case, you'll get a very nice implementation up and running with a CSV list, and then someone will ask for a change and it will be a right pain to fix it.

#5 Tuishimi

Tuishimi

    Michinator

  • Joined: 19-November 10
  • OS: Windows 8

Posted 20 May 2013 - 17:59

http://plugins.jquery.com/project/csv

#6 SinsOfCube

SinsOfCube

    Neowinian

  • Tech Issues Solved: 3
  • Joined: 20-August 04
  • Location: Netherlands
  • OS: Windows 8
  • Phone: Nokia Lumia 900

Posted 20 May 2013 - 18:13

Instead of CSV or XML you could use JSON, it's very similar to CSV, but a lot easier to work with in javascript.

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<script src="jquery-2.0.0.min.js"></script>
<script>
//Global variable with some example json entries
var jsondata = [
	{"address":"Some address 1","link":"http://maps.google.com/1"},
	{"address":"Some address 2","link":"http://maps.google.com/2"}
];

$(function(){
	 //Use Jquery's getJSON, it automaticly parses the data into a usable json object
	 $.getJSON( 'file.json', function( data ){
		  //Put the retreived json in the global variable
		  jsondata = data;

		  var mySelect = $('#address');

		  //Go through each object in the jsondata
		  $.each( jsondata, function( index, row ){
			  //The array index as a value of the option
			  mySelect.append( $( '<option></option>' ).val( index ).html( row.address ) );
		   });
	 });

	$('#address').change( function(){
		//Get the array index from the select element and use it with the json array
		$('#link').val( jsondata[ $(this).val() ].link );
	});
});
</script>
</head>
<body>
<select id="address" name="test"><option disabled>Select Address</option></select>
<input type="text" id="link">
</body>
</html>

More info on json: http://json.org/example.html

The contents of file.json should be as followed:
[
	{"address":"Some address 1","link":"http://maps.google.com/1"},
	{"address":"Some address 2","link":"http://maps.google.com/2"},
    {"address":"Some address 3","link":"http://maps.google.com/3"}
]


#7 killerninja

killerninja

    Neowinian

  • Joined: 15-June 11

Posted 20 May 2013 - 18:14

Hi all,

I suspect what I'm trying to achieve is relatively simple to some of you experts but I'm stumped.

I want to create a CSV file with a bunch of addresses. The address will be in one column, and the corresponding google maps link in the column next to it.

I then want to populate an option box with the addresses. Then have the relevant google maps link fill a text box below the address that has been selected.

Does this make sense?

Many thanks,

Alex


Just go to settings, click on file type, look at CSV and then punt a dog in the vagina

#8 OP Axel

Axel

    --[Est. 1986]--

  • Joined: 05-August 03
  • Location: Milton Keynes, UK

Posted 20 May 2013 - 18:43

Thanks for all the responses. I really like the JSON idea SinsOfCube. For the time being I've just solved it by loading a bunch of addresses from a .txt file and then just generating a google maps link. Dirty solution I know but it seems to work:


<label>Location
<span class="small">Please select the location</span>
</label>
<select name="location" id="location" >
<?php
$locationlist = file('locationlist.txt', FILE_IGNORE_NEW_LINES);
foreach ($locationlist as $value) {
echo "\n";
echo '<option value="'.$value.'">'.$value.'</option>';
echo "\n";
}
?>
</select>

$maplink = 'https://maps.google.co.uk/maps?q='.str_replace(" ", "+", $location);

This:
10 Downing Street, London, SW1A 2AA

Becomes:
https://maps.google.co.uk/maps?qA&hl=en&=10+Downing+Street,+London,+SW1A+2AA

If these methods end up failing me then I suppose I'll have to resort to killerninja's advice and punt a dog in the vagina.

#9 lunamonkey

lunamonkey

    Ten years on Neowin.

  • Joined: 28-May 03
  • Location: Swindon, England

Posted 20 May 2013 - 18:44

Sins has totally just built what I was going to build after I got back from the tip. (But I was going to go longhand with CSV.)

Does the quick-select statement function as expected? Isn't this too shallow to find the correct item?

jsondata[ $(this).val() ].link

Doesn't that expect a one dimensional object? Where-as yours is two objects deep. (I haven't tried it...)

Anyway, dinner time.

#10 SinsOfCube

SinsOfCube

    Neowinian

  • Tech Issues Solved: 3
  • Joined: 20-August 04
  • Location: Netherlands
  • OS: Windows 8
  • Phone: Nokia Lumia 900

Posted 20 May 2013 - 20:09

jsondata is an array which holds the objects containing the address and google maps link properties. So jsondata[ x ] returns an object and with the ".propertyName" after it, you get the property value, which is the 2nd dimension. You could also write it as "jsondata[ $(this).val() ][ 'link' ]", which makes it more noticable that it has 2 dimensions.