Twitter Bootstrap Question posted in

Twitter bootstrap – Bootstrap & WordPress – Nothing happens

So I’m trying to use a Bootstrap Modal, and I want it to appear after a click (onclick method).

Right now I have this

    $(document).ready(function(){
      
       $("#cancelPObtn").on("click", function(){ $("#error-dialog").modal();});
          
    });
<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<link rel="stylesheet" type="text/css" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.0.4/css/bootstrap-combined.min.css">
<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.0.4/js/bootstrap.min.js"></script>


<!-- BELOW ON MY WORDPRESS POST   -->
<a href="#" class="btn btn-danger" id="cancelPObtn" data-toggle="modal" href="#error-dialog">Yes, cancel it</a>
 <div class="modal hide fade" id="error-dialog">
   <div class="modal-header">
        <a class="close" data-dismiss="modal">x</a>
        <h3>Cancel Purchase Order?</h3>
   </div>
   <div class="modal-body">
   </div>
   <div class="modal-footer">
       <a href="#" class="btn btn-danger btn-modal btn-cancel"  data-dismiss="modal">Yes, cancel it</a>
       <a href="#" class="btn" data-dismiss="modal">Nevermind</a>
   </div>
 </div>
<!-- I HAVE THE JAVASCRIPT ON MY POST TOO, USING <script type="text/javascript"> -->

So, it appears to be working, everywhere, but on my WordPress post I can’t make it work! I’ve added the JS + CSS Files from Bootstrap on my header.php

What could be the issue here?

Thank you!

Tags:

2

Answers


  1. 0

    You should read up on enqueuing scripts and styles in WordPress. WordPress has it’s own way of including the script files and the stylesheets that you should familiarize yourself with. A lot of times, what ends up happening is either the files aren’t included correctly, or in the wrong order, or without the dependencies they might need. Adding the links directly to header.php is strongly discouraged.

    Login or Signup to reply.
  2. 0

    In addition to using wp_enqueue_script as recommended above, I would ensure you’re writing non-conflicting jQuery, as WordPress plugins sometimes come bundled with their own JavaScript libraries, which can cause issues.

    See below:

    <script type="text/javascript">
  jQuery(function($) {
    $('#cancelPObtn').click(function() {
      $('#error-dialog').modal();
    });
  }
</script>

    Also, WordPress is probably calling its own instance of jQuery, so you can use window.jQuery to test before including your own, like this:

    <script type="text/javascript">
  window.jQuery || document.write('<script src="https://code.jquery.com/jquery-1.7.2.min.js"></script>');
</script>

    Resources:

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search