Hello everyone i need some help:
I have this:
A) Login.html
B) Documentation.html
C) Base.html
In the login i have a form with User and Password.
In Documentation, i have all the links to folders i include for exaple (Jquery,Bootraps, and more).
In Base I have a part of code what i need for include in all pages. The code i have is:
<div id="loading">
<div id="loading-msg" >
<img src="img/spin.png" class="rotating">
</div>
</div>
This is for do a logo rotating when a post it's waiting a answer from the server. With this (It's in Documentation.html):
<script type="">
$(document).ajaxStart(function(){
$("#loading").fadeIn( 500 );
});
$(document).ajaxStop(function(){
$("#loading").fadeOut( 100 );
});
</script>
Finally, my question it's: How i include the code in "Base.html" in "Login.html", because when i use: <link href="../incluye/base.html" rel="import"> on Head, not works
There may be a typo in your html import - instead of incluye perhaps it should be include.
You can also use the load() function in jQuery to include the file as follows:
<script type="text/javascript">
$(function(){
$("#target").load("Base.html");
});
</script>
Where #target is the id of the element into which you wish to load the content.
You can also change the file extension to PHP and easily include the other files by using <?PHP include 'yourfilename.php(extension)'
Related
I am trying to load an external HTML page (common navigation) into my current HTML page. I tried the load function but it is deprecated. Can you tell me another way to include it? I am not using any server.
Here's my code
<!DOCTYPE html>
<html>
<head>
<script src="ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$('#content').load(" nav.html ");
});
</script>
</head>
<body>
<div id="content "></div>
</body>
</html>
Try this
<script>
function loadPage(href) {
var xmlhttp = new XMLHttpRequest();
xmlhttp.open("GET", href, false);
xmlhttp.send();
return xmlhttp.responseText;
};
document.getElementById('content').innerHTML =
loadPage('your_html_file.html');
</script>
<div id="content">
</div>
Take both file pages in same directory then you can use simple button on link to use external file. for example
<button> External file </button>
Button is your choice it's just example for understanding you can simple use html link.
You should use the SSI-function.
There is several ways but this can solve your problem.
<!--#include virtual="PathToYourFile/YourFile.html" -->
This can be inserted into a <div> for further styling in CSS.
REMEMBER! Due to some limitations in html-doctypes you cannot inlude a .html-file into an .html-file. You have to use another format as .shtml where you can inlude your .html-files. You can include .html into your .shtmlfile. This was also what .shtml was originally created for.
This is because it is part of the XHTML (Dynamic XML HTML)...
To change a file
Your approach on the HTML is correct and also your JS. I include a lot of html-files containing texts there.
My approach is that when a page is loaded some text will be loaded with the <!--#include virtual="" --> inside a <div>. Below JS is used to change the content in the <div>. As Daniel Beck stated below: "...at least in Apache the server needs to be configured to check particular file extensions...".
You configure your file in your .htaccess-file. But ONLY do this if you know what you are doing.
Some (newer?) servers have a default setup of which you don't need to alter the .htaccess-file if you want to be able to include .html-files. At least you are able to include .html-files into .shtml-files.
I have included a Mimetype converter which tells the browser how it should read the file. For txt/html I have told the script that it should use the character encoding ISO-8859-1. Others as UTF-8 could also be used. This depends on your and your receivers native language.
Take into consideration to use the e.preventDefault();. With this i tells the browser NOT to see this as navigation link and will therefore only load the content in the <div>.
$(function() {
$('#ButtonsID').click(function(e) {
$('.DivClass').load('PathToFile/File.shtml');
e.preventDefault();
});
});
$.ajaxSetup({
'beforeSend': function(xhr) {
xhr.overrideMimeType('text/html; charset=ISO-8859-1');
}
});
This question is unique because the error
ReferenceError: $ is not defined comes from the fact that javascript is called in the header but the jQuery is looking inside the parent iframe and don't find it.
I got this page:
review.php
<?php include 'review_core.php'; ?>
<div id="primary" class="content-area col-md-9">
<main id="main" class="post-wrap" role="main">
<?php include 'review_index.php'; ?>
</main><!-- #main -->
</div>
<?php get_sidebar();
get_footer(); ?>
in review_core.php I got some php that fetch folders, images and other things from a S3 bucket, and in review_index.php I got some html and php to show up the data runned by review_core.php inside (a lot) some divs.
The get_sidebar(); just get the wordpress sidebar where I have an Iframe and here is where the problem is coming. In this iFrame is runned a php script (some_php_in_frame.php) that when ends should reload the #primary div, so basically it have to reload review_index.php into it. I'm tring to do it by adding this code at the end of some_php_in_frame.php:
some_php_in_frame.php
<?php [...] ?>
<script>
$(document).ready(function(){
parent.location.href=parent.location.href;
$('#primary').load('review_index.php');
})
</script>
but the refresh don't work and as results in debug I get:
ReferenceError: $ is not defined
Make sure that in the HTML of the page that contains the iFrames, as well as any page that needs to run jQuery in an iFrame imports the jquery library in the <head> section of your HTML document.
The error message on your JavaScript console indicates that this is missing.
For Example:
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
$() functions are part of the jQuery Library, and not javascript natively.
The solution was easy:
<script>
$(document).ready(function(){
parent.$(' #primary').load('review_index.php');
})
</script>
I know this stuff has been asked before...but I am a bit confused about this still. I have my index.html file and I have a script tag linking to my external JS file. If I only have that script tag the JS does nothing, but if I copy the JS and paste it into it's own script tag in the HTML header it works just fine. There's gotta be something I'm missing with Jquery.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="jquery-3.2.0.js"></script>
<link rel="stylesheet" href="FinalProjectCss.css">
<title>Dustin Naylor - Final Project</title>
<script src="FinalProjectJS.js"></script>
<script>
$(document).ready(function(){
$(".section").click(function(){
if($(this).next().is(":hidden")) {
$(this).next().slideDown("fast");
} else{
$(this).next().hide();
}
});
});
</script>
</head>
<body>
<span class="section">Click Me</span>
<div class = "hiddenDiv">
Oh hey there.
</div>
</body>
</html>
So the code in the last script tag that is Jquery stuff is exactly copied into a separate JS file named FinalProjectJS.js. In the current state this code is in it works as desired, but when I remove that chunk of code from the html file it doesn't work....Sorry for my nubishness, I'm rather new and any help would be great! thanks!
Can you write the contents of your jquery file: FinalProjectJS.js? The syntax for calling the external file seems to be correct. So I'm thinking it might be something about the path or the jquery external file contents itself. Make sure you don't include <script> tags on that file. Here's a sample.
Another thing, last time I've worked with jquery, I can't directly see it take effect when both my files are stored locally. It had to be stored in a server first, then accessed by my PC. Only then did my jquery took effect. A dev I worked with added some text to my Google Chrome's properties (target) so that even if my file is not stored in a server, I can see jquery take effect even if both my HTML and jquery files are stored locally.
...sorry, I'm not allowed to comment yet to clarify your post.
You must add the jQuery script tag before FinalProjectJS.js for the jQuery snippet to work.
<script src="https://code.jquery.com/jquery-3.2.1.js"
integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE="
crossorigin="anonymous">
I have recently discovered the new trend of including all .js script at the end of the page.
From what i have read so far seems pretty ok and doable with an exception.
The way I am working is using a template like:
<html>
<head>
<!-- tags, css's -->
</head>
<body>
<!-- header -->
<div id="wrapper">
<?php
include('pages/'.$page.'.php');
?>
</div>
<!-- footer -->
<!-- include all .js -->
</body>
</html>
Now, if I want to use this example on my page http://www.bootply.com/71401 , I would have to add the folowing code under my jquery inclusion.
$('.thumbnail').click(function(){
$('.modal-body').empty();
var title = $(this).parent('a').attr("title");
$('.modal-title').html(title);
$($(this).parents('div').html()).appendTo('.modal-body');
$('#myModal').modal({show:true});
});
But that would mean I either use that in every page - even if I do not have use for it, either generate it with php in the $page.'php' file and echoing it in the template file, after the js inclusion.
I am sure though, better methods exist and I don't want to start off by using a maybe compromised one.
Thanks!
Please avoid using inline scripts as they are not good maintainable and prevent the browser from caching them. Swap your inline scripts in external files.
Fore example you could put all your JavaScript in one file an check the presence of a specific element before initialize the whole code. E.g.:
$(document).ready(function(){
if($('.thumbnail').length) {
// your thumbnail code
}
});
A better way to execute "page specific" JavaScript is to work with a modular library like requirejs. You can modularize your scripts depending on their functionality (like thumbnails.js, gallery.js etc.) and then load the necessary script(s) depending e.g. on the existence of an element:
if($('.thumbnail').length) {
require(['ThumbnailScript'], function(ThumbnailScript){
ThumbnailScript.init();
});
}
The best way you can go is create a separate file for this code.
Let's name it app.js. Now you can include it under the jQuery inclusion.
<script type="text/javascript" src="app.js"></script>
This will prevent code repeat.
One more thing, pull all the code in $(document).ready(). Here is an example. So your app.js file will look like this:
$(document).ready(function(){
$('.thumbnail').click(function(){
$('.modal-body').empty();
var title = $(this).parent('a').attr("title");
$('.modal-title').html(title);
$($(this).parents('div').html()).appendTo('.modal-body');
$('#myModal').modal({show:true});
});
})
I have:
controller/reports_controller.rb
views/reports/index.html.erb
assets/reports.js
I have an image in index.html.erb:
<div class="main_mark">
<img src="/assets/welcome_main.png" alt="main" class="main_mark_image" />
</div>
I want to print an message to the screen (alert message) when the user presses the image. so I want to write a function in reports.js that print the message.
reports.js:
$(document).ready(function() {
$(".main_mark_image").click(function () {
alert("alon");
});
});
but I think I have to relate between the java script the the html.
any help appreciated!
When using an external script you need to tell your HTML file:
<script src="assets/reports.js"></script>
The above assumes that your 'assets' folder is in the same folder as your index. You also need to include the jQuery library. It's available for download or you can use Google's:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
Or, for jQuery UI:
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.0/jquery-ui.min.js"></script>
Hope this helps.
Try:
<img src="/assets/welcome_main.png" onclick="alert('alon');" alt="main" class="main_mark_image" />