Passing variable to a Jquery function

Question

I am trying to pass the content of a button click to a Jquery function.

My script is using "Stephan Wanger's JBox plugin" which is exceptional to create my popup..

My button code:

<div class="imagehelp" id="imaint_help">
 <div onClick='javascript:clickMeImage()'>
 <div class="detailButton" id="TrafficM1">
 <a href="#?Record=<?php echo $row_m['RecordID']; ?>"><img src="nav/trafficeDetail_button.png" width="91" height="59" /></a>
 </div>
 </div>
</div>

My Jquery function:

function clickMeImage() {
var record = "<?php echo $_GET['Record'];?>";
console.log(record);
new jBox('Modal', {
 attach: '.imagehelp',
 width: 1000,
 height: 500,
 title: 'Traffic detail',
 theme: 'TooltipBorder',
 closeButton: 'title',
 draggable: 'title',
 trigger: 'click',
 animation: 'false',
 position: {
 x: 'center',
 y: 'center',
 },
 offset: {x: 15, y: -10},
 onCloseComplete: function() {
 this.destroy();
 $('#jBox-overlay').remove();
 },
 ajax: {
 url: 'traffic_detail.php?RecordID=record',
 reload: 'strict'
 }
});
}

Many thanks in advance for your time.

• user2233706: Could you clarify what you mean by 'content of a button click?'
• DCJones: @user2233706 Hi, the content of the click button contains the content of $_GET['Record'], I hope that is clearer.

Answer 1

You trigger your funtion from a parent element. I should go something like this:

<?php
$row_m['RecordID'] = "something";
?>
<div class="imagehelp" id="imaint_help">
 <div onClick='javascript:clickMeImage("<?php echo $row_m['RecordID']; ?>")'>
 <div class="detailButton" id="TrafficM1">
 <img src="nav/trafficeDetail_button.png" width="91" height="59"/>
 </div>
 </div>
</div>
<script>
 function clickMeImage(mydata) {
 alert(mydata);
 }
</script>

if you want to keep the anchor, you can use an attribute:

 <?php
$row_m['RecordID'] = "other-something";
?>
<div class="imagehelp" id="imaint_help">
 <div onClick='javascript:clickMeImage()'>
 <div class="detailButton" id="TrafficM1">
 <a href="#" data-record="<?php echo $row_m['RecordID']; ?>"> <img src="nav/trafficeDetail_button.png" width="91" height="59"/></a>
 </div>
 </div>
</div>
<script>
 function clickMeImage() {
 var el = document.querySelector('a');
 var mydata = el.getAttribute('data-record')
 alert(mydata);
 }
</script>

• Niet the Dark Absol: Replace "<?php echo $row_m['RecordID']; ?>" with <?=json_encode($row_m['RecordID'])?> (no quotes outside) and you're good. Also remove the javascript: - in an onclick event, that's just a meaningless label.
• DCJones: @Alex Angelico hi, many thanks for your reply. works perfect.
• Alex Angelico: @NiettheDarkAbsol wow man, how an usefull comment!!!! why don't you just answer DCJones question
• Niet the Dark Absol: @AlexAngelico Because of everything else wrong with it, such as using inline event handlers, not making use of data attributes for passing data, use of <a> inside an element that has onclick... The list goes on