I have a test.html page which has two and four buttons. When the page loads, i want to retrieve data from mysql database using php and then use ajax to display that in the div. But there are four rows in the table. Also when button 1 is clicked values of row 1 should display, button 2 should display values of row2 ..... How to do it? I dont want to query the database for each button click.
test.html
<div id="q1"></div>
<div id="q2"></div>
<button type="button" data-value="1">1</button>
<button type="button" data-value="2">2</button>
<button type="button" data-value="3">3</button>
test.php
$sql = "SELECT q1, q1 FROM test WHERE test=1";
$result = mysqli_query($conn, $sql);
echo json_encode($result);
test.js
$().ready(function() {
'use strict';
var testid;
var string = "";
$("button").click(function(){
testid=$(this).data("value");
$.ajax({
type: 'POST',
dataType: 'json',
url: 'js/php/testpaper.php',
data: {
testid1: testid
}
}).done(function(data) {
});
});
Related
I have a code for filterable audio files, how can I add add-to-cart functionality?
My index.php file:
https://www.pastiebin.com/5cff432c06f57
and my fetch_data.php file,
https://www.pastiebin.com/5cff436697ed2
Here if I click add to playlist button the alert was shown based on the hello.php file [ just echo message ], here how can I save my id and name into the hello.php page like cart page, if I click add to playlist button I need my id and name save into the hello.php page.
Current Output:
on your Button onClick, add new function like addCart()
<button type="button" class="btn btn-primary" type="submit" style="padding: 5px 83px 5px 83px;" onclick="addCart(<?php echo $row['voice_id']; ?>); " >Add to PlayList </button>
then your script should be like to call ajax
<script>
function addCart(id) {
$.ajax({
type: 'POST',
url: 'hello.php',
dataType: 'html',
data : {id: id}, // pass id to the php
success: function(data) {
alert(data);
}
});
}
and in your hello.php
<?php
$id = $_POST['id'];
//code to save it to databse table
?>
I hava a dynamic list, loading from database in my php page.This list also have a delete button. When i click this button i need to get id of this button and delete from database that line with php code.
$dbh = new PDO("sqlite:database.sdb");
$sql ="SELECT * FROM clip";
foreach ($dbh->query($sql) as $row)
{
print 'Id: '. $row['id'] .'<br />';
echo '<input type="submit" id="'.$row['id'].'" value="delete" name="del">';
}
also this is my final code for button click;
$dbh->exec("delete clip where id='in here should be button id'");
How can i connect with this two code. Thanks already.
Given the level of your question I am assuming you are unfamiliar with jQuery and AJAX, but you should research both.
For a simple solution not using these you could do as follows:
Change the output to be <input type="button" id="'.$row['id'].'" value="Delete" onclick="do_delete(this.id)">;
Then you need a php script on the server side to handle the delete function, e.g. yourhandler.php
<?
//connect to DB here
if ($_POST['id']) {
$sql = "delete from clip where id=:delete_id";
$stmt = $dbh->prepare($sql);
$stmt->execute([':delete_id'=>$_POST['id']]);
}
?>
Then on the client side you need a form which submits when the button is clicked. Here is an example form code:
<form action="yourhandler.php" method="post" id="myform">
<!--Your PHP script which creates buttons-->
<input type="hidden" value="" name="id" id="delete_id">
</form>
<script>
function do_delete(which) {
var x = document.getElementById('delete_id');
x.value=which;
document.getElementById('myform').submit();
}
</script>
You can use this working jquery template for your task. It binds to all inputs that has a name="del".
<script src="http://code.jquery.com/jquery-latest.min.js"
type="text/javascript"></script>
<script>
$(document).ready(function() {
$('input[name="del"]').on('click', function() {
alert('button id is '+$(this).attr('id'));
var button_id = $(this).attr('id');
$.ajax({
method: 'post',
url: "delete.php",
data: {'did':button_id},
dataType: "html",
success: function(result) {
alert(result);
}
});
});
});
</script>
In your PHP delete file, you can retrieve the delete id via $_POST['did'].
Thanks for reading.
I'm trying to improve so I'm doing an example project to improve. I made a simple. voting system. I have number of contents which displayed by php each of them have up or down vote button. by the way I use twitter bootstrap.
this is the html code:
<html>
<button type="submit" class="btn btn-mini upvote" id="'.$data['ContentID'].'">
<i class="icon-arrow-up"></i>
</button>
<span id="voteresponse">'.$data['VoteSum'].'</span>
<button type="submit" class="btn btn-mini downvote" id="'.$data['ContentID'].'">
<i class="icon-arrow-down"></i>
</button>
</html>
the problem is when I lick up button which is class="upvote" all other buttons does same thing. because the data populated by php there are many of them.
this is my javascript.
<script>
jQuery(document).ready(function($){
$('.upvote').click( function(event) {
event.preventDefault();
$("#voteresponse").html('');
var voteID = $(".upvote").first().attr("id");
$.ajax({
url: "/ajax.php?Page=votetitle",
type: "post",
dataType: "json",
data: {id : voteID},
success: function(data, textStatus){
if(data.success == 'true'){
$('#voteresponse').html(data.message);
return true;
}else{
$('#voteresponse').popover({
title: 'Hata!',
content: data.message
});
}
},
error:function(){
$('#voteresponse').popover({
title: 'error!',
content: 'Server error'
});
}
});
});
});
</script>
and the php code is just usual database request.
<?php
if ( $_SESSION['UserID'] <1 )
die( print_r(json_encode(array('success'=>'false', 'message'=>'error for user!'))) );
print_r(json_encode(array('success'=>'true', 'message'=>$_POST['id'])))
?>
you can see the action here. if you click one of them all other up arrows do same thing. also is this approach right?
thanks. best regards
Only the first one "responds" when you click any of them... This is likely because of var voteID = $(".upvote").first().attr("id"); The voteID should be something like $(this).attr('id'); instead.
Note that you need to recognize which button was clicked, you can use for example $(this).parent()... That will give you to the upper DOM level of the clicked button (div media isotope-item) and from there you can modify only the content of that div.
try changing
var voteID = $(".upvote").first().attr("id");
to this
var voteID = $(this).first().attr("id");
or
var voteID = $(this).attr("id");
Basically I have a list of files composed from a foreach loop that all have the same code except for the name, which carries the file_id for each file. My problem is that when I added an on-click pop-up event I lose the ability to fetch the current $(".flag") attribute name. Is there a way that I can pass it along the way so I can use it in the end?
PHP: (the user sees the link which they can click...remember there are several of these as a result from the foreach loop. I'm showing one for example)
echo "<td><a href='#' class='flag' name='$files[id]' >Click Here</a> ( $files[nums] )</td>";
jQuery: (on-click this will happen)
$(".flag").live('click', function() {
$(".pop").show("slow");
return false;
});
HTML: this div will popup
<div class="pop">
<form method="post" id="new_folder" >
<p><label for="folder">Reason for Reporting?</label><textarea id="report_reason" name="report_reason" maxlenght="100" style="resize:none" cols="30" rows="5">Please limit your response to 100 characters.</textarea></p>
<p><input type="submit" value="Submit" id="message_submit"/> or <a class="close" href="/">Cancel</a></p>
</form>
</div>
jQuery: on submit I need to send the current $files['id'] and textarea value via ajax. The textarea sends the correct data, but the $(".flag") instead of being the id of the selected link it is the id of the first fetched id from the foreach loop
$("#message_submit").on("click", function(e){
var fileID = $(".flag").attr("name");
var text = $("#report_reason").val();
$(".pop").hide("slow");
$.ajax({
url: '<?php echo base_url().'home/report_file';?>',
type: 'POST',
data: { val: fileID, val2: text },
dataType: 'json',
success: function(output_string){
$(".success").text("You have flagged this file!!").show().css({"color" : "green", "margin-top" : "10px"});
$(".success").fadeOut(10000);
}
});
return false;
});
You can save the .flag link being clicked and later use it.
var flagClicked;
$(".flag").live('click', function() {
$(".pop").show("slow");
flagClicked = $(this);
return false;
});
$("#message_submit").on("click", function(e){
var fileID = flagClicked.attr("name");
....
I have this page which let the user to decide yes or no. So I'm using Jquery Ajax so the user won't have to refresh his page. I have provided the button so the user may chose 'Yes' and immediately the button change to 'No'.
I represent '0' and '1' in mysql to indicate 'No' and 'Yes'. So when the user click the button, mysql will update the record '1' or '0'.
I managed to update the mysql by first click, but when come to second click, mysql won't take the order.
Here's my Jquery Ajax code:
<script type="text/javascript">
$("document").ready(function()
{
$(".roundbox_blue").click(function()
{
$(this).toggleClass("roundbox_orange roundbox_blue");
var element = $(this);
var noteid = element.attr("value");
var info = "report="+noteid;
$.ajax({
type: "POST",
url: "mcr_external_gen.php",
data: info,
success: function(msg){
}
});
});
$(".roundbox_orange").click(function()
{
$(this).toggleClass("roundbox_blue roundbox_orange");
var element = $(this);
var noteid = element.attr("value");
var info = "not_report="+noteid;
$.ajax({
type: "POST",
url: "mcr_external_gen.php",
data: info,
success: function(msg){
}
});
});
});
</script>
Then I have this code for the user to click:
<div class="show">
<button class="roundbox_blue" value="1"> Click </button>
<button class="roundbox_blue" value="2"> Click </button>
</div>
The PHP code that will parse the AJAX query is like this:
if(isset($_POST['report']))
{
$line_id = $_POST['report'];
$Portal->LoginDB('test');
mysql_query('UPDATE `ajax` SET `report` = "1" WHERE `id`="'.$line_id.'"');
}
if(isset($_POST['not_report']))
{
$line_id = $_POST['not_report'];
$Portal->LoginDB('test');
mysql_query('UPDATE `ajax` SET `report` = "0" WHERE `id`="'.$line_id.'"');
}
The problem I'm facing is, once the user click the button, mysql did update the record however, when the user click the button second time (meaning to cancel) mysql did not update the record accordingly.
I appreciate if you guys can help me out here..
You are only hooking the blue box on doc load.
change class of second button,
<div class="show">
<button class="roundbox_blue" value="1"> Click </button>
<button class="roundbox_orange" value="2"> Click </button>
</div>