I develop a Bitcoin wallet app with the landing page,
When I click the Balance button, I get the JSON in the console,
The respective code to show JSON was,
$("#balance").click(function () {
clearInterval(transactionsIntervalId);
clearInterval(balanceIntervalId);
balanceIntervalId = setInterval(function () {
var address = $('#address').find(":selected").text();
var explorers = require('bitcore-explorers');
var client = new explorers.Insight('testnet');
client.address(address, function (err, info) {
if (err) throw err;
info.wallet = info.address.toString();
setConsoleData('info:', info);
});
}, 1000);
});
I have to change it into,
$("#balance").click(function () {
clearInterval(transactionsIntervalId);
clearInterval(balanceIntervalId);
var address = $('#address').find(":selected").text();
var explorers = require('bitcore-explorers');
var client = new explorers.Insight('testnet');
window.open('balance.html#' + address);
});
So, it's basically open balance.html page in the new tab. The balance.html is provided below,
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title>Balance</title>
<!-- Bootstrap Core CSS -->
<link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!-- Theme CSS -->
<link href="css/main.css" rel="stylesheet">
<!-- Custom Fonts -->
<link href="vendor/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic" rel="stylesheet" type="text/css">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<!-- to clear the saved address use: localStorage.clear(); -->
<body id="page-top" class="index">
The current balance
</body>
</html>
There are balance and the wallet info in the JSON provided earlier and I would like to show them in the balance.html page. How to do that? I can provide more info if required.
$("#balance").click(function () {
clearInterval(transactionsIntervalId);
clearInterval(balanceIntervalId);
balanceIntervalId = setInterval(function () {
var address = $('#address').find(":selected").text();
var explorers = require('bitcore-explorers');
var client = new explorers.Insight('testnet');
client.address(address, function (err, info) {
if (err) throw err;
info.wallet = info.address.toString();
window.open('balance.html?balance ='+ info.balance +'&wallet ='+ info.wallet);
});
}, 1000);
});
balance.html
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title>Balance</title>
<!-- Bootstrap Core CSS -->
<link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!-- Theme CSS -->
<link href="css/main.css" rel="stylesheet">
<!-- Custom Fonts -->
<link href="vendor/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic" rel="stylesheet" type="text/css">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<!-- to clear the saved address use: localStorage.clear(); -->
<body id="page-top" class="index">
<div id="balance"></div>
<div id="wallet"></div>
</body>
<script>
function getQueryString(name) {
var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
var r = window.location.search.substr(1).match(reg);
if (r != null)
return unescape(r[2]);
return null;
}
balance = getQueryString('balance');
wallet = getQueryString('wallet');
document.getElementById('balance').innerHTML = balance;
document.getElementById('wallet').innerHTML = wallet;
</script>
I think you want to transfer the data from the current page to the new open page and display it?
Related
I am building a website with react and when I share the link on social media, it appears like the following:
How to have the website preload the content when sharing the links? Should I use something other than ReactDOMServer.renderToStaticMarkup, to render the data?
Server.js
app.get('/*',(req, res) => {
getStore(function(err, AppStore){
if(err){
return res.status(500).end('error')
}
match({ routes, location: req.url }, (error, redirectLocation, renderProps) => {
// Get React markup
const reactMarkup = ReactDOMServer.renderToStaticMarkup(<RoutingContext {...renderProps} />)
res.locals.reactMarkup = reactMarkup
if (error) {
res.status(500).send(error.message)
} else if (redirectLocation) {
res.redirect(302, redirectLocation.pathname + redirectLocation.search)
} else if (renderProps) {
// Success!
res.status(200).render('index.html')
} else {
res.status(404).render('index.html')
}
})
})
})
app.listen(app.get('port'))
index.html
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<!-- Bootstrap Core CSS -->
<link href="/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="/css/clean-blog.min.css" rel="stylesheet">
<link href="/css/cosmic-custom.css" rel="stylesheet">
<!-- Custom Fonts -->
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css"
rel="stylesheet" type="text/css">
<link href="//fonts.googleapis.com/css?family=Lora:400,700,400italic,700italic"
rel="stylesheet" type="text/css">
<link href="//fonts.googleapis.com/css?
family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800"
rel="stylesheet" type="text/css">
<title>{{ site.title }}{{# page }} | {{ page.title }}{{/ page }}</title>
</head>
<body class="hidden">
<div id="app">{{{ reactMarkup }}}</div>
<script src="/js/jquery.min.js"></script>
<script src="/js/bootstrap.min.js"></script>
<script src="/js/clean-blog.min.js"></script>
<script src="/dist/bundle.js"></script>
</body>
</html>
i have below link for specific product in products web site,how i can get the product specification data as object {}
https://www.virginmegastore.ae/en/gaming/playstation/playstation-games/sonic-forces---ps4/p/714792
i need get below info:
i used below metgod in the browser console, but it returned huge data:
$.get("https://www.virginmegastore.ae/en/gaming/playstation/playstation-games/sonic-forces---ps4/p/714792", function(data){
console.log(data);
});
and the output is:
<!DOCTYPE html>
<!--[if IE 8 ]> <html class="lt-ie9 ie8" lang="en"> <![endif]-->
<!--[if IE 9 ]> <html class="lt-ie10 ie9" lang="en"> <![endif]-->
<!--[if (gte IE 10)|!(IE)]><!--> <html lang="en"> <!--<![endif]-->
<head>
<title>
Sonic Forces - PS4 | Playstation Games | Playstation | Gaming | Virgin Megastore</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1">
<meta name="msvalidate.01" content="D1EAD7D5C2ED626960668C0EAD15CB6A" />
<meta name="keywords" content="Project Sonic 2017,Sonic Force,SF">
<meta name="description" content="When things look their darkest, even heroes need a helping hand. For the first time in the Sonic series, players can create their own original Hero Character, and cu">
<meta name="robots" content="index,follow">
<link rel="canonical" href="https://www.virginmegastore.ae/gaming/playstation/playstation-games/sonic-forces---ps4/p/714792"/>
<link rel="alternate" hreflang="en-AE" href="https://www.virginmegastore.ae/en"/>
<link rel="shortcut icon" type="image/x-icon" media="all" href="/_ui/responsive/theme-virgin/images/icons/favicon.ico" />
<link rel="apple-touch-icon" href="/_ui/responsive/theme-virgin/images/icons/apple-icon.png">
<link rel="apple-touch-icon" sizes="76x76" href="/_ui/responsive/theme-virgin/images/icons/apple-icon-76x76.png">
<link rel="apple-touch-icon" sizes="120x120" href="/_ui/responsive/theme-virgin/images/icons/apple-icon-120x120.png">
<link rel="apple-touch-icon" sizes="152x152" href="/_ui/responsive/theme-virgin/images/icons/apple-icon-152x152.png">
<link rel="stylesheet" type="text/css" media="all" href="/_ui/addons/assistedservicestorefront/responsive/common/css/assistedservicestorefront.css"/>
<link rel="stylesheet" type="text/css" media="all" href="/_ui/addons/assistedservicestorefront/responsive/common/css/storeFinder.css"/>
<link rel="stylesheet" type="text/css" media="all" href="/_ui/addons/assistedservicestorefront/responsive/common/css/customer360.css"/>
<link rel="stylesheet" type="text/css" media="all" href="/_ui/addons/payfortaddon/responsive/common/css/payfortaddon.css"/>
<link rel="stylesheet" type="text/css" media="all" href="//fonts.googleapis.com/css?family=Open+Sans:400,600,700,800"/>
<link rel="stylesheet" type="text/css" media="all" href="/_ui/responsive/theme-virgin/css/style.min.css?v=3.11.0"/>
<script type="text/javascript">
var mediator = (function() {
var subscribe = function(tracker, fn) {
if (!mediator.trackers[tracker])
{
mediator.trackers[tracker] = [];
}
mediator.trackers[tracker].push({context: this, callback: fn});
return this;
},
publish = function(tracker) {
if (!mediator.trackers[tracker])
{
return false;
}
var args = Array.prototype.slice.call(arguments, 1);
for (var i = 0, l = mediator.trackers[tracker].length; i < l; i++)
{
var subscription = mediator.trackers[tracker][i];
subscription.callback.apply(subscription.context, args);
}
return this;
},
publishAll = function() {
if (Object.keys(mediator.trackers).length === 0)
{
return false;
}
for (var tracker in mediator.trackers)
{
var args = [tracker].concat(Array.prototype.slice.call(arguments));
mediator.publish.apply(this, args);
}
return this;
};
return {
trackers: {},
publish: publish,
publishAll: publishAll,
subscribe: subscribe
}
})()
</script><!-- Google Tag Manager -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-NMB22J" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-NMB22J');</script>
<!-- End Google Tag Manager -->
<!-- Google Tag Manager Data Layer -->
<script type="text/javascript">
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
'ecommerce': {
'detail': {
'products': [{
'id': '714792',
'name': "Sonic Forces - PS4",
'brand': 'SEGA',
'price': '99.0',
'category': 'Playstation Games',
'variant':
''
}]
}
}
})
;
i just need below:
**'products': [{
'id': '714792',
'name': "Sonic Forces - PS4",
'brand': 'SEGA',
'price': '99.0',
'category': 'Playstation Games',
'variant':
''
}]**
Try to get window.dataLayer.push's json string by regular expression
Parse the json string by JSON.parse().
The json string uses single quote ' , should be transferred to double quote "
like this sample code, finally the productDetails is a complete js object.
$.get("https://www.virginmegastore.ae/en/gaming/playstation/playstation-games/sonic-forces---ps4/p/714792", function (data) {
var productDetailsJson = data.match(/window\.dataLayer\.push[^(]*\(([^)]*)\)/)[1];
var productDetails = JSON.parse(productDetailsJson.replace(/'/g, '"'));
console.log(productDetails);
});
I am trying to implement a Dropzone element to allow my user to easily drag and drop multiple files to upload into my web app. However, I don't really understand or know how to integrate the source code into my current solution. Can someone help me out on this?
Currently, I have a base.html to store all the frontend libraries/dependencies like bootstrap.min.css and jquery.min.js. Based on that understanding, i did a similar import for dropzone.js and dropzone.css. But I can't seemed to get it working.
"base.html" at root folder
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags-->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<!-- Required meta tags-->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/css/bootstrap-select.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/css/bootstrap-datepicker3.css" />
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/js/bootstrap-select.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/jquery-ui.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/js/bootstrap-datepicker.min.js" />
<link rel="stylesheet" type="text/css" href="includes/css/basic.css" />
<link rel="stylesheet" type="text/css" href="includes/css/dropzone.css" />
<script type="text/javascript" src="includes/js/dropzone.js" />
<script>
Dropzone.autoDiscover = false;
window.onload = function () {
var dropzoneOptions = {
dictDefaultMessage: 'Drop Here!',
paramName: "file",
maxFilesize: 2, // MB
addRemoveLinks: true,
init: function () {
this.on("success", function (file) {
console.log("success > " + file.name);
});
}
};
var uploader = document.querySelector('#uploader');
var newDropzone = new Dropzone(uploader, dropzoneOptions);
console.log("Loaded");
};
</script>
<!-- Font Awesome -->
<title>Market Data Terminal Analysis</title>
</head>
<body>
{% include 'includes/_navbar.html' %}
<div class="container-fluid">
{% block content %}{% endblock content%}
</div>
</body>
I stored my dropzone.js and dropzone.css in root/includes/js and root/includes/css respectively.
Expecting a dropzone element on my page, but still not appearing.
I recently discovered that my upload for an already existing php, Javascript, jQuery, bootstrap application stopped working. I have been trying to resolve this issue for over a week now. On the javascript console I am getting this error
: main.js:604 Uncaught TypeError: $(...).clipresize is not a function. Please any assistance will be of great assistance. I was thinking that the many references to various Jquery files could be causing this error or is it that all browsers have been recently upgraded not to support some snippets being referenced. I am confused.
The application codes are below:
add.php
<!DOCTYPE html>
<html lang="en" class="no-js">
<!--<![endif]--><!-- start: HEAD -->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>upload</title>
<!-- start: META -->
<meta charset="utf-8">
<!--[if IE]><meta http-equiv='X-UA-Compatible'
content="IE=edge,IE=9,IE=8,chrome=1" /><![endif]-->
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-
scalable=0, minimum-scale=1.0, maximum-scale=1.0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta content="" name="description">
<meta content="" name="author">
<!-- end: META -->
<!-- start: MAIN CSS -->
<link rel="stylesheet" href="../css/bootstrap.min.css">
<link rel="stylesheet" href="../css/font-awesome.min.css">
<link rel="stylesheet" href="../css/fonts/style.css">
<link rel="stylesheet" href="../css/main.css">
<link rel="stylesheet" href="../css/main-responsive.css">
<!--<link rel="stylesheet" href="../css/all.css">-->
<link rel="stylesheet" href="../css/bootstrap-colorpalette.css">
<link rel="stylesheet" href="../css/perfect-scrollbar.css">
<link rel="stylesheet" href="../css/theme_light.css" type="text/css"
id="skin_color">
<link rel="stylesheet" href="../css/print.css" type="text/css"
media="print">
<link href="../css/bootstrap-modal-bs3patch.css" rel="stylesheet"
type="text/css">
<link href="../css/bootstrap-modal.css" rel="stylesheet" type="text/css">
<link href="../css/validate.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="../css/datepicker.css">
<script src="https://code.jquery.com/jquery-3.1.1.js" integrity="sha256-
16cdPddA6VdVInumRGo6IbivbERE8p7CQR3HzTBuELA=" crossorigin="anonymous">
</script>
<script src="../js/jquery.min.js"></script>
<script src="../js/bootstrap.min.js"></script>
<script src="../js/bootstrap-hover-dropdown.min.js"></script>
<script src="../js/jquery.blockUI.js"></script>
<script src="../js/jquery.icheck.min.js"></script>
<script src="../js/jquery.mousewheel.js"></script>
<script src="../js/perfect-scrollbar.js"></script>
<script src="../js/less-1.5.0.min.js"></script>
<script src="../js/jquery.cookie.js"></script>
<script src="../js/bootstrap-colorpalette.js"></script>
<script src="../js/main.js"></script>
<script src="../js/index.js"></script>
<script src="../js/ajax.js"></script>
<script src="../js/bootstrap-modal.js"></script>
<script src="../js/bootstrap-modalmanager.js"></script>
<script src="../js/validations.js"></script>
<!-- end: MAIN JAVASCRIPTS -->
<!-- start: JAVASCRIPTS REQUIRED FOR THIS PAGE ONLY -->
<script src="../js/jquery.inputlimiter.1.3.1.min.js"></script>
<script src="../js/jquery.autosize.min.js"></script>
<script src="../js/select2.min.js"></script>
<script src="../js/jquery.maskedinput.js"></script>
<script src="../js/jquery.maskMoney.js"></script>
<script src="../js/form-elements.js"></script>
<!-- end: JAVASCRIPTS REQUIRED FOR THIS PAGE ONLY -->
<script>
jQuery(document).ready(function() {
Main.init();
FormElements.init();
});
</script>
<!-- end: JAVASCRIPTS REQUIRED FOR THIS PAGE ONLY -->
<script>
jQuery(document).ready(function() {
Main.init();
UIModals.init();
});
</script>
<!-- end: JAVASCRIPTS REQUIRED FOR THIS PAGE ONLY -->
<script>
jQuery(document).ready(function() {
Main.init();
Index.init();
});
</script>
.......
<script src="jquery-2.1.1.min.js" type="text/javascript"></script>
<script src="jquery.form.min.js" type="text/javascript"></script>
<script src="materialize.js" type="text/javascript"></script>
<link rel="stylesheet" href="materialize.css">
.................
<script type="text/javascript">
$(document).ready(function() {
$('#add_app').submit(function(e) {
var value = manage_form();
if(value==false)
{
return false;
}else{
e.preventDefault();
$('#loader-icon').show();
$(this).ajaxSubmit({
//target: '#targetLayer',
beforeSubmit: function() {
$("#progress-bar").width('0%');
},
uploadProgress: function (event, position, total,
percentComplete){
$("#progress-bar").width(percentComplete + '%');
$("#progress-bar").html('<div id="progress-status">' +
percentComplete +' %</div>')
},
success:function (data){
$('#modal1').openModal();
$('#loader-icon').hide();
$("#progress-bar").width('0%');
var res = data.split("~");
$('#mode7').html('<a href="add.php?flag=edit&id='+res[1]+'"
class="btn light-green modal-action modal-close waves-effect waves-
green btn-flat">Okay</a>');
document.getElementById('row_id').value = res[1];
document.getElementById('row1_id').value = res[1];
document.getElementById('package').value = res[0];
//document.getElementById('process_id').html = data;
//$('#mode7').html('<a href="add.php?
flag=edit&id='+res[1]+'" class="btn light-green modal-action modal-close
waves-effect waves-green btn-flat">Okay</a>');
},
resetForm: true
});
return false;
}
});
});
and the "main.js" script that throws the error is below:
//Window Resize Function
var runWIndowResize = function(func, threshold, execAsap) {
//wait until the user is done resizing the window, then execute
$(window).clipresize(function() {
runElementsPosition();
});
};
I finally was able to get my progress bar working and all the assets uploaded to the required folder by removing a mailing library called Php Mailer in my php submit script. The Php mailer library was failing in my application and I discovered that it was throwing up a blank or null output which was causing my application to break by not responding to the submit button. And broken libraries at times are the reason for which many formerly functioning web applications are said to stop functioning. The solution many times will be to update the required libraries or to remove them and find a way to tweak the application to work without those libraries. Thanks
I have this bootstrap template: http://wrapbootstrap.com/preview/WB0412697
I have stripped out my header section in the index.html and placed it into it's own file named header.html.
I have tried using the techniques JQuery techniques located on these stack overflow pages and have no been able to get the page to render the header.html within the index.html:
- Make header and footer files to be included in multiple html pages, Common Header / Footer with static HTML and Include another HTML file in a HTML file
<!DOCTYPE html>
<!--[if IE 8]> <html lang="en" class="ie8"> <![endif]-->
<!--[if IE 9]> <html lang="en" class="ie9"> <![endif]-->
<!--[if !IE]><!--> <html lang="en"> <!--<![endif]-->
<head>
<title> Welcome...</title>
<!-- Meta -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<!-- Favicon -->
<link rel="shortcut icon" href="favicon.ico">
<!-- CSS Global Compulsory -->
<link rel="stylesheet" href="assets/plugins/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="assets/css/style.css">
<!-- CSS Implementing Plugins -->
<link rel="stylesheet" href="assets/plugins/line-icons/line-icons.css">
<link rel="stylesheet" href="assets/plugins/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" href="assets/plugins/flexslider/flexslider.css">
<link rel="stylesheet" href="assets/plugins/parallax-slider/css/parallax-slider.css">
<!-- CSS Theme -->
<link rel="stylesheet" href="assets/css/theme-colors/default.css">
<!-- CSS Customization -->
<link rel="stylesheet" href="assets/css/custom.css">
</head>
<body>
<div class="wrapper">
<!--=== Header ===-->
<!--=== End Header ===-->
In between header and end header I have tried:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(function(){
$("#header").load("header.html");
});
</script>
along with the other examples within the aforementioned links as well as. I have also tried:
<!--#include virtual="insertthisfile.html" -->
which would have been really nice if it worked, as it seems very simple and
<?php include("filename.html"); ?>
but after changing the .html files to .php, my browsers only render plain text.
Any suggestions? What am I doing wrong?
you can make a php file like this. I expect you want the <head> staying the same as well
<?php
$header = file_get_contents('header.html');
$main = file_get_contents('main.html');
$footer = file_get_contents('footer.html');
echo $header;
echo $main;
echo $footer;
?>
then you can choose between different main content files depending on the $_GET using a if statement
<?php
$header = file_get_contents('header.html');
if($_GET['page'] == 'home'){
$main = file_get_contents('home.html');
}
else if ($_GET['page'] == 'contact'){
$main = file_get_contents('contact.html');
}
$footer = file_get_contents('footer.html');
echo $header;
echo $main;
echo $footer;
?>
First step : create div for footer and header
<!DOCTYPE html>
<!--[if IE 8]> <html lang="en" class="ie8"> <![endif]-->
<!--[if IE 9]> <html lang="en" class="ie9"> <![endif]-->
<!--[if !IE]><!--> <html lang="en"> <!--<![endif]-->
<head>
<title> Welcome...</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- Meta -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<!-- Favicon -->
<link rel="shortcut icon" href="favicon.ico">
<!-- CSS Global Compulsory -->
<link rel="stylesheet" href="assets/plugins/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="assets/css/style.css">
<!-- CSS Implementing Plugins -->
<link rel="stylesheet" href="assets/plugins/line-icons/line-icons.css">
<link rel="stylesheet" href="assets/plugins/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" href="assets/plugins/flexslider/flexslider.css">
<link rel="stylesheet" href="assets/plugins/parallax-slider/css/parallax-slider.css">
<!-- CSS Theme -->
<link rel="stylesheet" href="assets/css/theme-colors/default.css">
<!-- CSS Customization -->
<link rel="stylesheet" href="assets/css/custom.css">
<script type="text/javascript">
$(function () {
$.get("header.html", function (respons) {
var header1 = respons;
$("body").append(header1);
});
});
</script>
</head>
<body>
</body>
</html>
Use simply PHP code:
<?php
// Include file with header
include("./include/header.php");
// This bit always includs to the "center" Call page file via URL
if (isset($_GET['page'])){
$file=$_GET['page'];
$file2= dirname($_SERVER['SCRIPT_FILENAME'])."/".$file.".php";
if(file_exists($file2)){
if(substr_count($file,"../")>0){
echo "Warning!";
}elseif($file=="index" or $file=="/index"){
echo "Warning!";
}else{
include $file2;
}
}else{
include "./include/404.php";
}
}else{
include "uvod.php";
}
// Include file with footer
include("./include/footer.php");
?>