I have this issue where, I can see the echo of a variable via the preview on Chrome Developer Tools, but it's blank on the actual web page.
I am guessing this is down to a timing issue, so to make it clear this is how I have it.
As page (index.php) loads, it links a .js file that does a FLQ query on FB to get the users name.
It then uses ajax to repost to the index.php with the information.
Back at the index.php page, it reloads and collects via $_POST
It then displays some of the user info held in $_POST
I am guessing why I am doing is not possible, but it's odd that in the Chrome dev tool, all the variables echo on the page, but the actual page is blank where the variable should display.
I can only suggest I have a holding page, collect the detail and then load then moves to the main page to display the data.
<!--
Index.php
-->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<?php
global $uid;
global $una;
global $uem;
global $uph;
?>
<title></title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="https://connect.facebook.net/en_US/all.js"> </script>
<script type="text/javascript">
// initialize the library with the API key
FB.init({ apiKey: '2847xxxxxxxx689' });
</script>
<?php
?>
<script type="text/javascript">
FB.login(function(response) {
// handle the response
}, {scope: 'email,publish_stream'});
</script>
<script type="text/javascript" src="jquery/op.js"></script>
<?php
$uid = $_POST['uid'];
$una = $_POST['una'];
$uem = $_POST['uem'];
$uph = $_POST['uph'];
echo $_POST['una'];
?>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="stylesheets/op_main.css" media="Screen" type="text/css" />
<?php
//include('assets/opPHP.php');
include('sql/ajaxsql.php');
include('sql/phpsql.php');
$opapp = new opapp;
?>
<body>
<div id="mainbody">
<div id="topbanner">
Beta Name <?php echo $una; ?>
</div>
<--
.js File
-->
$(window).load(function() {
FB.api('/me', function(response) {
var query = FB.Data.query('select uid,name,email, pic_square from user where uid={0}', response.id);
query.wait(function(rows) {
var uid = rows[0].uid;
var una = rows[0].name;
var uem = rows[0].email;
var uph = '<img src="' + rows[0].pic_square + '>';
$.ajax({
url: '../index.php',
type: 'POST',
data: 'uid=' + uid + '&una=' + una + '&uem=' + uem + '&uph=' + uph
});
});
});
});
I can see it posts the information, so my question is. Is their another way to collect the information, while being on the same page. Even explain why I can see it it dev tool, but not the main page?
Thanks
Andrew
echo $_POST['una']; is echoed in the head tag so it will be shown in Chrome dev tools but not in web page.
Regarding <?php echo $una; ?>, I am not seeing anyplace were this variable is getting set. So this may be the reason why it is coming blank
Related
I have a div tag with many anchor tags in it. On clicking a lick it should open a php page in another div tag of the same page.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Test</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="index.css">
</head>
<body>
<header>
<h2>Test</h2>
</header>
<div class="topnav" id="myTopnav">
page1
page2
page3
page4
</div>
<div id="content" >
</div>
<script>
$(function(){
$("#myTopnav a").click(function(e){
e.preventDefault(); //To prevent the default anchor tag behaviour
var url = this.href;
$("#content").load(url);
});
});
</script>
</body>
</html>
I have a nav bar and on clicking the links it should load a php page in content div. I tried the above code but it does not work.
The Reason is that its a local file at your system, you need to set up a webserver.
If the problem exist further then you can add "Cross Origin" headers to the called php files.
If it's not working for you, try the full context and see what the error message might be:
$( "#content" ).load( url, function( response, status, xhr ) {
if ( status == "error" ) {
window.alert(xhr.status + " " + xhr.statusText);
}
});
In my website the clients can update their personal data. After the update is done on the database, I want the page updates itself and show the data as it is at that time. For doing this, I do an ajax call to an external php file to update the mysql database. After that, I do a get of the client data page (location.href) and I update some div info to show up the new data.
This is the AJAX call from my JS file:
$.ajax({
type: "POST",
url: "factupdate.php",
data: {
datos: stringDatos,
token: $("#token").val(),
isAjax: 1
},
success: function (codi) {
$.get(location.href, function (datos) {
($(datos)).find("#eltoken").html());
var eltoken = $(datos).find("#eltoken");
var result = $(datos).find("#cuenta_menu_fac");
console.log($(eltoken).html());
console.log($(result).html());
$(result).find(".facturacion").hide();
$(result).find("#fac_" + num).show();
$(result).find(".afac").removeClass("aliselected");
$(result).find("#menu_fac_" + num).addClass("aliselected");
$(result).find("#acc_fac").append('<span class="goodvalid">Datos de facturación actualizados</span>');
$("#cuenta_menu_fac").html($(result).html());
$("#eltoken").html($(datos).find("#eltoken").html());
$("#cargandoacc").hide();
});
},
error: function (e) {
$("#cargandoacc").hide();
alert('Ha habido un error: ' + e);
}
});
The problem is that I can see the result data but not the eltoken's, the console prints undefined.
Moreover, when I try to do a console.log($(datos).html()); it also shows up as undefined. On the other hand, if I do a console.log($(datos).text()); it does return the correct data of the website.
This is some of datos info:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="es" xml:lang="es">
<head>
...
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
...
</head>
<body>
<!-- Some layout divs -->
<div id="cuenta_menu_fac" class="c-menu-content">
<div class="content" id="acc_fac">
<!-- Some label and input for updating data divs -->
</div>
</div>
<!-- /Some layout divs -->
<div id="eltoken">
<input type="hidden" id="token" value="2d5951d1e3b31dfb7fd2dcc172df17fd">
</div>
</body></html>
I do not understand what is wrong in my code. Any possible solution to this?
Datos is not a parent for eltoken. Just add eg. a common div for it.
$.get(location.href, function (datos) {
datos = $('<div></div>').append(datos);
($(datos)).find("#eltoken").html());
...
See my similar example
https://jsfiddle.net/011g253w/1/
Update
Your code has 2 divs on one level in the body. And get returns it as a result of selector $(*, 'body') = array of 2 divs.
I found a better way for your case.
var eltoken = $(datos).filter("#eltoken");
var result = $(datos).filter("#cuenta_menu_fac");
https://jsfiddle.net/011g253w/2/
Probably I'm misunderstanding something about Fancybox v1 but have the following minor issue. First I'm calling fancybox via clicking a link:
$(document).ready(function() {
$(".href").click(function() {
$.fancybox.open({
href : $(this).attr("data-id"),
type : 'iframe'
});
});
});
This loads a simple PHP/HTML page with JS, to be populated into the Fancybox window:
<!DOCTYPE html><html><head><title></title></head>
<body>
<?php
# this is the fancybox content
echo "<script>var dcwrtext = 'random_text'; document.write(dcwrtext);</script> Some other content to show on fancybox.";
?>
</body></html>
The content appears without a problem, but the nuance is, the document.write value is echoed after the closing </script> tag: and this makes the content visible on the page, not the document.write() function. You can see this in the source code:
<body>
<script>var dcwrtext = 'random_text'; document.write(dcwrtext);</script>**random_text** Some other content to show on fancybox.
</body>
The problem seems to be with fancybox, if I use the document.write() on a standard HTML (not fancyboxed) page, as expected, it will correctly show 'random_text' on the page, inside <script></script> only. This is the source code:
<body>
<script>var dcwrtext = 'random_text'; document.write(dcwrtext);</script> Some other content to show on fancybox.
</body>
What I'd need is if I open the fancbox window, 'random_text' shouldn't appear literally after the closing </script> tag, but would be displayed only by the document.write() function.
This is how I tested:
main page:
<html>
<head>
<title></title>
<meta name="" content="">
<link rel="stylesheet" type="text/css" href="fancybox/source/jquery.fancybox.css?v=2.1.2" media="screen" />
</head>
<body>
<div data-id="fancy.php" class="href">open fancy</div>
<script src="http://code.jquery.com/jquery-1.9.0.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.js"></script>
<script type="text/javascript" src="fancybox/source/jquery.fancybox.js?v=2.1.3"></script>
<script>
$(document).ready(function() {
$(".fancybox").fancybox();
$(".href").click(function() {
$.fancybox.open({
href : $(this).attr("data-id"),
type : 'iframe'
});
});
});
</script>
<div id="theid" class="fancybox"></div>
</body>
</html>
and the page being opened in fancybox: fancy.php
<html>
<head>
<title></title>
</head>
<body>
<?php
$randomtext = "random_text";
echo "<script>var dcwrtext = '$randomtext'; document.write(dcwrtext);</script>Some other content to show on fancybox";
?>
</body>
</html>
[I had to include jquery-migrate-1.2.1.js because of an error [ Uncaught TypeError: Cannot read property 'msie' of undefined] when including newer versions of jquery with fancybox]
I would like to get the value sent from php via AJAX in php. But i can not get value. Where is my mistake?
It is my functions.js
$(document).ready(function(){
$(".yeni_problem").click(function(){
var uid = 1;
$.ajax({
url: 'admin.php',
type: "post",
data: {'uid': uid},
success: function(data){
// $("#cvb").text(data);
},
statusCode: {
404: function(){
alert("admin.php not found");
}
}
});
});
});
and it is my php page that, i control sending value in here. The Codes is large but i write small form. Which that when i run the small codes on other folders as other site it does't work.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HELPDESK</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/css.css">
<link rel="stylesheet" href="css/default.css">
<link rel="stylesheet" href="css/animate.css">
<link rel="stylesheet" href="css/icon.css">
</head>
<body>
<button class="yeni_problem">Yeni Problem</button>
<?php
if(isset($_POST['uid'])){
echo "Value:".$_POST['uid'];
}else{
echo "<hr>Value not found<br/>";
}
var_dump($_POST);
?>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="js.js"></script>
<script type="text/javascript" src="functions.js"></script>
<script type="text/javascript" src="bootstrap.min.js"></script>
<?php
echo "</body>
</html>";
?>
When i click to ".yeni_problem" class i can not get value.
1st- check you include Jquery
2nd- Be sure admin.php page in the same directory with file you called functions.js in if not check its path
3rd- you pass uid not data so in php use
<?php
if(isset($_POST['uid'])){
echo "Value:".$_POST['uid'];
}else{
echo "Value not found";
}
?>
4th: and if you dynamically generate the element with class="yeni_problem" .. so use
$('body').on('click',".yeni_problem", function(){
instead of
$(".yeni_problem").click(function(){
5th: if yeni_problem is a submit button or anchor so you need to use e.preventDefault(); to prevent page from reloading
$(".yeni_problem").click(function(e){
e.preventDefault();
// rest of code here
6th: if yeni_problem is a form use .submit()
$(".yeni_problem").submit(function(e){
e.preventDefault();
// rest of code here
Pay attention to your code: in the JS snippet, the parameter passed to the server is "uid", which means your server will be getting a $_POST array with a position labeled "UID".
<?php
if(isset($_POST["uid"])){
echo "Value:".$_POST["uid"];
}else{
echo "Value not found";
}
?>
You should also check what is in the $_POST variable, insert var_dump($_POST) and comment out the rest of the code.
With jquery, I'm attempting to pull information from a .php file and run it in another html page.
To try this out I attempted to use this example:
http://www.tutorialspoint.com/jquery/ajax-jquery-get.htm
The .php file would include:
<?php
if( $_REQUEST["name"] )
{
$name = $_REQUEST['name'];
echo "Welcome ". $name;
}
?>
================ The html page code includes:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Sandbox</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
// has the google object loaded?
if (window.google && window.google.load) {
google.load("jquery", "1.3.2");
} else {
document.write('<script type="text/javascript" src="http://joecrawford.com/jquery-1.3.2.min.js"><\/script>');
}
window.onload = function() {
$('#test').css({'border':'2px solid #f00'});
};
</script>
</head>
<body>
<!-- -------- Test jQuery -------- -->
<p id="test">hello jQuery</p>
<!-- -------- /end Test jQuery -------- -->
<script type="text/javascript" language="javascript">
$(document).ready(function() {
$("#driver").click(function(event){
$.get(
"/testing.php",
{ name: "Zara" },
function(data) {
$('#stage').html(data);
}
);
});
});
</script>
<p>Click on the button to load result.html file:</p>
<div id="stage" >
STAGE
</div>
<input type="button" id="driver" value="Load Data" />
</body>
The jquery library has successfully loaded, as per the "test result".
For some reason, the contents of the "testing.php" file are not being pulled... almost as though it's linked incorrectly. Is the file linked improperly? (both the .php and .html files are in the same folder)
I even tried doing something simple, like an echo statement in the php, but still nothing was pulled from the file and published to the html page.
There might be a simple fix that you see. I appreciate your time and energy in helping me resolve this issue. Thanks in advance!
You could simply do this: $('#stage').load('testing.php?name=Zara');
The files are hosted from a folder on my computer
This gives you two problems:
Browsers put pretty strict restrictions on what webpages loaded from the filesystem can do, loading other files via XMLHttpRequest is forbidden
PHP is a server side technology, it needs a server to work (in this context)
Host your site on a webserver. It can be one you run locally, then you can access the site via http://localhost/etc
Use jquery.ajax instead. Here is your HTML code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Sandbox</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
// has the google object loaded?
if (window.google && window.google.load) {
google.load("jquery", "1.3.2");
} else {
document.write('<script type="text/javascript" src="http://joecrawford.com/jquery-1.3.2.min.js"><\/script>');
}
window.onload = function() {
$('#test').css({'border':'2px solid #f00'});
};
</script>
</head>
<body>
<!-- -------- Test jQuery -------- -->
<p id="test">hello jQuery</p>
<!-- -------- /end Test jQuery -------- -->
<script type="text/javascript" language="javascript">
$(document).ready(function() {
$("#driver").click(function(event){
$.ajax({
url: "testing.php",
data: { name: "Zara" },
success: function(data) {
$('#stage').html(data);
}
});
});
});
</script>
<p>Click on the button to load result.html file:</p>
<div id="stage" >
STAGE
</div>
<input type="button" id="driver" value="Load Data" />
</body>
I would rather do the following...
<?php
if( $_GET["name"] )
{
$name = htmlspecialchars(trim($_GET['name']));
echo "Welcome ". $name;
}
?>
and
<script type="text/javascript" language="javascript">
$(document).ready(function() {
$("#driver").click(function(event){
$.load( "testing.php?name=Zara, function(data) {
$('#stage').html(data);
}
);
});
});
</script>