How to load an external file in JavaScript?

Question

I am writing a script where you can add and remove a drop-down list of languages. I got it working but my question is if there is a way to externalize the select tag part of the code as I would have more than 100 options and load it in JavaScript when a link is click. I don't want to have 100 option tags within the script. On the PHP side I use the the include statement to load my list of options.

This is where my problem is.

$(function() {
    var scntDiv = $('#container');
    var i = $('#container p').size() + 1;

    $('#addScnt').live('click', function() {
        $('<p><select>I DONT WANT TO HAVE 100 OPTION TAGS HERE</select></p>').appendTo(scntDiv);
        i++;
        return false;
    });
});

here is my code that runs with a few option tags in the script.

Full code.

As of jQuery 1.7, the .live() method is deprecated. Use .on() to attach event handlers. And for the main problem; AJAX is the way to go. — Rudie Visser
– Rudie Visser, Commented Nov 17, 2015 at 11:11
To be a bit more explicit on the live / on part since at times it's not clear, in your case $(document).on('click', '#addScnt', function() { /* stuff here */ }); — CoolGoose
– CoolGoose, Commented Nov 17, 2015 at 11:27

Yeldar Kurmangaliyev · Accepted Answer · 2015-11-17 11:26:22Z

4

You can store your languages as objects. It can be either a static file or dynamically generated response. Then, you can use it for dynamical options creation:

MyLanguages.json:

[
    {
        'Name': 'English',
        'Sign': 'EN'
    },
    {
        'Name': 'Spanish',
        'Sign': 'ES'
    },
    {
        'Name': 'Russian',
        'Sign': 'RU'
    }
]

Your page:

$.ajax({
    url: './MyLanguages.json',
    dataType: 'json'
}).done(function(data) {
  var $select = $("select");

  $(data).each(function() {
    $("<option/>").text(this.Name).val(this.Sign).appendTo($select);
  });
});

answered Nov 17, 2015 at 11:26

Yeldar Kurmangaliyev

34.3k13 gold badges64 silver badges104 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Alexander Elgin · Accepted Answer · 2015-11-17 11:08:29Z

3

You can put the options in a JSON file and load them using AJAX (http) request.

answered Nov 17, 2015 at 11:08

Alexander Elgin

6,9954 gold badges44 silver badges53 bronze badges

Comments

bhanu.cs · Accepted Answer · 2015-11-17 11:19:26Z

You can put all your data into an Json file like below(For example):

{"student": [
  {
    "id": "1",
    "name": "Person1"
  },
  {
    "id": "2",
    "name": "Person2"
  },
  {
    "id": "3",
    "name": "Person3"
  }
]}

Now on click Implement the following

     $('#addScnt').on('click', function() {
     //get a reference to the select element
$('<p><select id="test"></select></p>').appendTo(scntDiv);
        var $select = $('#test`enter code here`');</code>

        //request the JSON data and parse into the select element
        $.getJSON('student.JSON', function(data){

          //clear the current content of the select
          $select.html('');

          //iterate over the data and append a select option
          $.each(data.student, function(key, val){ 
            $select.append('<option id="' + val.id + '">' + val.name + '</option>');
          })
        });
        });

Collectives™ on Stack Overflow

How to load an external file in JavaScript?

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related