Dynamic variable in JavaScript with PHP

Question

I'm trying to make script with JavaScript which is dynamic, yes I know, JavaScript is always dynamic but I want to do in combination with PHP.

JS:

$(document).ready(function(){
  $("#glcheckmail").click(function(){
    $("#glmaildiv").load('/functions/glist-MailChecker.php');
  });
});

PHP:

echo "<div class=\"list-group-item\" data-toggle=\"modal\" href=\"#\"><span class=\"badge badge-danger\"><a href=\"#\" class=\"donothover\">Delete</a></span>
        <div style=\"white-space:nowrap; overflow:hidden; text-overflow:ellipsis; width:80%;\">". $row['attach_name'] ." (<i>". formatSizeUnits($row['attach_size']) ."</i>)</div></div> ";

As you can see I have an "<a href="">" with Delete in it. What I'm trying to accomplish is actually something like this (Example Not Real Code!)

<a href="#" id="RefToJS" onclick="<? echo $attach_id; ?>">

Now (hypothetically) my JavaScript should see a variable in #RefToJS. And I want to pass this variable on to the PHP script which loads onclick, like this

$(document).ready(function(){
  $("#glcheckmail").click(function(){
      $("#glmaildiv").load('/functions/glist-MailChecker.php?id='+ONCLICK_CODE);
  });
});

This is sort of what I want but as you can see, the code isn't a beauty and I have to little knowledge of JavaScript to make this work

The question is, why do you have to echo a value and then get that value back, wouldn't you already have that value, as you're sending it back to the same server that outputted it. — adeneo
– adeneo, Commented May 23, 2014 at 15:15
onclick attributes must contain valid javascript CODE. onclick="42" is not going to do very much for you. you'd probably want onclick="doSomething(<?php echo $attach_id ?>)" instead. — Marc B
– Marc B, Commented May 23, 2014 at 15:17

pmandell · Accepted Answer · 2014-05-23 15:17:40Z

3

There are a few ways you could go about it. This is how I would do it:

PHP:

echo "<a href='#' class='link-class' id='" . $PHP_ID . "'>Delete</a>";

JavaScript

$('.link-class').click(function(e){
    e.preventDefault(); //prevent default link action
    var linkID = $(this).attr('id'); //retrieve the ID of the clicked link
    $("#glmaildiv").load('/functions/glist-MailChecker.php?id='+ linkID);
});

answered May 23, 2014 at 15:17

pmandell

4,31820 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Pitchinnate · Accepted Answer · 2014-05-23 15:28:37Z

0

Ok so first I would take an approach similar to @pmandell but I would make a few changes. First off instead of using id I would use a data attribute to prevent conflicts something like this:

echo "<a href='#' class='delete-link' data-id='{$PHP_ID}'>Delete</a>";

Second since you are adding these to the DOM via ajax you should use on to prevent issues with events not being bound to the new links you are creating. So here is what the javascript should look like:

$(document).on('click','.delete-link',function(e) {
    e.preventDefault();
    var linkID = $(this).data('id');
    $("#glmaildiv").load('/functions/glist-MailChecker.php?id='+ linkID);
});

answered May 23, 2014 at 15:28

Pitchinnate

7,5561 gold badge22 silver badges39 bronze badges

Collectives™ on Stack Overflow

Dynamic variable in JavaScript with PHP

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related