Using a variable created in a different page

Question

There are two JavaScript variables in my index.html page. I want to use these two variables in control.js.

index.html has some jQuery script like below

<script>
$(document).ready(function() {
// load select code from country.html
$('#selectCourse_country').load('country.html select', function() {
    // when country is selected
    $('#selectCourse_country select').change(function() {
        // get id
        var countryId = $(this).children('option:selected').val();
        // load select code from state.html by id
        $('#selectCourse_state').load('state.html #'+countryId,function(){
            $('#selectCourse_state select').change(function(){
                var stateId = $(this).children('option:selected').val();
               //alert(stateId);                    
            });
        });
    });
  });
});
</script>

I want to use value of variables countryId and stateId in control.js. How can I pass them from index.html to control.js.

Couldn't you just load control.js right afterwards and store variables in a hidden dom with jquery? — JTravakh
– JTravakh, Commented Jul 15, 2013 at 10:18
Many html pages can load the same javascript file. There are no javascript pages. The file contains the text of some code. The variables for that code only exists on the browser, as initialized by the javascript code. Shared data has to be requested with ajax, or be part of the HTML, or in a cookie or local database. — Paul
– Paul, Commented Jul 15, 2013 at 10:22
how about cookies? you can use jQuery.cookie. Can you post the control.js code where you are trying to use those vars? — Salvatorelab
– Salvatorelab, Commented Jul 15, 2013 at 10:23

Sudarshan Tanwar · Accepted Answer · 2013-07-15 10:48:43Z

2

Make a global container in your project which can contain any object. and those objects can be access globally in any js page of your application.

window.global ={country_ID : countryId , state_ID : stateId};

Then use them in control.js like :

var contId =window.global.country_ID;
var statId =window.global.state_ID;

answered Jul 15, 2013 at 10:48

Sudarshan Tanwar

3,6173 gold badges27 silver badges39 bronze badges

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

Comments

Reinstate Monica Cellio · Accepted Answer · 2013-07-15 10:25:49Z

0

Using jQuery.cookie (https://github.com/carhartl/jquery-cookie) the following should suit your needs.

To write the cookies...

$.cookie("countryId", countryId);
$.cookie("stateId", stateId);

and then in control.js you can get the values like this...

var countryId = $.cookie("countryId");
var stateId = $.cookie("stateId");

answered Jul 15, 2013 at 10:25

Reinstate Monica Cellio

26.2k6 gold badges54 silver badges67 bronze badges

Comments

raam86 · Accepted Answer · 2013-07-15 10:29:37Z

0

The jQuery solution is good. This is a Use cookies.

for brevity I only coded for stateID

//Store cookie.
 var stateId = $(this).children('option:selected').val();
 document.cookie = "stateid="+ stateId;

//Get user cookie and match stateID
var cookies = document.cookie.split(';')
for (var i = 0 ; i< cookies.length;i++){
 if(cookies[i].match(/stateid/)){
 //Do stuff
 }
}

answered Jul 15, 2013 at 10:29

raam86

6,8812 gold badges33 silver badges46 bronze badges

Comments

Ashis · Accepted Answer · 2013-07-15 10:40:24Z

This may be helpful for you.

Passing data from html to another js file using modernizer.

//Load JS through Modernizer
Modernizr.load([
  // Functional polyfills
  {
    // This just has to be truthy
    test : Modernizr.websockets && window.JSON,
    // socket-io.js and json2.js

    // Arrays of resources to load.
    both : [ '/js/jquery.min.js', '/js/jquery-ui-min.js'],
    complete : function () {
        // Run this after everything in this group has downloaded
        // and executed, as well everything in all previous groups
        $('#selectCourse_country').load('country.html select', function() {
        // when country is selected
        $('#selectCourse_country select').change(function() {
        // get id
        var countryId = $(this).children('option:selected').val();
        // load select code from state.html by id
        $('#selectCourse_state').load('state.html #'+countryId,function(){
            $('#selectCourse_state select').change(function(){
            var stateId = $(this).children('option:selected').val();
               //alert(stateId);                    
            });
        });
        });
      });
    }
  },
  // Run your code afte you've already kicked off all the rest
  // of your app.
  // Pass variables to this js file
  '/js/control.js'
]);

Collectives™ on Stack Overflow

Using a variable created in a different page

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related