<table id="userRelative_list_table" class="tablebox">
<tbody>
<tr>
<th>relativeName</th>
<th>relativeType</th>
<th>relativeCardNo</th>
<th>action</th>
</tr>
</tbody>
</table>
$("#addRow").button().click(function() {
var insertRow = "<tr>";
insertRow = insertRow + "<td>" + relativeNameAdd.val() + "</td>";
insertRow = insertRow + "<td>" + relativeTypeAdd.val() + "</td>";
insertRow = insertRow + "<td>" + relativeCardNoAdd.val() + "</td>";
insertRow = insertRow + "<td><a href='#' onclick ='deleteRow(this)'><img src='${pageContext.request.contextPath }/images/remove.png' title='delete'/></a></td>";
insertRow = insertRow + "</tr>";
$("#userRelative_list_table > tbody").append(insertRow);
}
});
now i hava a table ,when i click button that i can add a row append the table. now my problem is coming. how can i get this table'value in spring controller when i submit this table.
You can't submit a table. You submit a form.
The table should be wrapped in tags with an action being specified in the form tag as an attribute or via a jquery event handler. The cells in the table need to be tags for their values to be submitted to a controller in spring.
Related
I am trying to get data from a table using an ajax request. The query is successful, but the data does not appear in the table. It seems to me that the 'data' parameter of the 'success' function does not return any value.
this is the requisition:
$('#btn_lista_proto').click(function(){
var cod_cad = $('#hidden_id').val();
$.ajax({
url : '{{route('scr.lista_proto')}}',
data:{'cod_cad':cod_cad},
dataType:"json",
success:function(data){
table = '';
for (var i = 0; i < data.data.length; i++) {
table += "<tr>";
table += "<td>" + data.data[i].fk_documento + "</td>";
table += "<td>" + data.data[i].protocolo + "</td>";
table += "<td>" + data.data[i].data_registo + "</td>";
table += "</tr>";
}
;
$('.display').html(table);
}
})
});
This is the method in my controller
public function lista_proto (Request $request){
$data = DB::table('protocolo_scr')
->join('secretaria', 'secretaria.id_scr', '=', 'protocolo_scr.fk_documento')
->select('protocolo_scr.*', 'secretaria.*')
->where('fk_documento', '=', $request->cod_cad)
->get();
return response()->json(['success' => $data]);
}
It should be:
return response()->json(['data' => $data]);
This loop generate buttons in my HTML inside an AJAX function.
for( var i = 0; i<len; i++){
var d = new Date(response[i]['date']);
dformat = [d.getDate() + '/' +
(d.getMonth()+1) + '/' +
d.getFullYear() + ' ' +
d.getHours() + ':' +
d.getMinutes()];
console.log(response[i])
var bons = "<tbody>" +
"<th>" + response[i]['id'] + "</th>" +
"<td>" + dformat + "</td>" +
"<td>" + response[i]['poids'] + "</td>" +
"<td>" + response[i]['origine'] + "</td>" +
"<td>" + response[i]['type'] + "</td>" +
"<td>" + response[i]['famille'] + "</td>"
if(response[i]['localisation'] != "Expédié"){
bons = bons + "<td> <input class='evacuate' id='" + response[i]['id'] + "' type='button'" + "value='Evacuer'> </td>"
}else{
bons = bons + "<td>" + response[i]['localisation'] + "</td>"
}
bons = bons + "</tr>" +
"</tbody>"
$("#index").append(
bons
);
}
Then I have another AJAX function which makes every buttons previously generated clickable like :
$(".evacuate").on('click', function(){
console.log("test des boutons")
});
Problem is, the console.log isn't displayed, as if the function is never called. What am I doing wrong here ?
Try this:
$(document).on('click','.evacuate', function(){
console.log("test des boutons")
});
You should define the click event on elements that already exist on the page. So for your situation, select the parent element and then add click event. For example if the element with evacuate class is inside an element with someclass class, this will work:
$(".someclass").on('click', '.evacuate', function(){
console.log("test des boutons")
});
According to your code, you can use tbody tag as parent:
$("tbody").on('click', '.evacuate', function(){
console.log("test des boutons")
});
I don't really understand how this works but thanks to the answers given above I managed to display my console.log.
$(document.getElementsByName).on('click', '.evacuate', function(){
console.log("Test des boutons")
});
I am learner in javaScript
How to write required on selectpicker based on
var typeSelectBox = "<select id='depprojsDevice' class='selectpicker'>";
typeSelectBox += "<option value=''> -- SELECT --</option>";
if (arr) {
for (var i in arr) {
typeSelectBox += "<option value='" + arr[i][2] + "'>" + arr[i][0] + " " + arr[i][1] + "</option>";
}
}
typeSelectBox + "</select>";
$('#depprojsDevice_Div').html(typeSelectBox);
$("div#depprojsDevice_Div select[id = 'depprojsDevice']").attr('required','required');
$(function(){
$("#depprojsDevice").prop('required',true);
});
Try This Code
I have used jquery datatable plugin.
And I have the following problem.
Fiddle
Html:
<input type="button" value="click" id ="button" />
<table id="testTable">
<thead>
<td>
col1
</td>
<td>
col2
</td>
</thead>
</table>
JS:
(function(){
var firstData = "<tr>" +
"<td>" +
"cell11" +
"</td>" +
"<td>" +
"cell12" +
"</td>" +
"</tr>" +
"<tr>" +
"<td>" +
"cell21" +
"</td>" +
"<td>" +
"cell22" +
"</td>" +
"</tr>";
debugger;
$(firstData).appendTo($('#testTable'));
$('#testTable').dataTable();
})();
$('#button').click(function(){
var secondData = "<tr>" +
"<td>" +
"cell31" +
"</td>" +
"<td>" +
"cell32" +
"</td>" +
"</tr>" +
"<tr>" +
"<td>" +
"cell41" +
"</td>" +
"<td>" +
"cell42" +
"</td>" +
"</tr>";
$('#testTable tbody').empty().append($(secondData));
});
I initialized table as datatable with firstdata. sorting , searching etc are working perfect as expected. But I later altered the body with secondData. Now also sorting and searching is done on first data. How to resolve this?
You must go through the dataTables API. You can manipulate the content of a <table> through javascript or jQuery, but without using the API, jQuery dataTables has no chance of knowing what manipulations you have done. Thats why the old rows still appears after deletion.
You are using dataTables 1.10.x, and in that version the API has been dramatically simplified. Simply use
<dataTables instance>.row.add(..)
You have a chunk of HTML with <tr>'s you want to inject :
dataTable.clear();
$secondData = $(secondData);
for (var tr=0;tr<$secondData.length;tr++) {
var tds = $($secondData[tr]).find('td');
var cols = [];
for (var td=0;td<tds.length;td++) {
cols.push($(tds[td]).html());
}
dataTable.row.add(cols);
}
dataTable.draw();
It seems like a lot of code, but only because we here parse a piece of HTML in the process. Normally you would insert a row like this
dataTable.row.add(['cell31', 'cell32']);
forked fiddle -> http://jsfiddle.net/QgGKD/
have you ever created any custom action on your jqGrid?
looking at this example, I realized custom action, even if their tooltip are something similar to a sequence of html space (  ...)
any tips?
EDIT: this is the code I developed:
gridComplete: function () {
if (grid.getGridParam('records') == 0) // are there any records?
DisplayEmptyText(true);
else
DisplayEmptyText(false);
var ids = grid.jqGrid('getDataIDs');
for (var i = 0; i < ids.length; i++) {
var cl = ids[i];
ae = "<a id='modifica' href='#'><img src='../../../images/edit.png' alt='' width='16' /></a>";
be = " <a id='assegnacamera' href='#'><img src='../../../images/key.png' alt='Assegna Camera' width='16' /></a>";
se = " <a id='cancel' href='#'><img src='../../../images/delete.png' alt='Elimina prenotazione' width='16' /></a>";
ce = " <a id='unassigncamera' href='#'><img src='../../../images/room_unassign.png' alt='Elimina assegnazione camera' width='16' /></a>";
de = " <a id='noshow' href='#'><img src='../../../images/reservationnoshow.png' alt='' width='16' /></a>";
grid.jqGrid('setRowData', ids[i], { act: ae + be + se + ce + de });
}
}
First of all you should include title: false in the column definition to have no standard tooltip. Then you can either define different tilte attributes for separate <a> elements or use cellattr to set custom value on the title attribute of the cell (the <td> element).