We Keep Coding

Using select option embeded in a table to dynamically change a user role to different roles via JQuery and AJAX

Im trying to dynamically allow the user to change a user role by using a select tag within a table which, when change triggers an event, record the changes in JQuery and send the changes to PHP via AJAX. From the image attached, the only select tag which fires an event is the one in the first row of the table shown. Any changes made to other rows does not fired an event as shown by one of the images with the console.log information. I am trying to allow whoever has the rights to change a specific user role by selecting the adajacent select option within the same table row which is send via AJAX to change the field in the database. I have posted this question before however Wesley Smith recommended I do a new post. Anyone please feel free to comment.
<?php
require_once('../../private/initialize.php');
require_login();
$admins = find_all_admins();
?>
<?php
if(isset($_SESSION['message']) )
{
echo "<div> </div><h5 style=\"color: #08ff00\">". $_SESSION['message'] ."</h5> </div>";
}
unset($_SESSION['message']);
//if(isset($SESSION['image_msg']))
//{
// echo "<div> </div><h5 style=\\" . $_SESSION['image_msg'] . "</#ffffff> </div>";
//}
?>
<form action="" method='post'>
<table class="table table-bordered table-hover">
<!-- <div id="bulkOptionContainer" class="col-xs-4">-->
<!---->
<!-- <select class="form-control" name="bulk_options" id="">-->
<!-- <option value="">Select Options</option>-->
<!-- <option value="published">Publish</option>-->
<!-- <option value="draft">Draft</option>-->
<!-- <option value="delete">Delete</option>-->
<!-- <option value="clone">Clone</option>-->
<!-- </select>-->
<!---->
<!-- </div>-->
<div class="col-xs-4" id="addnew" >
<!-- <input type="submit" name="submit" class="btn btn-success" value="Apply">-->
<a class="btn btn-primary" href="staff.php?source=add_staff">Add New</a>
</div>
<thead>
<tr>
<!-- <th><input id="selectAllBoxes" type="checkbox"></th>-->
<th>Image</th>
<th>First Name</th>
<th>Last Name</th>
<th>Email</th>
<th>Role</th>
<th>Edit</th>
<th>Delete</th>
</tr>
</thead>
<tbody>
<?php while ($all_admins = mysqli_fetch_assoc($admins)) { ?>
<tr>
<td><img src="<?php echo url_for('../images/staff/'.$all_admins['image'])?>" onerror="this.src='<?php echo url_for('../images/staff/profile.jpg') ?>'" style="border:1px solid #ddd;border-radius:2px; box-shadow: #4a5f63; height: 70px;width: 70px"></td>
<td><?php echo h($all_admins['first_name']) ?></td>
<td><?php echo h($all_admins['last_name']) ?></td>
<td><a class='btn btn-info' href="staff.php?source=show_staff&staff_id=<?php echo h($all_admins['id']) ?>"> <?php echo h($all_admins['email']) ?> </a></td>
<td>
<?php
$role = $all_admins['role'];
switch ($role){
case 'DE':
echo "Data Entry";
break;
case 'GU':
echo "General User";
break;
default:
echo "Administrator";
break;
}
?>
<span>
<select class="urole" name="role[]">
<option value="Admin" <?php echo ($role == 'Admin')?'selected':'' ?> >Admin</option>
<option value="DE" <?php echo ($role == 'DE')?'selected':'' ?> >Data Entry</option>
<option value="GU" <?php echo ($role == 'GU')?'selected':'' ?> >General User</option>
</select>
</span>
</td>
<td><a class='btn btn-info' href="staff.php?source=edit_staff&staff_id=<?php echo h($all_admins['id']) ?>">Edit</a></td>
<form method="post">
<input type="hidden" name="post_id" value="<?php //echo $post_id ?>">
<?php
echo '<td><input class="btn btn-danger" type="submit" name="delete" value="Delete"></td>';
?>
</form>
</tr>
<!---->
<!-- <td><input class='checkBoxes' type='checkbox' name='checkBoxArray[]' value='-->
<?php } //echo $post_id; ?><!--'></td>-->
<?php
mysqli_free_result($admins);
// echo "<td><a rel='$post_id' href='javascript:void(0)' class='delete_link'>Delete</a></td>";
// echo "<td><a onClick=\"javascript: return confirm('Are you sure you want to delete'); \" href='posts.php?delete={$post_id}'>Delete</a></td>";
// echo "<td><a href='posts.php?reset={$post_id}'>{$post_views_count}</a></td>";
// echo "</tr>";
//}
?>
</tbody>
</table>
</form>
<?php
//if (isset($_POST['delete'])) {
//
// $the_post_id = escape($_POST['post_id']);
//
// $query = "DELETE FROM posts WHERE post_id = {$the_post_id} ";
// $delete_query = mysqli_query($connection, $query);
// header("Location: /cms/admin/posts.php");
//
//
//}
//
//
//if (isset($_GET['reset'])) {
//
// $the_post_id = escape($_GET['reset']);
//
// $query = "UPDATE posts SET post_views_count = 0 WHERE post_id = $the_post_id ";
// $reset_query = mysqli_query($connection, $query);
// header("Location: posts.php");
//
//
//}
?>
<script>
$(document).ready(function ()
{
// $(".delete_link").on('click', function () {
//
//
// var id = $(this).attr("rel");
//
// var delete_url = "posts.php?delete=" + id + " ";
//
//
// $(".modal_delete_link").attr("href", delete_url);
//
//
// $("#myModal").modal('show');
//});
$('.urole').on('change',function (e){
e.preventDefault();
var val = $(".urole option:selected").val();
console.log(val);
console.log(e);
// $("#urole").on('click', function(){
// v
// });
//displayData(val);
});
$("#urole").ready(function (){
var val = $("#urole option:selected").val();
console.log(val);
//displayData(val);
});
});
function displayData(query){
$.ajax({
url:"enrolled_learners/enrol_learner_provider.php",
method:"post",
data:{query:query},
success:function (data)
{
//console.log(data);
$('#q-provider').html(data);
}
});
}
<?php
//if (isset($_SESSION['message'])) {
//
// unset($_SESSION['message']);
//
// }
?>
</script>
User Interface and Console log[enter image description here][1]
[User Interface][1]

