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().
Related
Trying to call function Sel_item and pass it the fieldname1 variable as well as the id. The passing of the id works fine, but as soon as I try to pass the fieldname1, it dies. Basically trying to pass the id and the name of the person in mysql database to another function.
$id = $row["id"];
$fieldname1 = $row["person_name"];
$fieldname2 = $row["check_in_butt"];
$fieldname3 = $row["date_time"];
$str = "";
if($fieldname2 == true) $str = "checked";
echo '<tr>
<td>'.$fieldname1.'</td>
<td><input type="checkbox"'.$str. 'onclick="Sel_item('.$id.,.$fieldname1.')" </td>
I usually make it like this. Work for me
<?php
$id = $row["id"];
$fieldname1 = $row["person_name"];
$fieldname2 = $row["check_in_butt"];
$fieldname3 = $row["date_time"];
$str = "";
if($fieldname2 == true) $str = "checked";
?>
<tr>
<td><?= $fieldname1 ?></td>
<td><input type="checkbox" <?= $str ?> onclick="Sel_item('<?= $id ?>', '<?= $fieldname1 ?>')"></td>
</tr>
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.
I have a table of customers. Each customer has a first and a last name. The two text fields of the table are editable. So users can update the information when they press Save. The problem is that I cannot get the specific row information,I only get the first row results
I tried to match to the names with the input field but I had no success.
<?php foreach($customer as $each){ ?>
<td class="first_name" id="first" contenteditable="true"><?php echo
$each['first_name']; ?></td>
<td class="last_name" id="last" contenteditable="true"><?php echo
$each['last_name']; ?></td>
<td > <button type="button" onclick="save('<?php echo $each['first_name'];?
>','<?php echo $each['last_name'];?>');" >Save</button></td>
<? } ?>
<script type="text/javascript">
function save(first,second) {
<?php foreach($customer as $each){?>
var first_name = "<?php echo $each['first_name']?>";
var last_name = "<?php echo $each['last_name']?>";
if (first_name==first && last_name == second){
var fname = document.querySelectorAll(".first_name");
console.log(fname[0]);
}
<?php } ?>
}
</script>
You would have to use a different query selector. Assign a classname or an attribute to the elements you want to select (e.g name for querying with .name) then querySelectorAll method will return an array of the elements that matched your query.
The main problem that I see is that you create unnecessary foreach loop inside a javascript function using php.
You can dynamically create your table and the contents inside it, that's fine. But the javascript does not care about that and you should not create javascript with php. So I would do it this way.
I wrap the td's in tr's cause i'm assuming you are putting that data in tr.
<?php foreach($customer as $each){ ?>
<tr class="customer-row">
<td class="first_name" contenteditable="true"><?php echo
$each['first_name']; ?></td>
<td class="last_name" contenteditable="true"><?php echo
$each['last_name']; ?></td>
<td><button type="button" class="save">Save</button></td>
</tr>
<? } ?>
Then outside the php foreach loop i would create my script.
<script type="text/javascript">
var saveBtn = document.querySelectorAll(".save");
for(var i = 0; i < saveBtn.length; i++) {
// attach click event to every button.
saveBtn[i].addEventListener("click", function() {
var _this = this;
var _tr = _this.closest(".customer-row");
var fname = _tr.querySelector(".first_name").innerText;
var lname = _tr.querySelector(".last_name").innerText;
console.log("Name: ", fname + " " + lname");
// below you can implement your check name logic...
}
}
</script>
I'm not 100% sure if my js will not throw errors, but it should give you an indication that you should separate your server-side from client-side logic.
I am making a sales cart for a point of sale system.
I have some fields like quantity, rate etc when an item is added POS.
One can make changes to the added item like change the quantity ,price etc.
For building the POS i have used html, css, javascript, jquery, php.
On change of any fields like quantity,price etc i have added a listener to submit the change in background and update the POS accordingly.
Simplified code:
<tbody id="cart_contents">
<?php foreach (array_reverse($cart, true) as $line => $item) {
$cur_item_info = isset($item['item_id']) ? $this->Item->get_info($item['item_id']) : $this->Item_kit->get_info($item['item_kit_id']);
?>
<tr id="reg_item_top">
<?php echo form_open("sales/edit_item/$line", array('class' => 'line_item_form')); ?>
<td id="reg_item_name">
<center>
<?php echo $item['name']; ?>
</center>
</td>
<td id="reg_item_qty">
<?php
echo form_input(array('name' => 'quantity', 'value' => $item['quantity'], 'size' => '2', 'id' => 'quantity_' . $line));
?>
</td>
</form>
</tr>
<?php }?>
</tbody>
Jquery Listener:
$("#cart_contents input").change(function()
{
console.log($(this.form));
var toFocusId = $(":input[type!=hidden]:eq("+($(":input[type!=hidden]").index(this) + 1) +")").attr('id');
$(this.form).ajaxSubmit({target: "#register_container", beforeSubmit: salesBeforeSubmit, success: function()
{
salesSuccess();
setTimeout(function(){$('#item').focus();}, 10);
}
});
});
The Problem is that the listener function is not calling the ajaxSubmit as its not finding the form.
Can anyone help me here please.
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";