0

I am trying to load a modal with content from another HTML file and have used both of these similar questions as references: Getting bootstrap modal content from another HTML file

Getting Bootstrap's modal content from another page

In my case, the modal is in the home.html and I want to load another file contact.html as the content into the modal

My Code: Home.html

  <!-- NavBar -->
  <nav class="navbar navbar-expand-lg navbar-light bg-light">
    <div class="container-fluid">
      <span class="navbar-brand" href="#">Land Power</span>
      <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="navbar-nav mr-auto">
          <li class="nav-item active">
            <a class="nav-link" href="#">Home<span class="sr-only"></span></a>
          </li>
        </ul>
      </div>
      <div class="d-flex justify-content-end">
        <button class="signup btn btn-outline-success my-2 my-sm-0" type="button" href="contact.html"data-toggle="modal" data-target="#theModal">Sign Up</button>
      </div>
    </div>
  </nav>

  <!-- Modal -->
  <div class="modal fade" id="theModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
      <div class="modal-content">
      </div>
    </div>
  </div>

Contact.html

    <div class="container mt-5">
      <form action="email.php" method="post" target="iframe">
        <div class="form-group">
          <label for="nameInput1">Name</label>
          <input type="text" name="name" class="form-control" id="nameInput1" aria-describedby="nameHelp" placeholder="Enter name">
        </div>
        <div class="form-group">
          <label for="emailInput1">Email</label>
          <input type="text" name="email" class="form-control" id="emailInput1" placeholder="Enter Email">
        </div>
        <button type="submit" class="btn btn-primary">Submit</button>
      </form>
    </div>
    <iframe name="iframe" frameBorder="0" class="d-block mx-auto alert" role="alert"></iframe>

However I am having a similar issue to the one mentioned in the first post, where my modal is loading nothing and is just a thin white bar (empty modal). I am already running XAMPP as a server to localhost, and I don't see anything in my console as errors/warnings. Additionally, this solution is for BootStrap 3 which the doc says the remote href is now depreciated.

So if I follow the second post (second solution which is updated for BS4) however and attempt to add these scripts (2 different functions that I found through other searches, I have tried both independently):

  <script>
    // $('.signup').on('click', function(e){
    //   e.preventDefault();
    //   $('#theModal').modal('show').find('.modal-content').load($(this).attr('href'));
    // });

    // $('.signup').on('click',function(){
    //   $('#theModal').modal('show').find('.modal-content').load('contact.html',function(){
    //         $('#theModal').modal({show:true});
    //     });
    // });
  </script>

I suffer the same problem as one of the commenters where I get this: [Error] TypeError:'$('...').modal('...').find('...').load' is not a function.

Jeff
  • 63
  • 5

2 Answers2

1

If you are using jQuery to load the modal, then remove data-toggle and data-target from the signup button. Also, I'd recommend storing the link in a different attribute as maybe something is wonky about using href.

<button class="signup btn btn-outline-success my-2 my-sm-0" type="button" linkFile="contact.html">Sign Up</button>

  $('.signup').on('click', function(e){
    $('#theModal').modal('show').find('.modal-content').load($(this).attr('linkFile'));
  });

Another option is maybe try to split up the 'show'.. although this is likely not the issue... but i think worth a try

  $('.signup').on('click', function(e){
    $('#theModal').find('.modal-content').load($(this).attr('linkFile'));
    $('#theModal').modal('show')
  });
jet_24
  • 598
  • 3
  • 8
  • Neither suggestions worked out for me – Jeff Oct 18 '21 at 18:13
  • @Jeff Does home.html and contact.html reside in the same folder? – jet_24 Oct 18 '21 at 18:19
  • They do reside in the same directory, after some investigation, I found out, as per the error message suggests, that `$('#theModal').modal('show').find('.modal-content')` returns a div.modal-content object which does not support a .load() method, which makes me think I'm simply calling either the wrong method name or calling the .load() method in the wrong place. But since I can't find much documentation on how to load content into a modal, I don't know where is the correct place to load content – Jeff Oct 18 '21 at 18:24
  • @Jeff Hmm, if that;s the case then I would try to load into a hidden div like `$('#contact-hidden').load(...)`, and then append that to the modal content: `$('#theModal').modal('show').find('.modal-content').html($('#contact-hidden').html())` – jet_24 Oct 18 '21 at 18:33
  • That did not seem to work as well. It turns out, through more research, the script I was loading for jquery was the slim version which allegedly does not support ajax and therefore the .load() method was disabled. I have now swapped to the non-slim version, let me try again and get back to you – Jeff Oct 18 '21 at 19:02
  • PROBLEM SOLVED, it turned out I simply had the wrong jquery script sourced, and now even my original code works. Sorry for the inconvenience. – Jeff Oct 18 '21 at 19:04
  • @Jeff, OK cool... glad you got it figured out – jet_24 Oct 18 '21 at 19:04
0

I am just a coding scrub and had sourced the wrong version of jquery (slim, which does not support ajax calls like .load()). Make sure to use the full version of jquery!!!

Jeff
  • 63
  • 5