Append row in table using XAJAX - values are deleted - html-table

I have this table in HTML:
<table style="width: 100%;" class="allBorders">
<tbody id="added_articles">
<tr id="header_articles">
<td>test</td>
<td> </td>
</tr>
</tbody>
</table>
And using XAJAX I append new ROW like THIS
function addNewLine()
{
global $objResponse;
$uniqueID = time();
$return = "<tr id='articles_".$uniqueID."'>";
$return .= "<td><input type='text' id='v_$uniqueID' name='v[]' /></td>";
$return .= "</tr>";
$objResponse->append("added_articles", "innerHTML", $return);
return $objResponse;
}
Whenever I add new line all values in previously added lines are cleared..
Example:
1st line is added
value in 1st line is set to "TEST"
2nd line is added and value in 1st line is deleted .. .
Any idea?

<div id="added_articles">
<table style="width: 100%;" class="allBorders">
<tbody>
<tr id="header_articles">
<td>test</td>
<td> </td>`enter code here`
</tr>
</tbody>
</table>
</div>
function addNewLine()
{
global $objResponse;
$return .= "<table style="width: 100%;" class="allBorders">";
$return .= "<tr id='articles_".$uniqueID."'>";
$return .= "<td><input type='text' id='v_$uniqueID' name='v[]' /></td>";
$return .= "</tr></table>";
$objResponse->append("added_articles", "innerHTML", $return);
return $objResponse;
}

