Error Calling Jquery function

Asked

Viewed 761 times

3

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: inserir a descrição da imagem aqui

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

javascript jquery asp.net-mvc bootstrap-3

3 answers

3

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>

  • Includes so are not recommended, especially because ASP.NET MVC has its own minification mechanism. It is better to install by Nuget and use the BundleConfig to minify.

  • Thanks for the answer, it helped me a lot... I have one more problem related to this question. I have a <div> that loads my modal. When I give get my div is empty, but when the event occurs click to <div> receives the modal information, but it does not appear on the screen.

  • I improved the 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.

  • 1

    I think it would be interesting for you to give this example in code. What do you think?

  • J.C. ’s script is probably correct (at least as far as the modal call is concerned), the problem is that he was using a function from the bootstrap.js library without first having it included on his page. He could have done it by calling it a CDN, like maxcdn (<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"), of a local file (eg/js/bootstrap.min.js) or a package manager (Bower, Nuget, etc)

  • No, no, you don’t understand. I suggested you improve the answer. Don’t comment here. Put an example using the @section Scripts {}, and such.

0

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.

  • I’m sorry, but I don’t understand...

  • 1

    even if you have included the proper files. js, and if there are others, test the noConflict of jQuery, it may be, perhaps, some conflict : https://api.jquery.com/jquery.noconfliclict/

Browser other questions tagged javascript jquery asp.net-mvc bootstrap-3

You are not signed in. Login or sign up in order to post.