Javascript scope and sequentiality issue

Question

I want to get an id from the query and display it in html.

I want to keep things in separate javascript files, because in the future, it will retrieve a json from php and will filter it based on some checkboxes, radio buttons, etc. and then display the result.

In this moment, I get a blank page, and the id value is not shown, so I'm doing something wrong.

http://localhost:10600/js1/index.php?id=5

index.php

<html>
<head>
<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js'></script>
</head>
    <body>
        <div class="results"></div>
    </body>
</html>

<script type="text/javascript" src="config.js"></script>
<script type="text/javascript" src="display.js"></script>
<script type="text/javascript" src="sequence.js"></script>

config.js

function getId() {
    id = "<?php echo $_GET['id']; ?>";
}

display.js

function updateHtml() {
window.onload = function() {
    document.querySelector('.results').innerHTML = id;
}
}

sequence.js

function seq()
{
    getId();
    updateHtml();   
}
seq();

it should echo the id from the initial link: `ttp://localhost:10600/js1/index.php?id=5` — Nick, Aug 08 '16 at 10:03
You cannot assign php value to js in .js file. You can assign only .php file — Maths RkBala, Aug 08 '16 at 10:04
_it should echo the id from the initial link_ No, it shouldn't since `config.js` is a **separate** file — hindmost, Aug 08 '16 at 10:05
So if you need to get the id from your URL see http://stackoverflow.com/questions/4656843/jquery-get-querystring-from-url — bug-a-lot, Aug 08 '16 at 10:06
_You cannot assign php value to js in .js file._ Actually that's possible using some tricks such as URL rewriting. — hindmost, Aug 08 '16 at 10:08

score 1 · Answer 1 · answered Aug 08 '16 at 10:06

Please try the following: index.php

<html>
<head>
<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js'></script>
</head>
    <body>
        <div class="results"></div>
    </body>
</html>

<script type="text/javascript">
var id;
function getId() {
    id = "<?php echo $_GET['id']; ?>";
}

</script>
<script type="text/javascript" src="display.js"></script>
<script type="text/javascript" src="sequence.js"></script>

score 1 · Answer 2 · answered Aug 08 '16 at 10:17

function getParameters() {
    var url_params = window.location.search.substring(1); // Removing characters : ?
    var params = url_params.split("&");
    var res = {};

    for (var i = 0, c = params.length; i < c; i++) {
        var split = params[i].split("=");
        res[split[0]] = split[1];
    }

    return res;
}

Returns an object {param: value}

score 1 · Answer 3 · answered Aug 08 '16 at 10:41

In index.php within body you can do like this one

<input type="hidden" name="hidden_id" id="hidden_id" value="<?=$_GET['id']?>">

In JS :

If you are using jQuery,then you should do like this one.

$(document).ready(){ 
    var strHiddenId = $("#hidden_id").val();
    $(".results").html(strHiddenId);
}

Javascript scope and sequentiality issue

3 Answers3