I got some form problem I hope you can help me with:
I have an order CActiveForm for which I made an ajax function which delivers extra article data after the article number was inserted.
The form starts with one article row. I added some javascript to create more article rows if needed by the user. My problem: I did only get this to work when building some article-table outside the CActiveForm. Now the ajax function to get the article data no longer works as the data is no longer availiable on the CHtml model.
Any suggestions how I can get both things to work together? I’m totally stuck right now…
The form:
<?php $form=$this->beginWidget('CActiveForm', array(
'id'=>'orders-form',
'enableAjaxValidation'=>false,
)); ?>
<p class="note">Felder mit einem <span class="required">*</span> sind Pflichtfelder.</p>
<?php echo $form->errorSummary($model); ?>
<?php echo $form->hiddenField($model,'consultantId',$this->getConsultantOptions()); ?>
<div class="row">
<?php echo $form->labelEx($model,'customerId'); ?>
<?php echo $form->dropDownList($model,'customerId',$this->getCustomerOptions()); ?>
<?php echo $form->error($model,'customerId'); ?>
</div>
<div class="row">
<?php echo $form->labelEx($model,'deliveryId'); ?>
<?php echo $form->dropDownList($model,'deliveryId',$this->getDeliveryOptions()); ?>
<?php echo $form->error($model,'deliveryId'); ?>
</div>
<div class="row">
<?php echo $form->labelEx($model,'paymentId'); ?>
<?php echo $form->dropDownList($model,'paymentId',$this->getPaymentOptions()); ?>
<?php echo $form->error($model,'paymentId'); ?>
</div>
<div class="row">
<?php echo $form->labelEx($model,'articleNo'); ?>
<table id="orders-table">
<tr>
<!--
<td><?php echo CHtml::textField('art_no','',array('size'=>15,'maxlength'=>32)); ?></td>
<td><?php echo CHtml::textField('art_name','',array('size'=>40,'maxlength'=>255,'readonly'=>1)); ?></td>
<td><?php echo CHtml::textField('art_amount','',array('size'=>5,'maxlength'=>5)); ?></td>
<td><?php echo CHtml::textField('art_price','',array('size'=>8,'maxlength'=>10,'readonly'=>1)); ?> €</td>
<td><?php echo CHtml::button('bestellen', array( 'onclick'=>"{getArticleData();}" ) ); ?></td>
-->
<td><Input type="checkbox" name="chk"/></td>
<td> 1 </td>
<td> <input name="art_no" type="text" size="15" maxlength="32"> </td>
<td> <input name="art_amount" type="text" size="5" maxlength="5"> </td>
<td> <input name="art_name" type="text" size="40" maxlength="255" readonly="1"> </td>
<td> <input name="art_price" type="text" size="8" maxlength="10" readonly="1"> </td>
<td> <input type="button" value="bestellen" onclick="getArticleData()"></td>
</tr>
</table>
</div>
<div id='articleStatus'></div>
<div class="row buttons">
<INPUT type="button" value="Weiterer Artikel" onclick="addRow('orders-table')" />
<INPUT type="button" value="Artikel löschen" onclick="deleteRow('orders-table')" />
</div>
<div class="row buttons">
<?php echo CHtml::submitButton($model->isNewRecord ? 'Bestellung speichern' : 'Save'); ?>
</div>
The ajax function:
function getArticleData()
{
<?php echo CHtml::ajax(array(
'url'=>CController::createUrl('orders/getArticleData'),
'data'=>array('articleNumber'=>'js:$(\'#art_no\').val()',
'articleAmount'=>'js:$(\'#art_amount\').val()',
),
'type'=>'post',
'dataType'=>'json',
'success'=>"function(data)
{
// data will contain the json data passed by the hpicheck action in the controller
// Update the status
$('#articleStatus').html(data.status);
if (data.error=='false')
{
$('#art_name').val(data.art_name);
$('#art_price').val(data.art_price);
//$('#art_price_all').val(data.art_price_all);
}
} ",
))?>;
return false;
}
The javascript function:
function addRow(tableID) {
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
var cell1 = row.insertCell(0);
var element1 = document.createElement("input");
element1.type = "checkbox";
cell1.appendChild(element1);
var cell2 = row.insertCell(1);
cell2.innerHTML = rowCount + 1;
var cell3 = row.insertCell(2);
var element3 = document.createElement("input");
element3.type = "text";
element3.name = "art_no";
element3.value = "";
element3.size = "15";
element3.maxlength = "32";
cell3.appendChild(element3);
var cell4 = row.insertCell(3);
var element4 = document.createElement("input");
element4.type = "text";
element4.name = "art_amount";
element4.value = "";
element4.size = "5";
element4.maxlength = "5";
cell4.appendChild(element4);
var cell5 = row.insertCell(4);
var element5 = document.createElement("input");
element5.type = "text";
element5.readOnly = "true";
element5.name = "art_name";
element5.value = "";
element5.size = "40";
element5.maxlength = "255";
cell5.appendChild(element5);
var cell6 = row.insertCell(5);
var element6 = document.createElement("input");
element6.type = "text";
element6.readOnly = "true";
element6.name = "art_price";
element6.value = "";
element6.size = "8";
element6.maxlength = "10";
cell6.appendChild(element6);
var cell7 = row.insertCell(6);
var element7 = document.createElement("input");
element7.type = "button";
element7.onClick = "getArticleData()";
element7.name = "orderButton";
element7.value = "bestellen";
cell7.appendChild(element7);
}
function deleteRow(tableID) {
try {
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
for(var i=0; i<rowCount; i++) {
var row = table.rows[i];
var chkbox = row.cells[0].childNodes[0];
if(null != chkbox && true == chkbox.checked) {
table.deleteRow(i);
rowCount--;
i--;
}
}
}catch(e) {
alert(e);
}
}
</script>