CODEWITHSUNDEEP
javascriptjquerytwitter-bootstrap
Emilio Venegas
Emilio Venegas

Reputation: 556

jQuery functions not working when called on event

I have a page using jQuery and Bootstrap. Everything works fine, but for some reason, when I call a function on an event the console says $(...).function is not a function. For example, if I have this: 

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

It works fine, and the modal shows as soon as you load the page. However, if I try to call it like this:

<script>
    $("#myTrigger").click(function(e){
        e.preventDefault();
        $("#myModal").modal('show');
    });
</script>

It doesn't work and the console gives this error:

$(...).modal is not a function

Any ideas?

EDIT:

<script>
    $(document).ready(function(){
        $("#myModal").modal('show');
    });
</script>

works fine, but again,

<script>
    $(document).ready(function(){
        $("#myTrigger").click(function(e){
            e.preventDefault();
            alert("test); // Does alert
            $("#myModal").modal('show'); // Doesn't work
        });
    });
</script>

...doesn't. Since the alert worked, it's safe to say that the trigger does exist and the click event is being called properly. I'm using a couple other frameworks, a WYSIWYG editor and uploadify. Could this be a conflict error? I didn't think so at first since both cases are being tried right after each other, so if there was a conflict it wouldn't work on either, right?

UPDATE:

Looks like it was a pretty darn weird conflict issue. I tried the following:

var bootstrapModal = $.fn.modal.noConflict();
$.fn.bModal = bootstrapModal; // established outside the click event

$("#myTrigger").click(function(e){
    e.preventDefault();
    $("#myModal").bModal('show'); // doesn't work
});

And I still got the same issue. However, establishing $.fn.bModal inside the click event, as so:

var bootstrapModal = $.fn.modal.noConflict();

$("#myTrigger").click(function(e){
    e.preventDefault();
    $.fn.bModal = bootstrapModal; // established inside the click event
    $("#myModal").bModal('show'); // works fine
});

Worked. Still can't wrap my head around why this happened and why it worked on $(document).ready() but not on $('#trigger').click(), maybe the specific way Chrome deals with conflicts was also part of it. Anyway, this will do. Thanks to everyone who helped.

Upvotes: 1

Views: 1592

Answers (7)

user6748331
user6748331

Reputation:

Tested this copy/paste demo from getbootstrap.com. Everything works. You must have problem with conflict. IMO jquery or bootstrap script is colliding with other scripts.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="css/bootstrap.min.css" rel="stylesheet">
  </head>
  <body>
    <a href="#" class="btn btn-primary btn-lg" id="myTrigger">
      Launch demo modal
    </a>
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
      <div class="modal-dialog" 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>
            <h4 class="modal-title" id="myModalLabel">Modal title</h4>
          </div>
          <div class="modal-body">
            ...
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            <button type="button" class="btn btn-primary">Save changes</button>
          </div>
        </div>
      </div>
    </div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script>
        $(document).ready(function(){
            $("#myTrigger").click(function(e){
                e.preventDefault();
                $("#myModal").modal('show'); // Does WORK
            });
        });
    </script>
  </body>
</html>

Upvotes: 0

DaniDev
DaniDev

Reputation: 2631

you have an error (missing quotation ) in you alert code which is preventing the Modal show try this:

<script>
    $(document).ready(function(){
        $("#myTrigger").click(function(e){
            e.preventDefault();
            alert("test"); // Does alert
            $("#myModal").modal('show'); // should work
        });
    });
</script>

Upvotes: 0

binpy
binpy

Reputation: 4194

I already tried your snippet code, and then i found the same problem $(...).modal is not a function.. so why?

one reason of it because the jquery isn't placed before source of bootstrap.

This is wrong:

<script src="/static/js/bootstrap.min.js"></script>
<script src="/static/js/jquery.min.js"></script>

This is correct:

<script src="/static/js/jquery.min.js"></script>
<script src="/static/js/bootstrap.min.js"></script>

See this demo: https://jsfiddle.net/agaust/fmyoc5zx/

But, if talking about the third party plugin, maybe can handle with jQuery.noConflict

Upvotes: 1

RWAM
RWAM

Reputation: 7018

I think there is a script which override your $ function with plain jquery. I had a similiar issue and the problem was a third party plugin with an included jquery library. Each custom jquery code works fine, but plugin calls leads to a javascript error. Have a look at your third party stuff and the order of your script tags.

Upvotes: 0

Roger RV
Roger RV

Reputation: 134

I think that the problem is that the function is called when you enter to the page but the document it's not loaded yet. So try this:

$(document).ready(function(){                          
$("#myTrigger").click(function(e){
  e.preventDefault();
  $("#myModal").modal('show');
});
}

Another way to do it is to set onClick="functionname()" in your HTML tag with ID myTrigger. And then declare the function like: 

function functionname()
{
 //Code
}

And you don't need $(document).ready();

You can see in this link the same problem: jquery - is not a function error

Upvotes: 0

user6748331
user6748331

Reputation:

Its really odd... Try it w/o preventDefault() fn. Like this:

<script>
    $("#myTrigger").click(function(){
        $("#myModal").modal('show');
        return false;
    });
</script>

Upvotes: 0

Tim Huijgen
Tim Huijgen

Reputation: 11

Did you try wrapping the code in an 

$(document).ready(function(){
// your code
});

Upvotes: 1

Related Questions