Ive got a table with buttons:
and Ive set specific ID's to each one but I dont see how I can access them all from a JQuery script so i can set a specific get to each one of them.
Edit:
All of the buttons have unique ids:
Shown in google chrome inspect element :
When I click REMOVE i want the row to get removed. I can do this and have done this with PHP via GET however I dont want to have to refresh the page every time I remove one. I tested doing it with JQuery .GET and it works fine however I dont want to have to make a new script to have to delete every single row, rather do it dynamically by getting the ID of the row and removing the row that the REMOVE button is in. Ive tried multiple ways of doing this but all I do is fail.
This is the script that prints the data in the table
function print_data($info1,$info2,$info3,$info4,$info5,$info6,$info7,$info8){
echo"<tr><td id='notice1id$info8'>$info1</td><td id='noticename$info8'>$info2</td><td id='noticetype$info8'>$info3</td><td id='noticecontent$info8'>$info4</td><td id='noticeshow$info8'>$info5</td><td id='noticeedit$info8'><a href='admincp.php?edit=1&editid=$info6'><div class='btn btn-success'>Edit</div></a></td><td id='noticeremove$info8'><input type='button' id='remove$info8' value='remove' onclick='removeMe();' class='btn btn-danger' name='$info8'></td><td style='display:none;'><p id='getid' name='$info8' style='display:none;'></p></td><td style='display:none;'><script> function removeMe() { alert($info8);}</script></td><input id='noticeid$info7' class='form-control' style='display:none;' type='text' name='$info8' value=$info7></td></tr>";
?><?php
}
while($row = mysqli_fetch_array($result, MYSQLI_ASSOC)){
print_data($row['NoticeID'],$row['NoticeName'],$row['NoticeType'],$row['NoticeContent'],$row['NoticeShow'],$row['NoticeID'],$row['NoticeID'],$row['NoticeID']);
}
JavaScript:
$(document).ready(function () {
var id = $("#getid").attr("name");
alert("#remove" + id);
$("#remove" + id).click(function () {
var getcontent = $("#noticeid4").val();
$("#notice1id5,#noticename5,#noticetype5,#noticecontent5,#noticeshow5,#noticeedit5,#noticeremove5").slideUp(300, function () {
// Animation complete.
});
});
});
Related
So i'm trying to use a table that generates multiple submit buttons per row. I'm doing this with a php while loop. Each button has a value of the corresponding "id" from the database. The table populates with everything from the database that has a status of "Ordered". On each row I can click a button that will change it to "Received" or "Cancelled". This is why I assigned a value of "id" to each button, so it only affects the status of the row that's being clicked. So far, all this is working fine but I would like to be able to do this using ajax instead of refreshing the page each time.
Currently I have this for my ajax:
$('#cancel').click(function(e) {
e.preventdefault();
//set value of cancel button to a variable
var value = $("#cancel").val();
$.ajax({
method: "POST",
url: "updatetable.php",
data: {cancel: value},
});
});
and this for my PHP:
//updatetable.php
if($_POST['cancel']) {
echo $_POST['cancel'];
}
the reason for the "if" statement is because I also need to click received but if yall help me figure this part out, i can go the rest of the way on my own.
Right now, I can't even get this to connect with a simple echo of the POST variable.
Just for reference, here is my html markup for the buttons:
<button type='submit' class='btn btn-danger' name = 'cancel' id = 'cancel' value='".$row['order_id']."'>Cancel</button>
<button type='submit' class='btn btn-success' name = 'received' id= 'received' value='".$row['order_id']."'>Received</button>
(the buttons are output by a PHP echo statement-hence the concats in the value setting)
I've tried to follow several tutorials but I can't figure out why this doesn't connect the right way. Perhaps I need to change it to an input with type "button" instead of button type submit? But then the actual value of the "value" would appear as the text instead of the word "cancel". Any help is appreciated.
you are going to want to put a unique identifier on your IDs. Here is what I would do (instead):
function cancelClick(btn){
e.preventdefault(); // I dont think this is needed
var value = $(btn).val();
$.ajax({
method: "POST",
url: "updatetable.php",
data: {cancel: value},
});
});
actually I would do this but that isnt what you used:
function cancelClick(btn){
var value = $(btn).val();
$.post("updatetable.php",{cancel: value});
});
then your UI like:
<button type='button'
class='btn btn-danger'
value='<?=$row['order_id'] ?>'
onClick="cancelClick(this)">Cancel
</button>
<button type='button'
class='btn btn-success'
value='<?=$row['order_id'] ?>'
onClick="otherFnName(this)>Received
</button>
edit: to perform a task on return you do something like this:
function cancelClick(btn){
var value = $(btn).val();
$.post("updatetable.php",{
cancel: value
}, function (d){
// here is where you will do stuff on return.
// I suggest first console.log(d); and see what is returning
// return (echo) a value to at least identify the row
// you are wanting to delete, if that is what you are attempting
// be sure the element you are attempting to manipulate has
// a unique identifier (id), and then do whatever.
// you can call a function from here also, to make it neater
// this area will `happen` when your ajax is complete.
});
});
I'm using php to create 'x' amount of buttons based on the rows from a db table.
Once the button is selected i want to pass the Variable onto the php so i can used this to load specific data from the database to the Modal.
This works for the first button click and loads the data to the modal as expected, however once i close the modal and open another modal the new userdata.php?uid=$var1 doesn't seem to get received in the php by the $var2 = $_GET['uid'] and the variable just remains the same as before.
Do i need to clear the uid in the php somehow?
The Button,
$var1 = $row["Scope_ID"];
echo "<button type='button' href='userdata.php?uid=$var1' class='btn btn-
info btn-lg' data-toggle='modal' data-button='$var1' data-
target='#myModal'>$var1</button>";
The PHP,
$var2 = $_GET['uid'];
echo "<h3>$var2</h3>";
the solution is,
$( document ).ready(function() {
$('#editBox').on('hidden.bs.modal', function () {
$(this).removeData('bs.modal');
});
});
Ok guys. Im new to jquery, and I have a jquery array that I need to pass as a $_POST to the same file which is called index.php. When they click the button I need it to reload the index.php so I can get the POST. Now I'm sure I'm doing something wrong here cause this isn't working. But I'm certain that its something simple that I'm missing, or that I'm doing it all wrong and I mis-understood how this works. Any help is appreciated as I've been on this and trying to figure it out for the last 6 hours.
The index.php also contains the jquery scripts which are below, and the Post check which is
if (isset($_POST['data'])){
echo "ok, data was sent.<br>";
echo " Data is - " .$_POST['data'];
}
And the Button call
echo "<p><input type=\"submit\" class=\"input-button\" id=\"btn-add\" value=\"Add Squad\" /></p>";
Jquery
$(document).ready(function(){
// Get items
function getItems(exampleNr)
{
var count = 0;
var columns = [];
$(exampleNr + ' ul.sortable-list').each(function(){
count++;
columns.push($('#squad'+count).val(), $(this).sortable('toArray').join(','));
});
return columns.join('|');
}
$(document).on('click','#btn-get', function() {
$.post('index.php', {'data': getItems('#squad')}
});
});
You aren't doing anything with the response of your POST.
If you want it to submit like a form, you will need to create a form, attach a hidden input to it with your key-value pair, then submit that form. $.post alone is used for AJAX.
Using this code :
$("table > :not(thead) > tr.Selected").removeClass('Selected')
To find all table rows which have the class Selected and remove that class.
Plus, using this code :
var ReqID = $("table > :not(thead) > tr.Selected").attr('id')
Which is trying to find the ID off the row which has the class selected.
This code works perfectly until the table is reloaded using AJAX and then it all stops working and that line does not work.
Any ideas?
Thankss!
EDIT
More Code :
Here is the AJAX call :
function EditRequest()
{var ReqID = $("table > :not(thead) > tr.Selected").attr('id')
alert(ReqID);
$.post("a/outputresults2.php", {editdynamic: ReqID} , function(data){
$('#resultstable').html(data);
});
}
function Selected(x)
{
$("table > :not(thead) > tr.Selected").removeClass('Selected')
$('#'+x).toggleClass('Selected');
}
Here is the php that outputs the original and the table updated when its been AJAX'ed :
if($RequestID == $ID){
$requestrows.="
<tr id=\"$RequestID\" onClick=\"Selected($RequestID)\" class=\"Selected\" >
<td><input type=\"text\" id=\"MCode\" value=\"$ModCode\"></td>
<td><input type=\"text\" id=\"RName\" value=\"$RoomName\"></td>
..etc etc etc
</tr>";
}
}
if($RequestID != $ID){
$requestrows .=
" <tr id= \"$RequestID\" onClick=\"Selected($RequestID)\" >
<td>$ModCode</td>
<td>$RoomName</td>
... etc etc etc
</tr>";
}
}
echo($requestrows);
Also table being dynamically changed is called resultstable
Thanks
You probably need to call you event with a live click event that binds newly loaded object correctly:
$('#my_trigger').live('click', function() {
.. some code
})
would help to have more information from you on the exact way you are using this.
have a look at the jquery live docs
I suspect that this might be because jQuery abuses the innerHTML property. Your "ajax" response essentially destroys the existing DOM structure, when you are trying to replace the table.
To check if this is the reason, you should look at javascript console. Try using console.log() to check if elements you are selecting are actually there.
If you are trying to have a clicked row identified, you can do this:
$('#resultstable').on('click', 'tbody tr', function() {
$('#resultstable tr.Selected').removeClass('Selected');
$(this).addClass('Selected');
});
You no longer need to render that onClick event and you can get rid of function Selected(x)
edit: are you rendering the entire table just to get one row to be in edit mode? it's not very efficient, but if you are doing that, then your jquery script can be simplified to this:
$('#resultstable').on('click', 'tbody tr', function() {
$.post('a/outputresults2.php', {editdynamic: this.id}, function(data) {
$('#resultstable').html(data);
});
});
you can solve this by copying your js to reloading view outputresults2.php. On that way $(function(){}) triggered again.
I recently learned that when using onclick, for a button, the field name and button id have to each be unique. While thats not a problem, depending on how many rows my script outputs, this could be a lot of waste.
For example, i have a while loop, it does this for each person on my server (minecraft), so it could be 10, it could be 50.
this is the code to create the js objects
$kickbtn .= " $('#kick_btn$k').click(function(event) {
var player_name$k = jQuery('input[name=\"player$k\"]').val()
jQuery.get('testing.php?action=kick', { player_input: player_name$k} );
alert('Successfully kicked');
});\n\n";
this is the form data
<form name=\"$pdata[name]\" action=\"\">
<input type=\"hidden\" name=\"player$k\" value=\"$pdata[name]\">
<input type=\"submit\" id=\"kick_btn$k\" value=\"Kick Player\">
</form>
$k++;
Is there an easier way to accomplish this without creating all this excess code?
The output is nice in the html, and it does work, just hoping theres something a little more dynamic i can do, and not so messy in the code. Below is from the parsed code and works and looks good.
$('#kick_btn14').click(function(event) {
var player_name14 = jQuery('input[name="player14"]').val()
jQuery.get('testing.php?action=kick', { player_input: player_name14} );
alert('Successfully kicked');
});
Only one delegated event handler is needed, which means attaching it to a parent/container element, unless you want 50+ click handlers in your document which will unnecessarily slow things down:
// bind to all elements starting with 'kick_btn' within #container
// (could even be 'body')
$("#container").delegate('[id^="kick_btn"]', "click", function(event) {
// get the current player number from the id of the clicked button
var num = this.id.replace("kick_btn", "");
var player_name = jQuery('input[name="player' + num + '"]').val();
jQuery.get('testing.php?action=kick', {
player_input: player_name + num
});
alert('Successfully kicked');
});
Reference:
http://api.jquery.com/attribute-starts-with-selector/
http://api.jquery.com/delegate/