• 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

    • Microsoft releases major feature updates for stock Windows 11 apps

      By Neeo · Posted

      When will the Photos app be updated to remember the window size and position when reopened? They addressed this issue in a 2024 version of the app (though I can't recall the build number). Unfortunately, after that specific version, the problem persists! Please prioritise this fix in your K2 schedule. Additionally, the Snipping Tool has lost the ability to capture the Windows Taskbar starting from the 2024 version!
    • EU Commission explains why Siri AI isn't launching in the EU, and Apple is to blame

      By Dutchie64 · Posted

      Oh dear... my sweet summer child......
    • Spotify finally removes the disco ball app icon in the latest update

      By Xerxes · Posted

      Same, never saw it on Android or iOS. Guess only some people got it *shrugs*
    • Anthropic pulls Fable 5 and Mythos 5 after US export control order

      By pradeepviswav · Posted

      Anthropic pulls Fable 5 and Mythos 5 after US export control order by Pradeep Viswanathan In April this year, Anthropic launched the Claude Mythos Preview frontier model with state-of-the-art cyber and coding capabilities for a select set of companies around the world. After preparing appropriate guardrails, early this week, Anthropic launched Claude Fable 5 and Mythos 5, its most capable AI models. Claude Fable 5 is for general users and comes with strict safeguards, while Mythos 5 is designed with fewer safeguards for cybersecurity and biology use cases. Today, Anthropic abruptly suspended access to its Fable 5 and Mythos 5 AI models for all customers after receiving an export control directive from the US government. The company received the directive from the government today at 5:21 p.m. ET, and the received letter did not provide any details regarding the national security concern. Anthropic understands that the government became aware of a method to bypass, or “jailbreak,” Fable 5, which might be the reason behind the directive. The order was issued under national security authorities and requires the company to suspend all access to Fable 5 and Mythos 5 by any foreign national, whether they are inside or outside the United States. The restriction also applies to foreign national employees working at Anthropic. As a result, the company has disabled both models for all customers to ensure compliance. Access to previous Anthropic models like Opus and Sonnet is not affected by this government order. The company highlighted that it had developed strong safeguards to reduce the possibility that Fable is misused for tasks related to cybersecurity. In fact, many developers are complaining that the safeguards are going overboard. Additionally, the company worked with the US government, the UK AISI, multiple private third-party organizations, and internal teams to red-team Fable’s safeguards for thousands of hours. Finally, Anthropic noted that no testers have yet been able to find a universal jailbreak on Fable 5. As expected, Anthropic disagrees that a narrow potential jailbreak should lead to the recall of a commercial model used by hundreds of millions of people. It warned that applying this standard across the AI industry could effectively halt new frontier model deployments. Anthropic concluded by mentioning that it is working to restore access to Fable 5 and Mythos 5 as soon as possible and plans to share more details within the next 24 hours.
    • Brave Browser 1.91.172

      By Copernic · Posted

      Brave Browser 1.91.172 is out.

  • Recent Achievements

    • Week One Done
      ssd21345 earned a badge
      Week One Done
    • Contributor
      MarkHughes4096 went up a rank
      Contributor
    • Dedicated
      jordanspringer earned a badge
      Dedicated
    • Rookie
      Rimplesnort went up a rank
      Rookie
    • One Year In
      Markus94287 earned a badge
      One Year In

  • Popular Contributors

    1. 1
      +primortal
      503
    2. 2
      +Edouard
      176
    3. 3
      PsYcHoKiLLa
      147
    4. 4
      ATLien_0
      92
    5. 5
      Steven P.
      79
    Show More

  • Tell a friend

    Love Neowin? Tell a friend!