• 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

    • Crazy Taxi, Sonic CD, and other classic Sega games are now free on mobile devices

      By CHUNWEI · Posted

      Aww 🥹
    • Report: Trump's T1 Mobile off to a rocky start with messy pre-orders

      By TRS-80 · Posted

      Their mobile plan costs $47.45 a month LOL
    • Trump's team takes down Trump Mobile coverage map that includes "Gulf of Mexico"

      By Skwerl · Posted

      I think the flub is slightly funny, albeit minor. What will be funnier is the people buying some utterly terrible Chinese Android phone for $500 (that's with a huge profit margin worked in). That said, I've bemoaned this before: I miss the days when Neowin was about Microsoft products and technologies and didn't host articles that would get people riled up politically. It used to be a friendlier place where people were only bitches about insignificant things related to Microsoft.
    • AMD thinks Ryzen Threadripper 9000 wipes the floor with Intel

      By hellowalkman · Posted

      AMD thinks Ryzen Threadripper 9000 wipes the floor with Intel by Sayan Sen At Computex 2025 earlier this year, AMD revealed its new Zen 5-based Ryzen Threadripper 9000 series with up to 96 cores, comprising the PRO 9000WX series and 9000 series chips. At the time though the company did not share performance numbers but given the specs, we had a fairly good idea of their capability. For those who may not be familiar with Ryzen Threadripper, it is AMD's desktop CPU lineup meant for workstations and HEDT (high-end desktop) builds and is placed between the mainstream Ryzen and the server EPYC lineups. With the launch expected to happen next month, performance numbers for the Ryzen Threadripper 9000 are now out. Before diving into the performance details, AMD has also shared a recap of some of the platform details and the compatible sTR5 socket. These new premium chips support up to 8 channels of DDR5-6400 memory and up to 128 PCIe 5.0 lanes for I/O. AMD also promises over 7000 MT/s of DDR5 support with EXPO. The specs of the Ryzen Threadripper 9000 lineup are given below: Processor SKU Cores Threads Base Clock (GHz) Boost Clock (GHz) L3 Cache (MB) Memory Channels PCIe Lanes TDP (W) AMD Ryzen Threadripper PRO 9995WX 96 192 2.5 5.45 384 8‑channel DDR5‑6400 ECC 128 PCIe Gen5 350 AMD Ryzen Threadripper PRO 9985WX 64 128 3.2 5.4 384 8‑channel DDR5‑6400 ECC 128 PCIe Gen5 350 AMD Ryzen Threadripper PRO 9975WX 32 64 3.2 5.4 384 8‑channel DDR5‑6400 ECC 128 PCIe Gen5 350 AMD Ryzen Threadripper PRO 9965WX 24 48 3.2 5.4 384 8‑channel DDR5‑6400 ECC 128 PCIe Gen5 350 AMD Ryzen Threadripper PRO 9955WX 16 32 3.2 5.4 384 8‑channel DDR5‑6400 ECC 128 PCIe Gen5 350 AMD Ryzen Threadripper PRO 9945WX 12 24 3.2 5.4 384 8‑channel DDR5‑6400 ECC 128 PCIe Gen5 350 AMD Ryzen Threadripper 9980X 64 128 3.2 5.4 256 4‑channel DDR5‑6400 92 PCIe Gen5 350 AMD Ryzen Threadripper 9970X 32 64 3.2 5.4 256 4‑channel DDR5‑6400 92 PCIe Gen5 350 AMD Ryzen Threadripper 9960X 24 48 3.2 5.4 256 4‑channel DDR5‑6400 92 PCIe Gen5 350 AMD has compared the 96-core 9995WX against the previous-gen 7995WX (images below), also with the same core configuration, and the 64-core 9980X, against Intel's 60-core Xeon W9-3595X. While Xeon has generally been associated with Server CPUs, the Xeon W chips are designed to be used in workstations. AMD follows a similar naming, too, wherein the W in the WX is meant to indicate workstation, and the non-W Threadripper is for HEDT. AMD claims up to 26% faster throughput on the newer 96-core 9995WX compared to the 7995WX. Meanwhile, against the Intel Xeon w9-3595X, AMD expects utter dominance from its 9980X with up to 108% faster performance. Even the lowest gain, says the company, is 22% over the Intel chip, and that is still very significant. AMD also compared the AI performance of the 9995WX vs the Xeon w9-3595X. The company promises up to 49% faster LLM processing, but keep in mind that the figures given include a GPU as well. Besides AI, performance related to other creative and professional workloads was also shared. In Keyshot rendering, for example, AMD claims up to 119% gains over the Xeon SKU. And in Chaos V-Ray, the 9995WX is said to offer nearly 2.5 times the performance. AMD has not released pricing information for the Threadripper 9000 series.
    • Microsoft announces multi-year partnership with AMD for future of Xbox consoles and hardware

      By +Random Stranger · Posted

      Funk Microsoft - I would switch from PS5 as you have better deals but the Xbox interface (I tried One S and later on, even one X i hate the interface and considering all MS changes in Windows interface over the years.. I hope they have a good one coming ps5 has also weird interface I had to get used too. But considering the library of ps4 games I wanted to be playable for me… I got used and adapted

  • 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
      654
    2. 2
      ATLien_0
      267
    3. 3
      Michael Scrip
      218
    4. 4
      +FloatingFatMan
      188
    5. 5
      Steven P.
      146
    Show More

  • Tell a friend

    Love Neowin? Tell a friend!