1

I asked a question earlier today which in a nutshell asks when a user clicks a button on a page -- a pop up modal comes up, which should get a PHP variable value.

Since there is no GET or POST request when popup modal btn is clicked which means I can not get the variable value using above two options

tried the following:

`<a id="myid" data-id="<?php echo $userID ?>">link</a>
<script>
  $('#myid').data("id");
</script>`

Now I have the PHP $userID value in a javascript variable. Which leads me to my question what would be the most efficient way to retrieve the $userID variable and insert it into a php variable.

Additional Info

I found this question on SO but it is not really applicable to me.

Example Image of what im trying to achieve

enter image description here

LOOP GENERATED PHP LIST

$teacherClass = new TeacherSearch();
            $teachers = $teacherClass->showAllTeachers();
            if (is_array($teachers)) {
            foreach ($teachers as $teacher) {
                 $src = $teacher['userID'];
<div class="teacher-info">
                        <p class="teacherLabel">
                            NAME:
                            <?php
                            echo $teacher['name'];
                            ?>
                        </p>

                        <p class="teacherLabel">
                            HEADLINE:
                            <?php
                            echo $teacher['headline'];
                            ?>

                        <p class="teacherLabel">
                            LOCATION:
                            <?php
                            echo $teacher['location']
                            ?>
                        </p>
                       <!--BUTTON GOES HERE-->
 <a id="myid" data-id="<?php echo $teacher['userID'] ?>" data-toggle="modal" data-target="#myModal">Hire <?php echo $teacher['name'] ?></a>
                        }//foreach

Example IMG

enter image description here

Modal

<!-- Trigger the modal with a button -->
<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
    <div class="modal-dialog">

        <!-- Modal content-->
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 id="modalTitle" class="modal-title"></h4>
            </div>
            <div class="modal-body">
                Need to perform PHP here with $userID variable
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>

    </div>
</div>
16
  • 2
    use $('#myid').attr("data-id"); Commented Jul 25, 2017 at 15:01
  • @NanaPartykar How would I get that value into a PHP variable. Excuse me if Im being stupid here but know very little jscript Commented Jul 25, 2017 at 15:04
  • 2
    Only by making a new request to the server - so either AJAX, submitting a form, changing the URL via a link click or location.href ... so basically what that question you said was not applicable is about. Commented Jul 25, 2017 at 15:04
  • @Timothy: Please share your code. How you opening the model? Share that code too. Please Commented Jul 25, 2017 at 15:04
  • @NanaPartykar OK one min Commented Jul 25, 2017 at 15:05

1 Answer 1

4

First of all, remove id="myId" from <a></a>. ID must be unique. Use class.

First_Page.php

<?php
$teacherClass = new TeacherSearch();
$teachers = $teacherClass->showAllTeachers();
if (is_array($teachers)) {
  foreach ($teachers as $teacher) {
    $src = $teacher['userID'];
    ?>
    <div class="teacher-info">
      <p class="teacherLabel">
        NAME:<?php echo $teacher['name']; ?>
      </p>
      <p class="teacherLabel">
        HEADLINE:
        <?php echo $teacher['headline'];?>
      </p>
      <p class="teacherLabel">
        LOCATION: <?phpecho $teacher['location'];?>
      </p>
      <!--BUTTON GOES HERE-->
      <a class="openModal" data-id="<?php echo $teacher['userID'] ?>" data-toggle="modal" href="#myModal">
        Hire <?php echo $teacher['name']; ?>
      </a>
    </div>
  <?php }
}?>

Put below code in footer before end of </body> tag.

<div id="myModal" class="modal fade" role="dialog">
  <div class="modal-dialog">
    <div class="modal-content">

    </div>
  </div>
</div>

JS

<script>
  $('.openModal').click(function(){
      var id = $(this).attr('data-id');
      $.ajax({url:"modal_ajax.php?id="+id,cache:false,success:function(result){
          $(".modal-content").html(result);
      }});
  });
</script>

Create a new file modal_ajax.php.

[NOTE: Remember, this page name modal_ajax.php is used in script tag also. if you are planning to change the name of this page, change page name there in script tag too. Both are related.]

<div class="modal-header">
  <button type="button" class="close" data-dismiss="modal">&times;</button>
  <h4 id="modalTitle" class="modal-title"></h4>
</div>
<div class="modal-body">
  <?php echo "ID: ".$_GET['id'];?>
</div>
<div class="modal-footer">
  <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>

Already answered similar question. Please have a look Passing data via Modal Bootstrap and getting php variable?

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

4 Comments

Thank you so much mate, gimmie a couple of minutes to study up on the code and give it a test. Will give feedback soon
@TimothyCoetzee: No problem brother. Take your time. I'm leaving for now. Will be available after an hour. So, please comment if anything not working. Ok.
Worked wonders, THANK YOU SO MUCH. just a quick question if you dont mind. 1) $.ajax({url:"modal_ajax.php?id="+id,cache:false,success:function what is the reason for adding cache:false in ajax url? 2) There gets an html modal placed at bottom of page, yet you have a separate modal_ajax.php file, why...? Thanks again
This entire thing could have been done on single page using data-src instead of data-id

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.