CODEWITHSUNDEEP
phpjqueryhtmlmodal-dialog
gdim
gdim

Reputation: 213

Open modal onclick button when it is produced by PHP echo

I need your help here please.I have a button which is echoed by a PHP file to a HTML file.When the button is clicked then I want a modal to be displayed in the HTML file.Does anyone have any idea how I can make this work?

PHP echo:

'<div class="modal fade" id="modelWindow" tabindex="-1" role="dialog">
     <div class="modal-dialog" role="document">
         <div class="modal-content">
            <div class="modal-header">
       <button type="button" class="close" data-dismiss="modal">&times;</button>
       <h4 class="modal-title">'. $row['title'] .'</h4>
            </div>
           <div class="modal-body">
       <img class="img-rounded" src="'. $row['image'] .'" alt="MyImage" width="550px" height="240px">
       <p class="well">'. $row['description'] .'<p>

        </div>
       <div class="modal-footer">
   <button type="button" data-dismiss="modal" class="btn btn-default">Close</button>
           </div>
          </div>
         </div>
        </div>

           <div class="row top-buffer">
           <div class="col-md-6">
     <img class="img-rounded" src="'. $row['image'] .'" alt="MyImage" width="550px" height="240px">
       </div>
       <div class="col-md-6">
       <h3>'. $row['title'] .'</h3>
       <p class="well">'. $row['description'] .'<p>

       <div class="row top-buffer">

      <div class="col-md-5 col-md-offset-1">
      <img src="img/link_icon.png" class="img-rounded" width="20px" height="20px"/>
  <a href="www.link.com">LINK</a>
               </div>
         <div class="col-md-6">

  <button class="btn btn-primary pull-right" id="btn">More...</button>
                         </div>
                    </div>
               </div>
          </div>'

The first part is the modal box and the second is the HTML output

Script to triggger the modal:

<script type="text/javascript">

$("#btn").click(function() {
    $("#modelWindow").modal("show");
    });

</script>

Do I need to add the script to a external file and call it inside php or there is another way to do this?Thanks

Upvotes: 1

Views: 9202

Answers (3)

jerryurenaa
jerryurenaa

Reputation: 4704

there are many ways to trigger a modal if what you want to do is open a modal on an onclick even you can use something like this

echo '<button onclick="$('#showmymodal').modal('show')">click to open modal</button>';

if you want to do it on a php function use this and it will automatically trigger the modal when it is called!

echo "<script>$('#showmymodalnow').modal('show')</script>";

I personally like using the onclick event straight from HTML like this

<button onclick="$('#showmymodal').modal('show')">click to open modal</button>

I hope this helps someone

Upvotes: 0

BeetleJuice
BeetleJuice

Reputation: 40886

Javascript code cannot be triggered by PHP directly because PHP is run on the server, and Javascript is run in the client (eg the browser). So what we need is a way to tell the browser to execute the code.

What you can do though is include the <script> in the string you're building in PHP 

'<script type="text/javascript">
$("#btn").click(function() {
    $("#modelWindow").modal("show");
    });
</script>'

If jQuery and Bootstrap's Javascript have already been loaded when this is inserted into the DOM, the button click will work. If that doesn't work for you, try altering it to:

'<script type="text/javascript">
   window.onload = function(){
      $("#btn").click(function() {
          $("#modelWindow").modal("show");
          });
   }
</script>'

Putting the code in window.onload guarantees that the browser will run it only after all external scripts are loaded. From the Mozilla Developers Network:

The load event fires at the end of the document loading process. At this point, all of the objects in the document are in the DOM, and all the images, scripts, links and sub-frames have finished loading.

Upvotes: 1

Allan Empalmado
Allan Empalmado

Reputation: 943

you can include the script in the php echo just make sure that all dependencies like jQuery and Bootstrap.js is included on the page that will render the echoed data.

Upvotes: 1

Related Questions