Friday, January 31, 2014

Correctly using an ajax call?

Hello-

I've done some searching, but I can't seem to find something that exactly addresses what I'm trying to do.  When viewing an invoice, I have a list of invoice_items that go along with that invoice (charges, payments, discounts, etc).  I would like to be able to add another invoice_item to an invoice without having to go to a separate page.  After adding the new invoice_item, I would like the page to display the new invoice_item the same way that it display the existing ones.  Here is the order of events that I am trying to make happen:

  1. List any invoice_items associated with an invoice.  This is done in Invoices/view.ctp.
  2. Include a button/link in Invoices/view.ctp that calls the form used to add a new invoice_item.  This is currently done using an Ajax call (see code below) to invoices/addInvoiceItem.  The data returned from the Ajax call is taken from Invoices/add_invoice_item.ctp.  
  3. Add the form data as row to my current table that displays any existing invoice_items.
  4. When the user clicks "submit", I want to add the new invoice_item to the database (assuming all the validation goes through) and then return a string of html that displays the information for the new invoice_item. (i.d. "<td>blah</td><td>more blah</td>").
  5. Ideally, I would like to do all this without calling a completely page refresh.

Here is the relevant code that I have so far:
Invoices/view.ctp

<script type="text/javascript">
$(document).ready(function(){
$("#addInvoiceItemLink").click(function(){
$.ajax({
url: '<?php echo Router::url(array('controller'=>'Invoices','action'=>'addInvoiceItem', $invoice['Invoice']['id']));?>',
type: 'POST',
dataType: 'HTML',
success: function (data) {
$("#invoiceDetails").append(data);
}
});
});
});
</script>

[...]

<table id="invoiceDetails'>
   <?php foreach ($invoice['InvoiceItem'] as $invoiceItem):?>
<tr>
    <td><?php echo $invoiceItem['amount']; ?></td>
    <td><?php echo $invoiceItem['quantity']; ?></td>
    <td><?php echo $invoiceItem['notes']; ?></td>
    <td><?php echo $invoiceItem['InvoiceItemType']['name']; ?></td>
    <td><?php echo $this->Number->precision($invoiceItem['amount'] * $invoiceItem['quantity'], 2)?></td>
        </tr>
</table>

InvoicesController
public function addInvoiceItem($invoiceId){
if (!$this->Invoice->exists($invoiceId)) {
throw new NotFoundException(__('Invalid invoice'));
}
if ($this->request->is('post') && (!empty($this->request->data))){
$this->request->data['InvoiceItem']['invoice_id'] = $invoiceId;
$this->request->data['InvoiceItem']['currency_id'] = 1;
$this->Invoice->InvoiceItem->create();
if ($this->Invoice->InvoiceItem->save($this->request->data['InvoiceItem']))
$this->Session->setFlash("Invoice item saved");;
$invoiceItem = $this->Invoice->InvoiceItem->findById($invoiceId);
$html = $this->Invoice->InvoiceItem->getTableRowView();
$this->autoRender = false;
return $html;
}
$currencies = $this->Invoice->InvoiceItem->Currency->find('list');
$invoiceItemTypes = $this->Invoice->InvoiceItem->InvoiceItemType->find('list');
$this->set(compact('currencies', 'invoiceItemTypes'));
$this->set('invoiceId', $invoiceId);
}

Invoice model
public function getTableRowView(){

$html = "<td>$this->amount</td>";
$html .="<td>$this->quantity</td>";
return $html;
}

This does most of what I want, but I can't get getTableRowView() to access the data from the invoice model.  I continually get empty html like this: "<td></td><td></td>".  So, I have two questions:

1) How do I create an invoice_item object in my controller so that I can access the data in that object when calling a model function on that object?
2) I'm aware that this is my first stab at using Ajax calls in my application and it isn't perfect.  Is there any better way to do what I'm trying to do here?  

Thanks in advance for any help and let me know if there is a better way to post/phrase my questions in the future!

--
Like Us on FaceBook https://www.facebook.com/CakePHP
Find us on Twitter http://twitter.com/CakePHP
 
---
You received this message because you are subscribed to the Google Groups "CakePHP" group.
To unsubscribe from this group and stop receiving emails from it, send an email to cake-php+unsubscribe@googlegroups.com.
To post to this group, send email to cake-php@googlegroups.com.
Visit this group at http://groups.google.com/group/cake-php.
For more options, visit https://groups.google.com/groups/opt_out.

No comments: