Link to home
Start Free TrialLog in
Avatar of Frank Danny
Frank DannyFlag for United States of America

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");
						}

					});
				});


			});

		});

Open in new window

Avatar of zephyr_hex (Megan)
zephyr_hex (Megan)
Flag of United States of America image

Where is "update_deal_pmt_script.jsp" located with relation to the script that you've shown above?  If it's in the same directly, you should remove the "/" and just use:

url: "update_deal_pmt_script.jsp",

If it's in another directory, you likely need to indicate WHERE.  The current path you're using ("/update_deal_pmt_script.jsp") doesn't make sense to me.

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
Avatar of Frank Danny

ASKER

@zephyr_hex  the  "update_deal_pmt_script.jsp"   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);
}
Nothing  logged  off..............console shows   clear.
SOLUTION
Avatar of Chris Stanyon
Chris Stanyon
Flag of United Kingdom of Great Britain and Northern Ireland image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
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:
User generated image
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.
zephyr_hex  based on your explanation and observation on Firebug,seems my request is not firing.Not sure why it is not  firing
@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:

$(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);
            });
        });
    });
});

Open in new window

Chris  now   everything is  fired up except  values are not picked  up,below is  IE F12  dev Tools

 User generated image
User generated image
User generated image
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:

var postData = {
     paymentId : $('#paymentId').text(),
     id : $('#deald').text()
}

Open in new window


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!
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?
This is what is happening........under F12 IE Tools

  User generated imageUser generated image
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()
				}

Open in new window

ASKER CERTIFIED SOLUTION
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Thank  you  very much  Chris.........finally  all my rows are saved now.I really  do appreciate  your support.
Thank  you too  Zephyr_hex.........you guys made my days!!
Excellent news - pleased we got there in the end :)