tried to ask this question earlier but made a total mess of it. so thought i'd try it again but clearer this time.
how can you get php variables to display in loaded content using JQuery?
index.php:
<!doctype html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<script>
$(document).ready(function(){
$('#clickMe').click(function(){
$('#parent').load('loaded.php #child', {},function(){
});
});
});
</script>
</head>
<?php
session_start();
$test = "this should display php string";
$_SESSION['another'] = "Session variable String";
echo ' tests to see if they work below <br>';
echo $test."<br>";
echo $_SESSION['another']."<br><br>";
?>
<button name="clickMe" id="clickMe" class="clickMe">Click me</button>
<div class="parent" name="parent" id="parent" style="background-color:yellow; height:200px; width:200px;">
</div>
<body>
</body>
</html>
loaded.php:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>
<body>
<div name="child" id="child" class="child">
<p1> html loads fine..</p1><br>
<?php echo $test ?><br>
<?php echo $_SESSION['another'] ?>
</div>
</body>
</html>
As stated by #Fred -ii- in the comments, you only have to fetch the session in your index.php file to do this.
If you want to get a part of another web page inside index.php :
Your index.php should contain this call :
$(document).ready(function(){
$('#clickMe').click(function(){
$('#parent').load('loaded.php'); // No need for additional parameters
});
});
You don't need to select a part of the HTML, return just what you need :
loaded.php :
<?php session_start() ?>
<p>Example text</p>
<?php echo $_SESSION['another'] ?>
Related
Guys, I have a problem. Is there a way to add html inside a tag without using javascript using only php anyway ?. Thank you very much for your help in advance.
For example, there is this code:
<?php
// This part is required here, because she comes another function.
// It's generate from php server, I need to show inside tag body, for example.
$code = "<h1 style='display:none' id='title'>My String</h1>";
echo $code;
?>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
</head>
<body>
<div id="my-div"></div>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js'
integrity='sha512-b6lGn9+1aD2DgwZXuSY4BhhdrDURVzu7f/PASu4H1i5+CRpEalOOz/HNhgmxZTK9lObM1Q7ZG9jONPYz8klIMg=='
crossorigin='anonymous'></script>
<script>
$('#my-div').html($('#titulo').html());
</script>
</body>
</html>
The output is this in the source code:
In the browser, the output is this My String:
But, this manipulation is the gift, which uses javascript for this. I don't want it that way. This will not do, because the code will be shown at the top, before the <! DOCTYPE html> tag. Is it possible, on the server, to insert <h1 style ='display:none' id='title'> My String </h1> inside the boby tag, for example?
How I would like it to look:
Example 2
For example, I have this file with code:
file2.php
<?php
include "file2.php";
?>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
</head>
<body>
<div id="my-div">
I want to show "<h1>My String</h1>" here.
</div>
</body>
</html>
Yes you can do it as simple as this:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
</head>
<body>
<div id="my-div">
<?php
$code = "<h1 style='display:none' id='title'>My String</h1>";
echo $code;
?>
</div>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js'
integrity='sha512-b6lGn9+1aD2DgwZXuSY4BhhdrDURVzu7f/PASu4H1i5+CRpEalOOz/HNhgmxZTK9lObM1Q7ZG9jONPYz8klIMg=='
crossorigin='anonymous'></script>
</body>
</html>
PHP is a server side scripting language and will only parse PHP code on the server side.
Yes, you can place HTML code inside PHP variables like you have done, but that will get rendered into the client (your browser).
What you can do is place $code variable inside the target div, like this:
<div id="my-div"><?php echo $code; ?></div>
Give it a try
I'd like to select an included html element with jQuery. How can I achive this?
index.php
<?php
<html>
<head>
...
</head>
<body>
include('file.php');
</body>
<html>
?>
file.php
<?php
echo '<div class="test">test</div>';
?>
select.js
let a = $('.test');
console.log(a); // returns undefined
Try executing your script after the page has fully loaded.
$(window).on("load", function() {
let test = $('.test');
console.log(test);
});
Code should be organized as follows: <?php Php.Code.Goes.Here ?>. This can be surrounded by HTML, for instance, <b><?php print("HELLO!"); ?></b>. This will display: HELLO!
So...you see the problem then, with...
<?php
<html>
<head>
...
</head>
<body>
include('file.php');
</body>
<html>
?>
The HTML is IN the PHP. You want this:
<html>
<head>
...
</head>
<body>
<?php include('file.php'); ?>
</body>
<html>
This code, of course, shouldn't have executed at all, since <?php <html> isn't really valid PHP syntax.
I have a form in which some I have defined some variables in PHP, The question is I need these variables details inside an html which is inside an echo . I don't know what to do as I have tried it.
<?php $var= "LOVE" ?>
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<?php echo "<!DOCTYPE html>
<html>
<head>
<title>Details</title>
</head>
<body>
<div > <h1> echo $var ;</h1></div>
</body>
</html>";?>
</body>
</html>
You just need to write the variable on double quote. Here an example
<?php
echo "<html>$var</html>"
// OR if one quote
echo '<html>'.$var.'</html>';
?>
<?php $var= "LOVE"; ?>
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<?php echo "
<!DOCTYPE html>
<html>
<head>
<title>Details</title>
</head>
<body>
<div >
<h1>".$var."</h1>
</div>
</body>
</html>";?>
</body>
</html>
There is no need of adding <html>,<body> tags inside another. There is already one above in your code. I do not know why you have used this pattern.
So I have two iframes in page
<div id="ch">
<iframe name="users" width="220" height="510" align="left" src='messages/users.php' id="userch" ></iframe>
<iframe name="text" width="450" height="405" src='messages/text.php'></iframe>
</div>
So I have variables in first iframe and I need to sent them into second iframe. I tried to use method GET. But any method that will work is good.
so first iframe
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=UTF-8">
<meta content="10; url=users.php" HTTP-EQUIV=Refresh>
<meta content="utf-8" http-equiv="encoding">
<link href="../css/chat.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="../js/jquery-2.1.3.js"></script>
<script type="text/javascript" src="../js/ch_users.js"></script>
</head>
<body >
<div class="ess_contact">
<div>
</body>
</HTML>
2-nd iframe
<html>
<head>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8">
<meta content="utf-8" http-equiv="encoding">
<meta content="5; url=text.php?active=<?=$active;?>" HTTP-EQUIV=Refresh>
</head>
<body onload="scroll(0,100)" link="blue" alink="blue" vlink="blue">
<font size=3 face="Georgia">
<?php
if (isset($_GET['active']))
{
$active=$_GET['active'];
echo $active;
}
?>
</body>
</html>
and js file
jQuery.noConflict();
jQuery(document).ready(function($) {
$(document).on('click','.ess_contact', function () {
var active = this.id;
$.get( "text.php", { active: active} );
});
});
Since you are already using PHP, you can start a session using session_start() and pass all your data through session variables.
Set:
$_SESSION['myvar']="the data";
Read:
if(isset($_SESSION['myvar'])){
echo $_SESSION['myvar'];
}
Using the above, you can use GET or POST to transfer data across php pages. Unless you really have the restriction to use JQuery.
I tried transferring data between iframes, and this is how I did it.
Main.html
<html>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<body>
<h2>Iframe data test</h2><br/>
<h2>Iframe 1</h2>
<iframe src="f1.html" id="frame1"></iframe>
<br/>
<br/>
<h2>Iframe 2</h2>
<iframe src="f2.html" id="frame2"></iframe>
</body>
</html>
f1.html
<html>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<body>
<h2>Iframe 1 here</h2><br/>
<input type="text" id="mydata"/><br/>
<input type="button" id="send" value="send data"/>
</body>
<script>
$(document).ready(function(){
$("#send").click(function(){
parent.$("#frame2").contents().find("#target").html($("#mydata").val());
});
});
</script>
</html>
f2.html
<html>
<body>
<h2>Iframe 2 here</h2><br/>
<div id="target"></div>
</body>
</html>
You see the two iframes on the Main page. Type anything in the textbox and click Send data, the contents of the textbox will be set in a div found in the second iframe.
Here i used AJAX. It's nearer to your code.
Here i created a jQuery.
This is the index.php file.
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="jquery-1.11.2.min.js"></script>
<script src="t.js"></script>
</head>
<body>
<h1>Below is iframe</h1>
<iframe name="users" width="220" height="510" align="left" src='2.php' id="userch" ></iframe>
<iframe name="text" width="450" height="405" src='3.php' class="f3"></iframe>
</body>
</html>
Here is frame 1. Name 2.php;
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="jquery-1.11.2.min.js"></script>
<script src="t.js"></script>
</head>
<body>
<h2>Hello Milan from frame 2</h2>
<h2>hello</h2>
<h2>world!</h2>
</body>
</html>
Here is frame 2. Name:3.php
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="jquery-1.11.2.min.js"></script>
<script src="t.js"></script>
</head>
<body>
<h2>Hello Milan from frame 3</h2>
<div class="msg"></div>
<?php
if(isset($_REQUEST['active']))
{
echo $_REQUEST['active'];
}
?>
</body>
</html>
And here is a jQuery named t.js.
function ifrm(){
$(document).ready(function (){
$("h2").click(function (){
var r=$(this).text();
$.ajax({url:"3.php",data:{active:r},success: function (data) {
parent.$('.f3').contents().find('.msg').html(data);
}});
});
});
}
ifrm();
Click on any text in 2.php file and you can see what's going on in 3.php.
Hi I am trying to make a personal code playground... I am using Code Mirror to turn into looking like an IDE (I also plan to add features of an IDE later but...). My current code is basically..
HTML (index.html)
<html>
<head>
<link href="main.css" rel="stylesheet" type="text/css" />
<script src="http://codemirror.net/lib/codemirror.js"></script>
<link href="http://codemirror.net/lib/codemirror.css" rel="stylesheet" />
<script src="http://codemirror.net/mode/htmlmixed/htmlmixed.js"></script>
<script src="http://codemirror.net/mode/css/css.js"></script>
<script src="http://codemirror.net/mode/javascript/javascript.js"></script>
</head>
<body>
<div class="codewindow">
<form id="codePush" action="codePush.php" method="POST" target="codeResults">
<textarea id="htmlWindow"></textarea>
<textarea id="cssWindow"></textarea>
<textarea id="jsWindow"></textarea>
<input type="submit" />
</form>
<script class="code">
var htmlCodeMirror = CodeMirror(function(elt) {
htmlWindow.parentNode.replaceChild(elt, htmlWindow);
}, {value: "<!-- HTML goes here -->",
lineNumbers: true,
mode: "text"});
</script>
<script class="code">
var cssCodeMirror = CodeMirror(function(elt) {
cssWindow.parentNode.replaceChild(elt, cssWindow);
}, {value: "/* CSS goes here. */",
lineNumbers: true,
mode: "css"});
</script>
<script class="code">
var jsCodeMirror = CodeMirror(function(elt) {
jsWindow.parentNode.replaceChild(elt, jsWindow);
}, {value: "// JavaScript goes here.",
lineNumbers: true,
mode: "javascript"});
</script>
</div>
<div class="output">
<iframe id="codeResults" name="codeResults" target="codePush.php" width="100%" height="100%" frameBorder="0.5" scrolling="yes"></iframe>
</div>
</body>
PHP (codePush.php)
<!DOCTYPE html>
<html>
<head>
<style>
<?php
echo $_GET['cssWindow'];
?>
</style>
<script type="text/javascript">
<?php
echo $_GET['jsWindow'];
?>
</script>
</head>
<body>
<?php
echo $_GET['htmlWindow'];
?>
</body>
</html>
I have made sure the link to the iFrame works because when adding text to the PHP file in the body section it displays when submit is pressed.
I hope I have made it clear and would appreciate any help...
Just for reference I am a bit of a NOoB when it comes to PHP
I'm not entriely sure what you're trying to achieve with all the code you provided, but here's a simplified version that will fix the main issue of the code not processing in codePush.php:
<div class="codewindow">
<form id="codePush" action="codePush.php" method="POST" target="codeResults">
HTML:<textarea id="htmlWindow" name="htmlWindow"></textarea>
CSS:<textarea id="cssWindow" name="cssWindow"></textarea>
JS:<textarea id="jsWindow" name="jsWindow"></textarea>
<input type="submit" />
</form>
</div>
<div class="output">
<iframe id="codeResults" name="codeResults" target="codePush.php" width="100%" height="100%" frameBorder="0.5" scrolling="yes"></iframe>
</div>
CodePush.php
<!DOCTYPE html>
<html>
<head>
<style>
<?php
echo $_POST['cssWindow'];
?>
</style>
<script type="text/javascript">
<?php
echo $_POST['jsWindow'];
?>
</script>
</head>
<body>
<?php
echo $_POST['htmlWindow'];
?>
</body>
</html>
Note that CodePush.php uses 'POST' not 'GET' so that it is consistent with your form. You were also missing 'name' attributes on the textareas which is what is used in the post (not the ids).
You might want to consider adding in some checks if the fields aren't complete to avoid errors etc.