Your selector selects all with the class urole, you just want to select the one that changed, since you're in the change handler for that element you can access it via the this keyword.
$('.urole').on('change',function (e){
e.preventDefault();
var val = this.value;
console.log(val);
console.log(e);
displayData(val);
});

Cant click on button with is loaded with ajax

I am loading a content into a #result div. In that content, there is a button.
After the contrnt was loaded with ajax, i cant click on that button, i dont get the alert. (the page doesnt see it? :))
<script type="text/javascript">
$(document).ready(function(e)
{
$('#printButton').hide();
$('#submitButton').click(function(e)
{
var kat = $('#kategoria').val();
$.ajax({
type: 'POST',
url: 'files/get_arlista_kategoria.php',
data: { kat: kat },
dataType: "html",
cache: false,
beforeSend: function(){
$('#preloaderImage2').show();
},
success: function(data)
{
var result = $.trim(data);
$('#result').html(result);
$('#printButton').show();
},
complete: function(){
$('#preloaderImage2').hide();
}
});
});
// This click doesnt work
$('#savePrices').click(function(e)
{
alert("Its oké");
});
});
</script>
How can i work with this button and the input after the ajax loaded it? I want to update the product prices.
And here is the php file, this generates the html content:
<?php
include_once("../../files/connect.php");
include_once("../../files/functions.php");
if(!empty($_POST))
{
$kategoria = mysqli_real_escape_string($kapcs, $_POST['kat']);
$sql = "SELECT termek_id, termek_nev, termek_akcio, termek_normal_ar, termek_akcios_ar, mertekegyseg_nev FROM termek
LEFT JOIN webshop_mertekegyseg ON webshop_mertekegyseg.mertekegyseg_id = termek.termek_egyseg
WHERE
termek_id IN (SELECT kat_kapcs_termek_id FROM `termek_katgoria_kapcsolo` WHERE kat_kapcs_kategoria_id IN ($kategoria) ) ORDER BY termek_nev ASC";
$get = mysqli_query($kapcs, $sql) or die(mysqli_error($kapcs));
$num = mysqli_num_rows($get);
if($num > 0 )
{
echo '<form method="post">';
echo '<table class="form manufacturer-seo-form table table-hover">';
echo '<thead style="font-weight:bold;">
<tr>
<td style="text-align: left;">ID</td>
<td class="left">Megnevezés</td>
<td style="text-align: left;">Egység</td>
<td>Bruttó ár</td>
<td>Akciós ár</td>
<td style="text-align: center;">Akciós</td>
</tr>
</thead>';
echo '<tbody>';
while($i = mysqli_fetch_assoc($get))
{
?>
<tr id="sor<?php echo html($i['termek_id']); ?>">
<td style="text-align: left;"><?php echo html($i['termek_id']); ?></td>
<td class="left"><a title="Megnyitás" style="color:#333;" target="_blank" href="termek-szerkesztes.php?id=<?php echo html($i['termek_id']); ?>"><?php echo html($i['termek_nev']); ?></a></td>
<td style="text-align: left;"><?php echo $i["mertekegyseg_nev"] ?></td>
<td><input type="text" name="normal_ar" value="<?php echo html($i['termek_normal_ar']); ?>" /></td>
<td><input type="text" name="akcios_ar" value="<?php echo html($i['termek_akcios_ar']); ?>" /></td>
<td style="text-align: center;">
<select name="termek_akcio" class="input input-select" style="padding:5px 10px">
<?php
$ertek = intval($i['termek_akcio']);
$values = array("1" => "Igen", "0" => "Nem");
foreach($values AS $k => $v)
{
$selected = $ertek == $k ? ' selected="selected"':'';
echo '<option ' . $selected . ' value="' . $k . '">' . $v . '</option>';
}
?>
</select>
</td>
</tr>
<?php
}
echo '</tbody>';
echo '</table>';
echo '<div class="text-center"><button class="btn saveButton" type="button" id="savePrices">Módosítások mentése</button></div>';
echo '</form>';
}
else
{
echo '<span style="display:block;margin:20px 0 20px 5px;"><b>A kiválasztott kategóriában nincsenek termékek.</b></span>';
}
}
?>

You assign the click event function before the element (button) actually exists. Therefore there is no element to bind the click event to. You can bind the click event to the document instead:
$(document).on('click', '#savePrices', function(e) {
alert(...);
});
Completely untested though ...

The onclick assignment ($('#savePrices').click(...)) is run once when the web page has loaded. But your pricing buttons are not there yet.
Run it again when the AJAX .success is executed:
<script type="text/javascript">
$(document).ready(function(e)
{
$('#printButton').hide();
$('#submitButton').click(function(e)
{
var kat = $('#kategoria').val();
$.ajax({
type: 'POST',
url: 'files/get_arlista_kategoria.php',
data: { kat: kat },
dataType: "html",
cache: false,
beforeSend: function(){
$('#preloaderImage2').show();
},
success: function(data)
{
var result = $.trim(data);
$('#result').html(result);
// assign onclick
$('#savePrices').click(function(e)
{
alert("Its oké");
});
$('#printButton').show();
},
complete: function(){
$('#preloaderImage2').hide();
}
});
});
});
</script>

Best way to select multiple selections seperatly from foreach output

I have this foreach loop:
foreach ($userItems_get as $item => $value) {
if ($value['prefab'] == 'wearable') {
echo $value['name'] . "</br>";
echo "<img src=\"{$value['image_inventory']}.png\" width=\"90\" height=\"60\">" . "</br>";
if (!isset($value['item_rarity'])) {
$rarity = "common";
} else {
$rarity = $value['item_rarity'];
}
echo $rarity . "</br>";
foreach ($userItemsLoad as $key => $values) {
if ($item == $values['defindex']) {
echo $values['id'] . "</br></br>";
break;
}
}
}
}
which outputs the data in this format:
http://puu.sh/kVTjk/c1471e903a.jpg
I want the user to select which item he wants to trade/use and i want to recieve the ID of that item which is the integer value at the bottom, the user should be able to select multiple items?
How do i accomplish this? and whats the best way to do this? Thanks.

