I have a dynamically generated table with an edit and delete button within each row, when a user edits inputs, checkboxes, and textareas, clicks edit, I need to post values to a processing page
How to send ajax request that contains form elements that are in html table this (row) or specific row, or this iteration only row?
Please help I'm not that good at js
//First of all thank you.
//After a deep search, I solved my own problem, here's the answer
// if anyone has encountered the same thing:
<script>
$('.editRow').on('click', function (e) {
var data = {};
var row = $(this).closest('tr');
var rowData = row.find('input, checkbox, textarea');
if (rowData.length > 0) {
rowData.each(function () {
data[$(this).attr('name')] = $(this).val();
//rowData.push($(this).val());
});
//data=dataRow
}
$.ajax
({
method: 'post',
url: 'tbl_process.php',
data: {
data: data
},
success: function (data) {
$('#content').html(data);
}
});
});
</script>
Related
I have two form input ( text and select form ).
The select form change by ajax success when user search the employee data.
Now, i want the other jquery function that can automatically detect when the select form have been change by ajax success and retrieve the new value of select form to use by other function to make new data in my input text.
my Search Employee Function
function search_personal_result(formObj, urlres, responseDIV, disable_data, modal_class,result_data)
{
disable_data=disable_data||false;
modal_class=modal_class||false;
result_data=result_data||false;
var loading = '<p>Loading ...</p>';
$.ajax({
url: site_url+'/'+urlres,
beforeSend: function(){
$(responseDIV).html(loading);
},
data: $(formObj).serialize(),
type: "post",
dataType: "html",
success: function(response){
//proceed data result here
if(result_data==false){
var obj = jQuery.parseJSON(response);
$.each(obj, function (index, value) {
if(result_data==false){
for(var j in value){
//My SELECT Form Changed here
$('#VCIDSBU').val('MY NEW VALUE');
}
}
});
}
},
error: function(){
alert("Terjadi kesalahan!");
},
});
}
If the user search the employee data using search_personal_result, my select form have been successfully changes.
Now that i need is, how to make the other jQuery function that can detect that my SELECT Form have been changed by search_personal_result
I have try using
$(function () {
$('#form_create_sp').on('change','SELECT#my_select_id',function(){
alert('it changes');
});
})
It can only detect when the user manually change the select form. but not working when the select form changed by search_personal_result
Thanks for all expert here
You could always do some sort of console.log("Success"); Function based on if it sent or not.
I have tried other answers but none have worked. The javascript code is supposed to submit a list of product id's to a php page. When products are selected, the submit button triggers the submit function.
function submit() {
var ids = bundle.map(function(item){
$('#product-'+item.id+' button').attr('disabled', false);
return item.id;
});
console.log(ids);
//send the ids to api
bundle = [];
$('.bundle-list').empty();
$('.total').html('No item in bundle');
$('.submit').addClass('hide');
}
I have tried inserting this line in the function
document.getElementByID("test").value = bundle;
and a hidden tag within the form but can't get the var to submit to PHP
<input type="hidden" id="test" name="test" visibility="hidden"></input>
Where should the position of the hidden element be relative to the JS code? and any other methods of retrieving the ID's?
Either by $.post or $.get variable you can send data to PHP file, but i think you want to save pids in hidden field, but you are not update its value on submit. like
$('#test').html('YOUR DATA')
Try this..
function submit() {
var ids = bundle.map(function(item){
$('#product-'+item.id+' button').attr('disabled', false);
return item.id;
});
$.ajax({
url: 'YOUR_URL HERE',
type: 'POST',
data: { qry: ids },
success: function(data) {
///WHEN SUCCESS
}
},
error: function(e) {
}
});
}
I'm using Slickgrids with alot of success. I have ajax edits all working - but I'm trying to add a piece of functionality;
Below is my code which allows me to update cells - it works as intended - but I want to be able to change the cell after it has been editted with the returned value from the json data. See my code below - I have put in capitals where I need a command to update the editted cell with the new returned data
grid.onCellChange.subscribe(function(e, args) {
var dataString = "col="+grid.getColumns()[args.cell].name+"&row="+args.item.new_training_calendar_id+"&value="+data[args.row][grid.getColumns()[args.cell].field];
$.ajax({
type: "POST",
url: "mydomain/update_cell",
data: dataString, dataType: "json",
success: function(a) {
if(a.status != "ok") {
alert(a.msg);
undo();
} else {
alert(a.msg);
**CHANGE_CELL_HERE TO (a.newdata);**
}
return false;
} }); });
If you are using DataView in your grid, you can use:
grid.invalidateRow(args.row);
var row = dataView.getItem(args.row);
row[grid.getColumns()[args.cell].field] = a.msg;
dataView.updateItem(args.item.id, row);
grid.render();
If you are using a plain grid instead, you can use:
grid.invalidateRow(args.row);
data[args.row][grid.getColumns()[args.cell].field] = a.msg;
grid.render();
Hope that helps!
I've managed to refresh whole pages or single elements with Ajax. However, i am now trying to update my article-comments on the go.
I have an articles page, which outputs all the articles. Beneath each article, there is a table which outputs the comments belonging to the article, and a form to write a new comment.
How do i refresh each of these tables at the same time?
I've been looking at this, but i can't get it implemented correctly:
$(document).ready(function(){
//ajax.php is called every second to get view count from server
var ajaxDelay = 1000;
var ids = [];
$('[id^="zone-"]').each( function() {
ids.push( this.id );
});
setInterval(function(){
$.ajax({
url: 'ajax.php',
dataType: 'json',
type: 'get',
data: { refresh: 'hits', ids: ids },
success: function(data) {
for (var key in data) {
var div = $('#zone-' + key).html( data[key] );
}
}
});
}, ajaxDelay);
});
jQuery AJAX live update on multiple elements on the same page
I'm trying to load some ajax content into a table, unfortunately it's only loading the last row multiple times instead of loading each new rows.
This is the code I'm using:
function periodicRefresh()
{
$.ajax({
type: 'GET',
url: 'include/ajaxActions.php',
data: "action=displayLastEvent",
success: function(msg){
var newid = msg;
current = $("#list tr:first").get(0).id;
if(newid != current){
while (current<newid)
{
current++;
addToList(current);
}
}
}
});
}
function addToList(x)
{
$.ajax({
type: 'GET',
url: 'include/ajaxActions.php',
data: "action=displayRow&row="+x,
success: function(msg){
$("#list").prepend(msg);
$("#list tr:first").highlightFade({
speed:3000
});
lastrow = x-20;
$('#'+lastrow).remove();
}
});
}
displayLastEvent returns the id of the last row.
displayRow returns the last row
You need to push your xmlHttps into an array or abstract data type, which you can then attach events handlers. Seems jquery doesn't do that for you.
I would address this issue by encouraging you to change your approach since it looks like you're likely making more AJAX requests than necessary whenever more rows need to be added to the list (2+ instead of just 2).
I would update include/ajaxActions.php?action=displayRow to accept a CSV of ids (or whatever it is you're passing in), and returning a set of row data, instead of data for just one row.
I think that:
current = $("#list tr:first").get(0).id;
return always the same result as jQuery remember only the page when it was first loaded.
For example, if you have a single tr[id=0]:
pass 1 : current = 0; msg = 1 -> 1 tr prepended with id = 1;
pass 2 : current is always 0 (not 1); msg = 1 -> 1 tr prepended with id = 1;
...
what you should do, is make jQuery recognize your page structure after adding your messages, or store the last index in a different way: using hidden input for example:
HTML:
<input type="hidden" value="0" id="lastId"/>
script:
initialize #lastId value when the page is loaded:
$(document).ready(function(){
$("#lastId").val(0);//or by using your displayLastEvent action
});
modify periodicRefresh to read #lastId value:
function periodicRefresh()
{
$.ajax({
type: 'GET',
url: 'include/ajaxActions.php',
data: "action=displayLastEvent",
success: function(msg){
var newid = msg;
var current = $("#lastId").val();
if(current<newid) $("#lastId").val(newid);
if(newid != current){
while (current<newid)
{
current++;
addToList(current);
}
}
}
});
}