I have a javascript function to call this result in a div innerhtml. How to alert 'Alert Function' when button on click?
$html.='<table class="table table-striped table-bordered table-hover">
<thead>
<tr>
<th width="5%">#</th>
<th>Title</th>
<th>Action</th>
</tr>
</thead>
<tbody>';
$c=1;
foreach($titles AS $item){
$html.='<tr>
<td>'.$c.'</td>
<td>'.urldecode($item->title_content).'</td>
<td><button type="button" class="btn btn-danger" onclick="alert(\'**Alert Function**\')">Delete</button></td>
</tr>';
$c++;
}
$html.='</tbody>
</table>';
echo $html;
Thanks
Since this is PHP, you can directly insert onClick() event like this:
<td><button type="button" id="deleteButton" class="btn btn-danger" onclick="alertFunction()">Delete</button></td>
And then in JavaScript file:
function alertFunction()
{
alert('My custom text');
}
Let me know if that solves your problem and if I understood your question correctly.
If this onClick() is written in JavaScript itself, then remove that part and add additional line in JavaScript script:
document.getElementById("deleteButton").addEventListener("click", alertFunction);
Create a separate function to handle onclick event. This will be helpful in future if you want to pass any argument
<td><button type="button" class="btn btn-danger" onclick="clickButton()">Delete</button></td>
Somewhere in your code inside script tag create a function call clickButton()
function clickButton(){
alert('Alert Function')
}
Related
I am trying to create a new table row every time the associated button is clicked. However, once I click the button and I go to select the row, it does not get highlighted. I have an append function that passes a <tr> to the html. My end goal is to have the the new row that was appended become clickable and can be selected.
Code:
<div class="col-md-3 left-pane">
<div class="row justify-content-md-center">
<button class="btn btn-sm btn-block eNew">New Tier</button>
</div>
<hr>
<table class="table table-sm table-hover tAdd">
<tbody>
<tr>
<td>IIS</td>
<td><button class="btn btn-sm btnD">Delete</button></td>
</tr>
<tr>
<td>SQL</td>
<td><button class="btn btn-sm btnD">Delete</button></td>
</tr>
<tr>
<td>Windows File Share</td>
<td><button class="btn btn-sm btnD">Delete</button></td>
</tr>
<tr>
<td>Etc</td>
<td><button class="btn btn-sm btnD">Delete</button></td>
</tr>
</tbody>
</table>
</div>
Javascript:
$(".eNew").on("click", function(event){
$(".tAdd tbody").append(
"<tr>" +
"<td>New Selector</td>" +
"<td><button class=\"btn btn-sm btnD\">Delete</button></td>" +
"</tr>"
);
$(".tAdd tr").click(function() {
$(".tAdd tr").removeAttr('class');
$(this).toggleClass("table-active");
});
Also, it works for the original <tr> that is in the html file but for some reason when I append a table row it does not work.
This is entirely due to the fact that dynamic content is not bound using the event handler you have declared:
$(".eNew").on("click", function(event){
Although this will bind to all .eNew elements when the code first runs, new elements will not be bound.
Instead, bind to the document and specify .eNew as a selector for the click event and it will work:
$(document).on("click", ".eNew", function(event){
Edit following OP comment about not working
Just to verify that your code should now look like this:
$(document).on("click", ".eNew", function(event){
$(".tAdd tbody").append(
"<tr>" +
"<td>New Selector</td>" +
"<td><button class=\"btn btn-sm btnD\">Delete</button></td>" +
"</tr>"
);
});
$(document).on("click", ".tAdd tr", function(event){
$(".tAdd tr").removeAttr('class');
$(this).toggleClass("table-active");
});
I'm trying to create a button, by pressing it should dynamically add rows to the table. However when I try to call the function in TS (save_row()), it throws error.
How can I call the function in TS/how can I dynamicall append the rows by pressing the button?
HTML:
<table id="myTable">
<thead>
<tr>
<th>GEOGRAPHY</th>
<th>COUNTRY</th>
<th>STATE</th>
<th>REGULATION</th>
<th>SMS</th>
<th>WEB</th>
<th>EMAIL</th>
<th>OPERATION</th>
</tr>
</thead>
<tbody #ir>
</tbody>
</table>
TypeScript:
var d=geo_Value;
var len=d.length;
var row = this.renderer.createElement('tr');
const col=this.renderer.createElement('td');
row.appendChild(col);
col.outerHTML ="<tr id='row"+len+"'><td
id='name_row"+geo_Value+"'>"+cou_Value+"</td><input type='button'
id='save_button' value='Save' class='save' onclick='save_row("+len+")'>
</td></tr>";
this.renderer.appendChild(this.ir.nativeElement,row);
let idGet=document.querySelectorAll('#save_button');
var myMessage = "it's working";
function save_row(a) {
}
In angular ,event binding should be like this
id='save_button' value='Save' class='save' (onclick)='save_row("+len+")'>
You are missing brackets.
I have a foreach loop in ASP.net
<table id="Employee" class="table table-responsive table-bordered">
<thead>
<tr class="unselectable">
<th>
Selecteer folder:
</th>
</tr>
</thead>
<tbody>
#foreach (var item in Model)
{
<tr>
<td>
<a onclick="test(this)">#item.FolderName</a>
</td>
</tr>
}
</tbody>
</table>
now this result in a table with a few folders, now I want to click on a folder, and send it to a function with the text of item.Foldername as parameter.
I.E:
We have 2 folders, FolderA and FolderB, I want it to be able to click on FolderA, then it goes to the javascript function and adds "FolderA" as a parameter.
function test(a) {
alert(a);
}
Something like this.
I don't entirely know how I could give the value of the particular item as a parameter. I've done my research and I came to the conclusion to use (this) on the onclick method, but for some reason it is not working. what exactly am I doing wrong here?
You can try by using textContent or innerHTML
function test(a) {
alert(a.innerHTML);
}
This might be a simple question but have kept me busy for the best part of a hour.
I have the following script which generates all active reservations, in the table reservations
require("../includes/connect.php");
function dispAllReservations(){
$i= 1;
global $db;
$date = date('Y-m-d');
$sql ="SELECT * FROM
reservations WHERE pickup_date > '$date'";
$statement = $db->prepare($sql);
$statement->execute();
$bookings = $statement->fetchAll();
$statement->closeCursor();
echo'<table cellpadding="0" cellspacing="0" class=
"table-responsive gzblog-table" id="gzhotel-booking-booking-id">
<thead>
<tr>
<th class="date-th">Reservation ID</th>
<th class="title-th">Car Group</th>
<th>Pickup Date</th>
<th>Return Date</th>
<th>Customer</th>
<th>Email</th>
<th>Amount</th>
<th></th>
<th></th>
<th></th>
</tr>
</thead>
<tbody>';
foreach($bookings as $booking){
if($i%2 == 0){
$class = 'odd';
}
else{
$class = 'even';
}
echo' <tr class='.$class.'>';
echo'<td>'.$booking['res_id'].'</td>';
echo'<td>'.$booking['car_group'].'</td>';
echo'<td>'.$booking['pickup_date'].'</td>';
echo'<td>'.$booking['return_date'].'</td>';
echo'<td>'.$booking['renter_name'].'</td>';
echo'<td>'.$booking['email'].'</td>';
echo'<td>AMOUNT HERE</td>';
echo'<td><a class="btn btn-primary btn-sm fancybox" href="#email">
<span class="glyphicon glyphicon-envelope"></span></a>
</td>';
echo'<td><a class="btn btn-success btn-sm">
<span class="glyphicon glyphicon-pencil"></span></a>
</td>';
echo'<td><a class="btn btn-danger btn-sm icon-delete">
<span class="glyphicon glyphicon-trash"></span></a>
</td>';
echo'</tr>';
}//foreach
echo'</tbody>';
echo'</table>';
}//function
The output of the script generates the following
My Problem / Question
When delete button is clicked -- I need to ensure the correct reservation is deleted, same with the edit button, if edit button is clicked I need to ensure the correct user is edited.
What I need to do
I'm guessing I would need to find a way to append the corresponding value for each user in the loop to the element.
I was thinking of a textbox setting display none and then echoing the value inside the value attribute, but that didn't work...
I'm really stuck here any advise would be appreciated
NOTE: All emails are fictional
Try this:
<a class="btn btn-primary btn-sm fancybox" href="#email" onclick="onDelete(your-id)">
<span class="glyphicon glyphicon-trash"></span>
</a>
<a class="btn btn-primary btn-sm fancybox" href="#email" onclick="onEdit(your-id)">
<span class="glyphicon glyphicon-pencil"></span>
</a>
Create this function:
<script>
//Delete function
function onDelete(id){
$.ajax({
// do someting
});
}
// Edit function
function onEdit(id){
$.ajax({
// do someting
});
}
</script>
You did not tell us at all how do you want to edit/delete you reservations, but based on the tags you used you can take this approach...
1) In your PHP script generate data attributes on rows or cells, like this:
<tr data-id="put_reservation_id_here">
2) And then use jQuery to hook actions to various elements in the table:
$('#gzhotel-booking-booking-id').on('click', '.icon-delete', function() {
var reservationId = $(this).closest('tr').data('id');
// now you have reservation ID and do whichever AJAX call with it
});
You can use data attributes in your html and then get the data attribute value using javascript.
Example:
In your button:
<a class="btn btn-danger btn-sm icon-delete" data-id="your_Id"><span class="glyphicon glyphicon-trash"></span></a>
Replace your_Id with the correct id.
Then using javascript on your onClick event:
$(this).data('id');
This will retrieve the id that you need to handle the action.
Hope this helps.
I have a table where user can add data in it and I also have input field and save link. In my save link, if I click it.. I assign value to input field before it will go to other page. But when it go to the other page and I echo the value of inputfield, I got empty as in null value.
here's my code:
for table:
<table class="table " id="memberTB">
<thead>
<tr>
<th >First Name</th>
<th >Middle Name</th>
<th>Last Name</th>
</tr>
</thead>
<tbody>
<tr id="first">
<td><span class="edit"></span></td>
<td><span class="edit"></span></td>
<td><span class="edit"></span></td>
</tr>
</tbody>
<button type="button" class="btn btn-link" id="addrow">
<span class="fa fa-plus"> Add new row</span>
</button>
</table>
<input type="text" name="list" id="list"/>
<br>
<a class="btn" id="savebtn">Save</button>
Reset
and for js:
$('#savebtn').click(function() {
var cells = 3; //number of collumns
var arraylist = []
var x=0;
$('tbody tr',$('#memberTB')).each(function(){
var cell_text = '';
for(var i = 0 ; i < cells ; i++){
if(i==2){
cell_text =cell_text+$(this).find('td').eq(i).text()+":";
}else{
cell_text =cell_text+$(this).find('td').eq(i).text()+",";
}
}
arraylist.push(cell_text);
});
document.getElementById("list").value =arraylist;
document.getElementById("savebtn").href="<?php echo site_url('test/save');?>";
}
I got nothing when I echo it in the test.php in the save(), like this:
echo $this->input->post('list');
You are simply redirecting the page. So you will not get any value from post. If you want to get the value by post method you need to submit the value with a form.
<form id='save_form' method="post" action="<?php echo site_url('test/save');?>">
//add your html codes
//<table ..... and others
<a class="btn" href="#" id="savebtn">Save</button> //add # to href for save button
</form>
Now your js
$('#savebtn').click(function() {
//js codes that you wrote
//just replace the following line
//document.getElementById("savebtn").href="<?php echo site_url('test/save');?>";
$('#save_form').submit();
}