Error Calling Jquery function

Question

I have the following button:

<button class="btn btn-default details" data-id="@fornecedores.Codigo"><i class="glyphicon glyphicon-file"></i></button>

On the same page I have the following script:

$(document).ready(function () {
    $(".details").click(function () {
        var id = $(this).attr("data-id");
        $("#modal").load("Detalhes?id=" + id, function () {
            $("modal").modal('show');
        })
    });
})

When I give Click look at the message that appears:

This example I took this link: http://www.linhadecodigo.com.br/artigo/3686/aspnet-mvc-e-bootstrap-exibindo-views-modais.aspx

Answer 1

To run you need to give the include do js twitter bootstrap 3.

As you are using Asp . Net MVC, you can use bundle, in the archive BundleConfig.cs you set up like this:

bundles.Add(new ScriptBundle("~/bundles/bootstrapjs").Include(
    "~/Scripts/bootstrap.min.js"));

bundles.Add(new StyleBundle("~/Content/bootstrapcss").Include(
    "~/Content/bootstrap.min.css",
    "~/Content/bootstrap-responsive.min.css"));

Then in your html you call the created Bundles like this:

@Styles.Render("~/Content/bootstrapcss")
@Scripts.Render("~/bundles/bootstrapjs")

Remembering that the files of css and js of bootstrap should be in the correct folders, you can put them manually or use the NuGet.

Or you can wear it like this:

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js" integrity="sha256-Sk3nkD6mLTMOF0EOpNtsIry+s1CsaqQC1rVLTAy+0yc= sha512-K1qjQ+NcF2TYO/eI3M6v8EiNYZfA95pQumfvcVrTHtwQVDG+aHRqLi/ETn2uB+1JqwYqVG3LIvdm9lj6imS/pQ==" crossorigin="anonymous"></script>

Answer 2

The console says that the function was not defined because modal() is not a native function of Jquery, but Bootstrap.js..

So, if you don’t have the bootstrap.js file being called a script tag, the function won’t exist.

Answer 3

include the bootstrap file, without instantiating it it n recognizes, if there is conflict because of other libraries, do not forget to use the noConflict() of jQuery.