We Keep Coding

How Input Multiple row using codeigniter

I created a table showing the student's name and nis. How do I enter the value in each form and display the sum in the n.akhir form? I want if you click the save button, the summation will be processed and entered into the database.
I have tried several times but always failed
<table class="table table-hover">
<tr>
<th>No</th>
<th>NAMA</th>
<th>UH 1</th>
<th>UH 2</th>
<th>UH 3</th>
<th>UH 4</th>
<th>N.AKHIR</th>
</tr>
<?php foreach ($siswa as $row){
echo "<tr> <td width='100'>$row->nis</td>
<td>". strtoupper($row->nama)."</td>
<td width='150'><input type='int' id='ulangan_1".$row->nis."' class='form-control'></td>
<td width='150'><input type='int' id='ulangan_2".$row->nis."' class='form-control'></td>
<td width='150'><input type='int' id='ulangan_3".$row->nis."' class='form-control'></td>
<td width='150'><input type='int' id='ulangan_4".$row->nis."' class='form-control'></td>
<td width='150'><input type='int' id='nilai_akhir".$row->nis."' class='form-control'></td>
</tr>";
} ?> </table>
and here the javascript
$('#btn_save').on('click',function(nis){
var ulangan_1 = $('#ulangan_1'+nis).val();
var ulangan_2 = $('#ulangan_2'+nis).val();
var ulangan_3 = $('#ulangan_3'+nis).val();
var ulangan_4 = $('#ulangan_4'+nis).val();
var nilai_akhir = ulangan_1 + ulangan_2 + ulangan_3 + ulangan_4 / 4;
$("#nilai_akhir"+nis).val(nilai_akhir);
$.ajax({
type : "POST",
url : "<?php echo site_url('index.php/nilai/update_nilai')?>",
dataType : "JSON",
data : {nis:nis , jadwal:<?php echo $this->uri->segment(3)?>, ulangan_1:ulangan_1, ulangan_2:ulangan_2, ulangan_3:ulangan_3, ulangan_4:ulangan_4,nilai_akhir:nilai_akhir},
success: function(data){
//$("#dataSiswa").html(html);
}
});
return false;
});

ajax or jquery doesn't show data Laravel

I added a search field to show live my data, but nothing works when I fill that field.
I made a route called retour.action, and that's in my controller, so when I try a console.log('test') i can see test in my Console on my browser, but the rest of the code I made doesn't work, and I also get no error
here is my controller
public function action(Request $request)
{
if ($request->ajax()) {
$output = '';
$query = $request->get('query');
if ($query != '') {
$retours = Returnorder::all()
->where('firmaname', 'like', '%' . $query . '%')
->orWhere('ordernumber', 'like', '%' . $query . '%')
->orWhere('status', 'like', '%' . $query . '%')
->get();
} else {
$retours = Returnorder::latest('id')->paginate(15);
}
$total_row = $retours->count();
if ($total_row > 0) {
foreach ($retours as $retour) {
$output .= '
<tr>
<td>' . $retour->firmaname . '</td>
<td>' . $retour->ordernumber . '</td>
<td>' . $retour->status . '</td>
</tr>
';
}
} else {
$output = '<tr>
<td align="center" colspan="5">Geen data gevonden</td>
</tr>
';
}
$retours = array(
'table_data' => $output,
);
echo json_encode($retours);
}
}
And this is my script
$(document).ready(function(){
fetch_customer_data();
function fetch_customer_data(query = '')
{
$.ajax({
url:"{{ route('retour.action') }}",
method:'GET',
data:{query:query},
dataType:'json',
success:function(retours)
{
$('tbody').html(retours.table_data);
}
})
}
$(document).on('keypress', '#search', function(){
let query = $(this).val();
fetch_customer_data(query);
});
});
And the HTML is this
#extends('layouts.app')
#section('content')
<div class="container">
<div class="mTop">
<div class="row justify-content-center">
<div class="col-md-10">
#if(session('message'))
<div class="alert alert-success" role="alert">
{{session('message')}}
</div>
#endif
<div class="card">
<div class="card-header">Retourmeldingen</div>
<div class="card-body">
<div class="form-group" >
<label for="search" hidden>Zoeken</label>
<input type="text" name="search" id="search" class="form-control"
placeholder="Typ hier uw zoekopdracht in"/>
</div>
<table class="table table-hover">
<thead>
<tr>
<th scope="col">Firmanaam</th>
<th scope="col"></th>
<th scope="col"></th>
<th scope="col">Ordernummer</th>
<th scope="col">Status</th>
<th scope="col">Verwerkingstijd</th>
<th scope="col">Inzenddatum</th>
<th scope="col"></th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
#endsection
Help me please

