loading external javascript into another javascript

Question

i have code 1 and code 2. code 1 is login.html saving this as login.js and code 2 is some jquery, javascript codes.

my problem is how to insert 1st code into 1nd code.

1 code:- login.html   ( i am saving this is as login.js)

    <div id="login_tease">
    <p><strong>New to {tplvars.sitename}?</strong> <a class="content-link simple big" href="{tplvars.relative_url}join.php">Sign up FREE</a></p>
    <div> <p> some codes</p>
    </div>
</div>

<form action="{tplvars.relative_url}processors/login.php" method="post" id="relogin">
<fieldset>
    <dl>
        <dt><label for="username2">Username:</label></dt>
        <dd><input type="text" id="username2" name="user" /></dd>
    </dl>
    <dl>
        <dt><label for="password2">Password:</label></dt>
        <dd><input type="password" id="password2" name="pass" /></dd>
    </dl>
    <dl class="controls">
        <dt>&nbsp;</dt>
        <dd><input type="submit" class="button medium" id="btn_login" value="Login" />
            <a class="content-link simple" href="{tplvars.relative_url}pass_lost.php" title="Lost password?">Lost password?</a>
        </dd>
    </dl>
</fieldset>

</form>

<div class="clear"></div>

<script type="text/javascript" src="{tplvars.relative_url}js/login.js?v={tplvars.js_lib_v}"></script>

2nd code:- placing this code in index.html(main page) I want to insert the above login.js into this code.

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>good to see login</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

<script type="text/javascript">
// some code.
</script>

<div>  
//some code  
</div>


var dis = "<p> this is login page";   //  i want to insert login.js to this variable.
          jQuery("#results").html(dis);


</body>
</html>

I want to insert 1st code i.e., login.js at var dis="login.js"

Please some body help me dudes

How about cut and paste...? What are you trying to accomplish exactly? — JAL
– JAL, Commented Dec 28, 2014 at 8:54

agentpx · Accepted Answer · 2014-12-28 09:32:58Z

You are basically doing asynchronous script loading which is (in most cases) a great thing.

Here's how offical Google Maps documentation says it should be done:

function loadScript() {
  var script = document.createElement('script');
  script.type = 'text/javascript';
  script.src = 'https://maps.googleapis.com/maps/api/js?v=3.exp&' +
      'callback=initialize';
  document.body.appendChild(script);
}

window.onload = loadScript;

And here is the link: https://developers.google.com/maps/documentation/javascript/examples/map-simple-async

So what you need is a regular HTML tag that you would put into the <head> of your HTML, but instead of putting it there at the beginning (as a "blocking" script) you are loading it dynamically by appending it to the <head>. Then the browser will have to download your file and parse/execute it.

This technique is widely used in so called AMD (Asynchronous Module Definition) systems, like RequireJS.

agershun · Accepted Answer · 2014-12-28 12:43:28Z

1

An option if you want to load one file into another one "on the fly":

$.get("login.js").then(function(data){
    var sc = document.createElement('script');
    sc.innerHTML = data;
    document.getElementById('results').appendChild(sc);
});

edited Dec 28, 2014 at 12:43

answered Dec 28, 2014 at 9:08

agershun

4,10742 silver badges42 bronze badges

Collectives™ on Stack Overflow

loading external javascript into another javascript

2 Answers 2

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Related