Frank Danny
asked on
How can I ajax html table rows?
I have tried to ajax using post to jsp script my html table rows for weeks now with no success.Can anyone please guide me on this?Below is what I have done so far.
window.addEventListener("DOMContentLoaded", function () {
var form = document.getElementById("updateDealPmtForm");
document.getElementById("btn").addEventListener("click", function () {
$('#notSoCoolGrid > tr').each(function(event) {
event.preventDefault();
var postData = {
paymentId:$('#paymentId').text(),
id:$('#deald').text(),
pType:$('#pType').text(),
pAmt:$('#pAmt').text(),
currency:$('#currency').text(),
pInvDate:$('#pInvDate').text(),
pRecDate:$('#pRecDate').text(),
comments:$('#comments').text()
};
console.log(postData);
$.ajax({
async: false,
type: "POST",
cache: false,
url: "/update_deal_pmt_script.jsp",
data: postData.$('input, select').serialize() ,
success: function(msg){
alert("submitted");
}
});
});
});
});
ASKER
@zephyr_hex the "update_deal_pmt_script.js p" is under the root. The script is executed as seen under chrome F12 developer tools.There is no access issue.
So, what is the return result you get from the AJAX? console.log(result) in your success function:
success: function(msg){
console.log(msg);
}
success: function(msg){
console.log(msg);
}
ASKER
Nothing logged off..............console shows clear.
SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
I'm confused. You say you see the AJAX call in the Network tab of your browser's dev tool... so can you please post the content of what's being sent, and what the response is, according to the request you're viewing on the Network tab?
Here's an example request, so you can see what I mean:
You should be able to see the parameters you're sending and their values on the Parameters tab, and the response on the Response tab.
If you don't see your AJAX request in the Network tab, you know you have a problem with the request not firing. If you do see a successful request in the Network tab, but the response is missing or incorrect, you know you have a problem with the response script. And if the response looks correct in the Network tab, you know you have a problem with how you're receiving or parsing that response in your AJAX call.
Here's an example request, so you can see what I mean:
You should be able to see the parameters you're sending and their values on the Parameters tab, and the response on the Response tab.
If you don't see your AJAX request in the Network tab, you know you have a problem with the request not firing. If you do see a successful request in the Network tab, but the response is missing or incorrect, you know you have a problem with the response script. And if the response looks correct in the Network tab, you know you have a problem with how you're receiving or parsing that response in your AJAX call.
ASKER
zephyr_hex based on your explanation and observation on Firebug,seems my request is not firing.Not sure why it is not firing
ASKER
@Chris Stanyon...I did try to change the code but as I told zephyr_hex my code is not firing
There are several reasons why your request is not firing. One, I've already mentioned - you are tying your event to direct children of a table, and your don't actually have any direct children of your table - so there's nothing to loop through.
Another possible reason is that your btn button is actually a submit button and you've got nothing in your code to prevent that from doing it's default thing - i.e submitting your form in the normal way - this means that your page has been submtted before it ever get to the AJAX call.
To properly get to the bottom of this we may need to see your HTML markup, as I'm certain that's what's causing the problem.
Try to implement this code, exactly as it is, and let me know what you get:
Another possible reason is that your btn button is actually a submit button and you've got nothing in your code to prevent that from doing it's default thing - i.e submitting your form in the normal way - this means that your page has been submtted before it ever get to the AJAX call.
To properly get to the bottom of this we may need to see your HTML markup, as I'm certain that's what's causing the problem.
Try to implement this code, exactly as it is, and let me know what you get:
$(document).ready(function() {
$('#btn').click(function(e) {
e.preventDefault();
$('#notSoCoolGrid tr').each(function(i, tr) {
var postData = {
paymentId : $('#paymentId').text(),
id : $('#deald').text()
}
console.log(postData);
$.ajax({
type: "post",
url: "/update_deal_pmt_script.jsp",
data: postData
})
.done(function(response) {
console.log(response);
alert("Success!");
})
.fail(function(x, status, error) {
alert("Error: " + error);
});
});
});
});
ASKER
Chris.. I have changed from text() to val() function and I can see data are pick up....let me test more.I will let you know
OK - now we're making progress :)
The code resposnible for building your Object is this:
Without seeing your HTML, I can't tell you whether this is correct or not. What it's trying to do is look for a single element (<p>, <td>, <div> etc) with an ID of paymentId (remember, you can only have each ID ONCE in your HTML document) and then getting the text of that element.
If you have several items with that ID you will probably run into problems. If your element with that ID is a form field, you will also run into problems, as form fields don't have the text() method - they have a val() methid instead
The code resposnible for building your Object is this:
var postData = {
paymentId : $('#paymentId').text(),
id : $('#deald').text()
}
Without seeing your HTML, I can't tell you whether this is correct or not. What it's trying to do is look for a single element (<p>, <td>, <div> etc) with an ID of paymentId (remember, you can only have each ID ONCE in your HTML document) and then getting the text of that element.
If you have several items with that ID you will probably run into problems. If your element with that ID is a form field, you will also run into problems, as form fields don't have the text() method - they have a val() methid instead
Ahh - we cross posted, but looks like you're on the right track - I'd still be concerned about you using the IDs as the selectors through!
ASKER
Chris what happens it loops only first row even after changing ID to Class.Only first row is saved/Updated to the Database and all ajax posts are only updating first row only.So the loop work but it does not increment.At least I can see now data is saved for first row..Any idea to increment the rows?
ASKER
Below is the data I am sending.
var postData = {
paymentId : $('.paymentId').val(),
id : $('.deald').val(),
pType:$('.pType').val(),
pAmt:$('.pAmt').val(),
currency:$('.currency').val(),
pInvDate:$('.pInvDate').val(),
pRecDate:$('.pRecDate').val(),
comments:$('.comments').val()
}
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
Thank you very much Chris.........finally all my rows are saved now.I really do appreciate your support.
ASKER
Thank you too Zephyr_hex.........you guys made my days!!
Excellent news - pleased we got there in the end :)
url: "update_deal_pmt_script.js
If it's in another directory, you likely need to indicate WHERE. The current path you're using ("/update_deal_pmt_script.
Also, please use F12 console to look for errors in your code, and also check the Network tab to see if the AJAX call is successfully finding update_deal_pmt_script.jsp