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>
View Data
<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">×</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?
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.
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>
Related
i just get into a small problem.
i tried to include iframe inside and also outside of div code but nothing show
adding like frameborder="0",etc didn't work either
then i tried on another .html file to make sure the iframe is good and it's showing like usually.
so why the iframe won't opened the src file, did i do something wrong ?.
heres my code (the problematic one):
<html>
<head>
<title>Buat.in</title>
</head>
<body class="container">
<div>
<div class="additional-ui">
</div>
<div>
<iframe src="backgroundui.html">
</iframe>
</div>
<div class="ui-bttnmenu">
<ul>
<li>Tentang
</li>
<li>Daftar Desain
</li>
<li>Lokasi
</li>
<li>Hubungi
</li>
</ul>
</div>
<footer class="foot-ui">
<p>Designed & Written by :</p>
and also i haven't applying the separate style file here, the class="" will be linked to my style later, i test it on firefox 85.0.1 ubuntu.
(Edit) heres the additional info for backgroundui.html:
<html>
<body class="secondary-ui-container">
<h1>Buat.in</h1>
<p>Your "trusted designer"</p>
</body>
</html>
fun fact theres something happened, when i run iframe inside the background.html (supposed to be the ui) the iframe works normally else on the main page.
or should i rebuild all from zero again ?.
Firefox has recently implemented a security feature which does not allow cross tab tracking which is the fundamental of iFrame. Previously, this feature only prevented only https and ssl certified sites.
You may change this behavior in your own Firefox installation by typing about:config in the address bar and setting security.mixed_content.block_active_content to false.
Here are some more docs about x-frame-options:
https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/X-Frame-Options
When I uploaded the html & css parts into webhost, on my browser (Google Chrome) didn't show all of the page, so I deleted cache, media, everything.
Tried to enter again on the website, still wasn't loaded all of the page.
I enter to website by Mozilla, page was there, full loaded.
Asked my friend to enter by chrome to my website, page was full loaded
I tried to enter again by chrome to website, page wasn't full loaded.
Restarted my pc, tried again, page wasn't full loaded.
But why?
That's how only I see from Chrome
That's how everybody sees even if it's from Chrome or another browser
Missing code :
<div class="banner">
<div class="container">
<div class="banner-main">
<div class="col-md-6 banner-left">
<img src="images/ba.png" alt="" class="img-responsive">
</div>
<div class="col-md-4 blc-layer3-grids-3 simpleCart_shelfItem">
<span class="bann-heart"></span>
<h2>OFERTA SPECIALA ! </h2>
<hr> <br>
<h1>Reducere MAJORĂ LA <font style="color:red">UNIVERSAL GAIN FAST !</font></h1>
<hr>
<h2 class="item_price"><strike>$200.00</strike></h5>
<h2 class="item_price"><strong>$100.00</strong></h5>
</div>
<div class="clearfix"> </div>
</div>
</div>
</div>
I had some similar issue but then i realised that was due to cache.
How i found was, i re-uoloaded the file to another directory and everything worked fine. Sometimes chrome is a bad guy with cache issue.
Probably try deleting cache again or reload the page with shift pressed several times.
I am not able set the jumbotron background image from my external stylesheet file, although the styling works inline.
The stylesheet link can be found between the head tags and after the bootstrap link. I've been working on this a couple days with no success, can this be accomplished?
Here is what I have so far:
CSS:
.jumbotron {
background: url('img/rocket.png');
background-repeat:no-repeat;
background-color: #28b8f7;
color: #fff;
border-top: 1px solid #005D85;
border-bottom: 1px solid #005D85;
}
Here's the HTML:
<!-- Jumbotron & Call to Action -->
<div class="jumbotron">
<div class="container">
<h1 class="text-right"></h1>
<div class="col-sm-6 col-sm-offset-6">
<p class="pull-right"><br />
<a class="btn btn-default btn-lg pull-right jumbut" href="#signUpModal" role="button" data-toggle="modal"></a></p>
</div>
</div>
</div>
Although, this code seems to work as compared what I have already tried:
<!-- Jumbotron & Call to Action -->
<div class="jumbotron" style="background: url('img/rocket.png');background-repeat:no-repeat;background-color:#28b8f7;">
<div class="container">
<h1 class="text-right"></h1>
<div class="col-sm-6 col-sm-offset-6">
<p class="pull-right"><br />
<a class="btn btn-default btn-lg pull-right jumbut" href="#signUpModal" role="button" data-toggle="modal"></a></p>
</div>
</div>
</div>
From the looks of your last comment, it is simply a case of your url being wrong for the location you are currently in. From what I gather, this is your basic structure
-index.html
-css (folder)
--style.css
-img (folder)
--rocket.png
You have defined in your style.css the following property
background: url('img/rocket.png');
Since your css is in a folder called 'css' under root, when the browser looks at your url it will resolve it relative to its current location, so it will end up requesting http://yourgreatsite.com/css/img/rocket.png. This is why it worked when you put it directly in your html, since it was resolving the url relative to its currently location, which was the root, so it ended up requesting http://yourgreatsite.com/img/rocket.png.
It's very simple to solve, use dots to tell the browser to navigate 'up' out of your css folder and then into your image folder.
background: url('../img/rocket.png');
This would have been really obvious if you used your browsers built in developer tools. Most modern browsers have some Developer tools or 'Inspectors' available. Open one of these and you'll generally find a panel called 'Net' or 'Network' or 'Requests'. This will list every request your web page is making, internally or externally, and highlight any that have gone wrong. In this case it would have shown the request for your background image returning a '404 file not found' and showed you the url it was attempting to use. Learn to use the developer tools, they'll make your life a lot easier!
I am using
$('#result').load('http://.... #div');
to get the content of external website. I edited the domain whitelist for PhoneGap. It is working, if I set this page as the index page. However, it can't function well when it is set as the next page by submitting a form. Content from external website is not shown. How can I solve it? Thank you
It's better to use a javascript framework for this and still use a single index.html file. Best practice i have come across is to make an application not multiple html files. There are many frameworks to accomplish this the best documented is jquerymobile.
Using JQueryMobile in your javascript file you would check when page1 div loads using jquerymobile then run your .load code.
JQueryMobile has differen't events it looks out for..in this case before page initiates (pageinit) you want to run the load thing to grab content from the other website.
$( "#page1" ).live( "pageinit",function(){
$('#result').load('http://.... #div'); //place your load here..you can even $.post(function(){..}); to a php script to get exactly what you want.
});
Your html file inside the body tag will have this and of course you need to include jquery and jquerymobile js and css files in between your head tags.
<div data-role="page" id="home" data-theme="a">
<div data-role="header">
<h1>Welcome</h1>
</div>
<div data-role="content">
<ul data-role="listview">
<li class="btn_a">Page1</li>
<li class="btn_s">Page2</li>
<li class="btn_l">Page3</li>
</ul>
</div>
<div data-role="footer">
<h4>Your Brand</h4>
</div>
</div>
<div data-role="page" id="page1" data-theme="a">
<div data-role="header">
<h1>Page1 Heading</h1>
</div>
<div data-role="content">
<h1>This is Page1</h1>
<div id="#result"></div>
</div>
<div data-role="footer">
<h4>Your Brand</h4>
</div>
</div>
I'm trying to add a BootStrap modal to an already-existing page and I'm running into the following problem:
The modal displays exactly as I would expect it to, content in place looking quite beautiful but I have two problems. If I specify only class="modal" the modal displays by default when the page loads and will not close. If I include class="modal hide" then the modal does not display at page load but also doesn't close when the appropriate buttons are clicked.
I'm not making any big departures from the modals sample code on the Bootstrap site, any ideas what's going wrong?
Here's the button that's supposed to launch the modal:
<a class="btn" data-toggle="modal" href="#testmodal" >About</a>
And here's the modal itself:
<div class="modal hide fade in" id="testmodal">
<div class="modal-header">
<button class="close" data-dismiss="modal">x</button>
<h3>Modal Header</h3>
</div>
<div class="modal-body">
<p>body</p>
</div>
<div class="modal-footer">
Close
</div>
</div>
And for the record, yes I did remember to include bootstrap-modal.js and bootstrap-transition.js
Glad your problem is resolved.
Also if you want the default bootstrap functionality without customizing anything just use the big download button on the main page. This zip file contains a default bootstrap.min.js file that includes all the plugins (like the modal dialogs etc). If you use that one instead of all the seperate javascript files your page has to make less requests and load faster.
your close link should be like this:
<a class="close" data-dismiss="modal">×</a>
since, data-dismiss is a custom HTML5 data attribute. Here it is used to close the modal window.