Submitting forms within each row with AJAX...
Submitting forms within each row with AJAX...
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.
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.
This discussion has been closed.
Replies
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
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. =(
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 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?
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.
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
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.
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
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. =)
[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
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. =/
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
Is there any better way to obtain the ID?
[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.
Great to hear that this has done the job for you :-) :-)
Regards,
Allan