Topic: ajax wih CI

Hi all,i'm trying to create 3 textfield with CI by using form_input. One is for enter price,one is for enter the desire discount value,the last one is for the discounted price which is calculated from price and discount value..How do i achieve it with CI?Thanks a lot..

Re: ajax wih CI

Handoyo:

You'd need to use JavaScript of course to accomplish that. It seems like a pretty simple example that doesn't really require AJAX per say. You could get the price and discount fields by their ID's and then have a function that does the calculation based on their values whenever some other event happens (like onChange or onClick, etc.). I'll try and do an example to show you.

Exercise your faith!

Re: ajax wih CI

Thanks Yannick..I'm looking forward for the example..God bless you..

Re: ajax wih CI

I used the jQuery JavaScript library but essentially this is a basic example which you can build upon:

<?php

class Calculate extends Controller {

	function Calculate()
	{
		parent::Controller();	
	}
	
	function index()
	{
	    // Form Field attributes
	    $data['price'] = array(
              'name'        => 'price',
              'id'          => 'price',
        );
            
        $data['discount'] = array(
              'name'        => 'discount',
              'id'          => 'discount',
        );
            
        $data['discounted_price'] = array(
              'name'        => 'discounted_price',
              'id'          => 'discounted_price',
        );

        $data['submit'] = array(
              'name'        => 'calculate',
              'id'          => 'calculate',
              'value'       => 'Calculate',
        );
        
        // Load Stylesheet    
        $data['link'] = array(
          'href' => 'css/main.css',
          'rel' => 'stylesheet',
          'type' => 'text/css',
          'media' => 'screen, projection'
        );
            
		$this->load->view('calculate/index', $data);
	}
}

/* End of file calculate.php */
/* Location: ./system/application/controllers/calculate.php */

Then here is the view that contains the HTML Form along with the JavaScript to do the calculations:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title>Handoyo: AJAX with CI</title>
<?php echo link_tag($link); ?>
<script type="text/javascript" src="<?php echo base_url(); ?>js/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
   
   $("#calculate").click(function(){
       var price = parseInt($("#price").val());
       var discount = parseInt($("#discount").val());

       var discounted_price = price * (discount/100);
       
       //alert(price + " + " + discount + " = " + discounted_price);
       $("#discounted_price").val(discounted_price);
       return false;
   });
});
</script>
</head>

<body>
<?php echo form_open('calculate/index'); ?>
<p><label for="price">Price: </label><?php echo form_input($price); ?></p>
<p><label for="discount">Discount %: </label><?php echo form_input($discount); ?></p>
<p><label for="discounted_price">Discounted Value: </label><?php echo form_input($discounted_price); ?></p>
<p><?php echo form_submit($submit); ?></p>
<?php echo form_close(); ?>
</body>
</html>

I grab the values from the Price and Discount fields and then calculate the discounted value and place it in the Discounted Price field.

Hope that helps to g

Exercise your faith!

Re: ajax wih CI

Thanks Yannick,by the way.Is it possible to achieve it with using .change instead of click?So when i enter the value discount,the value of discounted_price automatically change too..Thanks a lot..

Re: ajax wih CI

Handoyo:

Yeah you should be able to use the change event. You can try this:

Change the following line:

$("#calculate").click(function(){

to

$("#discount, #price").change(function(){

You will probably want to check that both the discount and price fields have a value entered and if not either prompt the user to enter one or simply use 0 in the calculation if no value is entered.

The example I have given may not be the best solution, but hopefully you can make it better or someone else can suggest how to improve it.

Hope that helps.

Exercise your faith!

Re: ajax wih CI

Thanks Yannick,i'' try it out.. ^_^

Re: ajax wih CI

Hi Yannick,i can't get it work..I put the codes here http://pastebin.com/d1037a9b1 as i can't post codes here...Thanks Yannick

Last edited by Handoyo (2009-10-07 18:40:51)

Re: ajax wih CI

Handoyo:

What happens when you try it? Do you get any JavaScript errors? If so, what do the errors say? Also did you download the jQuery JavaScript library?

Exercise your faith!

Re: ajax wih CI

When i use your example,there are no errors.I try to modifiy it to my codes..It doesn't do anything.I have downloaded jQuery library..

Re: ajax wih CI

Sorry for taking so long to reply. Are you still having problems? If so, could you post the code again to pastebin. It seems it has expired so I can't view it to check.

Exercise your faith!

Re: ajax wih CI

Yes i still having problems..This is the code Yannick http://pastebin.com/f5c7b57ee Thanks a lot.God Bless You..

Re: ajax wih CI

Hi Yannick,i got it working already..My mistakes was when defining the form_input..Thanks a lot Yannick.. God bless you..

Re: ajax wih CI

Handoyo:

In your JavaScript code ensure that in front of 'harga', 'diskon' and 'harga_diskon' you place the '#'. That tells it to search the DOM for the items by their ID attribute. So it should look like this instead, '#harga', '#diskon' and '#harga_diskon'. E.g.

var price = parseInt($("#harga").val());
Exercise your faith!

Re: ajax wih CI

Ok Yannick.Thanks a lot..My mistakes was i should use

$data= array('name'=>'harga_diskon','id'=>'harga_diskon');
echo form_input($data);

,instead of it i use

echo form_input($harga_user);

That makes the code not working the way it should be..Hehhehe...

Last edited by Handoyo (2009-10-15 20:09:21)

Re: ajax wih CI

oh okay I'm happy you got it working. Sorry I took so long to reply, I was having a little issue posting to the forum.

Exercise your faith!

Re: ajax wih CI

Thats ok Yannick...Thanks..By the way,right now i'm figuring out how to create an custom invoice number?I've tried using zerofill in mysql,it works alright,but right now i'm trying to add date in front of it.Do you have a suggestion what should i do Yannick?Thanks a lot..Jesus bless you..By the way do you have a facebook account?  ^_^

Re: ajax wih CI

Handoyo:

You could just write your own little function to generate the invoice number. So it could look something like this:

function _generate_invoice_number() {
    $date = date('YmdHis'); //eg. this would look like 20091018124932 - 4 digit year, 2 digit month, 2 digit day, hour, minute, seconds

    $your_original_invoice_number = $some number; //whatever you were previously using as your invoice number

    $invoice_number = $date . $your_original_invoice_number;
    
    return $invoiceNumber;
}

I believe you can place that code in a CI Controller and then call that function wherever you want to generate the invoice number in the various actions in that controller.

Exercise your faith!

Re: ajax wih CI

Thanks a lot Yannick..I'll try it out..