• 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

    • Spotify finally removes the disco ball app icon in the latest update

      By +pmrd · Posted

      Was it too much to ask to show the icon in this article?
    • Windows 11's big performance boost is finally available for all

      By Case_f · Posted

      Frankly, I blame whoever is writing such articles. "A big improvement/update and/or new feature is now available to everyone! Also, use this unofficial tweak tool to enable it because it actually isn't available to you yet officially and might not in fact even be entirely ready or whatever, hence why it is perhaps not enabled for you*. But it's great and you should enable it!" I mean there's nothing wrong with sharing info about some feature you might need to enable via unofficial means, of course. It's just that these articles tend to essentially end up being two news pieces in one, and one of them tends to be a bit misleading. (*Yes, yes, the "it's a controlled rollout!" thing. Not a fan of that one either. The argument, not the actual rollout.)
    • SQL Server Management Studio 22.7 brings "What's New" page, T-SQL formatting, and lots more

      By wrack · Posted

      Thank you. Will do. I read in the release notes that editor config might be at play here.
    • Windows 11's big performance boost is finally available for all

      By eiffel_g · Posted

      Actually, I think even Microsoft doesn't know how to control it
    • OpenAI is making Codex more useful in Chrome and the cloud

      By pradeepviswav · Posted

      OpenAI is making Codex more useful in Chrome and the cloud by Pradeep Viswanathan OpenAI's Codex now has more than 5 million users, up nearly 4x from earlier this year. To further accelerate Codex's growth among developers, OpenAI today announced that it has agreed to acquire Ona, a company that builds secure cloud execution and orchestration technology for developers. Ona will enable developers to run Codex with persistent and controlled cloud infrastructure for long-running agentic workflows. Right now, most Codex execution happens locally on developers' laptops and PCs, and the agents work continuously for hours. Through Ona, OpenAI aims to make Codex agents keep working for days without being tied to a user’s local machine or an active session. This will be an important capability for enterprises that want to deploy AI agents in production while maintaining control over infrastructure, data, security boundaries, credential scope, logging, and review workflows. Like any acquisition, the deal is still subject to customary closing conditions, including regulatory approvals. Until the deal closes, OpenAI and Ona will continue to operate as separate companies. After closing, Ona’s team will join the Codex team to improve developer workflows. Alongside the Ona acquisition announcement, OpenAI today introduced a few Codex updates. Developers can now save Codex rate limit resets and use them later instead of losing them when they are not needed immediately. OpenAI is also adding a referral option where users can invite a friend to Codex and get a saved rate limit reset. OpenAI today also announced a developer mode for browser use in Chrome and the Codex in-app browser. With this mode, Codex can use the Chrome DevTools Protocol to debug web apps, inspect pages, and work more directly with browser-based development workflows. Developers can use this when they want Codex to profile JavaScript, inspect console output and network traffic, examine web page states including the DOM and applied styles, and more.

  • 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
      509
    2. 2
      PsYcHoKiLLa
      186
    3. 3
      +Edouard
      157
    4. 4
      Steven P.
      83
    5. 5
      ATLien_0
      75
    Show More

  • Tell a friend

    Love Neowin? Tell a friend!