I am a bit new to web based material so please bear with me.
I have two html pages on my local drive. Test1.html and test2.html.
How could I take test2.html's contents and place them into test1.html's body?
I have looked into using w3IncludeHTML(); along with things like jQuery .load()
Test1.html
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</head>
<body>
<p id="text"></p>
<script type="text/javascript">
$('#text').load("test2.html");
</script>
</body>
</html>
Test2.html
<ul class='myclass'>
<li>test li one</li>
<li>test li two</li>
<li>test li three</li>
</ul>
As per our chat:
https://chat.stackoverflow.com/rooms/131606/discussion-between-brandon-and-fred-ii
You need to run this as an admin, since this is a permissions issue under Windows 7.
I would try the jquery/ajax approach:
Test1.html
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</head>
<body>
<p id="text"></p>
</body>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$.ajax({
type:'post',
url:'get_file_contents.php',
data:'file=Test2',
success:function(content){
var content = $.trim(content);
$('#text').append(content);
}
});
</script>
</html>
This is a sample of "get_file_contents.php"
<?php
$file=$_POST["file"].".html";
$file_content=file_get_contents($file);
echo $file_content;
?>
This example assumes that:
Your web server is running php
all 3 files (Test1.html, Test2.html and get_file_contents.php are in the same folder).
Hope that helped you
Your browser is preventing this from working because "security". If you open your browser's (JavaScript) Console, you'll no doubt find an error like this:
As you allude to in your comments, the only solution is to run a webserver locally and use an http[s]:// schema.
Related
I am trying to display content using javascript DOM but every time I run my solution I get a blank page. My HTML file is as follows:
<!DOCTYPE html>
<html>
<head>
<title>Radiant HQ</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</head>
<body>
<nav id="navigationcontent"></nav>
<script type="text/javascript" src="assets/js/radiant.js">
</script>
</body>
</html>
My js file looks this way:
#import ('../css/style.css');
document.getElementById("navigationcontent").innerHTML=`
<ul>
<li>Home </li>
<li>About Us </li>
<li>Research </li>
<li>Contacts </li>
</ul>`;
Your code works. There is one problem though.
It's getting stuck on the #import ('../css/style.css'); line. Try removing that whole line and include your CSS some other way. Typically this in done in the head of the document via html.
I have laravel layout
<html> //layout.blade.php
<head>
<script src="/js/jquery.js"></script>
<script src="/js/jquery-ui.js"></script>
</head>
<body>
#yield("content")
</body>
</html>
And my view
#extends("layout")
#section("content")
<ul class="test">
<li>1</li>
<li>2</li>
</ul>
<script>
$(function() {
$(".test").selectable();
});
</script>
#endsection
My browser console always show me $(...).selectable is not a function
But if i make same without layout or without anonymous function this works
I think location is changed, because of route.
So you'd better to specify the correct url of "public" folder.
Please change like this.
<html> //layout.blade.php
<head>
<script src="{{URL::Asset('/js/jquery.js')}}"></script>
<script src="{{URL::Asset('/js/jquery-ui.js')}}"></script>
</head>
<body>
#yield("content")
</body>
</html>
As mentioned in the above question this kind of problem usually arises when you try to pass an argument or route variable. So it would be wise to use asset() or secure_asset() while using your resources in the page.
<html> //layout.blade.php
<head>
<script src="{{ asset('js/jquery.js') }}"></script>
<script src="{{ asset('js/jquery-ui.js') }}"></script>
</head>
<body>
#yield("content")
</body>
</html>
Also please check the network section of your browser to make sure your resources are loading perfectly.
I was following a tutorial on Lynda, when they first introduce us to JSX they use the following example code:
<!DOCTYPE html>
<html>
<head>
<script src="https://unpkg.com/react#15.3.2/dist/react.js"></script>
<script src="https://unpkg.com/react-dom#15.3.2/dist/react-dom.js"></script>
<title>My First React File</title>
</head>
<body>
<div id='react-container'></div>
<script>
ReactDOM.render(<ul>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
</ul>,
document.getElementById('react-container'))
</script>
</body>
</html>
But this doesn't seem to be working for me. When I run the HTML file in the browser containing the code above, it gives me a blank page.
Could someone please point me to what I'm doing wrong here?
As per the React docs, you need to:
Tell the browser that the JSX is not JavaScript
Transpile the JSX to JavaScript
So add to the head:
<script src="https://unpkg.com/babel-core#5.8.38/browser.min.js"></script>
And change your JSX script tag to:
<script type="text/babel">
I have created a very simple test page below. When I open it in Internet Explorer and start tabbing through it then it tabs through all the links for the first time. However it doesn't tab through them for the second time. It just cycles through address bar, home button and current tab. It never goes to the links. It is happening because of including the javascript file snare.js but we need it on our page. Can anyone suggest any way to overcome it? I have tried several approaches but it doesn't work (copying file locally, trying to focus on links etc.).
Note - The problem is only happening in Internet Explorer.
<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE>Test Title</TITLE>
<script type='text/javascript' language='JavaScript' src='https://mpsnare.iesnare.com/snare.js'> </script>
</HEAD>
<BODY>
Test
Test2
Test3
</BODY>
</HTML>
Your javascript error i try remove script tag it woking.
hope this help!
You can trick javascript focus on link3 when blur link1 or use other trick my code i test working ok
<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE>Send Money - Set Up Payment - U.S. Bank</TITLE>
<script type='text/javascript' language='JavaScript' src='https://mpsnare.iesnare.com/snare.js'> </script>
</HEAD>
<BODY>
<div>
<a id="link1" onBlur="this.tabIndex=1" href="http://www.google.com">Test</a>
<a id="link2" onBlur="this.tabIndex=2" href="http://www.google.com" >Test2</a>
<a id="link3" onBlur="document.getElementById('link1').focus()" href="http://www.google.com">Test3</a>
</div>
</BODY>
</HTML>
I am new to jquery and can't even assume how deeply this issue can go.
When the external page (in this case shop.php) is loaded into index.php, by Jquery function .load(); , it falls apart. Many jquery commands and plugins, that are applied to the shop.php page, aren't working.
This confuses me, because some of js commands and plugins still works. Obviously i can't say that files are not loaded completely, just majority of them are not working.
When I paste shop.php content into index.php, it works perfect. Also when i add desired js code into shop.php (wrapped into script tag), it works as well.
I really don't expect from anyone to look deeply into this problem. I just wanna know if this is common issue, and is there simple explanation for it ?
If not i'll seek for some different approach.
My code:
index.php
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="stylesheet" type="text/css" href="css/jquery-ui-1.10.4.min.css">
<script type="text/javascript" src="js/jquery-1.10.2.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.10.4.min.js"></script>
<script type="text/javascript" src="js/shop.js"></script>
<script type="text/javascript" src="js/jquery.touchcarousel-1.2.js"></script>
<script type="text/javascript" src="js/jquery.themepunch.revolution.min.js"></script>
<script type="text/javascript" src="js/main.js"></script>
<script type="text/javascript" src="js/jquery.ddslick.js"></script>
<script type="text/javascript" src="js/top-navigation.js"></script>
</head>
<body>
<div id="top-bar"><?php include("top-bar.php"); ?></div>
<div id="pageWraper"><?php include("home.php"); ?></div>
</body>
</html>
top-bar.php
<div id="nav">
<ul id="navigationWraper">
<li>Home</li>
<li>About Us</li>
<li>Services</li>
<ul class="submenu">
<li>asdasd</li>
<li>asdasdas</li>
<li>derwer</li>
</ul>
<li>Shop</li>
<li>Portfolio</li>
<li>Gallery</li>
<li>Contact Us</li>
</ul>
</div>
shop.php
<div id="shop">
<div id="shopheader">
<div id="shopitemstop">
<div id="productcat">
<!-- bunch of code -->
</div>
</div>
</div>
</div>
Jquery:
$(document).ready(function(){
$(function() {
$("a.menuLink").on("click", function(e) {
e.preventDefault();
$("#pageWraper").load(this.href);
});
});
});
Hope this helps
Thanks,
Update :
I added:
<script type="text/javascript">
$(document).ready(function(){
$.getScript("js/shop.js");
$.getScript("js/jquery.touchcarousel-1.2.js");
$.getScript("js/main.js");
});
</script>
on top of shop.php page, dont know how right this is, but its working now.
Only thing that bugs me is if i remove jquery.touchcarousel-1.2.js from index.php head, page falls apart. It is like, only working if both of them are loaded ????
Question:
I really don't expect from anyone to look deeply into this problem. I
just wanna know if this is common issue, and is there simple
explanation for it ?
Answer:
Yes, it is a common problem for Ajax/dynamically loaded content.
The cause is: that most plugins work on the DOM as it exists when the plugin is run (unless they were specifically created to work with dynamic content).
The fixes include:
Find another plugin that is tolerant of dynamic content
Re-run the plugins
Strip out existing plugins and re-run the plugins (takes some effort to figure out some plugins)
Don't load content dynamically for plugins that do not support it