reference http://github.com/wenzhixin/bootstrap-table/
The primary table :
where the PHP on top is :
the HTML is :
the JS is :
focus on :
this one creates an anchor, onclick call the invoice_details_choose method parameterized by primary record ID^ (aka offer_id)
the invoice_details_choose () (out of jQuery era) :
where the CHOOSEINVOICE_tbl in html setted on cardview by default in modalCHOOSEINVOICE :
the modalCHOOSEINVOICE events are :
so when by primary table the download button clicked > the javascript function run > read the records by PHP > show as at bootstrap-table as card-view, we are here :
now when a row clicked, we using the bootstrap-table event click-row.bs.table as :
The primary table :
where the PHP on top is :
JavaScript:
<?php
// include DB
require_once ('config.php');
$db = connect();
$contracts = null;
///////////////////READ Contracts
$contracts = getSet($db,"select offer_id, DATE_FORMAT(offer_date_rec,'%d-%m-%Y %H:%i') as date_created, users.fullname as user,FORMAT(gen_total,2) as gen_total,DATE_FORMAT(invoice_when,'%d-%m-%Y %H:%i') as invoice_when,usB.fullname as invoice_user,
CASE offer_type
WHEN 1 THEN 'New'
WHEN 2 THEN 'Update'
WHEN 3 THEN 'Renewal'
ELSE 'unknown'
END AS offer_type,ifNull(DATE_FORMAT(service_starts,'%d-%m-%Y'),'no setted') as Starts, ifNull(DATE_FORMAT(service_ends,'%d-%m-%Y'),'no setted') as Ends
from offers
left join users on users.user_id = offers.offer_seller_id
left join users as usB on usB.user_id = offers.invoice_user
where company_id=? and is_paid=1 order by offer_date_rec DESC", array($_GET['id']));
///////////////////READ Contracts
?>the HTML is :
JavaScript:
[TABLE]
[TD]
[TR]
[TD][/TD]
[TD]ID[/TD]
<!--data-visible="false"-->
[TD]Created[/TD]
[TD]Seller[/TD]
[TD]Total Cost €[/TD]
[TD]Type[/TD]
[TD]Service Starts[/TD]
[TD]Service Ends[/TD]
[TD]Invoice[/TD]
[/TR]
<tbody id="contracts_rows">
[/TABLE]the JS is :
JavaScript:
///////////////////////////////////////////////////////////// FILL Contracts grid
var jArray_contracts = <?php echo json_encode($contracts); ?>;
var combo_contracts_rows = "";
for (var i = 0; i < jArray_contracts.length; i++)
{
combo_contracts_rows += "[TR][TD][/TD][TD]" + jArray_contracts[i]["offer_id"] + "[/TD][TD]" + jArray_contracts[i]["date_created"] + "[/TD]" +
"[TD]" + jArray_contracts[i]["user"] + "[/TD][TD]" + jArray_contracts[i]["gen_total"] + "[/TD][TD]" + jArray_contracts[i]["offer_type"] + "[/TD]" +
"[TD]" + jArray_contracts[i]["Starts"] + "[/TD][TD]" + jArray_contracts[i]["Ends"] + "[/TD]";
if ( jArray_contracts[i]["invoice_when"]==null)
combo_contracts_rows += "[TD]<a onclick='invoice_details_choose(" + jArray_contracts[i]["offer_id"] + ");' class='btn btn-danger btn-xs']Download</a>";
else
{//reactivate green button
}
combo_contracts_rows +="[/TD][/TR]";
}
$("#contracts_rows").html(combo_contracts_rows);
///////////////////////////////////////////////////////////// FILL Contracts grid
//convert2magic!
$("#contracts_tbl").bootstrapTable();focus on :
JavaScript:
combo_contracts_rows += "[TD]<a onclick='invoice_details_choose(" + jArray_contracts[i]["offer_id"] + ");' class='btn btn-danger btn-xs']Download</a>";the invoice_details_choose () (out of jQuery era) :
JavaScript:
//when download button clicked from grid - refresh destinations (invoice details) on grid in modal!
//dynamic handler for grid buttons
function invoice_details_choose(offer_id)
{
//store to modal hidden input, the offerID selected by primary grid!
$("#CHOOSEINVOICE_offerID").val(offer_id);
$.ajax(
{
url : 'x_get_invoices.php',
dataType : 'json',
type : 'POST',
data : { "client_id" : <?= $_GET['id'] ?> }, //read client invoice details (aka branches)
success : function(data)
{
//when response
var r = data.recs;
var tbl ="";
if (r==undefined)
{
alert("error : no record");
return;
}
//construct table rows
for (var i = 0; i < r.length; i++)
{
tbl += "[TR][TD]" + r[i]["client_invoice_detail_id"] + "[/TD][TD]" + r[i]["company_name"] + "[/TD]" +
"[TD]" + r[i]["occupation"] + "[/TD][TD]" + r[i]["city"] + "[/TD][TD]" + r[i]["country_id"] + "[/TD][TD]" + r[i]["vat_no"] + "[/TD][TD]" + r[i]["tax_office_id"] + "[/TD][/TR]";
}
//set rows to table
$("#CHOOSEINVOICE_rows").html(tbl);
//convert2magic!
$("#CHOOSEINVOICE_tbl").bootstrapTable();
//show modal
$('#modalCHOOSEINVOICE').modal('toggle');
},
error : function(e)
{
alert("error");
}
});
//location.reload(true);
}where the CHOOSEINVOICE_tbl in html setted on cardview by default in modalCHOOSEINVOICE :
JavaScript:
<!-- NEW CHOOSE INVOICE MODAL [START] -->
<div class="modal fade" id="modalCHOOSEINVOICE" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
×
</button>
<h4 class="modal-title" id='lblTitle_contracts']Please Choose Client Invoice Details</h4>
</div>
<div class="modal-body">
<!--data-striped=true-->
[TABLE]
[TD]
[TR]
[TD]
id
[/TD]
[TD]
Company Name
[/TD]
[TD]
Occupation
[/TD]
[TD]
City
[/TD]
[TD]
Country
[/TD]
[TD]
VAT
[/TD]
[TD]
Tax Office
[/TD]
[/TR]
<tbody id="CHOOSEINVOICE_rows">
</table >
<form id="formCHOOSEINVOICE" name="formCHOOSEINVOICE" role="form" method="post" action="generate_invoice.php">
<input name="CHOOSEINVOICE_offerID" id="CHOOSEINVOICE_offerID" class="form-control" style="display:none;">
<input name="CHOOSEINVOICE_invoicedetailID" id="CHOOSEINVOICE_invoicedetailID" class="form-control" style="display:none;">
<div class="modal-footer">
<button id="bntCancel_CHOOSEINVOICE" type="button" class="btn btn-primary" data-dismiss="modal">
cancel
</button>
</div>
</form>
</div><!-- End of Modal body -->
</div><!-- End of Modal content -->
</div><!-- End of Modal dialog -->
</div><!-- End of Modal -->
<!-- NEW CHOOSE INVOICE MODAL [START] -->the modalCHOOSEINVOICE events are :
JavaScript:
////////////////////////////////////////
// MODAL FUNCTIONALITIES [START]-invoice details
//when modal closed, hide the warning messages + reset
$('#modalCHOOSEINVOICE').on('hidden.bs.modal', function() {
//when close - clear elements
$('#formCHOOSEINVOICE').trigger("reset");
//destroy bootstrap-table
$("#CHOOSEINVOICE_tbl").bootstrapTable('destroy');
});
//functionality when the modal already shown and its long, when reloaded scroll to top
$('#modalCHOOSEINVOICE').on('shown.bs.modal', function() {
$(this).animate({
scrollTop : 0
}, 'slow');
});
// MODAL FUNCTIONALITIES [END]-invoice details
////////////////////////////////////////so when by primary table the download button clicked > the javascript function run > read the records by PHP > show as at bootstrap-table as card-view, we are here :
now when a row clicked, we using the bootstrap-table event click-row.bs.table as :
JavaScript:
//when row clicked by bootstrap-table (card view)-there is no other way(?)
$('#CHOOSEINVOICE_tbl').on('click-row.bs.table', function (e, row, $element)
{
console.log(row.client_invoice_detail_id);
if (!confirm("Please confirm the invoice details will be :\r\n"+ row.company_name + "\r\n" + row.vat_no + "\r\n" + row.tax_office_id))
return;
//show an indicator
loading.appendTo(document.body);
//close modal
$('#modalCHOOSEINVOICE').modal('toggle');
//set selected to form input element
$("#CHOOSEINVOICE_invoicedetailID").val(row.client_invoice_detail_id);
//submit native the form!
document.formCHOOSEINVOICE.submit();
//go back after 5sec
setTimeout(function(){
window.location="x_details.php?showcontracts=1&id=<?= $_GET['id'] ?>";
}, 5000);
});