• 0

[jquery] Populate select box from external file?

Asked by Axel,

 Share

Question

Grand Master

Axel

Posted
Posted

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

9 answers to this question

Recommended Posts

  • 0
Grand Master

lnmnky

Posted
Posted

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?

  • 0
Grand Master

Axel

Posted
  • Author
Posted

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!

  • 0
Grand Master

threetonesun

Posted
Posted

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.

  • 0
Enthusiast

SinsOfCube

Posted
Posted

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"}
]

  • Axel and lnmnky
  • Like 2
  • 0
Enthusiast

killerninja

Posted
Posted

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

  • 0
Grand Master

Axel

Posted
  • Author
Posted

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.

  • killerninja
  • Like 1
  • 0
Grand Master

lnmnky

Posted
Posted

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.

  • 0
Enthusiast

SinsOfCube

Posted
Posted

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.

This topic is now closed to further replies.
 Share
Go to question listing

  • Posts

    • Can't access the forum on mobile

      By Mindovermaster · Posted

      I'm not aware of this issue, but to help the other guys.  What version of Android are you using? Did you try a different browser? To see if Edge is the issue here.
    • Windows 11's big performance boost is finally available for all

      By +Good Bot, Bad Bot · Posted

      I agree when are you going to read this (really poor BTW) article? Here is a better article so you actually know what is going on and answers questions you had in other comments --> https://arstechnica.com/gadgets/2026/05/speed-boosting-low-latency-profile-is-one-of-the-improvements-coming-to-windows-11/ It is unclear if one will be able to disable the new profile at this point but I am not seeing any reason why one would.
    • Euro-Office must default to ODF to be considered "genuinely European", LibreOffice argues

      By Snake Doc · Posted

      I disagree; they come off very "bitchy" and "whiny". Make a great product and combine that with a great price (free) and people will come over to your side. Or build it and they will come as they say. Constantly trying to get attention by complaining all the time, will turn people off to your product.
    • Euro-Office must default to ODF to be considered "genuinely European", LibreOffice argues

      By +Eternal Tempest · Posted

      It use to be a nightmare, with LibreOffice supporting a newer draft ODF standard by default, and Microsoft Office supporting the older non-draft standard. Now that they both support the same version of ODF, they should be interoperable.
    • Brave Browser 1.91.171

      By Copernic · Posted

      Brave Browser 1.91.171 by Razvan Serea Brave Browser is a lightning-fast, secure web browser that stands out from the competition with its focus on privacy, security, and speed. With features like HTTPS Everywhere and built-in tracker blocking, Brave keeps your online activities safe from prying eyes. Brave is one of the safest browsers on the market today. It blocks third-party data storage. It protects from browser fingerprinting. And it does all this by default. Speed - Brave is built on Chromium, the same technology that powers Google Chrome, and is optimized for speed, providing a fast and responsive browsing experience. Brave Browser also features Brave Rewards, a system that rewards users with Basic Attention Tokens (BAT) for viewing opt-in ads. This innovative system provides an alternative revenue model for content creators and a way to support the Brave community. SlimBrave Neo takes all the good things about Brave and makes them even better by keeping everything clean, light, and privacy-focused. It removes the extra clutter, turns off features you might not need, and cuts down on anything that could slow you down or collect unnecessary data. Because it relies on simple settings and policies instead of modifying the browser itself, you still get full Brave compatibility—just in a smoother, lighter, and more privacy-friendly package. Brave Browser 1.91.171 changelog: General Fixed Cardano not being disabled on upgrade to Brave Origin. Upgraded Chromium to 149.0.7827.103. Origin Removed “Survey Panelist” setting from brave://settings/privacy. Fixed P3A and usage ping under brave://settings/privacy being displayed on first launch on Linux. Upgraded Chromium to 149.0.7827.103. Download: Brave Browser 64-bit | 1.2 MB (Freeware) Download: Brave Browser 32-bit View: Brave Homepage | Offline Installers | Screenshot Get alerted to all of our Software updates on Twitter at @NeowinSoftware

  • Recent Achievements

    • One Month Later
      Jamswaz earned a badge
      One Month Later
    • Week One Done
      Jamswaz earned a badge
      Week One Done
    • Rookie
      Marzoid went up a rank
      Rookie
    • Community Regular
      coch went up a rank
      Community Regular
    • One Year In
      slackerzz earned a badge
      One Year In

  • Popular Contributors

    1. 1
      +primortal
      514
    2. 2
      PsYcHoKiLLa
      189
    3. 3
      +Edouard
      156
    4. 4
      Steven P.
      84
    5. 5
      ATLien_0
      75
    Show More

  • Tell a friend

    Love Neowin? Tell a friend!