Simple Upload Image jQuery

HTML

<form>
 <label>Image</label>
 <input type="file" name="images" id="images"  />
<button id="save">
</form>

JS

$(function(){
var   input = document.getElementById("images"),
        formdata = false;
        formdata = new FormData();

  $("#save").click(function() {
         
       var i = 0, len = input.files.length, img, reader, file;
   
        for ( ; i < len; i++ ) {
            file = input.files[i];
   
            if (!!file.type.match(/image.*/)) {
                if ( window.FileReader ) {
                    reader = new FileReader();
                    reader.readAsDataURL(file);
                }
                if (formdata) {
                    formdata.append("images[]", file);
                }
            }   
        }
   
        if (formdata) {
            $.ajax({
                url: "<?php echo base_url('main/save')?>",
                type: "POST",
                data: formdata,
                processData: false,
                contentType: false,
            });
        }

  });
});


PHP

function save() {  
   foreach ($_FILES["images"]["error"] as $key => $error) {
    if ($error == UPLOAD_ERR_OK) {
        $name                = $_FILES["images"]["name"][$key];
        $nama_file           = $_FILES['images']['name'][$key]; 
        $namafolder          = 'uploads/';
        move_uploaded_file( $_FILES["images"]["tmp_name"][$key],$namafolder.'/'.$nama_file);
      }
    }
       
  }

Monthpicker dengan jQuery

Download monthpicker Disini
Download jQuery UI Disini

Pengunaan :

CSS dan JS


 <link rel="stylesheet" href="js/jquery-ui.css" />
<script src="js/jquery-1.9.1.js"></script>
<script src="js/jquery-ui.js"></script>
<script src="js/jquery.mtz.monthpicker.js"></script>
<script>

$(function(){

 options = {
    pattern:'/01'+'yyyy/mm',   
    startYear: 2012, 
    monthNames: ['Januari', 'Februari', 'Maret', 'Aprl', 'Mei', 'Juni', 'Juli', 'Agustus', 'September', 'Oktober', 'November', 'Desember']
};

   $('#bulan').monthpicker(options);


});
</script>

HTML

Pilih Bulan : <input data-start-year="2012" id="bulan" name="bulan" type="text" />





Demo : http://jsfiddle.net/abbyacakadud/TfSzM/1/
Detail : http://lucianocosta.info/jquery.mtz.monthpicker/

Keranjang Belanja Sederhana jQuery

HTML


<h3>Pilih Barang </h3>
<table border="1">
    <tr>
        <th>No.</th>
        <th>Nama Barang</th>
        <th>Harga</th>
        <th>Beli</th>
    </tr>
<tr>
    <td>1.</td>
    <td>Monitor</td>
    <td>Rp.500.000</td>
    <td><button id="beli" nama="Monitor" harga="500000">Beli</button></td>
</tr>
    <tr>
    <td>2.</td>
    <td>Printer</td>
    <td>Rp.800.000</td>
    <td><button id="beli" nama="Printer" harga="800000">Beli</button></td>
</tr>
    <tr>
        <td>3.</td>
        <td>Sandal</td>
        <td>Rp.10.000</td>
        <td><button id="beli" nama="Sandal" harga="100000">Beli</button></td>
    </tr>
</table>

<h3>Keranjang Belanja</h3>
    <div class="keranjang">
</div>

JS.

var i=0;

$("#beli").live("click", function(){

    var nama=$(this).attr('nama');

    var harga=$(this).attr('harga');

    var total=harga+harga;

    i++;

   $('.keranjang').append('<p>'+i+' | ' +nama+ ' | ' +harga +'<button class="rm">Batal</button></p>');

    

   return false;

});

$(".rm").live("click", function(){

    $(this).parents('p').remove();i--;

});

Demo : http://jsfiddle.net/abbyacakadud/bEvqJ/10//

Mengatasi Event Close Tidak Berfungsi di Dialog jQuery

$( "#konfirmasi" ).dialog({ autoOpen: false, resizable: false, height:180, modal: true, hide: 'Slide', buttons: { "Hapus": function() {    var del_id = {id : $("#del_id").val()};  $.ajax({ type: "POST", url : "/abby/index.php/home/delete", data: del_id, context: $(this), success: function(msg){   $(this).dialog('close');  $('#show').html(msg);  }   }); }, Batal: function() {   $( this ).dialog( "close" ); }  }, close: function() {   }  });

solusinya :

Ganti $(this).dialog('close');  menjadi $(this).dialog('close').remove();