Fetching remote code/text with javascript?

Question

So I'm working on making a dynamic drop down select form and I need for each menu to propagate possible choices from a prebuilt chunk of html (located at, say, http://example.com/menu/choices) is there an easy way to use javascript to fetch the html of a remote page and then plug that in to the page? I know I can use .write() to insert the code, I just don't know how to fetch it.

Thanks!

EDIT: The code in question is dynamic and is generated from different inputs. For example, one such page is http://ohiostate.bncollege.com/webapp/wcs/stores/servlet/TBDropDownView?jspStoreDir=ohiostate&deptId=&campusId=30747395&catalogId=10001&dojo.transport=xmlhttp&termId=44357427

I want to access the available college courses it generates.

Answer 1

The thing you want is called AJAX (Asynchronous JavaScript and XML). If you're using jQuery:

$('#my-select-thingy').load('select-options.cgi');

or whatever flavour of server-side you prefer. You should have something like this in HTML:

<div id="my-select-thingy">
  <!-- select will go here -->
</div>

and the url above should return something like this:

<select>
  <option>Foo</option>
  <option>Bar</option>
</select>

Answer 2

You're way better of using jQuery for that. Just look into the Ajax methods and you'll get the hang of it. http://api.jquery.com/category/ajax/

Answer 3

Javascript usually can't access other websites for security reasons. If we could load content from wherever we wanted with a script we'd see some pretty rampant chaos. A simple solution is an iframe with the other document or just a section of it.

Does the website have anyway for you to access that info? If you can find an interface you can just get the info and stick in in the document. Otherwise you'd have to do some scraping.

Answer 4

Suppose you have the following HTML markup

<div id="fakeDiv"></div>

you can execute an ajax request like this

$.ajax({
    type: "get",
    dataType: "html",
    url: "http://example.com/menu/choices",
    data: {},
    success: function(response) {
        $("#fakeDiv").html('').html(response);
    },
});

to inject the html code returned by your url inside the DIV element.

This is jQuery code. Hope it helps!