Calling modal by javascript

Asked

Viewed 10,307 times

-5

These are the files referring to boot and js. I inserted them in the Layout page

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

My modal

<div class="modal fade" id="myModal" tabindex="-1" role="dialog">
        <div class="modal-dialog">
            <!-- Modal content-->
            <div class="modal-content">
                <div class="modal-body">
                    <p>Esse procedimento pode levar alguns minutos. Por favor aguarde!</p>
                </div>
            </div>

        </div>
    </div>

My javascript

function abreModal() {
 $("#myModal").modal({
      show: true
    });
 }
setTimeout(abreModal, 1000);

My button to call Javascript function

@Html.ActionLink("Criar nova tabela de Markup", "Create", null, new { @class = "btn btn-azul wd-270", @onclick = "startLoading();abreModal();", @id = "novaTabela" })

is making this mistake:

Uncaught Typeerror: $(...). modal is not a Function at abreModal (Markup:439)

What is wrong?

javascript html twitter-bootstrap
  • 3

    When creating a question, try to detail it with important information, I suggest you read how to create a good question here in the community. So are you using the correct bootstrap modal? Which version are you actually using the bootstrap version? The function of this button, you just want it to display the modal is this?

  • Try to put data-load-url on your button with the @Html.ActionLink in it.

  • @Miyukii, and how I use javascript this, or don’t need

  • It would be in HTML itself, but only now that I saw that you want to take out the HTML button, so it kind of would be necessary to use @pnet

  • @pnet You have entered the js file concerning Bootstrap?

  • 1

    Manual on how NOT to ask questions. It seems to me to be a good topic for it to be read to avoid pergunats like this.

Show 1 more comment

2 answers

5


It’s all about reading the documentation.

function abreModal() {
  $("#myModal").modal({
    show: true
  });
}

setTimeout(abreModal, 1000);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />


<div id="myModal" class="modal" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <p>Modal body text goes here.</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-primary">Save changes</button>
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

  • 3

    @pnet So your example is not a good example. Make a [mcve].

  • 1

    @pnet But there is no way to reproduce the problem. By the answer I showed that just calling the function modal and passing the object the modal opens correctly. If this does not work for you it is because something else is interfering.

  • 1

    @pnet No, these are attributes that Bootstrap considers to make the button open the modal without you having to write the JS. To test, just do as I did in the answer: eliminate all noises. Create a simple modal (I copied from the documentation itself) and do the function as I did. If it doesn’t work, edit the question only with that code. If it works, the problem is elsewhere and we have no help.

  • @Andersoncarloswoss, I got it with this example. It was the order of the scripts on the layout page. But there’s one problem I can’t solve. When the page enters, it already shows the Modal and should only click the button. How do I solve this?

  • 5

    Reading the code you copied and pasted.

-3

I resolved it that way

<input type="hidden" id="md" data-toggle="modal" data-target="#myModal" />

Javascript function

function MostraModal() {
        $("#md").click();
    }

And the button

@Html.ActionLink("Criar nova tabela de Markup", "Create", null, new { @class = "btn btn-azul wd-270", @onclick = "startLoading();MostraModal();", @id = "novaTabela" })

I don’t know, I think there might be another solution without the need for hidden and I am still waiting for that solution, which in my opinion would be more elegant.

  • 1

    Considering your commenting, Just hiding the button doesn’t seem like a plausible solution.

  • @Andersoncarloswoss, I agree with you, so I didn’t close the question and still look for another solution, without the need for a Hidden. You are so right

Browser other questions tagged javascript html twitter-bootstrap

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