5

So basically what I'm trying to achieve is getting the content of a bootstrap modal from another html file instead of placing the modal content on the index html file (because I will need to use it multiple times).

I've tried searching high and low for an answer, and the closest that I've got is this: Getting Bootstrap's modal content from another page

However, I have a problem because it is not showing any of the modal content. It is just displaying a blank modal and I have no idea where I have gone wrong.

Below are my relevant codes: Main HTML:

<div class="panel panel-default">
    <div class="panel-heading">
        <i class="fa fa-bar-chart-o fa-fw"></i> Pre-IDA Test
    </div>

    <div class="panel-body">
        <div id="chartdiv" style="width: 100%; height: 400px;"></div>
        <script> pretest() </script>
        <a href="pretestmodal.html" class="btn btn-info" data-toggle="modal" data-target="#testing">View Data</a>
        <div id="testing" class="modal fade" role="dialog" tabindex="-1" aria-labelledby="myModalLabel" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                </div>
            </div>
        </div>
    </div>
</div>

Modal Content:

<html>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    </head>
    <body>

    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title">Details</h4>
    </div>
    <!-- /.modal-header -->
    <div class="modal-body">
        <div class="table-responsive">
            <table class="table table-bordered table-hover table-striped">
                <thead>
                    <tr>
                        <th>Year/Quarter</th>
                        <th>Indoor Quarterly Results</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>2016 Q1</td>
                        <td>Q1 (59/60)</td>                
                    </tr>
                    <tr>
                        <td>2016 Q2</td>
                        <td>Q2 (58/60)</td>     
                    </tr>
                </tbody>
            </table>
        </div>
        <!-- /.table-responsive -->
    </div>
    <!-- /.modal-body -->
    <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
    </div>
    <!-- /.modal-footer -->
    </body>
</html>

EDIT: After looking at the JavaScript Console, I've found an error which says:

jquery.min.js:4 XMLHttpRequest cannot load file:///E:/PORTAL/pages/pretestmodal.html. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.

Any idea how I can fix this?

Daniel Arthur
  • 456
  • 7
  • 17
nurul98
  • 117
  • 3
  • 10
  • Have you tried looking at the Javascript Console? You may find some errors there that may help to debug your code. To open the console on Chrome for example, press Ctrl (or Command) + Shift + i – Daniel Arthur May 24 '17 at 08:44
  • @DanielArthur thanks for telling me to try looking at the console! I've found some errors and I'll edit it in my OP – nurul98 May 24 '17 at 08:56

2 Answers2

0

You can try using w3-include. Just put the modal in the file you want to include

<!DOCTYPE html>
<html>
<script src="https://www.w3schools.com/lib/w3.js"></script>

<body>

<div w3-include-html="modal.html"></div> 

<script>
w3.includeHTML();
</script>

</body>
</html>
Carl Binalla
  • 5,393
  • 5
  • 27
  • 46
0

The problem you are experiencing is one that is very common when viewing website files using the file:/// protocol in Google Chrome.

If you take a look at the error message you are receiving in your log:

Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.

As a bit of insight, a cross origin request occurs when you try and access a resource (such as a Javascript file or CSS file for example) from another domain. When you view your website as a local file (i.e. using Chrome's file:/// protocol), the types of files that you can access are limited. This is called a same-origin policy. These policies exist to prevent attacks such as cross-site scripting (XSS) attacks affecting your computer.

The Mozilla Developer Network has an interesting article on same-origin policies for file:/// URIs, which explains your problem nicely:

For example, if you have a file foo.html which accesses another file bar.html and you have navigated to it from the file index.html, the load will succeed only if bar.html is either in the same directory as index.html or in a directory contained within the same directory as index.html

Applying this to the errors that you have experienced, presumably the file you are trying to access is in a different directory which is causing the cross origin request error.

It is worth noting that all of these problems are occurring because you are testing your website on your local file system. To fix this problem, you should try testing your website on a localhost server. This effectively means that you can test your website using either HTTP or HTTPS.

Some good solutions for creating a localhost server on your PC are:

  • XAMPP - A good solution for Windows, Mac and Linux
  • WampServer - Another solution for Windows only.

I am unfamiliar with WampServer so here are the instructions for XAMPP:

  • Go to the XAMPP website and download the appropriate installer. This will prompt you to choose an installation location. On Windows, this is usually C:\xampp.
  • Place all of your web files in the folder <xampp installation folder>\htdoc\
  • Open the XAMPP control panel and click Start under Apache
  • In your web browser, type localhost then press Enter
  • You should now be able to see your website without the problems you have described.
Daniel Arthur
  • 456
  • 7
  • 17
  • Wow thank you so much! I actually have xampp but I wasn't using it since I'm just working with HTML files. I was stuck with this for a few hours haha thank you! Just to expand my knowledge on this, would you mind telling me why it is a problem if I don't test it out on localhost? – nurul98 May 24 '17 at 09:13
  • @nurul98 I have updated my answer to give more information about why you came across the problem :) – Daniel Arthur May 24 '17 at 09:43
  • thank you so much!! i understand now! You're a life saver :) – nurul98 May 24 '17 at 14:15