Bootstrap Modal JS Uncaught TypeError：未定义不是函数

Question

I have a modal that I'm trying to call using javascript, but I get this error from the console when that code is being run:

Uncaught TypeError: undefined is not a function

I've had a look at similar issues, but none of them have worked for me. My header looks like this:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.7.0/underscore-min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>

The modal is to be filled in using AJAX using a button click. The html for the modal looks like this:

<div class="modal fade" id="edit" tabindex="-1" role="dialog" aria-labelledby="edit" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div id="slotedit"></div>

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

And the javascript looks like this:

function getEdit(slotID) {
    var xmlhttp = jQuery.noConflict();
    if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp=new XMLHttpRequest();
    }
    else {// code for IE6, IE5
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
    xmlhttp.onreadystatechange=function() {
        if (xmlhttp.readyState==4 && xmlhttp.status==200) {
            //Change table element
            document.getElementById("slotedit").innerHTML=xmlhttp.responseText;
            $('#edit').modal('show');
        }        
    }
    xmlhttp.open("POST","getEditData.php",true);
    xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
    xmlhttp.send("slotID=" + slotID);
}

It's stumped me a bit, but the order of the js script in the header seems to not change anything, and using the method to call the modal on another modal does't work either (suggesting the AJAX is OK).

Thanks

Edit: $('#edit')... doesn't fix it :(

Answer 1

I guess you are missing '$' before ('#edit') .

It should be $('#edit').modal('show');

Answer 2

Also, why not use jQuery's convenience $.ajax method, $.post , since you're using jquery anyway?

function getEdit(id) {
  $.post('getEditData.php', { slotID: id }, function(data) {
    $('#slotedit').html(data);
    $('#edit').modal('show');
  });
}

And, honestly, why worry about IE5 and IE6; IE6 has less than 1% usage, globally