There are lot of ways of achieving this.
You can use normal Submit:
<form method="POST" action="script.php">
<table>
<tr>
<th></th>
<th>Image</th>
<th>Name</th>
</tr>
<?php
foreach ($userItems_get as $item => $value) {
if ($value['prefab'] == 'wearable') {
$id = "";
foreach ($userItemsLoad as $key => $values) {
if ($item == $values['defindex']) {
$id = $values['id'];
break;
}
}
?>
<tr>
<td><input type="checkbox" name="itemSelect[]" class="itemSelect" value="<?php echo $id; ?>" /></td>
<td>
<img src="<?php echo $value['image_inventory']; ?>.png" width="90" height="60">
</td>
<td>
<?php echo $value['name']; ?><br />
<?php
if (!isset($value['item_rarity'])) {
$rarity = "common";
} else {
$rarity = $value['item_rarity'];
}
?>
</td>
</tr>
<?php
}
}
?>
</table>
<button type="Submit">
Normal Submit
</button>
<button type="button" id="ajSubmit">
Ajax Submit
</button>
</form>
Script.php:
<?php
echo "<pre>";
print_r($_POST['itemSelect']);
echo "</pre>";
?>
Or Use jQuery:
<script>
$(function() {
$("#ajSubmit").click(function() {
var selectedItemIds = $("input.itemSelect").map(function(){
return $(this).val();
}).get();
});
});
</script>
The selectedItemIds will hold all the ID values.

