• 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
  On 20/05/2013 at 17:36, lunamonkey said:

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
  On 20/05/2013 at 17:22, Axel said:

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>
&lt;script src="jquery-2.0.0.min.js"></script>;script&gt;
//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( $( '&lt;option&gt;&lt;/option&gt;' ).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 );
	});
});
&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;select id="address" name="test"&gt;&lt;option disabled&gt;Select Address&lt;/option&gt;&lt;/select&gt;
&lt;input type="text" id="link"&gt;
&lt;/body&gt;
&lt;/html&gt;

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

  • lnmnky and Axel
  • Like 2
  • 0
Enthusiast

killerninja

Posted
Posted
  On 20/05/2013 at 17:22, Axel said:

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:

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


$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

    • MacBook Air M3 with 512GB SSD and 16GB RAM is now available for just $899

      By TarasBuria · Posted

      MacBook Air M3 with 512GB SSD and 16GB RAM is now available for just $899 by Taras Buria Apple is infamous for its eye-watering storage and RAM upgrade prices in Macs, iPads, and iPhones. However, there is no denying that the company makes great hardware, especially for Macs with their powerful and efficient chips. If you want an affordable Mac with more than just 256GB of storage, check out this deal on the 2024 MacBook Air M3 with 512GB SSD and 16GB of RAM, which is now available for only $899 ($600 off the original MSRP). The MacBook Air needs no introduction. This 13-inch laptop with a full-metal body has a solid Liquid Retina display, a powerful eight-core M3 processor with a 10-core graphics, and a battery that lasts all day (Apple claims up to 18 hours of video playback). The chip supports Apple Intelligence features such as image generation, writing tools, ChatGPT integration with Siri, and more. It can also drive two external 5K displays with the lid closed (or one display with the lid open). The laptop also has a backlit keyboard with a fingerprint sensor, a massive haptic trackpad, a 1080p webcam (in the notch), and a powerful quad-speaker audio system with Spatial Audio support. Available ports include MagSafe for magnetic charging, a headphone jack, and two Thunderbolt 4 Type-C ports. All of that is packed into a half-inch-thick lightweight chassis that is easy to carry around. 2024 13-inch MacBook Air M3, 16GB, 512GB - $899 | 31% off on Amazon This Amazon deal is US-specific and not available in other regions unless specified. If you don't like it or want to look at more options, check out the Amazon US deals page here. Get Prime (SNAP), Prime Video, Audible Plus or Kindle / Music Unlimited. Free for 30 days. As an Amazon Associate, we earn from qualifying purchases.
    • Sony and Bungie delay Marathon indefinitely after 'passionate feedback' from community

      By leonsk29 · Posted

      This game is already dead and we all know it. "delayed indefinitely" my a**...
    • Sony and Bungie delay Marathon indefinitely after 'passionate feedback' from community

      By George P · Posted

      Best $3.6billion Sony ever spent!
    • Microsoft announces multi-year partnership with AMD for future of Xbox consoles and hardware

      By George P · Posted

      That's why it really depends to what extent they've tweaked it and if you can just easily switch to full Windows if you want. I'm sure lots of people who just game on their devices with some light web browsing etc, would love to have this Xbox version as a option though. It really depends on what you do with your device. Maybe they're only going to offer it to specific gaming devices like handhelds or mini-PCs you can put under your TV?
    • Sony and Bungie delay Marathon indefinitely after 'passionate feedback' from community

      By SidVicious · Posted

      Live service multiplayer trash.

  • Recent Achievements

    • First Post
      Ian_ earned a badge
      First Post
    • Explorer
      JaviAl went up a rank
      Explorer
    • Reacting Well
      Cole Multipass earned a badge
      Reacting Well
    • Reacting Well
      JLP earned a badge
      Reacting Well
    • Week One Done
      Rhydderch earned a badge
      Week One Done

  • Popular Contributors

    1. 1
      +primortal
      665
    2. 2
      ATLien_0
      267
    3. 3
      Michael Scrip
      217
    4. 4
      +FloatingFatMan
      188
    5. 5
      Steven P.
      145
    Show More

  • Tell a friend

    Love Neowin? Tell a friend!