Ferrius
Reputation: 69
How to get my PHP output back to a page via Ajax?
I'm trying to get a response back from a php script, so I dont have to reload the page and display some animations.
I have both parts working, but when I try to put them together, nothing works.
Right now I send the input data via Ajax, but I can't bring the results back.
Please help me, thanks in advance.
HTML
<head>
<title>
Consultapp :: Consultar
</title>
<?php include_once('head-attrib.php'); ?>
</head>
<body>
<div class="content">
<section>
<img src="source/img/logo.png" class="logo logo-small logo-search">
<p class="copy">Para consultar, ingresa un numero de cedula.</p>
<div class="card card-searchcard animated" >
<form id="searchBar" method="get">
<input type="search" class="field" name="searchBox" id="searchBox" placeholder="Ingresa una identificacion aqui" min="11111111" max="9999999999">
<button class="btn btn-main btn-bar right"><span class="text">CONSULTAR</span><i class="material-icons md-36 md-light">search</i></button>
</form>
</div>
<br>
<?php print($message) ?>
<div style="margin-bottom:85px"> <!-- Prevents cropped results -->
<?php print($info) ?>
<div class="scroller-box">
<!-- Search Trasition-->
<script type="text/javascript">
$(function() {
var box = $('.card-searchcard');
var logo = $('.logo-search');
var copy = $('.copy');
var button = $('#searchBar button');
button.one('click', function(){
box.toggleClass('active');
logo.toggleClass('active');
copy.toggleClass('active');
var dataString = document.getElementById("searchBox").value; // Post data to send
console.log("Data Collected Susccessfully");
return false;
$.ajax({
type: "post",
url: "scripts/search.php",
data: dataString,
success: function() {
alert("Hi gorgeous!");
}
});
});
});
</script>
</div>
</div>
</div>
<?php include_once('navbar.php'); ?>
</section>
</div>
</body>
PHP
<?php
include_once("scripts/global.php");
// Collecting input variables
$entry = '';
$message = '';
$search = $_POST['searchBox'];
if(isset($search)) {
// Validation
if (empty($search)) {
$message = "Necesito un numero para consultar"; //Empty field message
}
else{ //MySQL DB search query
$searchquery = mysql_query("SELECT * FROM submissions WHERE id='$search'") or die("Could not check ID, I'm search");
$count = mysql_num_rows($searchquery);
if ($count == 0) {
$no_results = array( //Funny Error Messages goes here
'<span>Ups</span><br>Esta persona aun no ha sido calificada<br>Puedes añadir una calificacion si lo deseas',
'<span>Hay Caramba</span><br>nadie sabe acerca de esta persona<br> Tu sabes? Genial, añade una calificacion.',
);
$message = $no_results[array_rand($no_results)];
}
else{
while ($row = mysql_fetch_array($searchquery)) {
$name = $row['name'];
$id = $row['id'];
$amount = $row['amount'];
$submitter = $row['submitter'];
$rating = $row['rating'];
//Thumbs up or thumbs down icon
if ($rating == 'good') {
$ratingIcon = '<i class="material-icons">thumb_up</i>';
}
else{
$ratingIcon= '<i class="material-icons">thumb_down</i>';
}
$entry .= ( //Display individual entries (Can repeat)
"<div class='entry animated slideInEntry'>
<div>
<span>$submitter</span>
<span>$amount</span>
</div>
<div>$ratingIcon</div>
</div>
");
}
$info .=( //Display Person data (Not reapeat)
"<div class='card card-infocard animated slideInEntry'>
<label for='id'>CEDULA</label>
<span name='id'>$id</span>
<span name='name'>$name</span>
<button class='btn btn-fab btn-main'></span><i class='material-icons md-36 md-light'>add_circle_outline</i></button>
</div>
");
}
}
}
?>
The CSS in case you want it
/* Reset CSS & Global Attributes */
*{
box-sizing: border-box;
font-family: 'Raleway', sans-serif;
font-weight: 600;
letter-spacing: 1px;
margin: 0;
padding: 0;
border: 0;
}
/*Hiiden Scrollbar*/
::-webkit-scrollbar{
display: none;
}
a{
text-decoration: none;
color: inherit;
}
button, input{
margin: 0;
border: none;
}
/* Rules for using icons as black on a light background. */
.material-icons.md-dark{
color: rgba(0, 0, 0, 0.54);
}
.material-icons.md-dark.md-inactive{
color: rgba(0, 0, 0, 0.26);
}
/* Rules for using icons as white on a dark background. */
.material-icons.md-light{
color: rgba(255, 255, 255, 1);
}
.material-icons.md-light.md-inactive{
color: rgba(255, 255, 255, 0.3);
}
.left{
float: left;
}
.right{
float: right;
}
/*Small Devices*/
@media all and (max-width: 699px){
/* Rules for sizing the icon. */
.material-icons.md-18{
font-size: 18px;
}
.material-icons.md-24{
font-size: 24px;
}
.material-icons.md-36{
font-size: 36px;
}
.material-icons.md-48{
font-size: 48px;
}
/* Logo Attributes - Logo Attributes - Logo Attributes - Logo Attributes - Logo Attributes - Logo Attributes - Logo Attributes - Logo Attributes */
.logo-big{
width: 102px;
margin: 70px auto;
}
.logo-small{
width: 66px;
}
.logo-search{
margin: 55px 0 30px ;
}
/* Button Attributes - Button Attributes - Button Attributes - Button Attributes - Button Attributes - Button Attributes - Button Attributes */
.btn{
color: #FFFFFF;
font-weight: 600;
font-size: 15px;
}
.btn-main{
background-color: #80CCFF;
}
.btn-secondary{
background-color: #4C4C4C;
}
.btn-card{
border-radius: 0 0 3px 3px;
width: 100%;
height: 60px;
line-height: 60px;
}
.btn-fab{
width: 60px;
height: 60px;
border-radius: 100%;
box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.12);
line-height: 10px;
}
.card-infocard > .btn-fab{
position: absolute;
bottom: 0;
right: 0;
z-index: 9999;
margin: 0 20px -20px 0;
}
.btn-bar{
height: 55.5px;
width: 56px;
border-radius: 0 3px 3px 0;
}
.btn-bar > .text{
display: none;
}
/* Card Attributes - Card Attributes - Card Attributes - Card Attributes - Card Attributes - Card Attributes - Card Attributes - Card Attributes */
.card{
background-color: #FFFFFF;
color: #4C4C4C;
box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.12);
text-align: left;
border-radius: 3px;
}
.card-small{
max-width: 350px;
margin: 0 auto;
}
.card-searchcard{
width: 315px;
height: 56px;
margin: 35px auto 20px;
padding: 0 0 0 20px !important;
}
.card-infocard{
max-width: 315px;
padding: 23px 5%;
margin: 0 auto 35px;
}
.card-infocard > label{
display: inline;
}
.card-infocard > span:nth-child(3){
font-size: 16px;
font-weight: bolder;
display: block;
margin: 12px 0 0;
}
.entry{
background-color: rgba(0,0,0,0.3);
max-width: 300px;
padding: 10px 0;
margin: 20px auto;
border-radius: 5px;
}
.entry > div{
display: inline-block;
}
.entry > div:nth-child(1){
margin: 0 55px 0 20px;
}
.entry > div:nth-child(2){
margin: 0 20px 0 55px;
}
.entry > div > span{
display: block;
margin: 5px 0;
text-align: left;
}
.entry > div > span:nth-child(1){
font-weight: bolder;
font-size: 16px;
}
.entry > div > i{
vertical-align: baseline;
font-size: 30px;
}
/* Input Attributes - Input Attributes - Input Attributes - Input Attributes - Input Attributes - Input Attributes - Input Attributes - Input Attributes */
label{
font-size: 12px;
font-weight: bold;
text-transform: uppercase;
color: #393950;
display: block;
}
/* No blue outline on inputs */
textarea, input{
outline: none;
}
input[type=mail], input[type=password]{
padding: 15px 0 10px 0;
margin-bottom: 30px;
font-size: 14px;
color: #4C4C4C;
font-family: 'Raleway';
width: 100%;
font-weight: 600;
border: solid rgba(0,0,0,0.18);
border-width: 0 0 2px 0;
display: block;
}
input[type=search]{
height: 56px;
width: 70%;
font-size: 14px;
}
/* Placeholder Styling */
::-webkit-input-placeholder{
color: #808080;
font-family: 'Raleway';
}
:-moz-placeholder{
/* Firefox 18- */
color: #808080;
font-family: 'Raleway';
}
::-moz-placeholder{
/* Firefox 19+ */
color: #808080;
font-family: 'Raleway';
}
:-ms-input-placeholder{
color: #808080;
font-family: 'Raleway';
}
/* No arrows on number input*/
input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button{
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
margin: 0;
}
/*No color autofill*/
input:-webkit-autofill{
background-color: rgba(255,255,255,1); !important;
background-color: #FFFFFF !important;
}
/* Other Attributes - Other Attributes - Other Attributes - Other Attributes - Other Attributes - Other Attributes - Other Attributes - Other Attributes */
body{
font-size: 14px;
background-color: #0C77F8;
text-align: center;
font-size: 14px;
color: #FFFFFF;
}
.remora{
margin: 25px 0;
font-size: 12px;
color: #FFFFFF;
font-weight: 400;
}
.navbar{
width: 100%;
font-size: 12px;
color: #FFFFFF;
background-color: #0C77F8;
position: fixed;
bottom: 0;
left: 0;
z-index: 9999;
}
.navbar-icon{
margin: 15px 50px;
display: inline-table;
}
.navbar-icon > i{
margin-bottom: 5px;
}
.wrapper{
padding: 45px 12% 0;
}
span.link > a{
border-bottom: solid 2px #80CCFF;
font-weight: 600;
}
.scroller-box{
}
/* End of small devices styling - End of small devices styling - End of small devices styling - End of small devices styling - End of small devices styling*/
}
And the animation code, again, in case you want it.
.animated{
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
/* Searchbar Animation -Searchbar Animation -Searchbar Animation -Searchbar Animation -Searchbar Animation */
.logo-search.active{
-webkit-animation-name: logoSearchActive;
animation-name: logoSearchActive;
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
-webkit-transform: translateY(-300px);
transform: translateY(-300px);
}
.copy.active{
opacity: 0;
transition: 0.5s ease-in;
}
.card-searchcard.active{
-webkit-animation-name: searchcardActive;
animation-name: searchcardActive;
z-index: 9999;
-webkit-animation-duration: 1.2s;
animation-duration: 1.2s;
transition: 0.8s ease-in;
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
}
@-webkit-keyframes searchcardActive{
0%{
-webkit-transform: translateY(0);
transform: translateY(0);
}
20%{
-webkit-transform: translateY(20px);
transform: translateY(20px);
}
60%{
width: 315px;
}
100%{
-webkit-transform: translateY(-221px);
transform: translateY(-221px);
border-radius: 0px;
width: 100vw;
}
}
@keyframes searchcardActive{
0%{
-webkit-transform: translateY(0);
transform: translateY(0);
}
20%{
-webkit-transform: translateY(20px);
transform: translateY(20px);
}
60%{
width: 315px;
}
100%{
-webkit-transform: translateY(-221px);
transform: translateY(-221px);
border-radius: 0px;
width: 100vw;
}
}
@-webkit-keyframes logoSearchActive{
0%{
-webkit-transform: translateY(0);
transform: translateY(0);
}
50%{
-webkit-transform: translateY(0);
transform: translateY(0);
}
100%{
-webkit-transform: translateY(-300px);
transform: translateY(-300px);
visibility: hidden;
}
}
@keyframes logoSearchActive{
0%{
-webkit-transform: translateY(0);
transform: translateY(0);
}
50%{
-webkit-transform: translateY(0);
transform: translateY(0);
}
100%{
-webkit-transform: translateY(-300px);
transform: translateY(-300px);
visibility: hidden;
}
}
Upvotes: 0
Views: 85
Answers (2)
Thapedict
Reputation: 383
Problem is your the post data that you are sending. Change
var dataString = document.getElementById("searchBox").value;
To
var dataString = $("#searchbar").serialize();
Your search.php is expecting a value in $_POST['searchBox']
if(isset($search)){...
but never finds it so its skips that whole process of the search
Upvotes: 1
Daniele Petrarolo
Reputation: 458
I think that all you need is to fix the PHP script and fix the response from your Ajax call.
First of all, you PHP need and 'echo' statement to print some output. The output will be passed to the response from the ajax call, than JS have some material to work on.
An example:
<?php echo $info; ?>
After fix the php, try to edit this JS part:
$.ajax({
type: "post",
url: "scripts/search.php",
data: dataString,
success: function(data) {
console.log(data);
}
});
If you PHP script return to you an HTML markup or print HTML, you can use the .append() or .prepend() functions from jQuery to append the data on the body like:
$.ajax({
type: "post",
url: "scripts/search.php",
data: dataString,
success: function(data) {
$('body').append(data);
}
});
To show some CSS animation, I think you need to use .addClass() to the element you want to animate.
Upvotes: 3
Related Questions
- How can I prevent SQL injection in PHP?
- How do I get a timestamp in JavaScript?
- Get the size of the screen, current web page and browser window
- How do I refresh a page using JavaScript?
- How do I get the current date in JavaScript?
- How to get the children of the $(this) selector?
- How do I modify the URL without reloading the page?
- How do I get PHP errors to display?
- How can I know which radio button is selected via jQuery?
- How to manage a redirect request after a jQuery Ajax call