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

  • Axel and lnmnky
  • 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

    • Mastodon updates terms of service to ban AI model training on user data

      By David Uzondu · Posted

      Mastodon updates terms of service to ban AI model training on user data by David Uzondu Mastodon has updated its terms of service to explicitly prohibit scraping its platform to train artificial intelligence models. The new rules, which kick in on July 1, make it perfectly clear that using automated tools to slurp up user data from its main server, Mastodon.social, for LLM training is a big no-no. Neowin received a copy of an email sent to users, notifying them of the change, which introduces new language prohibiting the "scraping of user data for unauthorized purposes, e.g., archival or large language model (LLM) training." Here's a snippet from the updated terms of service: This policy change comes at a time when users are getting increasingly ###### off about their public posts becoming free fuel for the AI gold rush. In fact, this is probably good news for the same crowd over on Bluesky that freaked out after a massive, user-traceable dataset of their public posts was compiled and uploaded for AI research. AI bot scraping has become a huge problem for everyone from giants like Reddit, which is now suing Anthropic, makers of Claude, for training on its posts without a license, to even Neowin readers, like Gerowen, who noted how a swarm of bots, including one Claudebot (you don't say!), hammered his personal server with over 700,000 requests in 24 hours, putting a huge strain on his "home NAS running on an old PC tower in the back woods of Kentucky." It is important to remember that Mastodon is a federated network. These new terms apply specifically to the Mastodon.social server, which is operated directly by Mastodon gGmbH. This means that while users on the main instance are now protected, those on other independent servers in the "fediverse" will only get the same protection if their instance administrators adopt similar terms. The company is globally enforcing a new minimum age requirement of 16 for all users, raising it from the previous limit of 13.
    • Get Microsoft Office 2021 Professional for Windows, now only $44.97

      By rseiler · Posted

      Keep in mind that updates for it end on Oct 13, 2026. While this may not matter much for those who don't care about features, it might for fixes, and it certainly would for security.
    • Crazy Taxi, Sonic CD, and other classic Sega games are now free on mobile devices

      By ESC@PE · Posted

      Sonic 4 Episode 1 not free? lol
    • Intel's next-gen desktop processors leak with a whopping number of cores

      By JaviAl · Posted

      Today Windows is not up to anything.
    • Microsoft locks Windows 11 user out, shows how easy losing data from forced encryption is

      By Davin Peterson · Posted

      This is why you should have a backup copy of your data on an external drive in addition to the cloud. You never know when one day you could lose access to your cloud

  • Recent Achievements

    • 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
    • Experienced
      dismuter went up a rank
      Experienced

  • Popular Contributors

    1. 1
      +primortal
      700
    2. 2
      ATLien_0
      275
    3. 3
      Michael Scrip
      219
    4. 4
      +FloatingFatMan
      189
    5. 5
      Steven P.
      146
    Show More

  • Tell a friend

    Love Neowin? Tell a friend!