Well, I've created a code to include a PHP page in a box and not only the normal include ('');
This is my code:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
</head>
<body>
<script>
$(function() {
var count = 1;
$('#append').click(function() {
if (count < 2) {
$('#parent').append('<div id="first' + count + '">text</div>');
$('#first1').load('../image/index.php');
count++;
}
});
});
</script>
<a id="append">Add DIV 1</a>
<div id="parent">
</div>
</body>
</html>
Now, I've noticed I could "load" a page in html, but all the php and javascript code is "out".
How do I do to have the "real" page inside another.
The PHP code is not returned since it is executed on the server before you get the HTML back from it.
In order to just retrieve it as plain text you will need to change the file you are trying to retrieve.
As far as how to load a page inside another page, you can use iframes for that.
Try this:
<script>
$(function(){
var count = 1;
$('#append').click(function(){
if (count <2){
$('#parent').append('<div id="first'+count+'">text</div>');
$.get('http://test.com/image/index.php',function(data){
$('#first1').html(data);
});
count++;
}
});
});
</script>
Related
I have 2 pages and the main page. the total 3 pages.
I want to access the first and second pages after changing the dropdown list.
I try this code by Jquery in my HTML called main.html.
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="https://code.jquery.com/jquery-git1.min.js"></script>
<script>
$(document).on('change','.fx',function(){
document.getElementById('content').src = "firstpage.html";
document.getElementById('content').style.display = "block";
});
</script>
<style>
iframe{
height:700px;
width:700px;
display:none;
}
</style>
</head>
<body>
<select name="fx" class="fx">
<option value="empty"></option>
<option value="firstPage">1</option>
<option value="secondPage">2</option>
</select>
<iframe src="firstpage.html" id="content" >
</iframe>
</body>
</html>
I want to use the if statement.
If select 1 load firstPage.html
If select 2 load secondtPage.html
Any Edition of this code.
Please note that values and file names are case sensitive, so 'firstpage' and 'firstPage' are not the same!
Try this jQuery code:
$(document).on ("change", "select.fx[name='fx']", function () {
var $select = $(this);
if ($select.val () == "firstPage") {
$("#content").attr ("src", "firstpage.html");
$("#content").show ();
}
else if ($select.val () == "secondPage") {
$("#content").attr ("src", "secondpage.html");
$("#content").show ();
}
else {
$("#content").hide ();
alert ("Page not found!");
}
});
Don't do things like this as it may be unsafe:
$("#content").attr ("src", $(this).val() + ".html");
Whenever the change handler is called, it gets passed an event with relevant information about the event itself. It includes a event.target.value property which you can use to get the option that was clicked. You can just add '.html' to the value and set the src of your iframe accordingly.
<script>
$(document).on("change", ".fx", function (event) {
document.getElementById("content").src = event.target.value + ".html";
document.getElementById("content").style.display = "block";
});
</script>
<div class="a">hello</div>
<div class="b">bye</div>
I have a one page website and I want a div to be loaded first and then the second one and... Can I do this just with html and css? Or it needs JavaScript or...
Just do it with Javascript:
Change your Body to <body onload="onloadFunction()">
Add style="display: none;" to your div Elements
Add following script:
<script language="javascript" type="text/javascript">
function onloadFunction(){
document.getElementsByClassName("a").style.display = "true";
document.getElementsByClassName("b").style.display = "true";
}
</script>
and change the order of the document. lines to which order you want to have it.
You can try this with something like.
$(document).ready(function() {
$(".b").delay(2000).fadeIn(500); //class b is on delay
});
Can't done with only HTML and CSS. Need to involve JavaScript or jQuery code too.
Yes you need javascript and I suggest jquery(javascript library).
More info at: http://www.w3schools.com/jquery/jquery_get_started.asp
And here is working example(just run with browser and click button):
<div class="a" style="display: none;">hello</div>
<div class="b" style="display: none;">bye</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('.a').show();
setTimeout(function(){$('.b').show()}, 2000);
});
</script>
I'm using the animated collapse JS library here:
http://www.dynamicdrive.com/dynamicindex17/animatedcollapse.htm
and i'm trying to use it for dynamic div's however it's not toggling. Any ideas?
<head>
<script type="text/javascript" src="includes/js/animatedcollapse.js"></script>
</head>
<body>
<?PHP
for ($i = 1; $i <= 5; $i++) { ?>
<script type="text/javascript">
animatedcollapse.addDiv('location-<?PHP echo $i; ?>', 'fade=1')
</script>
<div id="location-<?PHP echo $i; ?>">
CLOSE
TEST
</div>
TOGGLE
<?PHP } ?>
<script type="text/javascript">
animatedcollapse.ontoggle=function($, divobj, state){}
animatedcollapse.init()
</script>
I may be wrong, but it doesn't seem necessary to use PHP just to create an incrementing variable.
You could just write that same for loop in javascript, inside your script tags: I also think using jQuery's slideToggle might make this easier for you... Maybe something along these lines:
for (var i = 1, i <= 5, i++ ){
$(document).ready(function(){
$('divToBeToggled' + i).click(function(){
$('divToBeRevealed' + i).slideToggle('slow');
});
});
}
Just looking quickly at the link you supplied, doesn't this script depend on jQuery also being present? You don't seem to have that script tag in your head tag.
I have a hello.php file that has some basic html in it. I am using ajax to retrieve data from another.php file. jQuery script posts data to another.php and put the callback data to div.
The problem is that the callback data from .post contains everything in the hello.php plus the actual callback data (check below). I've shortened the files (containing DB-connections for instance) from the actual ones, but the effect is the same whether I use the actual ones or these stubs. This was working just fine before, but was broken when I created a login action to the site. Only includes are objects of different classes that dont work with the posting and there is no reference to include the hello.php file.
Has anyone encounter a problem similar to this?
hello.php
<html>
<head>scripts etc..</head>
<body>
<h1>Hello</h1>
<button id="dataButton" value="GetData">Get Data</button>
<div id="cb">Callback data here</div>
</body>
</html>
another.php
<?php
echo "world!";
?>
jQuery script
<script>
function getWorld() {
$.post("another.php", function(data) {
$("#cb").html(data);
// alert(data); this also contains all of the data in This page
});
}
</script>
js function
<script>
$(document).ready(function() {
$("#dataButton").click(function() {
getWorld();
});
});
</script>
This will output the following html page source:
<html>
<head>scripts etc..</head>
<body>
<h1>Hello</h1>
<button id="dataButton" value="GetData">Get Data</button>
<div id="cb">
<html>
<head>scripts etc..</head>
<body>
<h1>Hello</h1>
<button id="dataButton" value="GetData">Get Data</button>
<div id="cb">Callback data here</div>
</body>
</html>
<script>
$(document).ready(function() {
$("#dataButton").click(function() {
getWorld();
});
});
</script>
<script>
function getWorld() {
$.post("another.php", function(data) {
$("#cb").html(data);
// alert(data); this also contains all of the data in This page
});
}
</script>
world! // <-- This gets back from server.
<script>
$(document).ready(function() {
$("#dataButton").click(function() {
getWorld();
});
});
</script>
<script>
function getWorld() {
$.post("another.php", function(data) {
$("#cb").html(data);
// alert(data); this also contains all of the data in This page
});
}
</script>
I am a newby in ajax and php and I would very much appreciate it if you could help me out. Seeing that I only know a little bit javascript and php I really don't know how to remedy this problem could you help me please! I've been hunting down a fix but couldn't find any, hopefully my search will stop here. I'll try my best to be clear in my explanation.
I would like this:
load html page called ducks
to load into the myDiv area an html page called ducks.html.
I would also like that when I click on on this:
load a list of html links
I would like it to load an html page with a list of links that when clicked will load into the myDiv area without reloading the whole page.
And lastly I would like to set up the myphpscript php file. To load a page with a list of links that will appear in the myDiv area and when I click on one of those links it will load likewise into the myDiv area.
This is my code
<!-- This is your PHP script... myphpscript.php -->
<?php
$contentVar = $_POST['contentVar'];
if ($contentVar == "con1") {
include 'con2.html';
} else if ($contentVar == "con2") {
echo "<a href='con2'>View</a>";
} else if ($contentVar == "con3") {
echo "Content for third click is now loaded. Any <strong>HTML</strong> or text you wish.";
}
?>
<!-- This is the rest of my code -->
<html>
<head>
<script type="text/javascript" src="jQuery-1.5.1.js"></script>
<script language="JavaScript" type="text/javascript">
<!--
function swapContent(cv) {
$("#myDiv").html('<img src="loader.gif"/>').show();
var url = "myphpscript.php";
$.post(url, {contentVar: cv} ,function(data) {
$("#myDiv").html(data).show();
});
}
//-->
</script>
<style type="text/css">
#myDiv {
width:200px; height:150px; padding:12px;
border:#666 1px solid; background-color:#FAEEC5;
font-size:18px;
}
</style>
</head>
<body>
<a href="#" onClick="return false"
onmousedown="javascript:swapContent('con1');">Content1</a>
<a href="#" onClick="return false"
onmousedown="javascript:swapContent('con2');">Content2</a>
<a href="#" onClick="return false"
onmousedown="javascript:swapContent('con3');">Content3</a>
<div id="myDiv">My default content for this page element when the page initially loads</div>
</body>
</html>
It sounds to me that if you want an external page to load when something is clicked, you need to perform an ajax GET or POST request, then print the results to the div:
http://api.jquery.com/jQuery.post/
If you just want to change the contents of the div to some other text, you can use something like jQuery.html: http://api.jquery.com/html/
<script>
$("#idForLink").click(function () {
var htmlStr = "The new text to show";
$('#myDiv').text(htmlStr);
});
</script>
Without using jQuery, your example above is sending self posts to echo contentVar which will always refresh the page.
See this fiddle for a jquery+css solution to your problem [NO PHP REQUIRED]: http://jsfiddle.net/bYNeg/
If you are simply grabbing HTML from another file I would use the load method, as its quick and easy:
$(document).ready(function(){
$('#myDiv').load("someFile.html");
});
For more extensive requests you can use Post and Get. They allow you to pass data with the URL request in order to affect the results that are returned. Obviously your requested URL would need to be PHP/ASP and handle the request in this case.
JAVASCRIPT:
<script type="text/javascript">
$(document).ready(function(){
// this is your mouse event (click) listener
$('.destination_div').on('click','a',function() {
var url = $(this).attr("href");
$('.destination_div').load(url);
return false;
});
});
</script>
Make your HTML anchors simple, do not include inline javascript, because the on("click") handles it already.
HTML:
Your HTML with links