Onclick event not opening Bootstrap modal

Question

I am trying to open a bootstrap modal on button click but it appears my code is not running. Here is my code snippet:

<button type="button" class="btn btn-xs btn-default" onclick="openViewUserModal(<?= $users['userid']; ?>); return false;">
  <span class="glyphicon glyphicon-eye-open"></span>
</button>

function openViewUserModal(id) {
  var data = {
    "id": id
  };
  jQuery.ajax({
    url: "includes/viewUser.php",
    method: "POST",
    data: data,
    success: function(data) {
      jQuery('body').append(data);
      jQuery('#viewUserModal').modal({
        backdrop: 'static',
        keyboard: false,
        show: true
      });
    }
  });
}

Clicking on the button does not elicit a response. What am I doing wrong?

there's html missing here. Check your console and tell us what you see. — Funk Forty Niner, Sep 05 '18 at 11:29
1) Check the console for errors 2) is `= $users['userid']; ?>` a string? If so you'll need to wrap it in quotes 3) Do not use inline event attributes. There is no excuse for it when you've already loaded jQuery in the page — Rory McCrossan, Sep 05 '18 at 11:30
As @RoryMcCrossan pointed out, I just needed to wrap = $users['userid']; ?> in quotes like '= $users['userid']; ?>'. — donsonde, Sep 05 '18 at 11:49
@RoryMcCrossan: If i choose the option 3, how will i write the jQuery script. do i need to add data-id attribute to pass the parameter? — donsonde, Sep 05 '18 at 11:56
That would work well. I added an answer below to show you exactly how it would work. — Rory McCrossan, Sep 05 '18 at 13:15

score 0 · Accepted Answer · answered Sep 05 '18 at 11:33

0

this should work, mark the echo statement. i think its a typo.

<button type="button" class="btn btn-xs btn-default" onclick="openViewUserModal('<?php echo $users['userid']; ?>');">
  <span class="glyphicon glyphicon-eye-open"></span>
</button>

answered Sep 05 '18 at 11:33

Sekhu

139
1
12

`=` is a short hand for `echo`... See [here](https://stackoverflow.com/questions/2020445/what-does-mean-in-php) – Louys Patrice Bessette Sep 05 '18 at 11:36
My mistake, Check the console if getting any errors? – Sekhu Sep 05 '18 at 11:42
1

Thank you @Sekhu. wrapping the parameter in quotes sorted me out. – donsonde Sep 05 '18 at 11:51
Most Welcome :) – Sekhu Sep 05 '18 at 11:56

score 0 · Answer 2 · answered Sep 05 '18 at 13:15

Assuming that the output of <?= $users['userid']; ?> is a string then you'll need to wrap it in quotes:

onclick="openViewUserModal('<?= $users['userid']; ?>'); return false;"

That being said, using inline event handlers is a very outdated method which should be avoided possible. Use unobtrusive event handlers instead. You can provide arguments to that event handler through data attributes, something like this:

$('.btn').click(function() {
  $.ajax({
    url: "includes/viewUser.php",
    method: "POST",
    data: {
      "id": $(this).data('userid')
    },
    success: function(data) {
      $('body').append(data);
      $('#viewUserModal').modal({
        backdrop: 'static',
        keyboard: false,
        show: true
      });
    }
  });
});

<button type="button" class="btn btn-xs btn-default" data-userid="<?= $users['userid']; ?>">
  <span class="glyphicon glyphicon-eye-open"></span>
</button>

No problem glad to help – Rory McCrossan Sep 06 '18 at 20:29 — Rory McCrossan, Sep 06 '18 at 20:29

Onclick event not opening Bootstrap modal

2 Answers2