External javascript call php for widget? - javascript

I want that users can include my php file and load content from file in some class.
For example, let say that user have this file:
user.html
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="myfile.php?width=100&height=100">
</script>
</head>
<body>
<div class="my-class">
</div>
</body>
</html>
and i want from myfile.php in .my-class show some content:
<?php
$width = $_GET['width'];
$height = $_GET['height'];
echo "$('.my-class').load('load_content.php?width=$width&height=$height')";
?>
and in load_content.php something simple for now:
<?php
echo $_GET['width'] + $_GET['height'];
?>
I can't find similar question anywhere, i tried something but only what i success is to document.write something on user.html from myfile.php, but when i tried load something or use innerHTML i get blank page.

I think you are trying to do an ajax call using a <script> tag. Here's what you should rather do, since you have jquery included on your page already:
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
</head>
<body>
<div class="my-class">
</div>
<script>
$(document).ready(function(){
$.get('load_content.php?width=100&height=100')
.done(function(resp){
$('.my-class').html(resp);
})
.fail(function(){
$('.my-class').html('<h2>There was an error loading content</h2>');
});
});
</script>
</body>
</html>

Related

Navigation bar in html5

I have a quick question. I'm wondering if it is possible to have a external html file with my navigation bar in it and have that be put in to all of my pages for my website. If so how do I do this? I have tried using these methods:
<script rel="import" src="navigation-bar.html"></script>
$("#nav-bar").load("navigation-bar.html")
but so far neither of them have worked... Do I have to use PHP and if I do how do I implement this.
please help.
I would use PHP to do this.
Here is the structure of how it would work.
<html>
<head>
<?php require('/directory/to/your/header.php'); ?>
</head>
<body>
...Your Content Here
</body>
</html>
In a separate header.php file you would include your navbar.
Header.php
<?php
echo '...enter your Navbar HTML code';
?>
Your file will have to have the extension .php and every time you write in php, you must start and end with
<?php
...enter your php code...
?>
You can mix php with html simply by writing the php into the HTML. Take for example the following href:
Your link Name
For more information please refer to :
http://php.net/manual/en/
put:
include("navigation-bar.html")
on top of your code.
This way you won't have to write the same navigation code in each webpage that you are going to host.
OR
you can try
<!DOCTYPE html>
<html>
<script src="http://www.w3schools.com/lib/w3data.js"></script>
<body>
<div w3-include-html="h1.html"></div>
<div w3-include-html="content.html"></div>
<script>
w3IncludeHTML();
</script>
</body>
</html>
Read more at: http://www.w3schools.com/howto/howto_html_include.asp
This is probably the simplest solution that should work even in user agents without scripting support.
For example, your page will look like this:
<html>
<body>
<iframe src="navbar.html" class="navbar" />
</body>
</html>

Static header layout in php

I want to know how to reload content without refresh the header. I created a small sample code below.
Header.php
<html>
<head>
</head>
<body>
<ul>
<li>Home</li>
<li>News</li>
</ul>
index.php
<?php
include("header.php");
?>
<div>
This is contents 1
</div>
</body>
</html>
index2.php
<?php
include("header.php");
?>
<div>
This is contents 2
</div>
</body>
</html>
I assume index and index2 page as content pages.
When I click home or news link, content pages loads, but header.php also refresh every time when click it.
I want to know, how to load content pages without get fresh header.php when click home links.
Any ideas to do it with php or javascripts?
You'll have to use AJAX for that kind of thing. What you're trying to do is essentially SPA (Single Page Application). While it is alright to build your own SPA using simple AJAX request to fetch the partial view, I'd suggest you to learn React or Angular.
To achieve the desired effect, you can use simple XHR in vanilla javascript or you can use jQuery's $.ajax, $.post, $.get. If you opt for jQuery, you'll be using this kind of approach heavily throughout your application.
Master.php file-
<html>
<head>
</head>
<body>
<?php include 'header.php'; ?>
<div id="content">
</div>
</body>
<script src="https://code.jquery.com/jquery-3.1.0.min.js" integrity="sha256-cCueBR6CsyA4/9szpPfrX3s49M9vUU5BgtiJj06wt/s=" crossorigin="anonymous"></script>
<script type="text/javascript" src="main.js">
</html>
content.php -
<div>
<p>Content 1 goes here</p>
</div>
header.php -
<div>
<ul class="navbar">
<li id="home">home</li>
<li id="content">content</li>
</ul>
</div>
main.js -
$( document ).ready(function() {
$.ajax({
url: "content.php",
cache: false
})
.done(function( html ) {
$( "#content" ).html( html );
});
});
This is only a general idea of how it would work. I have not tested the code, please don't expect it to run as it is. You'll want to use onclick listeners on links in your navbar to call AJAX and render the correct partial view.
MAJOR EDIT
Using #Mihir's code. I came up with a working sample.
index.php
<html>
<head>
</head>
<body>
<?php include 'header.php'; ?>
<div id="content">
</div>
</body>
<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
<script>
function go_to_home()
{
$('#content').load('home.php');
return false;
}
function go_to_news()
{
$('#content').load('news.php');
return false;
}
</script>
</html>
header.php
<div>
<ul class="navbar">
<button onclick="go_to_home();">home</li>
<button onclick="go_to_news()">News</li>
</ul>
</div>
home.php
<div>
<p>I am at home</p>
</div>
news.php
<div>
<p>This is my news</p>
</div>
This works now!! :D