I think you first need to be sure that what you're typing is actually being sent back to the router. You can get the value of what you're typing by using this:
$(function() {
$('#search').on('keyup', (e) => {
console.log(e.target.value);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="search" type="text" name="search" />

Is it possbile to give my "ajax-divs" URL parameters?

My app is reading information from a database and shows the information to the user using jQuery. If a user clicks on an entry, a div will popup and shows more information.
I want to open these div with a URL. Is it possible? I'm thinking about to use the entry id as a parameter?
Like this: div with entry id = 123 will open a link like this
https://url.de/index.php?param=123
// *** Funktion für Details-Overlay ***
function on(id) {
$.ajax({
url: "AJAX.php",
data: 'id=' + id + '&switch_content=details',
success: function(result) {
$("#data-table").html(result);
}
});
document.getElementById("overlay").style.display = "block";
}
function off() {
document.getElementById("overlay").style.display = "none";
}
#overlay {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id=12>Click on me</div>
<!-- OVERLAY -->
<div id="overlay">
<div id="ContainerBox" align="center">
<img onclick="off()" id="imgclose" src="images/auswertung-close.png">
<div id="headerSticky"></div>
<h2>Gesamte Übersicht</h2>
<hr>
<!-- Tabelle für Detailseite -->
<table data-role="table" id="data-table" data-filter="true" data-input="#filterTable-input" class="ui-responsive" border="1" style="overflow-x: auto;">
<!-- AJAX/Informations -->
</table>
</div>
</div>
PHP/AJAX:
<?php
// Verbindung zur Datenbank
$pdo = new PDO('mysql:host=***;dbname=***', '***', '***');
$pdo ->exec("set names utf8");
if ($_GET ['switch_content']=='details'){
// SQL Befehl + ID rausnehmen
$sql_befehlDetail = "SELECT * FROM fair_contact_form WHERE id= :id";
// Ergebnisse aus dem SQL Befehl in $ergebnis ziehen
$ergebnisDetail = $pdo->prepare ($sql_befehlDetail);
$ergebnisDetail->execute(array('id'=>$_GET['id']));
$datenDetail = $ergebnisDetail->fetch();
$search = '/../../../../htdocs/..;
$replace = 'https://url.de';
$karte = str_replace($search, $replace, $datenDetail['businessCard']);
echo '<thead>
<tr>
<td class="" colspan="2"></td>
</tr>
</thead>
<tbody>
<tr>
<td data-priority="2"> ID </td>
<td> '. $datenDetail['id'] .' </td>
</tr>
<tr>
<td data-priority="2"> Handelsmesse </td>
<td> '. $datenDetail['fair'] .' </td>
</tr>
<tr>
<td data-priority="3"> Datum </td>
<td> '. $datenDetail['timestamp'] .' </td>
</tr>
<tr>
<td data-priority="4"> dateTimeOfContact: </td>
<td> '. $datenDetail['dateTimeOfContact'] .' </td>
</tr>
<tr>
<td data-priority="5"> Gesprächsdauer </td>
<td> '. $datenDetail['durationOfContact'] .' </td>
</tr>
</tbody>';
}
else if($_GET['switch_content']=='startseite') {
$sql_befehlGesamt = "SELECT * FROM fair_contact_form ORDER BY id DESC";
$ergebnisGesamt = $pdo->query($sql_befehlGesamt);
?><div data-role="header"></div>
<div role="main" class="ui-content">
<table id="table" border="1" data-filter="true" data-input="#filterTable-input" class="ui-responsive" data-role="table"
id="table-column-toggle" data-mode="columntoggle" class="ui-responsive table-stroke">
<thead>
<tr>
<th data-priority="1" id="sortieren_id">ID</th>
<th data-priority="4" id="sortieren_email" class="ui-table-cell-hidden">E-Mail</th>
<th data-priority="4" id="sortieren_gespraechsinhalt" class="ui-table-cell-hidden">Gesprächsinhalt</th> <!-- classe dient dazu, checkbox auf unchecked zu stellen -->
</tr>
</thead>
<tbody><?php
while ($datenGesamt = $ergebnisGesamt->fetchObject()) {
$dateTimeOfContact = new DateTime($datenGesamt->dateTimeOfContact);
?><tr onclick="on(<?=$datenGesamt->id?>)" style="cursor:pointer">
<td onclick="on(<?=$datenGesamt->id ?>)"><p style="color:#E3000F;"><b><?=$datenGesamt->id ?></b></p></td>
<td><?=$datenGesamt->fair ?></td>
<td><?=$dateTimeOfContact->format('d.m.Y') ?></td>
<td><?=$datenGesamt->author ?></td>
<td><?=$datenGesamt->genderOfContact ?></td>
<td><?=$datenGesamt->nameOfContact ?></td>
<td><?=$datenGesamt->surnameOfContact ?></td>
<td class="ui-table-cell-hidden"><?=$datenGesamt->companyName ?></td>
</tr><?php
} ?>
</tbody>
</table>
</div>
The information in the Ajax div should be reachable with a URL+parameter.

Yes, you can trigger the desired id details on start.
Just add next code to your js file:
// Shorthand for $( document ).ready()
$(function() {
// This code will be run when document will be loaded
var args = window.location.search.substring(1); // Get all URL arg
args = args.split('&').map(arg => arg.split('=')); // convert to array with key, value
args.forEach(function(arg) {
var key = arg[0];
var val = arg[1];
if (key === 'param') { // Check if the URL param is our param, and if yes - open popup
on(val);
}
});
});

how to pass multiple parameter in ajax call using jquery

Greeting of the Day!!!
I am facing problem in passing parameters with ajax URL.
i am trying to send multiple data using jquery $.ajax method to my php script but i can pass only single data when i concatenate multiple data.
when I try to update another fields but that field not update and first one is updated. only first field update. remains fields are not update. I am facing problem to update another fields. and also I try to pass multiple parameter in ajax URL but getting error. not update any fields.
Please check my code and give me solution.
I hope you all are understand.
Thank You!!!
Here is my code:
<?php
include("connect.php");
?>
<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<meta charset="utf-8">
<title>Editable Tables using jQuery - jQuery AJAX PHP</title>
<link href="assets/css/bootstrap.min.css" rel="stylesheet" type="text/css">
<link href="assets/css/custom.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="container">
<div style="text-align:center;width:100%;font-size:24px;margin-bottom:20px;color: #2875BB;">Click on the underlined words to edit them</div>
<div class="row">
<table class= "table table-striped table-bordered table-hover">
<thead>
<tr>
<th colspan="1" rowspan="1" style="width: 180px;" tabindex="0">FName</th>
<th colspan="1" rowspan="1" style="width: 220px;" tabindex="0">LName</th>
<th colspan="1" rowspan="1" style="width: 288px;" tabindex="0">Email</th>
<th colspan="1" rowspan="1" style="width: 288px;" tabindex="0">Gender</th>
<th colspan="1" rowspan="1" style="width: 288px;" tabindex="0">Address</th>
<th colspan="1" rowspan="1" style="width: 288px;" tabindex="0">City</th>
<th colspan="1" rowspan="1" style="width: 288px;" tabindex="0">Course</th>
<th colspan="1" rowspan="1" style="width: 288px;" tabindex="0">Hobby</th>
</tr>
</thead>
<tbody>
<?php
$query = mysql_query("SELECT * FROM student_data");
$i=0;
while($fetch = mysql_fetch_array($query))
{
if($i%2==0) $class = 'even'; else $class = 'odd';
echo'<tr class="'.$class.'">
<td><span class= "xedit" id="'.$fetch['id'].'">'.$fetch['fname'].'</span></td>
<td><span class= "xedit" id="'.$fetch['id'].'">'.$fetch['lname'].'</span></td>
<td><span class= "xedit" id="'.$fetch['id'].'">'.$fetch['email'].'</span></td>
<td><span class= "xedit" id="'.$fetch['id'].'">'.$fetch['gender'].'</span></td>
<td><span class= "xedit" id="'.$fetch['id'].'">'.$fetch['address'].'</span></td>
<td><span class= "xedit" id="'.$fetch['id'].'">'.$fetch['city'].'</span></td>
<td><span class= "xedit" id="'.$fetch['id'].'">'.$fetch['course'].'</span></td>
<td><span class= "xedit" id="'.$fetch['id'].'">'.$fetch['hobby'].'</span></td>
</tr>';
}
?>
</tbody>
</table>
</div>
<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/bootstrap.min.js"></script>
<script src="assets/js/bootstrap-editable.js" type="text/javascript"></script>
<script type="text/javascript">
jQuery(document).ready(function() {
$.fn.editable.defaults.mode = 'popup';
$('.xedit').editable();
$(document).on('click','.editable-submit',function(){
var x = $(this).parents('td').children('span').attr('id');
var y = $('.input-sm').val();
var z = $(this).parents('td').children('span');
alert(x);
alert(y);
alert(z);
$.ajax({
url:"process.php?id="+x+"&fname="+y,
type: 'GET',
success: function(s){
if(s == 'city'){
$(z).html(y);}
if(s == 'error') {
alert('Error Processing your Request!');}
},
error: function(e){
alert('Error Processing your Request!!');
}
});
});
});
</script>
</div>
</body>
</html>
Here is my another file:
<?php
include("connect.php");
if($_GET['id'])
{
$id = $_GET['id'];
$fname = $_GET['fname'];
$lname=$_GET['lname'];
$email=$_GET['email'];
$gender=$_GET['gender'];
$address=$_GET['address'];
$city=$_GET['city'];
$course=$_GET['course'];
$hobby = explode(',', $_GET['hobby']);
if(mysql_query("UPDATE student_data SET fname='$fname', lname = '$lname', email = '$email', gender='$gender', address='$address', city='$city', course='$course', hobby='$hobby' where id='$id'"));
echo 'success';
}
?>
Here Ajax Code :
<script type="text/javascript">
jQuery(document).ready(function() {
$.fn.editable.defaults.mode = 'popup';
$('.xedit').editable();
$(document).on('click','.editable-submit',function(){
var x = $(this).parents('td').children('span').attr('id');
var y = $('.input-sm').val();
var z = $(this).parents('td').children('span');
alert(x);
alert(y);
alert(z);
$.ajax({
url:"process.php?id="+x+"&fname="+y,
type: 'GET',
success: function(s){
if(s == 'city'){
$(z).html(y);}
if(s == 'error') {
alert('Error Processing your Request!');}
},
error: function(e){
alert('Error Processing your Request!!');
}
});
});
});
</script>

The issue is here:
url:"process.php?id="+x+"&fname="+y,
here you are sending only id and fname and in php script you are trying to get:
$id = $_GET['id'];
$fname = $_GET['fname'];
$lname=$_GET['lname'];
ans so many parameters, which is wrong.
The correct approach to send multiple parameter is:
data: {
key1: value1,
key2: value2,
key3: value3,
and so on
}
or format the proper url by appending all the key : value in it like:
key1=value1&key2=value2&key3=value3

For Sending Single Parameter
data: "id="+id,
For Sending Multiple Parameters
data: {
id: id,
fname: fname
},

Jquery Ajax Datatable

var ownDataTable = $(".own_cases_table").dataTable();
$.ajax({
url : "api/v1/cases/"+encodeURIComponent(uid)+"/active",
type : "get",
headers : { "Authorization" : api_key },
dataType : "json",
success : function(response) {
if (response.error) {
} else {
var cases = response.cases;
ownDataTable.fnClearTable();
for (var i = 0; i < cases.length; i++) {
console.log(cases[i].case_name);
ownDataTable.fnAddData([ cases[i].case_name, cases[i].slide_img, 'Daha Fazla', 'action' ]);
}
}
}
});
HTML :
<!-- TABLE FOR MOBILE START -->
<table class="table mb30 own_cases_table">
<thead>
<tr>
<th><?php echo _("Olgu"); ?></th>
<th><?php echo _("Dijital Slide"); ?></th>
<th><?php echo _("Daha Fazla"); ?></th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
<!-- TABLE FOR MOBILE END -->
<div class="table-responsive hidden-xs hidden-sm">
<table class="table own_cases_table">
<thead>
<tr>
<th><?php echo _("Olgu"); ?></th>
<th><?php echo _("Dijital Slide"); ?></th>
<th><?php echo _("Daha Fazla"); ?></th>
<th></th>
</tr>
</thead>
<tbody>
</tbody>
</table>
i am using datatables but no data is added in datatables. Always writes "No data avaliable in table"
i checked cases has data and i $(".own_cases_table").DataTable(); but nothing changed.
How i can add data into my tables ?
I tried with ownDataTable.row.add() but same result occured

You can use this to initalize datatable.
$('#example').DataTable( {
"processing": true,
"serverSide": true,
"ajax": "../server_side/scripts/server_processing.php"
} );
from https://datatables.net/examples/data_sources/server_side.html