Add a checkbox for each items, and add a class for the checkboxes for referencing
<input class="itemId" type="checkbox" value="$values['defindex']">
You can use JQuery to select all the checked checkboxes and loop then in a each loop
//Select all input elements which has class of itemId and it is checked then loop through with each.
$("input.itemId[checked='checked']").each(function(){
var itemId = $(this).val();
alert(itemId);
//Do something else
}

php & js - add emails to input text

I am trying to send each member email generate from the php if condition to an input text. The selection works well however, the problem I have is to find a way if multiple checkboxes are selected the emails sums spacing them with a coma.
Right now what I have is that if I check multiple checkboxes the last email selected replaces the old one.
Any Idea how Could I do this? Also if just one email is selected no coma have to be added and if the checkbox is unchecked the email is removed.
<?php if ( bp_has_members( "search_terms={$_POST['category']}")) : ?>
<?php while ( bp_members() ) : bp_the_member(); ?>
<table border="1" >
<tr>
<td style="width:30px;">
<input class="select_email" type="checkbox" name="get_email" value="<?php bp_member_user_email('type=user_email') ?>"/>
</td>
<td>
<?php bp_member_user_email('type=user_email') ?>
</td>
</tr>
</table>
<?php endwhile; ?>
<?php endif; ?>
Jquery
$(document).ready(function(){
$(".select_email").click(function(){
var select_check = $(this);
var select_email = $(this).parent().find(".select_email").val();
//var sum_email = select_email + ", " + select_email;
if ( select_check.is(':checked') ) {
// Do stuff
alert(select_email + " added");
$("#my_email_to_id").val(sum_email);
}else {
alert(select_email + " removed");
}
});
});

<?php if ( bp_has_members( "search_terms={$_POST['category']}")) : ?>
<?php while ( bp_members() ) : bp_the_member(); ?>
<table border="1" >
<tr>
<td style="width:30px;">
<input class="select_email" type="checkbox" name="get_email[]" value="<?php bp_member_user_email('type=user_email') ?>"/>
</td>
<td>
<?php bp_member_user_email('type=user_email') ?>
</td>
</tr>
</table>
<?php endwhile; ?>
<?php endif; ?>
Jquery
$(document).ready(function(){
$(".select_email").click(function(){
var val = $(':checkbox:checked').map(function(){ return this.value; }).toArray().join(', ');
alert(val);
$("#my_email_to_id").val(sum_email);
});
});

Delete row in table html using ajax and php

How Delete row in table html using ajax and php,
I need delete row in html table select row and click button delete make delete using ajax Currentally can make delete without ajax but I need delete row and stay on page without make submit on other page
code javaScript
function getDelete()
{
$.ajax({
type:"post",
//dataType:"json",
data:"id="+id,
url:"delete_address.php?id=$id", // url of php page where you are writing the query
success:function(json)
{
},
error:function(){
}
});
}
code html and php
<?php
$resualt=mssql_query("SELECT * FROM Address where user_id='$UserId' ") ;
echo "<table border='1' class='imagetable' id='imagetable'
width='400px' >\n";
echo '<thead>'.'<tr>';
echo '<th>Street</th>'.'<th>Quarter</th>'.
'<th>From</th>'.'<th>To</th>'.'<th>Notes</th>';
echo '</tr>'.'</thead>';
echo '<tbody>';
while ($row = mssql_fetch_assoc($resualt)) {
$fromDate=$row['from_date'];
$toDate=$row['to_date'];
echo " <tr onClick='myPopup($row[id])'".
( $_GET['id'] == $row['id'] ?
"style='background-color: green;'":"").">\n"."<td >
{$row['street']} </td>\n".
"<td>{$row['quarter']}</td>\n"."<td>$fdate2</td>\n".
"<td>$tdate2</td>\n"."<td>{$row['other_info']}</td>\n";
}
echo '</tbody>';
echo "</table>\n";
?>
<?php
echo"<a class='button-link' onClick='getDelete()'>delete</a>";
?>
code sql query
<?php
$idEmploye=$_GET['id'];
$userId=$_GET['user_id'];
$db_host = 'MOHAMMAD-PC\SQL2005';
$db_username = 'sa';
$db_password = '123321';
$db_name = 'db_test';
mssql_connect($db_host, $db_username, $db_password);
mssql_select_db($db_name);
mssql_query("DELETE FROM Address
WHERE id='$idEmploye' ; ") or die(mssql_error()) ;
echo '<script language="javascript">';
echo 'alert("successfully deleted ")';
echo '</script>';
echo "<script>setTimeout(\"location.href ='address.php';\",10); </script>";
?>
Any Help Very Thanks

Try this solution
HTML:
<table>
<tr>
<td>Username</td>
<td>Email</td>
<td>Action</td>
</tr>
<tr>
<td>TheHalfheart</td>
<td>TheHalfheart#gmail.com</td>
<td>
<input type="button" class="delete-btn" data-id="1" value="Delete"/>
</td>
</tr>
<tr>
<td>freetuts.net</td>
<td>freetuts.net#gmail.com</td>
<td>
<input type="button" class="delete-btn" data-id="2" value="Delete"/>
</td>
</tr>
</table>
We have two button's properties call data-id and class delete-btn
AJAX jQuery:
<script language="javascript">
$(document).ready(function(){
$('.delete-btn').click(function(){
// Confirm
if ( ! confirm('Are you sure want to delete this row?')){
return false;
}
// id need to delete
var id = $(this).attr('data-id');
// Current button
var obj = this;
// Delete by ajax request
$.ajax({
type : "post",
dataType : "text",
data : {
id : id
},
success : function(result){
result = $.trim(result);
if (result == 'OK'){
// Remove HTML row
$(obj).parent().parent().remove();
}
else{
alert('request fails');
}
}
});
});
});
</script>
In PHP:
Get the ID and delete
Reponse OK if success
Sorry i'm learning English, please fix if its bad