Submitting forms within each row with AJAX...

Julan

If I wanted to only submit a form containing an input field with a value>0, what's the best way to go about this? I basically have a table which will contain around 4000 items, each row has 1 form with 2 fields, 1 hidden (#id) and 1 text input (#qty).

I want to be able to browse the table, and hit a finish button to submit only the forms where the #qty input value>0...

I can't get serialize to work and I have been sat here all day failing miserably at everything else. The most success I've had was to try and copy the examples with row highlight. I'm using server-side loading.

allan

Are you using server-side processing, or just Ajax loading data? If using server-side processing you might have a number of other challenges, since if you sort, page whatever with the data then the information from before will be lost (so you might want to just have an Ajax request when values change or something like that).

You say you had problems with serialize, but that is what I was going to suggest :-). What was the problem? Have you taken a look at this example: http://datatables.net/examples/api/form.html ?

Allan

Julan

Hi Allan, thanks for your response.

Yes I did have a look at that example, and a number of others.

I am using server-side processing, but I'm starting to wonder if this was the right decision.

This is basically a wholesale cart solution that I've thrown together, as an alternative to Excel trading, and a seemingly unwise attempt to improve my jQuery skills. =P

The server_processing.php has the following at the end:

[code]
$row[] = "






";

$output['aaData'][] = $row;
}

echo json_encode( $output );
[/code]

This works the way you see it if I simply draw a HTML table with PHP/MySQL, but as I have over 4000 products, I need a better solution (DataTables), and since using DataTables I can't use my cart script because DataTables doesn't draw the table in a way that other scripts can read it...

So really, I'm trying to find a way that I can use AJAX to post the TR form values (which have the same #name identifier on each row) to cart.php....

Serialize seems like the right thing, but the only way I could get it to work was to take the existing form wrap away from the server_processing.php row, and wrap the entire table into a form instead, using that form to serialize... However, this only sent the last product row to the cart, and the rest were seemingly ignored.

Here is my output from serializing with the table form:
[code]
item-id=1&item-name=test1&item-price=1.00&item-qty=5&add-button=add+to+cart&item-id=3&item-name=test2&item-price=10.00&item-qty=5&add-button=add+to+cart&item-id=4&item-name=test3&item-price=10.00&item-qty=5&add-button=add+to+cart&item-id=5&item-name=test4&item-price=10.00&item-qty=5&add-button=add+to+cart
[/code]

And as I said, this only adds the last one, and not the rest. =(

Julan

The problem also with serialize, which I've now just realized, is that it will submit all the forms on the page, but what if a person only wants to add 1 item from 1 line... if they hit serialize I will assume it will just get the forms for the active page, and not the entire 4000?

Is there a way I can get my forms to work within the table? So that somebody can just click on a submission button and have the data relevant to that row/form submitted through AJAX?

allan

I'm not 100% clear on the way this interaction in the table works (sorry if I'm missing something obvious!). With server-side processing, there is very little information available in the table - only the current page which is displayed. If you change an input value, then flick to a different page and back, that input will have been lost, unless it is submitted. Is this what you want? Is each row an individual form effectively? Server-side processing probably is right for 4000 odd rows, but the integration and interaction needs consideration.

Allan

Julan

In an ideal world, each row with its own input field (#qty), and any value put into it would stay there, even when the visitor is on a different page or searching, but that would require storing of the value? Could it not work in a similar way to the row highlighting?

I think for now, I would just like to have a button that can be pressed, where the values of the input fields within the individual row forms are submitted to cart.php... but I don't know how to do this with DataTables drawing the table, as it doesn't seem to give a raw HTML output of the table data for the other jQuery script to handle the submission requests... does that make any sense?

Julan

Please tell me how can I make my other jQuery script work on the forms within the rows in DataTables? Is it very complicated?

Julan

I'm happy to make this worth your while... how much do you want to help me get it working? Would $50 be enough?

Julan

Well, If I can't get support, I can't use it. I'm obviously not going to make a donation if there's no solution. I'm sure it would have been possible to do what I'm after, but obviously this is too much of an amateur problem to be dealt with.

Thanks anyway; looks like I'll have to find an alternative and come up with a decent explination as to why I wasted so much time on this. I'm clearly as stupid as I am naieve.

allan

Hi Julan,

Sorry for the delay in getting back to you - I'm travelling on business at the moment, so I've got limited internet access. You are quite right that what you are looking for could be implemented with something a bit like server-side processing. However, what might be an idea is to submit the information as soon as it has changed (i.e. on a keyup event or something like that). This depends on the interaction that you want from the table though - you might not want this...

> Please tell me how can I make my other jQuery script work on the forms within the rows in DataTables?

I don't quite understand - sorry. Are you suggesting the markup is something like this:

[code]


...




...


[/code]
As useful as that would be it's not valid HTML and DataTables would almost certainly choke on it. What would need to be done is to have the form tag inside the TD elements. Or just wrap the whole table in one form tag.

What might be really useful is if you can post a screenshot of what you are looking for, so I can understand the interactions required and what a good solution might be.

Regards,
Allan

Julan

Sorry, I had half anticipated you might be away.

This is what I'm after http://www.onetelecom.eu/images/datatables.jpg

In HTML structure it looks something like this:
[code]

column 1col2col3col4

[/code]

So the form is just in one table cell and it's the same on each row...

Currently, when you click on those ticks in the example screenshot, the qty from the input box is added via AJAX to the cart. This is done through another jQuery script called jCart.

All I want to do is use DataTables to display a thousands of items, and give people the ability to click on the tick and add it to the cart. =)

