Pass Values to Bootstrap Modal JavaScript and PHP

Question

I have tried to find this out here and not found what I was looking for.

The Goal: After a process has completed, to display a Bootstrap Modal that notifies the user it is complete (and/or that the admin may need to authorize something, for example, a comment may need to be authorized ...).

I can output a JavaScript script (sounds redundant as I type that) that will open the modal, but I want to pass text to the modal so I can have a reusable dialog. Here's the basic code I am working with:

The modal form:

<!-- language: lang-html -->

            <!-- meant to be an alert dialog -->
            <div id="myAlert" class="modal fade" tabindex="-1" role="dialog">
               <div class="modal-dialog modal-lg" role="document">
                  <div class="modal-content">
                     <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                        <h3 class="modal-title" id="descModalLabel"></h3>
                     </div> <!-- / modal-header -->
                     <div class="modal-body">
                        <!-- some text will be inserted here -->
                     </div><!-- / modal-body -->
                     <div class="modal-footer" -->
                        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                     </div><!-- / modal-footer -->
                  </div><!-- / modal-content -->
               </div><!-- /modal-dialog -->
            </div> <!--/ modal -->
            <!-- end of modal form -->

<!-- end snippet -->

The JavaScript to open the form:



// for the myAlert modal:
      // code to open the modal with the caption and description:
      $('#myAlert').on('show.bs.modal', function (event)
      {
         var modal = $(this);
         // need to get these values passed somehow
         var caption = "Test";
         var description = "Test Test Test";
         modal.find('.modal-title').text( caption );
         modal.find('.modal-body').append( '<strong>Description:</strong> ' + description );
      });
      
      // when modal closes, clear out the body:
      $('#myAlert').on('hidden.bs.modal', function ()
      {
          $(this).find(".modal-body").text('');
      });

The PHP that outputs the script that actually opens it:



  echo '<script>';
  // how do I pass the variables???
  echo '$("#myAlert").modal("show")';
  echo '</script>';

I would like to be able to pass the caption and description values to the form, but cannot figure it out. I have a version that works with a button based heavily on the Bootstrap site, but I cannot figure this one out. Thanks in advance!

Gynteniuxas · Accepted Answer · 2016-10-11 17:04:33Z

1

There are probably better solutions out there but this one works too as I have tested already. It requires to take 3 steps:

You need to declare your variables you want to pass to JavaScript above all events and functions (make them global).

For example:

var global_caption = "Some default caption";
var global_description = "Some default description";

// All scripts now go here

In your modal you assign local variables from global variables (or use global variables directly) for some events, for example:

This will show basically the same thing as in your case so far:

$('#myAlert').on('show.bs.modal', function (event)
      {
         var modal = $(this);
         var caption = global_caption;
         var description = global_description;
         modal.find('.modal-title').text( caption );
         modal.find('.modal-body').append( '<strong>Description:</strong> ' + description );
      });

With echo you assign new values to global variables and summon the event again.

Declaration can go as simply as:

echo '<script>';
echo 'global_caption = "This is a new caption"';
echo 'global_description = "This is a new description"';
echo '$("#myAlert").modal("show")';
echo '</script>';

answered Oct 11, 2016 at 17:04

Gynteniuxas

7,09918 gold badges41 silver badges59 bronze badges

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

8 Comments

Ken Mayer Over a year ago

I see what you're saying, but I am not getting it to work. I may have typo-ed something, and am going back over it. To test the values in the php part of the code:

Ken Mayer Over a year ago

Oops hit return too soon: echo '<script>document.write( global_caption + "<br>" )</script>'; echo '<script>document.write( global_message + "<br>" )</script>'; echo '<script>'; // how do I pass the variables??? echo 'global_caption = "Success!"'; echo 'global_message = "It worked! Test Testie Test"'; echo '$("#myAlert").modal("show")'; echo '</script>'; echo '<script>document.write( global_caption + "<br>" )</script>'; echo '<script>document.write( global_message + "<br>" )</script>'; Same values.

Gynteniuxas Over a year ago

Can you paste this part somewhere else? It's hard to read for me to see where's the problem. :)

Ken Mayer Over a year ago

Yea, the formatting got hosed. It turns out I left out semicolons in the echo'ed assignments of values inside the quotes ... I just noticed that there were none, and so added them and the code ran with the values I want to see. Thank you. I have something I can work with. Am still interested to see if anyone else has a different approach, but this will help.

Gynteniuxas Over a year ago

Well, I'm glad I could help. Could you mark my answer as accepted? That would help me a lot (until someone else gives better answer). Thanks!

|

Collectives™ on Stack Overflow

Pass Values to Bootstrap Modal JavaScript and PHP

1 Answer 1

8 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

8 Comments

Your Answer

Sign up or log in

Post as a guest

Related