I am new to jquery I know it is just a simple method to creating a function in jquery. but I am having a error in my code if anyone can help me I shall be very thankful to him.
What I have:
I have a table. in front of every record there are two buttons one for edit and one for delete record.
What I am trying to do:
When I click button it have to direct me to other page with record id where I have my PHP query to manipulate my database record.
This is how my table looks like:
This is my html code:
<tr id="<?php echo $row['id']; ?>">
<td><?php echo $inc; ?></td>
<td><?php echo $row['name']; ?></td>
<td><?php echo $row['father_name']; ?></td>
<td><?php echo $row['email']; ?></td>
<td><?php echo $row['contact']; ?></td>
<td>
<?php echo "<button class='btn' value='".$row['id']."' onclick='update(this.value)'>Edit</button>" ?>
</td>
<td>
<?php echo "<button class='btn' value='".$row['id']."' onclick='delete(this.value)'>delete</button>" ?>
</td>
</tr>
This is my Jquery code:
function delete(str){
$('delete.php?q='+str);
}
I know something is wrong but I don't know what I will also appreciate suggestion to learn.
Use ajax request for that.
function delete(value){
$.ajax({
data:{'q':value},
type:'POST',
url:'delele.php',
success:function(xhr){
console.log("record delelte");
}
});
}
Use window.location.href to redirect the page
function delete(str){
window.location.href = 'delete.php?q='+ str ;
}
Jquery try this:
$(function() {
$(document).on("click", ".btn" , function() {
var rowId = this.value;
window.location = 'delete.php?q='+ rowId ;
});
});
jQuery is not necessary, and window.location.replace(...) will best simulate an HTTP redirect.
It is better than using window.location.href =, because replace() does not put the originating page in the session history, meaning the user won't get stuck in a never-ending back-button fiasco. If you want to simulate someone clicking on a link, use location.href. If you want to simulate an HTTP redirect, use location.replace.
For example:
// similar behavior as an HTTP redirect
window.location.replace("http://stackoverflow.com");
// similar behavior as clicking on a link
window.location.href = "http://stackoverflow.com";
Related
I've a link in admin-dashboard page which on click shows "doctor-details". Now I want the admin must be able to click on the options link in the table and see full details of the doctor in the same page(I'll probably use modals for this).
So my question is how do I get the ID from the table and send it to another php file for database query?
my code for generating details about doctor(doctor-details.php)
<?php
require('config.php');
$sql = "SELECT * FROM doctor";
$result = mysqli_query($conn, $sql);
$count = mysqli_num_rows($result);
if($count > 0){
while($rows = mysqli_fetch_array($result)){
?>
<tr>
<td><?php echo $rows['id'];?> </td>
<td><?php echo $rows['f_name'];?></td>
<td><?php echo $rows['l_name'];?></td>
<td><?php echo $rows['email'];?></td>
<td><?php echo $rows['contact_number'];?></td>
<td><?php echo $rows['gender'];?></td>
<td> Options</td>
</tr>
<?php
}
}
?>
and finally my ajax:
$(document).ready(function(){
$("#load-doctor-data").click(function(){
$.ajax({
url: 'views/admin/doctor-details.php',
type: 'POST',
success: function(result){
$("#response-doctor").html(result);
}
});
});
});
//Hide table on login
$("#show-doctor-details").hide();
$(document).ready(function(){
$("#load-doctor-data").click(function(){
$("#show-doctor-details").show();
$("#show-patient-details").hide();
});
});
So, the gist is I want to click on options and show full details of John Doe.
Data attributes are a pretty easy to pass data. So when first appending make sure you have the id in the options field like this:
<td> Options</td>
Now you can get this id in your click event handler like this:
$(document).on('click','.options', function(){
var currentId = $(this).data('id');
...
});
Also you don't need two document readys. You can wrap both event handlers in one document ready.
So what I'm trying to do is the following:
first: When the button add-location is clicked this loads a php file using AJAX.
jQuery
$('.add-location').click(function() {
var locationName = $(this).data('location');
$.post('http://www.example.com/reload-location-2.php?addparam',
{locationName: locationName}, function(data) {
$("textarea#location").html(data);
})
});
PHP FILE
<?php start_session();
$locationName = array_key_exists('locationName',
$_POST) ? (string) $_POST['locationName'] : '';
if(isset($_GET['delparam'])){
unset($_SESSION['locations'][$locationName]);
}
if(isset($_GET['addparam'])){
$_SESSION['locations'][$locationName] = $locationName;
}
?>
<?php foreach ($_SESSION['locations'] as $location): ?>
<?php echo htmlspecialchars($location); echo "\n"; ?>
<?php endforeach;?>
This all works like a charm! No worries here. No what I'm trying to do is when the button add-location is clicked this echo's the following code to a div called textarea#thema.
<?php foreach ($_SESSION['products'] as $product): ?>
<?php echo htmlspecialchars($product); echo "\n"; ?>
<?php endforeach;?>
OR, if that's easier when the page is loaded -> echo that code to the textarea#thema div.
I do not understand AJAX that much but I'm getting there. But I think the last option maybe the easiest solution?
Could anyone help me figure this one out?
What I tried
Right now, When the button add-location is clicked I reload a previous jQuery script:
$('.add-location').click(function() {
var productName = $(this).data('product');
$.post('http://example.com/reload-2.php?addparam',
{productName: productName}, function(data) {
$("textarea#thema").html(data);
})
});
This works, but it adds an extra <p>-tag leaving me with a line break in the code.
I also changed the .html(data); to .val(data); for the textareas. Also I made a new PHP file with just this code:
<?php foreach ($_SESSION['products'] as $product): ?>
<?php echo htmlspecialchars($product); echo "\n"; ?>
<?php endforeach;?>
And this jQuery code:
$('.add-location').click(function() {
var productName = $(this).data('product');
$.post('http://www.example.com/reload-3.php',
{productName: productName}, function(data) {
$("textarea#thema").val(data);
})
});
But still no go... And I don't think this is the way to go?? I hope I gave enough information.
You should use .val() function to fill textarea, not .html().
I need help with a feature for my site. I just cant make the script work.
I have this site:
http://imgur.com/oMy69yx
As you can see, there is one "Edit" button for each row. The goal here is that when the user press one of those, the row gets editable (except for the subject name) and the button changes to "Save". Then the user can edit all he wants and save it. When he clicks "Save" I get all fields that were changed and update via SQL query.
PS:The number of rows is undefined because the user can input as many rows as he wants.
So I thought in some script like this:
var button = document.getElementByClassName("clicker");
var buttonclicked = function(){
button.textContent = "Save"; //And things get editable};
button.addEventListener("click", buttonclicked);
But this wont work because var button is an array of buttons, and the addEventListener wont work with that...
What can I do to solve this?
This is the HTML generating the table: (Might be a little bit messy)
<?php $i = 0;?>
<?php foreach ($rows as $row): ?>
<tr class="d1">
<td><?php echo $row["subject"] ?></td>
<td>
<?php
if($row["G1"] != -1)
echo $row["G1"];
?>
</td>
<td>
<?php
if($row["G2"] != -1)
echo $row["G2"];
?>
</td>
<td>
<?php
if($row["G3"] != -1)
echo $row["G3"];
?>
</td>
<td>
<?php
if($row["G4"] != -1)
echo $row["G4"];
?>
</td>
<td>
<?php
$round = round($row["normal"],2);
echo $round;
?>
</td>
<td><?= $row["creditos"] ?></td>
<td><?php echo $row["criteria"];?></td>
<td><?php echo "<button id = clicker.$i>Edit</button>"; ?></td>
</tr>
<?php $i++; ?>
<?php endforeach ?>
You can assign to each button via for loop:
var buttons = document.getElementsByClassName("clicker");
var buttonclicked = function(e){
e.target.textContent = "Save"; //And things get editable};
for(var i = 0; i < buttons.length; i++)
{
buttons[i].addEventListener('click', buttonclicked);
}
Also notice that I'm working on e.target in the buttonclicked function, rather than button, so that we get the right button each time.
The e is the event object that holds information about the onclick event. If you look at the buttonclicked variable you see it's assigned function(e) now instead of just function().
Problem: All the other portions of the program works. When I add data:$("#friendadd").val() it won't update the table. I believe the problem might be with the value form? I've seen others use it to get the value of textboxes but shouldn't it still work when using a submit button?
Purpose: each user on the website has an add-as-friend button next to it. When you click on that button, I want to put the userid of that user into a database "friends".
Javascript
<script>
$(document).ready(function(){
$("#friendadd").submit(function(){//Used to be .each
$.ajax({
type:"POST",
url:"getuser.php",
data:$("#friendadd").val()
});//Add data: and success:function
//$.post('getuser.php');//JSON AJAX, {UserId:"13", FriendId:"16"}
})
});
</script>
PHP and HTML; $ctk_values are each of the users
<form id="friendadd">
<?php
for($i=0; $i<$ctk->rowCount(); $i++){
echo "<img src='".$ctk_values[$i][6]."' alt='Blank' style='width:64px;height:64px'>";//PP, Later add clickable profile
echo "<th rowspan='3'>Attributes</th>";
echo "<tr> ".$ctk_values[$i][0]."</tr>";//UN
echo "<tr> ".$ctk_values[$i][1]."</tr>";//UL
echo "<tr> ".$ctk_values[$i][5]."</tr>";//UA
?>
<input type="submit" value="<?php echo $ctk_values[$i][4];?>"><br>
<?php
}//Ends for loop
?>
</form>
<?php
}
}
?>
getuser.php
<?php
if(!isset($_SESSION)){
session_start();
}
require "conn.php";
$gtu = $dbh->prepare("INSERT INTO friends (AskerId, AcceptorId, mutual, type) VALUES(:AskerId, :AcceptorId, :mutual, :type)");
$gtu->execute(array(
'AskerId'=>$_SESSION['UserId'],
'AcceptorId'=>$_POST['friendadd'],
'mutual'=>false,
'type'=>'friend'
));
?>
Hi i'm working on a Web System, i have a script which displays information about equipment inventory in a company. This information is stored in a Database (MySQL) and i'm using an HTML table to display the information previously stored in a PHP Variable which holds the query ResultSet and using a While Loop in order to retrieve every value and display it in the table.
Everything is perfect at this point.
But i have added a Search button, in which the user enters the Equipment's ID to search for. Then, if the ID exists, i want to set to RED the border of the row that has the ID just found.
The problem is that when i try to get the ID of the row to be changed i get null from the Javascript which changes the style attribute of that row.
I use a While Loop to generate the HTML table, and i just have declared 2 rows:
One for the header of the table
One to display the data.
I tried to dynamically generate IDs for the second row (for example, if there are 3 computers, then there'll be 3 rows with different IDs, and these IDs are based on the current ID stored in a variable called $c1).
Then i just call the JS sending a variable that has the ID to search for (this ID is supposed to be the same as the row's ID) and set the Background of that row to RED. But i got the error "Cannot read property 'style' of null". I've search and the only thing i've found is that i have to wait until the document loads and then call the Js in order to search the element, but it didn't work.
PHP
<table>
<tr>
<td>ID del Equipo</td>
<td>Tipo</td>
<td>Marca</td>
<td>Modelo</td>
<td>Procesador</td>
<td>Memoria Ram</td>
<td>Detalles</td>
<td>Area</td>
</tr>
<?php
$i = 0;
while ($i<$num)
{
$c1 = mysql_result($result, $i, "ID del Equipo");
$c2 = mysql_result($result, $i, "Tipo");
$c3 = mysql_result($result, $i, "Marca");
$c4 = mysql_result($result, $i, "Modelo");
$c5 = mysql_result($result, $i, "Procesador");
$c6 = mysql_result($result, $i, "Memoria RAM");
$c7 = mysql_result($result, $i, "Detalles");
$c8 = mysql_result($result, $i, "Area");
?>
<tr id="<?php echo $c1; ?>">
<td><?php echo $c1;?></td>
<td><?php echo $c2;?></td>
<td><?php echo $c3;?></td>
<td><?php echo $c4;?></td>
<td><?php echo $c5;?></td>
<td><?php echo $c6;?></td>
<td><?php echo $c7;?></td>
<td><?php echo $c8;?></td>
</tr>
<?php
$i++;
}
?>
</table>
</section> //The end of the section where the info is displayed
<script type="text/javascript">
remarcarBusqueda(<?php echo $_SESSION['VALOR_BUSQUEDA'];?>);
//The $_SESSION ['VALOR_BUSQUEDA'] holds the value (ID) of the
//element to search that has been already checked in another script
</script>
JavaScript
function remarcarBusqueda(elemento)
{
rem = document.getElementById(elemento);
rem.style.background="red";
}
Notes:
I only got the null error
So i hope you guys can help me. Thanks.
P.S: I'm from Mexico, that's why the var names are in Spanish, sorry :)
UPDATE Here is the HTML output:
http://imgur.com/Y262vCe
UPDATE #2 If i change the tr ID to tr id="Row", for example, no matter what value i enter (1, 4 or 7), the 1st Row always gets Red, and i don't get the null error. Of course, i don't send any parameter to the JS, and in the line document.getelementById i put "Row" as parameter.
Is it $c1 is numeric value??
Try using this to fix:
<tr id="myTr<?php echo $c1; ?>">
...
<script type="text/javascript">
...
remarcarBusqueda('myTr' + <?php echo $_SESSION['VALOR_BUSQUEDA'];?>);
</script>
Note:
in HTML DOM, all objects should never using the numeric as id, because Javascript cannot access it.