I have a dynamic (via jquery) html table like this:
<form action="index.php" method="post">
<table class="myTable" id="cup">
<tbody>
<tr><td class="header" colspan="6">YOUR SELECTIONS</td></tr>
<tr><td></td><td></td><td></td><td></td><td></td><td></td></tr> //selected
</tbody>
</table>
<input type="submit" value="submit">
</form>
First, the table has only 1 row and 6 cells (except "selections" part). After some conditions satisfied, the cells get filled with some values and the "selected" row is appended into the table via jquery. But my problem here, is not related to jquery.
Each of 6 cells will be inserted into the mysql table part by part. My database table structure like this:
ID | Selection1 |...| Selection6 | Date, time stuffs and other info.
So, I need some code that will do these jobs:
define an array with 6 element.
counter=0;
loop(until there is no traveled cell in the html table)
{
find a cell that is not NULL or its value is not "selections";
array[counter] <-- value of cell;
counter++;
if (counter == 6)
{
insert all of them into the mysql table (?)
counter=0;
}
}//end loop
So, this is my problem. I just can't know how to do it. Should I have to add "id" or "name" stuffs in the html tags or what? :)
EDIT: I don't want you guys to code it for me of course. The thing I couldn't get is how to separate these values 6 by 6 and send them into the database. I just need ideas.
From the html table data you can construct a JSON object. For instance:
var myData = [],
keys = ['ID','Selection1','Selection2', ..... ]
url = './index.php';
$('table').find('tr:gt(0)').each(function( i, row ) {
var oRow = {};
$( row ).find( 'td' ).each( function( j, cell ) {
oRow[ keys[ j ] ] = $( cell ).text();
});
myData.push( oRow );
});
//myData = [ {"ID":"3u3y","Selection1",....},{"ID":"jdjdj",...}.... ]
//now you can use one key to send all the data to your server
$.post( url, { mydata: JSON.stringify( myData ) }, function(d) {
alert( 'Server said, ' + d );
});
//In your PHP script you would look for the data in mydata --> $_POST['mydata']
EDIT
Click the link below to go to a demo.
In THIS DEMO click submit and then look at the console on the right. Click the plus on the left of the failed ajax call and then click the Post tab to examine the data the call attempted to send.
Does that help?
Related
jquery comparison of rows from a user prediction table and a result a results table. If the values are identical i want to award 3 point to user and add to total points.
$('#pred_table tr').each(function(){
var currentRowHTML=$(this['Home_Score']&&this['Away_Score']).html();
$('#fixure tr').each(function(){
if($(this['Home_Score']&&this['Away_Score']).html()===currentRowHTML){
//not sure where to begin with the doCalculation function
$(this).doCalculation("award 3 points into total points in another
table in database");
}
});
});
Add this to your file:
<input type="hidden" id="processURL" value="PROCESS.PHP">
Put this code:
var url = $('#processURL').val();
var add_this = 3;
var postit = $.post( url, {add_this:add_this});
postit.done(function( data ) {
alert('Three Point Added');
});
where this is
//not sure where to begin with the doCalculation function
$(this).doCalculation("award 3 points into total points in another
table in database");
add to the db through PROCESS.PHP
If you replace 'Three Point Added' in the alert with data whatever you echo on PROCESS.PHP will render in the alert.
I am retrieving data from MySQL table and displaying in a HTML Table by <?php foreach ?> loop like below.
Now I want to edit/delete the data of a particular row of the above HTML table by pressing the edit or delete button of the table. My MySQL table primary key is branch_code.
I know how to update/delete data in MySQL table in Codeigniter but I do not know how to retrieve the data from the table row. I could not try because I do not know how to start it.
I found similar questions like
Get values from html table using codeigniter
PHP-CodeIgniter: How to get the corresponding html table row values to be deleted by Javascript
In No#1 it was written Collect all this data in an array and "send" it to your PHP via an Ajax POST request. ----- ok great, but how could I do that ?
Can you please help me ?
May be my question is duplicate, but I didn't get any answer from those originals or I would say, I am unable to proceed the process.
Thank you in advance.
Update:
from the No#2 I got the below...
$(document).on('click', '#deleteRow', function() {
var obj = $(this).parent().parent();
var companyId = obj.attr('branch_code');
obj.remove();
});
I understood that I should add unique attribute to <tr>.
Now how can I pass the value in a variable to a model so that I can update my MySQL table ($this->db->where('branch_code', $branch_code);) ?
The way I usually do this is when you make render the html table you would create a unique id for each <tr> , so you'd do something like this:
<?php foreach ( $table->result() as $row): ?>
<tr id="branch_<?= $row->branch_code ?>">
<td>Whatever you want here</td>
<td></td>
</tr>
<?php endforeach; ?>
Then you can do an AJAX call to delete and grab that id with it.
<script>
function deleteBranch(id) {
$.post('controller_url', {"branch_code" : id }, function(data){
//Your controller method would echo a 1 for success
if (data == 1) {
$("#branch_" + id).fadeOut();
//show some kind of message
}
});
}
</script>
So from the controller you could now have a $this->input->post("branch_code") that you could reference to get the branch to delete.
I currently have a table in the current format:
ID Client Info Case Detail Accident Date Case Opened No Days Function
-- ----------- ----------- ------------- ----------- ------- --------
which contains dynamic information being pulled out of the database.
The ID column is of particular importance because I need to extract the data from this cell when the user clicks on the "Manage" button under the function column.
Right now this is the code that runs when the user clicks on the "Manage" button.
<script>
$(document).ready(function () {
$(".manage").click(function () {
$('#casesHeading').hide("slow");
$('#casesTable').hide("slow");
$('#results').load('components/manage.php');
});
});
</script>
A heading and table is hidden and the page "manage.php" is loaded in results div.
But I was just wondering if there was anyway for me to transfer the content of the ID cell (this varies per row) obviously into the manage.php file (which is currently empty).
So if the user clicks on a row with the ID cell data 233-cv then this information would be transferred over into the manage.php file. Hopefully I'm making sense. I read up on the jQuery .find function and it made some sense but I have no idea how to incorporate it in this instance.
UPDATE 1
I'm trying to accomplish somethng similar to this http://jsfiddle.net/ZjvAz/.
UPDATE 2
I've tried the following code but it doesn't seem to be working.
<script>
$(document).ready(function () {
$(".manage").click(function() {
var clickedButton = $(this);
clickedButton.parent().find(".result").text(
clickedButton.parent().parent().parent().find('.caseID').text()
);
});
});
</script>
I would have my manage.php file take the case ID as an argument. It would be called in a manner such as manage.php?caseId=123.
If you have control over the generated data, you could generate the required information to go in the button. There is no need for jquery code to traverse the DOM to the ID field. I would just generate something like this in the table source
<tr>
<td class="id">123</td>
...
<td class="function">
<button class="manage" onclick="loadManagementPage(123)">manage</button>
</td>
</tr>
If you cannot control the HTML source and do need to navigate, your best friend is probably using closest() which navigates up the dom. Use this to find the row element tr
For self-documenting purposes, i am not using chaining here
$( '.manage' ).click(function(){
// find the row we are in
var $self = $( this );
var $row = $self.closest( 'tr' );
// read the id
var $idCell = $row.find( 'td.id' );
var caseId = $idCell.text();
// locate an area on the page and dynamically load in some content
var $target = $row.find( 'td.result' ); // find the result cell
var $target = $( '#knownId' ) // *OR* find a div with a known id
$target.load( 'manage.php?caseId=' + caseId );
});
jQuery.load( handler(eventObject) ) Returns: jQuery
Description: Bind an event handler to the "load" JavaScript event.
As 'components/manage.php' isn't an event-handler – what are you trying to do?
If you want to request data from the server (also with sending smoe ID to it), you should read about the jQuery.ajax( url [, settings] ) function.
http://api.jquery.com/jQuery.ajax/
http://api.jquery.com/load-event/
As the title says, I have slickgrid getting/parsing JSON data from PHP, but while I can get it to update to the proper row count, nothing is displayed in a cell unless I edit it first. When I do, the correct data is displayed, but only for cells I have edited. Here is the relevant code:
$(function () {
$.getJSON("./test3.php", function(jsondata) {
$.each(jsondata, function(i, arr) {
var d = (data[i] = {});
$.each(arr, function(key, value) {
d[key] = value;
});
});
grid.updateRowCount();
grid.render();
});
grid = new Slick.Grid("#myGrid", data, columns, options);
//continues function prepping the grid
You might want to go for simpler implementation, there's no need to loop through all your data just dump your "jsondata" directly inside the SlickGrid Object creation.
As long as you have the "data" array into a JSON Object then you're fine. Something like this:
{ "data":[{"id":"84","name" : "Someone" ... ]}
// then pass it to your Slick Object.
grid = new Slick.Grid("#myGrid", jsondata, columns, options);
That's all... Oh and don't forget to have at least have a unique "id" on all rows
You can see example from this web site:
http://joeriks.com/2011/07/03/a-first-look-at-slickgrid-with-read-and-update-in-webmatrix/
I needed to call grid.invalidateRow() on all of the added rows.
I'm generating an html file which looks like:
<tr id="ID001" property1="PROPERTY001"><td><input type="checkbox"
name="row_checkbox_ID001"></td><td>...</td><td>...</td></tr>
<tr id="ID002" property1="PROPERTY002"><td><input type="checkbox"
name="row_checkbox_ID002"></td><td>...</td><td>...</td></tr>
When the user selects individual rows for deletion, how can I (through jQuery), pass this to a php script?
I will need to build something like this:
$(document).ready(function () {
$('#contact-form input.contact-delete').click(function (e) {
e.preventDefault();
$.get("deleterecord.php", ...);
});
});
There can be 0, 1 or multiple rows... The HTML being generated is under my control and can be modified.
Clarification:
I want to have a button above all these rows which the user can click on AFTER he has selected the rows from the table.
<div id='contact-form'><h2>Contacts</h2>
<input type='button' name='contact-delete' value='Delete Record(s)'
class='contact-delete'/>
The TRs need to be deleted, but BEFORE that, the deleterecord.php script needs to be called with the TR ids.
Use HTML arrays
<input type="checkbox" name="chk[]" value="01234">
<input type="checkbox" name="chk[]" value="98765">
You could create a JSON object containing details of any rows selected (ID's or whatever you need) and send that to your php script. Check out this article on json, php + jquery.
I believe, you are looking for similar behavior:
$('#contact-form input.contact-delete').click(function (e) {
var $this = $(this);
// find the table row, in which are elements contained
var $tr = $this.closest('tr');
// take id
var id = $tr.attr('id');
// ajax with id
$.get("deleterecord.php?id="+id, function (data) {
// remove table row on success
$tr.remove();
});
e.preventDefault();
});
Sorry for answering my own question, but the SO post at: Getting all selected checkboxes in an array neatly solves my problem!
For future visitors to this page, pay attention to variable names in your HTML and how you're accessing the input checkboxes in jQuery!