Correct way to open HTML in Modal BootStrap

Question

Correct way to open HTML in Modal BootStrap

Navigation

#1 by (0 votes)

0

I have the following, I have 4 html files with different information that I need to show as necessary, I already have this done and it works but I do not know if it is the correct way or it can be improved, I appreciate your help

Index.php

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    </div>

    <div class="container">
        <div class="panel panel-primary">
          <div class="panel-heading">
            <h3 class="panel-title">Ventana Modal con Bootstrap</h3>
          </div>
          <div class="panel-body">
            <ul>
                <li><a href="javascript:void(0);" data-toggle="modal" data-target="#myModal" onclick="carga_ajax('12','myModal','ajax_1.html');">Modal 1</a></li>
                <li><a href="javascript:void(0);" data-toggle="modal" data-target="#myModal" onclick="carga_ajax('12','myModal','ajax_2.html');">Modal 2</a></li>
            </ul>
          </div>
        </div>
    </div>

Function

function carga_ajax(id,div,url){
$.post
(url, {id:id}, function(resp){
        $("#"+div+"").html(resp);
   }
 );
}

And this is the modal_info01.html file that will contain the information

<!-- Modal -->

  <div class="modal-dialog" role="document">
    <div class="modal-content">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
    <h4 class="modal-title" id="myModalLabel">Este es Modal 2</h4>
  </div>
  <div class="modal-body">
    ...
  </div>
  <div class="modal-footer">
    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
    <button type="button" class="btn btn-primary">Save changes</button>
  </div>
</div>

As I was saying ... this works if the query works .... it's the best way to do it or it can be improved

The only question I would ask you is why you should put this line in the index

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    </div>

javascript bootstrap modal

asked by Joe 25.07.2018 в 01:29

source

1 answer

send an image using ajax Delete / upload projects to git hub

score 0 · Answer 1

It would be interesting to know what version of bootstrap you are using. I'll assume you're using the latest version.

The proper way, in my opinion, having read the official documentation ( link ) is:

Configure the modal structure in HTML. Bootstrap expects your modal to have a certain structure.

At the end of your question, you mention that you have a question with the certain label in your index:

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
</div>

This label is the modal one. Without that label there is no modal, so if you do not put it, it does not load anything. This is so given that in the links you use to load the modal you point to it:

<a href="javascript:void(0);" data-toggle="modal" data-target="#myModal" onclick="carga_ajax('12','myModal','ajax_1.html');">Modal 1</a>
<a href="javascript:void(0);" data-toggle="modal" data-target="#myModal" onclick="carga_ajax('12','myModal','ajax_2.html');">Modal 2</a>

As you see, the data-target attribute takes the value "#myModal", which means that, once the bootstrap library performs its configuration task, those links will point to the element with id equal to "myModal" . The element with id equal to "myModal" is:

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
</div>

I see that the structure of the modal is loaded by AJAX. This, in my opinion, is a mistake. The structure (your modal dialog, header and body) must be included directly (in the HTML), loading it by AJAX could cause unexpected behavior when you change the version and, for that matter, change the order in which the events are triggered "click" of the links.

I will not go into whether the body of the modal (the data that you want to change) should be loaded by AJAX or not. It depends on the specific scenario.

In summary, that your modal should keep the structure and that, if you decide to load data by AJAX, load the title of the header and body of the modal ("This is Modal 2" and the content of the class tag "modal-body").

I hope I helped you. Greetings.