ajax jquery + bootstrap modal only works on second click

By : Alaor
Source: Stackoverflow.com
Question!

I have a bootstrap modal that I want to populate with data retrieved from an ASP.NET MVC 5 action.

The modal should be visible with the data from the action after the user clicks a button.

When the first click is made, nothing happens. After the second click, every click works like a charm.

I can't understand what is happening.

In Chrome tools, I can see the first click is generating an error with some generic text:

jquery-1.10.2.js:8157 Uncaught TypeError: Cannot read property 'methods' of undefined

The button:

<button id="addContaButton" class="btn btn-primary btn-sm pull-right"><span class="glyphicon glyphicon-plus" aria-hidden="true"></span> conta</button>  

The modal:

<div class="modal fade" id="addContaModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" data-url="@Url.Action("Create","Conta")">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                    <h4 class="modal-title" id="myModalLabel">Criar uma nova conta</h4>
                </div>
                <div class="modal-body" id="add-conta-modal-body">

                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Cancelar</button>
                    <button type="button" class="btn btn-primary">Criar conta</button>
                </div>
            </div>
        </div>
    </div>

The javascript:

$(document).ready(function () {
    $('#addContaButton').click(function () {
        var url = $('#addContaModal').data('url');

        $.ajax({
            url: url,
            success: function (data) {
                $('#add-conta-modal-body').html(data);
                $('#addContaModal').modal('show');
            },
            async: false,
            error: function (req, status, errorObj) {
                alert("Ocorreu um erro ao tentar criar uma conta. Por favor, entre em contato.");
            }

        });
    });

});

Edit: I found that the source of the problem is at another javascript I'm including to help with validation, but I can't see why it makes that only the first click fails.

The js is like this:

$(document).ready(function () {

    $.validator.methods.range = function (value, element, param) {
        var globalizedValue = value.replace(",", ".");
        return this.optional(element) || (globalizedValue >= param[0] && globalizedValue <= param[1]);
    }

    $.validator.methods.number = function (value, element) {
        return this.optional(element) || /^-?(?:\d+|\d{1,3}(?:[\s\.,]\d{3})+)(?:[\.,]\d+)?$/.test(value);
    };

});
By : Alaor


Answers

I was importing the jquery.validation file after a file with validation code using it.

By : Alaor


This video can help you solving your question :)
By: admin