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;
    });    
});