I'm trying to pass the data-value of the < li > I clicked to PHP in the same page. I'm using AJAX to pass the data to PHP, to be used in querying. I think the ajax request is working, but the php code inside the if is not running.
The codes:
offices.php
<?php
include 'connect.php';
$page = 'offices';
include 'header.php';
if (isset($_POST['postdata'])){
$filter1 = $_POST['postdata'];
echo $filter1;
}
?>
<!DOCTYPE html>
<html>
<head>
<script src="js/jquery.min.js"></script>
</head>
<body>
<div class="filter1">
<ul>
<li class="fteacher" data-value="teacher">Professor</li>
<li class="foffice" data-value="office">Gabinete</li>
</ul>
</div>
<script src="js/offices.js"></script>
</body>
</html>
offices.js
$('.filter1 li').click(function(){
$.ajax({
type: 'POST',
url: 'offices.php',
data: {'postdata': $(this).attr('data-value')},
success: function(msg){
alert('Success');
}
});
});
I tried the code you provided, but had to ommit the two includes at the beginning of your PHP script, and it worked. Testing was done using file_put_contents("test.txt", "test"); in the if-clause.
You may have a look at what the PHP script returns by using alert(msg). Note that everything after the PHP part is returned, too. It might also help to use error_reporting(E_ALL) in the PHP to search for problems in the included scripts.
Please try this. Hope you are only expecting the output $filter1
<?php
if (isset($_POST['postdata'])){
$filter1 = $_POST['postdata'];
echo $filter1;
}else {
include 'connect.php';
$page = 'offices';
include 'header.php';
?>
<!DOCTYPE html>
<html>
<head>
<script src="js/jquery.min.js"></script>
</head>
<body>
<div class="filter1">
<ul>
<li class="fteacher" data-value="teacher">Professor</li>
<li class="foffice" data-value="office">Gabinete</li>
</ul>
</div>
<script src="js/offices.js"></script>
</body>
</html>
<?php
}
?>
Related
I have a 'like' button that I have implemented with PHP/MySqL, AJAX and Jquery, which increments likes by +1 each time. It all seems to work fine and updates the database with the new value; however, the response that is returned from the AJAX call is returning all of the html in my .php file that comes before the post handler in my index.php. Other than moving the handler all the way to the top of the page, is there a way of fixing this?
Code below:
index.php
<?php
include './includes/header.php';
?>
<?php
include './includes/title_box.php';
?>
<?php
include './includes/categories_box.php';
?>
<?php
include './includes/roadmap_box.php';
?>
<?php
if(isset($_POST['liked'])) {
$postid = $_POST['postid'];
$query = "SELECT * FROM posts WHERE post_id=$postid";
$result = mysqli_query($connection, $query);
$row = mysqli_fetch_array($result);
$n = $row['post_upvotes'];
$query = "UPDATE posts SET post_upvotes=$n+1 WHERE post_id=$postid";
mysqli_query($connection, $query);
echo $n + 1;
exit();
}
?>
<button class="upvote-button" value=<?php echo $id ?>><?php echo $upvotes ?></button>
script.js
$(document).ready(function(){
$(".upvote-button").click(function(){
var postID = $(this).val();
$post = $(this);
$.ajax({
url: './index.php',
type: 'post',
data: {
'liked': 1,
'postid': postID
},
success: function(response){
$post.html(response);
}
});
});
});
console.log(response)
element.style {
}
user agent stylesheet
body {
display: block;
margin: 8px;
}
script.js:14
<!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.0">
<script
src="https://code.jquery.com/jquery-3.6.0.js"
integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk="
crossorigin="anonymous"></script>
<title>Product Feedback App</title>
</head>
<body><div class="title-box">
<h1>Frontend Mentor</h1>
<p>Feedback Board</p>
</div><div class="categories-box">
<ul>
<li>All</li>
<li>UI</li>
<li>UX</li>
<li>Enhancement</li>
<li>Bug</li>
<li>Feature</li>
</ul>
</div>
<div class="roadmap-box">
<h2>Roadmap</h2>
View Roadmap
<ul>
<li>Planned - 2</li>
<li>In-Progress - 3</li>
<li>Live - 1</li>
</ul>
</div>
134
Move your if(isset($_POST['liked'])) and all associated code to a separate file and call that file in your Ajax query url.
You will probably need to include the file that connects to your database in the new file as well, but without seeing the contents of your included files it's hard to give specific advice.
This question already has answers here:
Creating a PHP header/footer
(5 answers)
Closed 4 years ago.
I have a html file which is just my footer. How can I use this in another file? Do I need to use php?
I'm looking for something like this:
<section>
<p>site content</p>
</section>
<?php footer html from a different file goes here ?>
Will this include the styling and javascript that is referenced in the head of the file i'm getting the html from?
Thanks!
Now, when you visit index.html, you should be able to click the link tags.
IN HTML
<html>
<head>
<title></title>
<script
src="https://code.jquery.com/jquery-3.3.1.js"
crossorigin="anonymous">
</script>
<script>
$(function(){
$("#header").load("header.html");
$("#footer").load("footer.html");
});
</script>
</head>
<body>
<div id="header"></div>
<!--Remaining section-->
<div id="footer"></div>
</body>
</html>
IN PHP
<html>
<head>
<title></title>
</head>
<body>
<?php include('header.php'); ?>
<!--Remaining section-->
<?php include('footer.php'); ?>
</body>
</html>
If you are using PHP you can require you can find more about it here.
If you don't want to use PHP you will have to use AJAX.
Example :
$.ajax({
url: "yourHTMLFile.html",
dataType: "html",
success: function(data) {
$("body").html(data);
}
});
I thought this would be simple enough, but I can't get it to work.
I have two files. main.html and data.php
The two files are in the same folder on a server.
I want to get a string from the PHP file and use it in jQuery. In the example below, I want the browser to create a pop-up, with the text "xxxx". I get no pop-up.
data.php
<?php
$var = "xxxx";
echo json_encode($var);
?>
main.html
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="scripts/jquery-1.11.1.js"></script>
<script>
$(document).ready(function() {
var testString = <?php $var = json_decode(file_get_contents('data.php'), true); echo $var; ?>;
alert(testString);
});
</script>
</head>
<body>
<h1>Test</h1>
</body>
</html>
Any takers?
<!DOCTYPE html>
<html>
<head>
<script>
$(document).ready(function() {
$.ajax({
url:"data.php",
success:function(result){
alert(result);
}
});
});
</script>
</head>
<body>
<h1>Test</h1>
</body>
</html>
The first problem with this is that on many servers .html is not parsed for PHP
The second problem is that the file_get_contents will actually display the full contents of your .php file (including the <?php) which is likely not what you're looking for.
Instead I would use an AJAX request such as http://api.jquery.com/jquery.get/
For this you will need to include jQuery in your <head>
You should get the php data before html initiates, like below
<?php
$var = json_decode(file_get_contents('data.php'), true);
?>
<!DOCTYPE html>
<html>
<head>
<script>
$(document).ready(function() {
var testString = <?php echo $var; ?>;
alert(testString);
});
</script>
</head>
<body>
<h1>Test</h1>
</body>
</html>
I'm trying to pass a simple variable from my jQuery to my php and then echo it on my HTML. It doesn't seem to work though.
I can't get my variable $result to show up on my page. Any thoughts? The Ajax POST seems to be working fine. The problem seems to be communication between php and HTML.
index.html:
<!DOCTYPE html>
<html>
<head>
<title>My Site</title>
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script type='text/javascript' src='front.js'></script>
</head>
<body>
<?php echo $result; ?>
</body>
</html>
front.js:
$(document).ready(function() {
$.post('/back.php', {name: "Bob"}, function(data) {
});
});
back.php:
<?php $result = $_POST['name']; ?>
Try this
index.html:
<!DOCTYPE html>
<html>
<head>
<title>My Site</title>
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script type='text/javascript' src='front.js'></script>
</head>
<body>
</body>
</html>
front.js:
$(document).ready(function() {
$.post('/back.php', {name: "Bob"}, function(result) {
$('body').html(result);
});
});
back.php:
<?php echo $_POST['name']; ?>
Change this
<body>
<div id="show-data"></div>
</body>
And
$(document).ready(function() {
$.post('/back.php', {name: "Bob"}, function(data) {
$('#show-data').html(data);
});
});
And
<?php echo $result = $_POST['name']; ?>
Change Your PHP Code :
<?php echo $_POST['name']; ?>
And Also Your HTML Code :
<!DOCTYPE html>
<html>
<head>
<title>My Site</title>
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
</head>
<body>
</body>
<script>
$(document).ready(function() {
$.post('/back.php', {name: "Bob"}, function(data) {
$('body').append(data)});
});
</script>
</html>
$result in back.php and $result in index.html aren't related. Setting it in back.php has no effect on index.html. If you echo something in back.php however, that output will be passed to the empty callback function you have in your $.post() call. You can handle the data there and use javascript to insert it into your page.
Just add the following line to your code: $('body').html(data);
Like your question we have three different files one is index.html
1) index.html
<!DOCTYPE html>
<html>
<head>
<title>My Site</title>
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script type='text/javascript' src='front.js'></script>
</head>
<body>
<?php echo $result; ?>
</body>
</html>
2) front.js
$(document).load(function(){
$.ajax({
url: '/back.php',
type: 'POST',
data: 'name=Bob',
async: false,
success: function(data) {
$('body').html(data);
},
cache: false
});
});
3) back.php
<?php echo $result = $_POST['name']; ?>
Now use this, your files will work out. Please let me know if you have any queries.
Puh, lot of mistakes. First, your index.html contains PHP - Code which won't be executed because this is not a PHP - Skript (ending with php).
Second you are saving the value of your request to back.php in a variable, which won't be existing after the request is finished. You can either:
rename index.html to index.php, exchange your statement to
<?php echo $_POST['name']; ?>
and change your request to
$.get('/index.php', {name: "Bob"}, function(data) {
});
which would cause a continously reloading of the site,
or store your result in a $_SESSION (see PHP Session Handling), and retrieve that in your index.php (you got to rename the file).
I'm testing jquery.pjax.js and noticed a problem.
In my minimum test project, strange behavior like below happens:
Access to index.php in fireflx
Click a pjax link: location bar and page contents are changed
Click Firefox's back button: location bar is changed but contents remain
This behavior doesn't happen in GoogleChrome.
I want to know how to solve this.
My test project is:
http://karasunouta.com/php_test/pjax/
http://karasunouta.com/files/pjax.zip
index.php
<?php
$page = 1;
if (isset($_GET['page'])) {
$page = $_GET['page'];
}
$isPjax = false;
if (!empty($_SERVER['HTTP_X_PJAX'])) {
$isPjax = true;
}
if (!$isPjax):
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>page<?php echo $page; ?></title>
<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="js/jquery.pjax.js"></script>
<script type="text/javascript">
$(function(){
// link
$(document).pjax('a.pjax', '#main');
// form
$(document).on('submit', 'form', function(event) {
$.pjax.submit(event, '#main')
})
});
</script>
</head>
<body>
<h1>pjax test</h1>
<ul class="links">
<li>page1</li>
<li>page2</li>
<li>page3</li>
</ul>
<form>
Page：<input name="page" type="text" value="1">
<input type="submit">
</form>
<div id="main" style="border: 3px double gray">
<?php endif; ?>
<?php include("page/{$page}.html") ?>
<?php if (!$isPjax): ?>
</div>
</body>
</html>
<?php endif; ?>
page/1.html
page1 contents
page/2.html
page2 contents
page/3.html
page3 contents
js/jquery-1.9.1.min.js
js/jquery.pjax.js
I could have found a solution by myself...
before:
$(function(){
// apply pjax
});
after:
$(document).ready(function() {
// apply pjax
});
Now firefox back button looks working fine.
I'm not sure about reason why.
Actual behaviors of them looks different though several texts says the two writing form meanings are exactly same...