Issues since moving javascript to its own file - php

Question

Alright, if you look at the code below, I am trying to make it more "flexible", moving the JavaScript code to its own file, instead of keeping it in the php file.
The code below is not gonna work anymore, since i cant transfer $yadayada['id'] to the JS file, well okay I dont know how to, and thats where my problem lies.
How can I use the code below, or some variant of it thats gonna work?
Whats gonna happen is that when you press a specific image(button), a modal will open for the specific post in the while statement.
I have skipped out the post part, since thats not the problem here, it is opening a modal window for the correct post.
Thanks in advance!
$yadaya = mysql_query("blablabal")
while($yadayada = mysql_fetch_assoc($yadaya)
{
<div id="kommentera<?=$yadayada['id']?>" class="settingsBox" style="display: none; width:500px; font-size: 14px;">
<textarea id="text<?=$yadayada['id']?>" class="textarea" style="width: 493px; height:80px;"></textarea><br />
<span class="buttons" style="float:left;">
<button id="kommenteraFilm" id1="<?=$yadayada['id']?>" uid1="<?=$yadayada['guid']?>" uid2="<?=$acc_info['id']?>" class="positive" type="submit" name="kommentera"><img src="<?=$static?>/img/bullet_go.png" alt="" />Kommentera</button>
</span>
<?php
?>
</div>
echo '
<div id="se-kommentera'.$yadayada['id'].'" class="testing" style="float:right; margin-top:-2px; cursor:pointer;">
<img src="'.$static.'/img/icon_kommentera.png" height="15px" width="15px" alt="" title="Kommentera" />
</div>'
;
}
footer:
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="<?=$static?>/js/mylibs/dependency.js"></script
dependency.js:
$(function() {
$('#se-kommentera<?=$yadayada['id']?>').click(function (e) {
$('#kommentera<?=$yadayada['id']?>').modal();
return false;
});
});
UPDATE
To answer some of the responses, I think you are forgetting that I cannot access the while statement outside the statement itself, so making the js file a php file is kind of useless.
The JS file must be below the jQuery library file, which is in the footer.

Answer 1

You can generate Javascript through PHP (but it's not a good idea)
To directly answer your question: you can "generate" Javascript dynamically through PHP code. For example:
<!-- note that the source is .php so that the server processes it as such -->
<script type="text/javascript" src="dependency.php"></script
And dependency.php would look like:
<?php
// tell the browser how to interpret what we 'll be sending
header('Content-Type: text/javascript');
// get reference to any variables we need
$yadayada = /* ... */
?>
$(function() {
$('#se-kommentera<?=$yadayada['id']?>').click(function (e) {
$('#kommentera<?=$yadayada['id']?>').modal();
return false;
});
});
All of this is really the same thing you are doing when outputting HTML with PHP, only now you are outputting Javascript. But the problem is that you are doing the same work (what is required to get to $yadayada) two times once for your HTML, and once for your JS.
So what is a good idea?
Simply change your markup so that you do not need to know anything inside $yadayada when you write your JS; this way, the code can remain static. For example:
HTML:
<div class="se-kommentera testing">
<img src="..." height="15px" width="15px" alt="" title="Kommentera" />
<div class="settingsBox kommentera">
</div>
</div>
JS:
$(function() {
$('.se-kommentera').click(function (e) {
$(this).find(".kommentera").modal();
return false;
});
});
What I did here is provide a way of finding the appropriate .kommentera div not with an absolute identifier (the id) but in a manner relative to the .se-kommentera that was clicked.
For convenience, I chose to put one div inside the other and get a hold of it with .find; but this is not binding and you could really make dozens of different choices here. For example, you can give both divs an id like you did before and then do something like this:
$(function() {
$('.se-kommentera').click(function (e) {
var id = this.id.replace("se-", "");
$("#" + id).modal();
return false;
});
});

Answer 2

One simple way to do it would be to give the JavaScript-file a .php extension, instead of the regular .js. That way the PHP-code will be executed on the server, before the JavaScript is sent to the client. As you specify the type="text/javascript" on the script tag the browser won't mind the .php extension on your JS-file.

Answer 3

have you tried to echo $yadayada inside the js file?
This thread might help you Passing a PHP Variable in external JS file

Answer 4

If you want your javascript files to be able to output PHP variables, the best way I can think of is to add a mimetype to your htaccess file.
Something like the following would work for Apache...
AddType application/x-httpd-php .js