pass variable to php page using ajax jquery? - javascript

index.html
<?php
while($admin_data=mysql_fetch_row($query2)){
?>
<tr>
<td><?php echo $admin_data[0];?></td>
<td><?php echo $admin_data[1];?></td>
<td><?php echo $admin_data[2];?></td>
<td><?php echo $admin_data[3];?></td>
<td>Delete</td>
</tr>
<div id="result_delete"></div>
<?php
}
?>
jquery file
<script>
$(document).ready(function(){
$("#delete").click(function(){
$("#result_delete").load("delete.php");
});
});
</script>
delete.php
<?php
include "db/db.php";
if($_GET['drop']){
$drop=$_GET['drop'];
}
echo $drop;
?>
how to pass value to delete.php page.
i want to pass a variable to url
thanks for your answers

IDS are SINGULAR they can not repeat. Use a class.
<td>Delete</td>
and
$(".delete").click(function(){
better yet
$("#tableId").on("click", ".delete", function(){
And hopefully the <div id="result_delete"></div> does not live right after the TR since that is invalid HTML markup.
Since you can not figure out how to get the id, it is simple.
$("#tableId").on("#click", ".delete")function(){
var val = encodeURIComponent($(this).data("val"));
$("#result_delete").load("delete.php?drop=" + val);
});
Doing a delete request with a get request is a bad idea

Related

Why getElementById is not working with php echo when creating a dynamic table?

I'm trying to create a table, and in each row there will be a picture, and when the picture is clicked a js function gets executed, each entry of a row in the table will create a js script for the picture of that row. And for that reason I'm using <?php echo ?> on the id of the image and on the getElementById in the script. And I have no problem using the echo on the id of the image, but if I put it inside getElementById the js code doesn't get executed. And if I write instead directly the number of the id let's say
getElementById("3") instead of getElementById("<?php echo $contact['id']; ?>") it works perfectly, but if use echo it doesn't, even when the source code of the loaded page shows that getElementById("<?php echo $contact['id']; ?>") successfully got printed as getElementById("3")
Here's the full table's code:
<table>
<thead>
<tr>
<th>#</th>
<th>Name</th>
<th>Status</th>
</tr>
</thead>
<tbody>
<?php $contacts = getContacts();
if($contacts->num_rows) {
foreach($contacts as $contact) { ?>
<tr>
<td>
<img id="<?php echo $contact['id']; ?>" src="img/arrow.png" onclick='removeImage("");'>
<script type="text/javascript">
function removeImage() {
document.getElementById("<?php echo $contact['id']; ?>").style.display = "none";
}
</script>
</td>
<td><?php echo $contact['Name']; ?></td>
<td><?php echo $contact['Status']; ?></td>
</tr>
<?php }} ?>
</tbody>
</table>
When looping, you are recreating the same function over and over again, but with a different ID in each. However, you can't create the same function over and over again with the same name.
On your img change removeImage('') to removeImage(this)
<img id="<?php echo $contact['id']; ?>" src="img/arrow.png" onclick='removeImage(this);'>
Then outside of the loop just have a single function that refers to the element passed to it
function removeImage(el) {
el.style.display = "none";
}

Delete from database using javascript

I have a page containing a database table with all the rows and columns.
What I am trying to do is to select all the rows I want and then delete them when I click on the button.
This is what I've done so far in the table.php page:
<?php
include "config.php"; //connection to database
incude "home.js";
$funcao="Select * from palavras";
$result=mysqli_query($link, $funcao);
?>
<button id="button_apaga" type="button" onclick="delete()" > DELETE </button>
<?php if($result->num_rows > 0) { ?>
<table class="table">
<tr>
<th>IdPalavra</th>
<th>Palavra</th>
<th>Grau de Dificuldade</th>
<th>Data</th>
<th>Hora</th>
<th>Selecionar</th>
</tr>
<?php while($row = mysqli_fetch_assoc($result)) { ?>
<tr role="row">
<td><?php echo $row['idpalavras']; ?></td>
<td><?php echo $row['palavra']; ?></td>
<td><?php echo $row['graudificuldade']; ?></td>
<td><?php echo $row['data']; ?></td>
<td><?php echo $row['hora']; ?></td>
<td><input type="checkbox" name="check" id="checkbox" /></td>
</tr>
<?php } ?>
</table>
<?php }
else{
echo "0 resultados";
} ?>
JavaScript Page (home.js):
function delete(id){
var check = document.getElementById('checkbox');
if(check.checked) {
// sql query
}
My question is how can I do que sql query considering it's in a different page. Can I just open php and put the query inside?
Also how can I receive all the IDs from the selected rows to the function?
Thank you in advance.
One approach would be to use AJAX. For the purpose of condensing the code, I'm going to also incorporate jQuery into this solution. I am also going to change your checkbox to an individual button link for the sake of making this a bit less code. A solution to delete multiple at the same time could work similarly to this, but since you're using AJAX most likely this is going to be easier for your users.
Modify table.php
<?php
include "config.php"; //connection to database
incude "home.js";
$funcao="Select * from palavras";
$result=mysqli_query($link, $funcao);
?>
<?php if($result->num_rows > 0) { ?>
<table class="table">
<tr>
<th>IdPalavra</th>
<th>Palavra</th>
<th>Grau de Dificuldade</th>
<th>Data</th>
<th>Hora</th>
<th>Selecionar</th>
</tr>
<?php while($row = mysqli_fetch_assoc($result)) { ?>
<tr role="row" class="palavras_row">
<td><?php echo $row['idpalavras']; ?></td>
<td><?php echo $row['palavra']; ?></td>
<td><?php echo $row['graudificuldade']; ?></td>
<td><?php echo $row['data']; ?></td>
<td><?php echo $row['hora']; ?></td>
<td>Delete</td>
</tr>
<?php } ?>
</table>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js?ver=3.3.1"></script>
<script type="text/javascript">
(function($) {
$(document).on('click', '.palavras_row a.palavras_delete', function() {
var _id = $(this).attr('data-id');
var _row = $(this).parent().parent();
$.ajax({
url: 'delete.php',
data: {
idpalavras: _id
},
type: 'POST',
dataType: 'json',
success: function(__resp) {
if (__resp.success) {
_row.remove(); // Deletes the row from the table
}
}
});
});
})(jQuery);
</script>
Create a new file in the same folder as your table.php and name it delete.php
<?php
$idpalavras = filter_input(INPUT_POST, 'idpalavras', FILTER_SANITIZE_NUMBER_INT);
$success = false;
if ($idpalavras) {
include "config.php"; //connection to database
$funcao="delete from palavras where idpalavras = " . $idpalavras;
$result=mysqli_query($link, $funcao);
$success = true;
}
header('Content-Type: application/json');
echo json_encode(array('success' => $success));
The solution above sends a simple command to your PHP backend where the delete query can be run by PHP. You cannot run a mysql command directly from javascript since that is frontend code.
This code is a functional solution, but it is abbreviated; a more complete solution would have more detailed handling of potential errors (either via AJAX or processing your delete query). It should also have some security on your delete.php to make sure unauthorized users aren't able to delete records without the proper permission to do so.

Display progress of a long mysql query using php

Im trying to display the progress percentage of a long mysql query using php
I have button to make the filter in my database , that runs a js function that calls using ajax a php file
function show(){
$.ajax({
url:"backend.php",
type:"POST",
beforeSend:function(){
$("body").addClass("loading");
},
success:function(data){
$("tbody").html(data);
$("body").removeClass("loading");
}
});
}
and i have a loading div
<div class="mod">
<h1>Progress : <input type="text" id="percents"></span>
</div>
on my backend file , i fetch the result using foreach loop on tbody
inside that tbody , i increment a $counter then calculate the percentage using
$percent = ($conteur/$total) * 100;
Now, when i write javascript code inside the loop , like alert or console.log it works perfectly and display the percentage progress
while($row1=mysql_fetch_array($rs1)){
$conteur++;
$percent = ($conteur/$total) * 100;
$cust_perc=$percent;?>
<script>document.getElementById("percents").value = <?php echo $cust_perc ?>+" %";</script>
<tr>
<th>Centrale</th>
<td><?php echo $row1[5];?></td>
<td><?php echo $row1[0];?></td>
<td><?php echo $row1[1];?></td>
<td><?php echo $row1[2];?></td>
<td><?php echo ($row1[4]/1000)." T"; $tonnage+=($row1[4]/1000);
$tonnage_roch+=($row1[4]/1000);?></td>
<td>-</td>
<td><?php echo $row1[3];?></td>
<td>-</td>
<td><?php echo $row1[6];?></td>
<td><?php echo $row1[7];?></td>
<td>-</td>
<td>-</td>
</tr>
<?php
} ?>
but when i try to make change in my loading div input , mytable looks endomaged and no changes done !!
can someone has an idea please ?
Logically it will go like this:
$('#percents').val('<?php echo $percent; ?>');
but the information you provided in question is very less to be sure.

Running a php function when dropbox on change event and returns a table from the php function

I have the following code for a dropbox;
<select name="Symptom" id="Symptomid" onchange="LSC()">
On change in the dropbox i want to run the following php code;
<?php
$data = array();
{
$symptoms_name = $_POST['Symptom'];
$sql1 = mysql_query("SELECT name,description , comments
FROM symptoms WHERE symptoms.name ='$symptoms_name'") or
die(mysql_error());
while($row1 = mysql_fetch_assoc($sql1)){
$data[] = $row1;
}
}
?>
<?php
if($data){
?>
<table border="1">
<tr>
<td>name</td>
<td>description</td>
<td>comments</td>
</tr>
<?php
if($data){
foreach($data as $sy){
?>
<tr>
<td><?php echo $sy['name']; ?> </td>
<td><?php echo $sy['description']; ?> </td>
<td><?php echo $sy['comments']; ?> </td>
</tr>
<?php
}
}
?>
<?php
}
?>
</table>
}
and display this table under the dropbox on the original html .
I think we have to run a java script which will call the php function and retun the table to the original html.
Kindly assist, I know we have to use ajax.
Regards
Azhar
sorted,
see this has a similar problem
http://www.w3schools.com/php/php_ajax_database.asp
Regards
Azhar

Dynamically adding and deleting table rows - Yii Framework

I am trying to create form by dynamically adding rows and deleting it when user clicks on delete button using php code,
below is my code to render first row while opening the form ,
<div class="selector-details" style="display:none">
<div class='newfield'>
<div id='container'>
<table id="tid">
<tr>
<td><?php echo CHtml::dropDownList('field_list','',$field_name); ?></td>
<td><?php echo CHtml::dropDownList('field_list','',$operator); ?></td>
<td><?php echo CHtml::textField('querybox'); ?></td>
<td> <?php echo CHtml::imageButton(Yii::app()->request->baseUrl.'/images/Trash.jpg',array('class'=>'trash-action')); ?></td>
<?php echo "<br>"; ?>
<td> <?php echo CHtml::dropDownList('condition_check','',$condition_check);?></td>
</tr>
</table>
</div>
</div>
<?php
echo CHtml::button('Add',array('class'=>'addfield-button','background-style'=>'none'));
how i should make call the above code to add rows and delete particular row when user clicks on the row delete button ? I am new to yii please provide any idea to go further.
$script = 'alert("hello")';
Yii::app()->getClientScript()->registerScript('#test', $script,CClientScript::POS_HEAD );
echo CHtml::button('Add',array('class'=>'addfield-button','background-style'=>'none','onclick'=>$script));
if you real want to use Yii style, you can open framework code and there is a good code that you want, search : CButtonColumn.php

Categories

Resources