Twitter bootstrap loading button

Guys,

Have problem with loading button in twitter bootstrap??

Is the below image is not working for you? then you are in right post ๐Ÿ˜‰

18-02-2014 17-49-48

 

The basic problem is..we need to declare that button in script. Thats it. Anyways follow the steps to implement properly..

1. Add thisย <script src=”js/button.js”/></script> in head tag

2.Copyย <button type=”submit” id=”formsubmit” data-loading-text=”Searching…”>Submit</button> ย in body tag

3. Add this script

<script>
$(‘#formsubmit’).button();

$(‘#formsubmit’).click(function() {
$(this).button(‘loading’);
});

</script>

4. Now run ๐Ÿ˜€

 

Advertisements

Create Change Password functionality in codeigniter along with css framework

hey guys, lets see the change password functionality in codeigniter using css framework called twitter bootstrap ๐Ÿ™‚

Steps:

1. Create a view in codeigniter for a form displaying old password,new & confirm password labels…

<?php

echo form_open(‘main/changepwd’);
echo validation_errors();

?>
<table class=”table table-bordered”>

<tbody>

<tr>
<td><small><?php echo “Old Password:”;?></small></td>
<td><?php echo form_password(‘opassword’);?></td>

</tr>
<tr>
<td><small><?php echo “New Password:”;?></small></td>
<td><?php echo form_password(‘npassword’);?></td>

</tr>
<tr>
<td><small><?php echo “Confirm Password:”;?></small></td>
<td><?php echo form_password(‘cpassword’);?></td>

</tr>
</tbody>
</table>
&nbsp;&nbsp;<div id=”some”style=”position:relative;”><button type=”submit” class=”btn btn-primary”><i class=” icon-ok-sign icon-white”></i>&nbsp;Submit</button>

<?php

echo form_close();

?>

2. Add this code in Controller page..

public function changepwd(){
$this->load->library(‘form_validation’);
$this->form_validation->set_rules(‘opassword’,’Old Password’,’required|trim|xss_clean|callback_change’);
$this->form_validation->set_rules(‘npassword’,’New Password’,’required|trim’);
$this->form_validation->set_rules(‘cpassword’,’Confirm Password’,’required|trim|matches[npassword]’);

if($this->form_validation->run()!= true)
{
$this->load->view(‘settings’);

}
}
public function change() // we will load models here to check with database
{
$sql = $this->db->select(“*”)->from(“users”)->where(“email”,$this->session->userdata(’email’))->get();

foreach ($sql->result() as $my_info) {

$db_password = $my_info->password;
$db_id = $my_info->id;

}

if(md5($this->input->post(“opassword”)) == $db_password){

$fixed_pw = mysql_real_escape_string(md5($this->input->post(“npassword”)));
$update = $this->db->query(“Update `users` SET `password`=’$fixed_pw’ WHERE `id`=’$db_id'”)or die(mysql_error());
$this->form_validation->set_message(‘change’,'<div class=”alert alert-success”><a href=”#” class=”close” data-dismiss=”alert”>&times;</a>
<strong>Password Updated!</strong></div>’);
return false;

}else
$this->form_validation->set_message(‘change’,'<div class=”alert alert-error”><a href=”#” class=”close” data-dismiss=”alert”>&times;</a>
<strong>Wrong Old Password!</strong> </div>’);

return false;

}

In 2 steps you easily did change password functionality in code igniter na.. ๐Ÿ˜‰ good luck ๐Ÿ™‚

How to use date picker in code igniter using twitter bootstrap??

1.Download necessary files from here

2.Copy all the required files to css,less and js of your codeigniter folder..

3. Add the following lines to your php file..

<link rel=”stylesheet” type=”text/css” href=”<?php echo base_url().’css/datepicker.css’?>”/>
<link rel=”stylesheet/less” type=”text/css” href=”<?php echo base_url().’less/datepicker.less’?>” />

<script src=”<?php echo base_url().’js/bootstrap-datepicker.js’?>”></script>

4. Add this code in php file..

<div class=”input-append date” id=”datepicker” data-date=”” data-date-format=”dd-mm-yyyy” >
<input class=”span2″ size=”16″ type=”text” value=”” disabled>
<span class=”add-on”><i class=”icon-th”></i></span>
</div>

<script>
$(‘#datepicker’).datepicker();
</script>

Now execute your php file and verify the date picker is working or not?? simple.. ๐Ÿ˜‰

Try this too or use HTML5 date