I realize this is likely quite time consuimg, so I will send you a donation. I will repeat the donation if you can help me get it to work.

allan

Thanks for the screenshot (and donation :-) ). I think I'm starting to understand the way it works now - so the information for the quantity boxes is effectively stateless until the tick is pressed.

So just to confirm I understand correctly, the issue you face is that you want the values entered into the inputs are not retained over the page changes. You don't need them to do anything else, like an Ajax submit or anything, since that value is stateless - it's just keeping that number until the submit is pressed.

Is that's the case, then I'd say certainly that the answer lies with fnDrawCallback and the row highlighting example ( http://datatables.net/examples/server_side/select_rows.html ). What you want is a unique ID on each of the input elements (is this something you can add in? or even just an ID on the row or something - a unique identifier is needed), and a 'keypress' event handler on the input element. The event handler will save the value into a cached array (much like the example again) and then whenever a draw is done, scan the array and see if anything needs to be updated at draw time.

Does that help a bit?!

Regards,
Allan

Julan

Not really, sorry. =(

I had tried a few experiments with the select_rows but didn't get too far.

Retaining the value is important, but not imperitive, I'm happy to sacrifice it if I can add the quantities from a particular row to the cart.

The functions of the ticks in the screenshot just submit the indivudal forms within the TD whenever clicked.
So basically, a person types in a number to the input and hits the tick, AJAX posts the value from that same form's input field to a file called cart.php... and that input value is added to the cart. =)

allan

Okay, so it's that submit that is causing you a headache? How about this:

[code]
$('table input.text').live( 'click', function () {
var aoData = [];
aoData.push( { "name": "row_id", "value": this.getAttribute('id').replace('button_') } );
aoData.push( { "name": "quantity", "value": $('input:eq(1)', this.parentNode).val() } );

$.ajax( {
"dataType": 'json',
"type": "POST",
"url": "xhr-whatever.php",
"data": aoData,
"success": function () {
alert( "Added to cart" );
}
} );

return false;
} );
[/code]
With HTML that looks like this:

[code]

column 1
col2
col3

col4




[/code]
where 123 is the row ID in the database.

Warning - I've not tested it - but hopefully it should be okay ;-)!

Regards,
Allan

Julan

Almost.

Here's what I have now, here you can see what I've attempted based on your code above.

[code]

$(document).ready(function() {
$('#prod-tbl').dataTable( {
"bProcessing": true,
"bServerSide": true,
"sAjaxSource": "server_processing.php",
"aoColumns": [
/* ID */ { "bVisible": false, "bSearchable": false, "bSortable": false },
/* Model */ null,
/* Desc */ null,
/* Code */ null,
/* Price */ { "bSearchable": false, "bSortable": false },
/* Qty */ { "bSearchable": false, "bSortable": false },
] } );

/* ?? */ $('table form').submit(function() {
var aoData = [];
/* ?? */ aoData.push( { "name": "row_id", "value": this.getAttribute('id').replace('button_') } );
/* ?? */ aoData.push( { "name": "quantity", "value": $('input:eq(1)', this.parentNode).val() } );
$.post("jcart/jcart-relay.php",aoData );
$.post("jcart/jcart-relay.php","show_cart_count=show_cart_count" );

} );

return false;
} );

[/code]

And then I have this at the end of my server_processing.php:

[code]
$row[] = "





";

$output['aaData'][] = $row;
}

echo json_encode( $output );
[/code]

So something here is not right. =/

allan

Okay, hopefully we are getting close then!

I would certainly change this line:

[code]
$('table form').submit(function() {
[/code]
to this:

[code]
$('table form').live( 'submit', function() {
[/code]
Since that will allow the event handler to fire after a reload ( http://datatables.net/faqs#ss_events ).

Beyond that, what about the above code isn't working?

Allan

Julan

I think only .replace('button_') is bringing up the ID as "undefined" other than that it works... almost. =D

Is there any better way to obtain the ID?

Julan

I GOT IT, I GOT IT!!

[code]
$('#prod-tbl form img').live( 'click', function() {
var aoData = [];
aoData.push( { "name": "item-id", "value": $('input:eq(0)', this.parentNode).val() } );
aoData.push( { "name": "item-price", "value": $('input:eq(1)', this.parentNode).val() } );
aoData.push( { "name": "item-qty", "value": $('input:eq(2)', this.parentNode).val() } );
aoData.push( { "name": "add-button", "value": "add to cart" } );
$.post("jcart/jcart-relay.php",aoData );
$.post("jcart/jcart-relay.php","show_cart_count=show_cart_count" );

} );
[/code]

Second donation is on THE way as soon as I get back to work tomorrow. =)

Thanks Allan.

allan

Doh - I missed the second parameter needed for the "replace" (which is an empty string), but yes - your method for reading the parameters that you've put into the field is much better.

Great to hear that this has done the job for you :-) :-)

Regards,
Allan