I was having a trouble using this function to add 'tr'.
The code that I used was..
function Start($oid){
$objResponse = new xajaxResponse();
$userauth = Authorizer::getUserByID($oid); // I Save here DB rows return.
while ( $rows = $userauth->fetchRow() ){
$row[] = $rows['uid'];
$userInfo = User::userInfo($rows['uid']);
$useradd .= ' <tr class="spaceunder">
<td>'. $rows['uid'] .'</td>
<td>'. $rows['status'] .'</td>
<td>'. $rows['perm'] .'</td>
<td>'. $rows['dtauth'] .'</td>
</tr>';
$objResponse->addAlert($useradd);
$objResponse->addAssign('userAdded', 'innerHTML', $useradd);
return $objResponse->getXML();
}
And my HTML is...
<table id ="userAdded" border="0" cellpadding="0" cellspacing="0" style="width:100%;height:100%;padding:5px 0px 0 0px;margin:0px 0px 0 0px;">
<tr valign="top" style="height:37px;padding:1px 1px 1 1px;margin:0px 0px 0 0px;">
<td align="left">
<table width="100%" cellspacing="0" cellpadding="0" border="0">
</table>
</td>
</tr>
</table>'
And it works perfectly.

Related

get element id from template using smarty - Prestahop

I'm using Smarty in Prestashop. In my php file I built a function like this:
public function hookDisplayAdminOrderContentOrder($params)
{
$orderId = Tools::getValue('id_order'); // mi prendo l'id dell'ordine per le query sui docId
$query = 'SELECT docId1, docId1 FROM '._DB_PREFIX_.'orders WHERE id_order=\'' . $orderId . '\';';
$docId2 = Db::getInstance(_PS_USE_SQL_SLAVE_)->getRow($query)['docId2'];
$docId1 = Db::getInstance(_PS_USE_SQL_SLAVE_)->getRow($query)['docId1'];
$config_CreaOrdine = Configuration::get('PS_CREAZIONE_ORDINE');
$config_CreaFattura = Configuration::get('PS_CREAZIONE_FATTURA');
// uso order_documents per il contatore nel template
$order_documents = 0;
if ($docId1 || $docId2)
$order_documents++;
else if ($docId1 && $docId2)
$order_documents = 2;
if(!$docId1){
$message_order = 'documento NON salvato';
$submit_button_id = 'submit_order';
$submit_label = "Salva Ordine";
}else{
$message_order = 'documento salvato';
}
if(!$docId2){
$message_invoice = 'documento NON salvato';
$submit_button_id = 'submit_invoice';
$submit_label = "Salva Fattura";
}else {
$message_invoice = 'documento salvato';
}
smartyRegisterFunction($this->context->smarty, 'function', 'saveDocument', array($this, 'smartyDocument')); // aggiungo la funzione per salvare di nuovo l'ordine
$this->context->smarty->assign('id_order', $orderId);
$this->context->smarty->assign('config_CreaOrdine', $config_CreaOrdine);
$this->context->smarty->assign('config_CreaFattura', $config_CreaFattura);
$this->context->smarty->assign('order_documents', $order_documents); // contatore documenti salvati
$this->context->smarty->assign('order', $message_order);
$this->context->smarty->assign('order_docId', $docId1); //docId per tasto ordine
$this->context->smarty->assign('invoice', $message_invoice);
$this->context->smarty->assign('invoice_docId', $docId2); //docId per tasto fattura
return $this->display(__FILE__, 'views/templates/hook/admin_content_order.tpl');
}
Then in my admin_content_order.tpl I set the button name and id like this:
<div class="tab-pane" id="myplugin">
<table>
<tbody>
<thead>
<tr>
<td style="padding-left: 20px;"><strong>{l s='Stato ordine' mod='myplugin'} </strong></td>
<td style="padding-left: 20px;"><strong>{l s='Stato fattura' mod='myplugin'} </strong></td>
</tr>
</thead>
<tr>
<td style="padding-left: 20px;">{$order}</td>
<td style="padding-left: 20px;">{$invoice}</td>
</tr>
<tr>
<td style="padding-left: 20px;">
{if $order_docId == '' && $config_CreaOrdine eq 1}
<button type="submit" name="submit_order" id="submit_order" class="btn btn-primary" onclick={saveDocument}>Salva Ordine</button>
{/if}
</td>
<td style="padding-left: 20px;">
{if $invoice_docId == '' && !$config_CreaFattura eq 0}
<button type="submit" name="submit_invoice" id="submit_invoice" class="btn btn-primary" onclick={saveDocument}">Salva Fattura</button>
{/if}
</td>
</tr>
</tbody>
</table>
</div>
At last in my php file I define the function "smartyDocument". I wish a slight different behaviour of it, based on the button id. Anyone knows how I can I get the button id and pass it to "smartyDocument" function? I hope is all clear, thx
You cannot use any Smarty commands after loading the page. You can use the Javascript function instead.
Smarty is a server-side engine and the output is sent to the browser after processing, which is quite static.
You have to have a Javascript function to save your document by Ajax:
send your data to PHP
save data
return success or fail message

Datables - hide data until search

I'd like for my page to initially load with just a search box, and then when someone begins to search that is when the table appears.
My example table is below:
<script>
$(document).ready(function() {
$('#example').DataTable( {
responsive: true
} );
} );
</script>
<table id="example" class="display" style="width:100%">
<thead>
<tr>
<th>Name</th>
<th>Description</th>
<th class="none">Branch</th>
</tr>
</thead>
<tbody>
<tr>
<td>Test 1</td>
<td>Test test test</td>
<td>ABC</td>
</tr>
<tr>
<td>Test 2</td>
<td>Test test test</td>
<td>DEF</td>
</tr>
<tr>
<td>Test 3</td>
<td>Test test test</td>
<td>GHI</td>
</tr>
</tbody>
</table>
yes it can be done using ajax call and i suppose you use php.
For example, you can generate a table everytime you press any char, populating the table with the results or using a button to search the keyword you type on the input field.
Example with ajax and php:
var search_string = $('#id_of_the_input_box').val();
$.ajax({
url:"php_file.php",
method:"POST",
data:{action:action},
dataType:"json",
success:function(data){
console.log(data);
}
and the php code using PDO
$search_string = $_POST["string"];
$result = '';
$query = $connection->prepare(" select * from table where name = '%".search_string."' ";
$query->execute();
$query_results->query->fetchAll;
if($query->rowCount() > 0) {
$result = '
<script>
$(document).ready(function() {
$('#example').DataTable( {
responsive: true
});
});
<table id="example" class="display" style="width:100%">
YOUR TABLE ROWS HERE
</table>
';
// foreach loop to populate the table example
foreach ($query_results as $row) {
$result.= '
<tr>
<td>'.$row["table_column_name_1"].'</td>
<td>'.$row["table_column_name_1"].'</td>
<td>'.$row["table_column_name_1"].'</td>
<td>'.$row["table_column_name_1"].'</td>
'
} else {
echo "No results";
}
}
// echo the generated table as ajax response
echo $result;
Hope you have caught the idea with this example.

How to set css of dataTable after reload?

There is a dataTable :
<table id="list_details_livraison" class="striped cell-hovered border bordered" data-searching="true">
<thead>
<tr>
<th style="text-align: center;"><?php echo _getText('detaillivraison.entete.article');?></th>
<th style="text-align: center;"><?php echo _getText('detaillivraison.entete.lot');?></th>
<th style="text-align: center;"><?php echo _getText('detaillivraison.entete.qtelivrer');?></th>
<th style="text-align: center;"><?php echo _getText('detaillivraison.entete.pu');?></th>
<th style="text-align: center;"><?php echo _getText('detaillivraison.entete.taxe');?></th>
<th style="text-align: center;"><?php echo _getText('detaillivraison.entete.remise');?></th>
<th style="text-align: center;"><?php echo _getText('detaillivraison.entete.prixtotal');?></th>
<th></th>
</tr>
</thead>
<tbody>
</tbody>
</table>
$(document).ready(function(){
var list_details_livraison = $('#list_details_livraison').DataTable({
...
"initComplete": function(settings, json) {
$(this).css("table-layout","fixed");
}
});
Then I filter the dataTable by selecting a value from a select element :
$('#cacher').on("change", function() {
var ddeb = convertDateFormat3($("#date_deb_").val());
var dfin = convertDateFormat3($("#date_fin_").val());
list_details_livraison.ajax.url("<?php echo RP_SSP; ?>server_processing_livraisons_frnsr.php?ddeb="+ddeb+"&dfin="+dfin+"&type="+$("#h_filtre_type_livraison").val()+"&valider="+$("#h_filtre_etre_valider").val()).load();
});
At runtime the dataTable's columns are not autowidth after I make the filter ; I tried using list_details_livraison.css("table-layout","fixed"); but I got a console error ! So how to reapply the table-layout fixed css at this moment ?
Comment converted into an answer at the request of the OP.
initComplete() will only run once per table creation, so won't be called after subsequent paging, filtering etc. For this you need drawCallback() which gets called after every draw.
You just need to change:
"initComplete": function(settings, json) {
to
"drawCallback": function( settings ) {

cakephp sql log is correct, not returning data

I'm creating a simple view function, after checking my sql log its correct, However my view is not printing the information.
SELECT `AccountsUser`.`id`, `AccountsUser`.`account_id`
FROM `pra`.`accounts_users` AS `AccountsUser`
WHERE `user_id` = 14
SELECT `Template`.`id`, `Template`.`name`, `Template`.`description`,
`Template`.`account_id`
FROM `pra`.`templates` AS `Template`
WHERE `Template`.`account_id` = (10)
The account_id=10 but it isn't printing out the templates related to the account.id
function view(){
$this->set('title_for_layout', 'View Templates');
$this->set('stylesheet_used', 'homestyle');
$this->set('image_used', 'eBOXLogoHome.jpg');
$this->layout='home_layout';
$this->Template->unbindModel(array('belongsTo'=>array('Account')));
$templates = $this->Auth->user('name');
$accounts=$this->User->AccountsUser->find('list', array('fields'=>array('id', 'account_id'),'conditions' => array('user_id' => $this->Auth->user('id'))));
$templates=$this->Template->find('all', array('conditions' => array('Template.account_id' => $accounts)));
$this->set('template', $templates);
$this->set('account'. $accounts);}
Here is the view
<table width="100%" border="1">
<table width="100%" border="1">
<tr>
<th>Template Name</th>
<th>Template Description</th>
</tr>
<?php foreach($template as $templates): ?>
<tr>
<td align='center'><?php echo $templates['templates']['id']; ?> </td>
<td align='center'><?php echo $templates['templates']['name']; ?> </td>
</tr>
<?php endforeach; ?>
</table>
id like it to print a list of templates related to the account.id
You should try the following:
<table width="100%" border="1">
<tr>
<th>Template Name</th>
<th>Template Description</th>
</tr>
<?php if(!empty($template))
{
foreach($template as $templates)
{?>
<tr>
<td align='center'><?php echo $templates['Template']['id']; ?> </td>
<td align='center'><?php echo $templates['Template']['name']; ?> </td>
</tr>
<?php
}// end of foreach
}
else
{?>
<tr> <td>No Templates Found.</td></tr>
<?php
}?>
</table>

I have got wrong alert! What is wrong?

I have a problem in revealing the actual results of the radio buttons. I use javascript to get value from radio button, succeeded anyway, BUT when I create a condition where if value! = "Yes" alert that appears why still "OK", I would like to choose if it is "No" means alert that should be appear is "NOT OKE ".
This is the form:
<form id="form_test" name="form_test" method="POST">
<input type="hidden" id="menu_id" name="menu_id" value="<?=$menu_id?>">
<table align='center' width='auto' class='table1' cellpadding='5' cellspacing="0">
<tr>
<td align='center' class='tabletitle'>No</td>
<td align='center' class='tabletitle'>PC</td>
<td align='center' class='tabletitle'>PN</td>
<td align='center' class='tabletitle'>PCO</td>
<td align='center' class='tabletitle'>GC</td>
<td align='center' class='tabletitle'>CUR</td>
<td align='center' class='tabletitle'>Codes</td>";
<td align='center' class='tabletitle'>Percent</td>";
<td align='center' width='5%' class='tabletitle'>Yes</td>";
<td align='center' width='5%' class='tabletitle'>No</td>";
</tr>
[call to database]
$num++;
echo " <tr>
<td class='tablecontent' align='center' valign='top'>$num</td>
<td class='tablecontent' valign='top'>$pc</td>
<td class='tablecontent' valign='top' nowrap>$pn</td>
<td class='tablecontent' align='center' valign='top'>$pco</td>
<td align='center' class='tablecontent' align='center' valign='top'>$gc</td>
<td class='tablecontent' align='center' valign='top'>$cur</td>
<td class='tablecontent2' valign='top'>$codes</td>";
<td align='center' class='tablecontent' valign='top'>$percent</td>";
<td align='center' class='tablecontent' valign='top'><input type='radio' id='yes' name='cek$num' value='yes' checked></td>";
<td align='center' class='tablecontent' valign='top'><input type='radio' id='no' name='cek$num' value='no' ></td>";
</tr>";
echo "
<tr>
<td><input type='button' name='accept' value='accept' onclick='getaccept()'></td>";
</tr>";
echo "</table>";
echo "<input type='hidden' id='jmlcek' name='jmlcek' value='$num'>";
echo "</form>";
Then this is the Javascript codes to get value:
<script language="Javascript">
function getaccept(){
//var str = '';
var elem = document.getElementById('form_test').elements;
var c = confirm("Yakin mau nerima?");
for (var i = 1; i <= elem.length; i++)
{
var e = elem[i].value
if (elem[i].type == "radio" && c)
{
if (e != "yes" && elem[i].checked){
alert('NOT OKE');
return false;
}else{
alert('OKE');
return true;
}
}
}
}
</script>
For example the amount of data that actually are three and all got selected "yes", when I select "no" at one of the existing number it will display alert "NOT OKE", but in fact when I select "no" the value I got was "yes" and alert up "OKE".
I have tried many times to make them correct but still the results are wrong, so what's wrong?
Thanks.
This is what I got:
function getApprove(){
//var elem = document.getElementById('form_test').elements;
var RadioButton = document.getElementsByTagName('input');
var Approve = confirm("Are you sure?");
for (var i = 0; i < RadioButton.length; i++)
{
if (RadioButton[i].type == "radio" && Approve)
{
if(RadioButton[i].checked && RadioButton[i].value != "yes"){
alert("NOT OKE");
return false;
}
}
}
for (var i = 0; i < RadioButton.length; i++)
{
if (RadioButton[i].type == "radio" && Approve)
{
if(RadioButton[i].checked && RadioButton[i].value == "yes"){
alert("OKE");
return true;
}
}
}
=>SOLVED<=
Thankyou so much p.campbell, for you concern and helping me m(_ _)m :)
What's happening here is that you're only evaluating the FIRST radio button because you've got a return statement in both those conditions in your (e != "yes" && elem[i].checked). It's exiting the function.
Remove your return statements near your alerts. They're exiting the function, and disallowing the loop to iterate through the form elements.
Here's a demo on JsBin.