Passing PHP while variable into an external JS script

Question

I have the following code:

PHP

<?php include("db.php"); ?>
<html>
    <head>
        <title>Title</title>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.0/jquery.min.js"></script>
    </head>
    <body>
        <div align="center">
            <table cellpadding="0" cellspacing="0" width="500px">

            <?php $sql = "SELECT * FROM items ORDER BY ID DESC";
              $items= mysql_query($sql);
              while ($item= mysql_fetch_array($items)){
                  $id = $item[ID]; ?>       

                  <script type="text/javascript">
                      $(function() {
                          $(".<?= $id ?>").click(function() {
                              var element = $(this);
                              var boxval = $("#<?= $id ?>").val();
                              var dataString = 'not='+ boxval;
                              $("#flash").show();
                              $("#flash").fadeIn(200).html('');

                              $.ajax({
                                  type: "POST",
                                  url: "update_data.php",
                                  data: dataString,
                                  cache: false,
                                  success: function(html){
                                      $("ol#update").prepend(html);
                                      $("ol#update li:first").slideDown("slow");                                      document.getElementById('content').value='';$("#flash").hide();
                                  }
                              });
                              return false;
                          });
                      });
                  </script>

                  <tr style="border: solid 4px red;">
                      <td>
                          <div class="<?= $id ?>">
                              <button type="submit" id="<?= $id ?>" name="not" value="<?= $id ?>">BUTTON <?= $id ?></button>
                          </div>
                      </td>
                  </tr>

            <?php } ?>
            </table>
            <div id="flash" align="left"  ></div>
            <ol  id="update" class="timeline"></ol>
            <div id="old_updates"></div>
        </div>
    </body>
</html>

This code works fine and allows me to insert data in sql without refresh.

But, how can I put the javascript as external script and the variables passing coretly for each item?

I want to reorganize like this:

PHP

<?php include("db.php"); ?>
<html>
    <head>
        <title>Title</title>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.0/jquery.min.js"></script>
    </head>
    <body>
        <div align="center">
            <table cellpadding="0" cellspacing="0" width="500px">

            <?php $sql = "SELECT * FROM items ORDER BY ID DESC";
              $items= mysql_query($sql);
              while ($item= mysql_fetch_array($items)){
                  $id = $item[ID]; ?>       

                  <tr style="border: solid 4px red;">
                      <td>
                          <div class="<?= $id ?>">
                              <button type="submit" id="<?= $id ?>" name="not" value="<?= $id ?>">BUTTON <?= $id ?></button>
                          </div>
                      </td>
                  </tr>

            <?php } ?>

            </table>
            <div id="flash" align="left"  ></div>
            <ol  id="update" class="timeline"></ol>
            <div id="old_updates"></div>
        </div>

        <script src="script.js"></script>
    </body>
</html>

When script.js is this

<script type="text/javascript">
    $(function() {
        $(".<?= $id ?>").click(function() {
            var element = $(this);
            var boxval = $("#<?= $id ?>").val();
            var dataString = 'not='+ boxval;
            $("#flash").show();
            $("#flash").fadeIn(200).html('');

            $.ajax({
                type: "POST",
                url: "update_data.php",
                data: dataString,
                cache: false,
                success: function(html){
                    $("ol#update").prepend(html);
                    $("ol#update li:first").slideDown("slow");
                    document.getElementById('content').value='';$("#flash").hide();
                }
            });
            return false;
        });
    });
</script>

score 0 · Accepted Answer · edited May 23 '17 at 11:43

Either the script you're using currently and the example of what you want to achieve are wrong.
You should never mix your scripts this way. It causes alot dependencies and makes your app very sensitive for any code changes.

Don't use id attributes when you deal with dynamic elements. Make a group/sets of elements (that behave the same way for a specific action) by giving them the same class.

Don't use mysql_* functions

Button:

<button class="my-btn" type="button" value="<?= $id ?>">BUTTON <?= $id ?></button>

HINT: set type=button rather than type=submit attribute on your button if you don't want it to submit a form. Then you don't have to return false; on click.

script.js:

$(function() {
    $(".my-btn").click(function() {
        var dataString = $(this).val();
        $("#flash").show().fadeIn(200).html('');
        $.ajax({
            type    : "POST",
            url     : "update_data.php",
            data    : {'not' : dataString},
            cache   : false,
            success : function(html){
                $("#update").prepend(html).find("li:first").slideDown("slow");
                $('#content').val('');
                $("#flash").hide();
            }
        });
    });
});

Passing PHP while variable into an external JS script

1 Answers1