External JavaScript Not Running, does not write to document

I'm trying to use an external JavaScript file in order to write "Hello World" into a HTML page.
However for some reason it does not work, I tried the same function and commands inline and it worked, but not when it's using an external JavaScript file. The part I commented out in the JS file was the previous method I was trying to use. Those lines of could worked when I ran the script from the header, and inline. Thanks
Html file:
<html>
<head>
</head>
<body>
<p id="external">
<script type="text/javascript" src="hello.js">
externalFunction();
</script>
</p>
<script type="txt/javascript" src="hello.js"></script>
</body>
</html>
JavaScript file
function externalFunction()
{
var t2 = document.getElementById("external");
t2.innerHTML = "Hello World!!!"
/*document.getElementById("external").innerHTML =
"Hello World!!!";*/
}
In general, you want to place your JavaScript at the bottom of the page because it will normally reduce the display time of your page. You can find libraries imported in the header sometimes, but either way you need to declare your functions before you use them.
http://www.w3schools.com/js/js_whereto.asp
index.html
<!DOCTYPE html>
<html>
<head>
<!-- You could put this here and it would still work -->
<!-- But it is good practice to put it at the bottom -->
<!--<script src="hello.js"></script>-->
</head>
<body>
<p id="external">Hi</p>
<!-- This first -->
<script src="hello.js"></script>
<!-- Then you can call it -->
<script type="text/javascript">
externalFunction();
</script>
</body>
</html>
hello.js
function externalFunction() {
document.getElementById("external").innerHTML = "Hello World!!!";
}
Plunker here.
Hope this helps.
Script tags with SRC values do not run the contents. Split it to two script tags. One for the include, one for the function call. And make sure the include is before the call.
use onload eventListener to make it simple
<script>
window.onload = function() {
externalFunction();
}
</script>
You're trying to call the function before it has been loaded.
Place the load script above the declaration:
<html>
<head>
<script type="txt/javascript" src="hello.js"></script>
</head>
<body>
<p id="external">
<script type="text/javascript">
externalFunction();
</script>
</p>
</body>
</html>
Also you have a typo:
<script type="txt/javascript" src="hello.js"></script>
Should be:
<script type="text/javascript" src="hello.js"></script>
The script type needs to be "text/javascript" not "txt/javascript".

how to get content of div in a html from another html

I have two html file
a.html
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
</head>
<body>
<div id="content">
hello every one
</div>
</body>
</html>
and another page
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
</head>
<body>
<div id="result">
</div>
<iframe id="ifr" src="http://example.com/a.html">
</iframe>
<script type="text/javascript">
divv = $('#ifr').contents().find('div#content').clone();
$('#result').html(divv.html());
</script>
</body>
</html>
In second one I try to get first html and get contet div in it.after that I put this value to result div .
but It's not work. How can I do that.
You do not need to use an iframe; you can use ajax to do that. It's very straight forward.
$(function() {
$('#result').load('a.html #content',function()
$(this).html( $('#content').html() );
});
});
EDIT
As evident from comments below, scope of question has changed. The two pages are on different domains without CORS. Therefore the above answer would not work.
In order to use ajax, you may want to create a server-side script to act as a proxy. Then you'll call that script on your server and it will fetch the a.html page for you.
I guess that could be the right way.
var ifr = document.querySelector('#ifr');
var html = ifr.contentDocument.querySelector('div#content').innerHTML;
$('#result').html(html);

Execute JS on page load without using jQuery

So I know that if you use jQuery you can use $(document).load(function(){}); so that any code you write into the function gets executed after the whole page has loaded, but is there a way of doing something similar if you don't use jQuery and just use JS?
For example...
<html>
<head>
<script type="text/javascript">
var box = document.getElementById('box');
alert(box);
</script>
</head>
<body>
<div id="box" style="width:200px; height:200px; background-color:#999;
margin:20px;"></div>
</body>
</html>
If I use this method the alert just says null. So is there a way of making the js code run once the page has loaded?
I use:
<script type="text/javascript">
window.onload = function(){
//do stuff here
};
</script>
This way you don't have to use any onload tags in your html.
The easiest way is to simply put your script at the end of the document, typically just before the closing body tag:
<html>
<head>
</head>
<body>
<div id="box" style="width:200px; height:200px; background-color:#999; margin:20px;"></div>
<script type="text/javascript">
var box = document.getElementById('box');
alert(box);
</script>
</body>
</html>
You can use a variety of methods to accomplish this.
The simplest, easiest method would be to simply add the script tag at the end of your body tag:
<html>
<head>
<title> Example </title>
</head>
<body>
<div>
<p>Hello</p>
</div>
<script type="text/javascript">
// Do stuff here
</script>
</body>
</html>
The way jQuery does it is something similar to:
window.onload = function() {
// Do stuff here
}
I usually just do it the second way, just in case.
To ensure cross-browser compatibility, crawl through the source of jQuery and find what they use.
You can use onload in your body tag.
<head>
<script type="text/javascript">
function doSomething() {
//your code here
}
</script>
</head>
<body onload="doSomething()">

Categories

Resources