I'm setting up a website containing a page that will contain many buttons. I want to be able to click on the button to populate a div with information from a database.
I've adapted some code that I previously had, but it isn't working.
The source javascript and HTML are shown here:
<script>
function showBiog(key) {
//alert(key);
// Get the search value
var search_value = key
// This time we're going to grab data from a file to display
var filename = "functions/biography.php";
// Send these values
var posting = $.post(filename, { search_term: search_value });
// Display this value in our results container
posting.done(function (data) {
$("#test_results").empty().append(data);
});
}
</script>
<style type="text/css">
.test {
background-color: #B32D2F;
border: thin solid #DBB2B3;
height: 50px;
width: 250px;
}
.testresults {
background-color: #88B32D;
border: thin solid #DBB2B3;
height: 50px;
width: 250px;
}
</style>
</head>
<body>
<div class="test" onClick="showBiog(1)"><p>1</p></div>
<div class="test" onClick="showBiog(2)"><p>2</p></div>
<div class="test" onClick="showBiog(3)"><p>3</p></div>
<div class="test" onClick="showBiog(4)"><p>4</p></div>
Results
<div class="testresults" id="test_results"></div>
The HTML of biography.php is
<body>
<?php if (! $_POST["search_term"]) { ?>
<div class="err">
<?php echo $row_Recordset1['firstname']; ?>
</div>
<?php } else { ?>
<?php echo $row_results['firstname']; }?>
</body>
The SQL for results in Dreamweaver is
SELECT *
FROM pilots
WHERE key LIKE colname
with colname $_POST['search_term']
Few things...
You may not need "var search_value = key" if you are not making any change or addition to it. Simply use "key" in the $.post (keep code simple).
What is expected to be in "key"? Depending on what you are sending, the statement var posting = $.post(filename, { search_term: search_value }); may break due to JSON structure requirements.
To assure you are sending out the right information to the PHP, you should try something like $.post(filename, JSON.stringify({ 'search_term': key }) );
On the PHP side, you can use unserialize() to decode JSON data, then process your query.
Just a small personal note and advice: If JSON is not well formed on the POST side, PHP will get nothing, thus it will return nothing. You should always try to log or display the data received by PHP when writing AJAX calls to assure it was correctly received. Otherwise you may be chasing a bug in the wrong spot. ;)
Related
I was trying to parse data to my controller so I can insert it into the database using JQuery and it was returning null. It's for a review star system so doesn't use conventional form fields however the network tab in inspect elements shows that data is actually posted to the controller just, not able to read it for some weird reason.
Update: The data is being inserted fine on desktop however the confirmation (flashdata) message is shown correctly not sure why. Additionally on mobile view no data or message is shown. Does anyone know why? I have updated the code below..
Here's the code from my view:
<?php if($this->session->flashdata('review_submitted')){ ?>
<div class="alert alert-success alert-dismissible container show" role="alert">
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<strong>Thank you!</strong> Your review has been submitted.
</div>
<?php } ?>
<form id="myForm" name="myForm">
<br>
<div class="form-group text-left div-style">
<h3 style="font-family: MontserratLight;letter-spacing: 2px; line-height: 32px;">Full Name <b>*</b></h3>
<input name="name" class="form-control" style="background: #f7f7f7; border: 1px solid #801424;" required />
</div>
<div class="rate">
<div id="1" class="btn-1 rate-btn"></div>
<div id="2" class="btn-2 rate-btn"></div>
<div id="3" class="btn-3 rate-btn"></div>
<div id="4" class="btn-4 rate-btn"></div>
<div id="5" class="btn-5 rate-btn"></div>
</div>
<script>
$(function(){
$('.rate-btn').hover(function(){
$('.rate-btn').removeClass('rate-btn-hover');
var therate = $(this).attr('id');
for (var i = therate; i >= 0; i--) {
$('.btn-'+i).addClass('rate-btn-hover');
};
});
$('.rate-btn').click(function(){
var therate = $(this).attr('id');
var dataRate = 'rate='+therate; //
$('.rate-btn').removeClass('rate-btn-active');
for (var i = therate; i >= 0; i--) {
$('.btn-'+i).addClass('rate-btn-active');
};
$('#myForm').on('submit', function(e){
var url = "<?php echo base_url(); ?>index.php/reviews/add_review";
// $('#myForm').append(therate);
var dataPost = $('#myForm').serialize() + "&rate=" + therate;
$.ajax({
type : "POST",
url : url,
data: dataPost,
success:function(){
}
});
});
});
});
</script>
and using the controller I simply use the following to get the data and add it to the database:
public function add_review(){
$name = $this->input->post('name');
$rating = $this->input->post('rate');
$dataDB = array(
'full_name' => $name,
'rating' => $rating
);
if($this->functions->submit($dataDB)){
$this->session->set_flashdata('review_submitted', true);
redirect(base_url() . 'reviews/index', 'refresh');
}
}
Here's some CSS that I used, perhaps the problem is to do with the mobile browser not having a cursor?
.rate{
width:245px; height: 40px;
margin-bottom:0px;
}
.rate .rate-btn{
width: 45px; height:40px;
float: left;
background: url(rate-btn.png) no-repeat;
cursor: pointer;
cursor:hand;
pointer-events: auto;
}
.rate .rate-btn:hover, .rate .rate-btn-hover, .rate .rate-btn-active{
background: url(rate-btn-hover.png) no-repeat;
}
When passing data through ajax, I think it is better to use JSON dataType. Reform the data type (string -> data object). Besides, I don't think it is really necessary to concat the 'to-be-sent' data into a string.
If you want dynamic data to be sent, you can push elements by condition
$.ajax({
type : "POST",
dataType: 'text' //it is not necessary if you are not returning any data (if you return json, put 'JSON'),
url : "<?php echo base_url(); ?>index.php/reviews/add_review",
data: dataRate, //change to {key:value,key:value}
success:function(data){
}
});
This is just to address your issue with your AJAX Posted Values not appearing where you are expecting them ONLY.
There are a zillion ways you can code this but here is just one which I have changed about to perform debugging. Even I learned a new trick doing this.
Just Nit Picking but what stuck out when reading your code is your use of therate when everywhere else in your JS you use camel case so it should be theRate.It's a good idea to choose a standard and stick to it.
Plus you had what appeared to be nested events in your JS. Some attempt at getting theRate to work correctly? Anyway...
First things. Get back to something basic and work your way back up. (Although in this case I didn't strip your view back to bare bones, but I did with your controller.
Your View.
I had to change this up a bit and hopefully the comments explain things.
I called it rating_view.php
<form name="my-form" id="my-form">
<div class="rate">
<div id="1" class="btn-1 rate-btn">1</div>
<div id="2" class="btn-2 rate-btn">2</div>
<div id="3" class="btn-3 rate-btn">3</div>
<div id="4" class="btn-4 rate-btn">4</div>
<div id="5" class="btn-5 rate-btn">5</div>
</div>
<input type="submit">
</form>
<!-- Added for viewing debug response -->
<div id="json-debug-output"></div>
<!-- Some styles added as non were provided -->
<style>
.rate-btn-hover {
background: blue;
}
.rate-btn-active {
background: yellow;
}
</style>
<script src= <?= base_url('assets/js/jquery_v3.4.1.js'); ?>></script>
<script>
$(document).ready(function () {
// Define your Dom Elements ONCE for efficiency etc
let domRateButton = $('.rate-btn');
let domMyForm = $('#my-form');
let theRate = 0; // Declares this as a Global Var.
let domJsonDebugOutput = $('#json-debug-output');
// Hover
domRateButton.hover(function () {
domRateButton.removeClass('rate-btn-hover');
let theRate = $(this).attr('id');
for (let i = theRate; i >= 0; i--) {
$('.btn-' + i).addClass('rate-btn-hover');
}
});
// Click
domRateButton.click(function () {
console.log('Rating Button Clicked');
theRate = $(this).attr('id');
domRateButton.removeClass('rate-btn-active');
for (let i = theRate; i >= 0; i--) {
$('.btn-' + i).addClass('rate-btn-active');
}
});
// Submit
domMyForm.on('submit', function (e) {
e.preventDefault(); // This was missing
console.log('Posting Rate = ' + theRate);
$.ajax({
type: "POST",
// dataType: 'text',
dataType: "json",
url: "<?php echo base_url(); ?>reviews/add_review",
data: {'act': 'rate', 'post_id':<?= $post_id; ?>, 'rate': theRate},
success: function (data) {
let debugData = JSON.stringify(data);
domJsonDebugOutput.text(debugData); // Display in our Debug Div
},
error: function (data) {
let debugData = JSON.stringify(data);
domJsonDebugOutput.text(debugData); // Display in our Debug Div
}
});
});
});
</script>
Note in the AJAX the changes to dataType from text to json. Also note that data is an array.
I also changed the scope of theRate from local to a global so it was "findable" amongst the functions.
NOT SURE how your form was setup but I added e.preventDefault(); to prevent the form submitting for testing.
Personally I cringe at having PHP vars embedded in any JS code and I usually have my JS as external files and pass in the values from PHP by reading them using JS but that's got it's Pros and Cons as well. So I left that alone for the sake of not going too far with this.
For your Controller - Called Reviews.php
public function show() {
$data['post_id'] = 1; // This comes from somewhere
$content = $this->load->view('rating_view', $data, TRUE);
echo $content;
}
/**
* Called by AJAX
* Do we need to test this is only called by AJAX?
*/
public function add_review() {
// Return everything that was sent for debugging
echo json_encode($this->input->post());
// var_dump($this->input->post());
exit();
}
So here I just had a method show() show the form and the add_review to simply bounce back what was sent. You can do all sorts of things with this. One nice aspect in this case is you do not need to use console.log) as you can view it all on the page (BUT ONLY FOR DEBUGGING). It's another option.
So have a play with that and start making changes to your code and see what works. Remember - get back to basics and pick on the bit that isn't working.
Next you will find you might be getting tripped up on your redirect. But that's for another post.
I'm trying to keep my ajax call on the same line, as detailed here: http://external.sidewaykill.com/versound/motd.php.
It won't, so what can I do?
$(document).ready(function() {
$.ajaxSetup ({
cache: false
});
var ajax_load = "<img src='http://static.sidewaykill.com/img/ajax-loader2.gif' alt='loading...' />";
// load() functions
var loadUrl = "playercount.php?id=2";
$("#servercount").html(ajax_load).load(loadUrl);
});
This has nothing to do with PHP but everything to do with the absolutely awful markup of your HTML and the lack of CSS. You're going to want to wrap all of this "free-text" inside of a div or two, and then make sure you're putting the wrapper div inside of the infobar div
Sample CSS:
#infobar p{
float: left;
margin-left: 5px;
}
HTML:
<div id="infobar">
<div style="float: left;">
<p>Welcome! Our server count is:</p>
<p>1 / 10</p>
<p>We hope you enjoy your stay! We are currently playing on gm_construct.</p>
</div>
</div>
its because the ajax call returning a div element,
as this :
<div id="count"> 0 / 10</div>
Since div is a block element it will always render in a new line. there are two solutions for this
one would be to return a <span> element instead of the div
second will be if u are unable to change the return value you can fix it via css
#servercount #count { display : inline }
My suggestion is to go with the first solutions
How do I put this together? I'm working on this website that requires that every time that a item from the menu is clicked the background-position of two specific DIVs change and keep the selection.
Here is my attempt:
First I create a variable "p" to save on the url/address the selected page, so for example, if you are in about us you will probably see something like this on the address bar:
website.com/index.php?p=aboutus
On the menu, on the button about us I did this with a call to the function changeBG onClick:
About Us
I figured I need javascript to do the trick and here is where I'm stock.
This is the script that goes in the header:
<script type="text/javascript">
<?
// Set "p" value to HOME if previously empty.
if ($_GET['p']=='') $_GET['p']='home';
?>
function changeBg(pvalue) {
if (pvalue == '') {pvalue = '<?=$_GET['p'];?>';
}
if (pvalue=='aboutus'){
document.getElementById('this_is_the_first_to_be_changed').style.backgroundPosition=0 20px;
document.getElementById('this_is_the_other_to_be_changed').style.backgroundPosition=0 80px;
if (pvalue=='contactus'){
document.getElementById('this_is_the_first_to_be_changed').style.backgroundPosition=0 10px;
document.getElementById('this_is_the_other_to_be_changed').style.backgroundPosition=0 100px;
}
}
</script>
This is what goes on the body:
<div id="left_menu">
About Us
Contact Us
</div>
<div id="this_is_the_first_to_be_changed">
</div>
<div id="this_is_the_other_to_be_changed">
</div>
Can anyone spot why this doesn't work?
Try it using quotes:
style.backgroundPosition="0 20px";
UPDATED
Also, what about this line:
pvalue = '';
you are setting pvalue='=aboutus'
UPDATED
The script element is incorrect:
<script type="java/text">
right is:
<script type="text/javascript">
In addition use firebug or chrome to see the JS generated in the page.
Goal:
Create a Q&A Script (using PHP, JavaScript and jQuery) that enables users to ask questions and submit answers to said questions.
If the user submitted a new answer, that answer would be inserted into the database and the div containing the answers would be refreshed automatically to include/view that newly submitted answer.
Problem:
After submitting the answer, the submission process is not working.
Here is my code:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script language="JavaScript">
$(document).ready(function ()
{
/*Function # 4:
Hide the AnswerForm and show Answers where the div will be automatically refreshed upon answer submission. <>>>> REVIEW!!! */
function addAnswer(i,qID)
{
//alert("newanswer-q"+i);
//$("newanswer-q"+i).style.display("none");
//$("Answers-q"+i).style.display("block");
changeDiv("Answers-q"+i, "block");
//step # 1: define posted data to insert into database
var name = $("input#name").val();;
var answer = $("input#answer").val();;
alert(name+","+answer);
//step # 2: submit form to be processed by CHANGE.PHP to insert into DB
$.ajax({
type:"POST",
url:"change.php",
data: "questionID="+qID+"&count="+i+"&name="+name+"&answer="+answer,
success: function(data)
{
if(data==0)
{
alert("YEEEEEEEEEESSSS!!!!!! :DDDDDD");
$("#Answer-q"+i).html("Finally!");
}
else
{
$("#Answer-q"+i).html("?!?!");
}
}
});
//Step # 3: refresh Answers div
//changeDiv('Answers-q'+i, 'block');
$("#Answers-q"+i).load("printAnswers.php");
}//end addAnswer
$("#refreshAnswers").click(function(evt){
$("#refreshAnswers").load("printAnswers.php");
evt.preventDefault();
});
}
</script>
<style type="text/css">
.answers
{
background-color: red;
position: relative;
display: block;
left: 1in;
}
.answerform
{
background-color: yellow;
position: relative;
display: block;
left: 1in;
}
.error
{
color: red;
display:none;
}
</style>
</head>
<body>
<?php
mysql_connect("#", "#", "#") or die(mysql_error());
mysql_select_db("test") or die(mysql_error());
$q1 = "SELECT *
FROM questions";
$allQ = mysql_query($q1);
while($q = mysql_fetch_array($allQ))
{
$i = $q['qID'];
echo '<div id="questions" style="background-color: blue;">';
echo 'Question: '.$q['Question'].'<br><br>';
echo 'posted by '.$q['userName'].'<br><br>';
echo 'posted on '.$q['addDate'].'<br><br>';
echo '</div>';?>
<input type="button" id="viewAnswers" name="viewAnswers" value="View Answers" onClick="changeDiv('Answers-q<?=$i?>', 'block');">
<input type="button" id="addAnswer" name="addAnswer" value="Answer Question" onClick="changeDiv('newanswer-q<?=$i?>', 'block');">
<div id="Answers-q<?=$i?>" class="answers">
<? include("printAnswers.php"); // display all answers to question # i
?>
</div>
<? echo '<div id="newanswer-q'.$i.'" class="answerform">';
include("addAnswerForm.php"); // display add new answer to question # i
echo '</div>';
} ?>
<br>-------------------------<br>
Go back to index.php
</body>
</html>
Change.php
<?php
mysql_connect('#', '#', '#') or die(mysql_error());
mysql_select_db('test') or die(mysql_error());
// Get values from form
$name=$_POST['name'];
$answer=$_POST['answer'];
$qID = $_POST['qID'];
// Insert data into mysql
$sql="INSERT INTO answers(Answer, userName, qID)
VALUES('$answer', '$name','$qID')";
$result=mysql_query($sql);
?>
I have been stuck on this for a couple of hours now with no luck thanks to my beginner-level skills in both PHP and jQuery.
Can anyone throw me a lifeline or something?
What's the value of data? Try console.log(data) in your success function. Seems to me change.php doesn't produce any output, so why should data equal zero ?
Your data appears to be sent via "GET" request.
Change te AJAX data object to this:
data : {
questionID : qid,
count : i,
name : name,
answer : answer
}
If you pass it as a string the way you did, it gets appended to the URL (becoming a GET request), if you pass it as an object it gets posted.
I am in the process of developing an academic toolkit for my university. The problem statement is, the user will be given a list of courses. When one clicks on that particular name of the course, he should get a dynamic slide panel showing the course objective and other details of that course. All these values will be present in a mySQL database. The slide panel is a must requirement here. So please help me how to get the data dynamically in the slide panel from the mySQL database. Thanks in advance... :)
http://api.jquery.com/jQuery.ajax/'>jQuery's $.ajax is your friend!
Something like the following should work (it is untested and not optimized). Hopefully it will lead you in the right direction. You should also add a loading message, error handling, and data caching.
<style>
.course{
border:solid 1px #000;
margin-bottom:10px;
}
.title{
display:block;
border-bottom:solid 1px #000;
background:#eee;
font-weight:bold;
}
.details{
display:none;
}
</style>
<div class='course'>
<a class='title' href='/classDetails.php?classID=54321'>Composition 101</a>
<div class='details'></div>
</div>
<div class='course'>
<a class='title' href='/classDetails.php?classID=54322'>Composition 201</a>
<div class='details'></div>
</div>
<div class='course'>
<a class='title' href='/classDetails.php?classID=54323'>Composition 301</a>
<div class='details'></div>
</div>
<script>
$(function(){
$(".course").each(function(){
var self = $(this);
$(".title",self).click(function(){
$.ajax({
"url":this.href,
"success":function(data){
// extract the content you need from the HTML page.
var content= $(data).find("#content").html()
// insert into the details div and then show it.
self.find(".details").html(content).slideDown(1000);
}
});
// prevent default action...
return false;
});
});
});
</script>
Also note that there are some abstractions of $.ajax to make calls like this easier (such as $("#myElement").load(url), $.post and $.get). You can find more information about these methods at http://api.jquery.com/category/ajax/