[Javascript][Jquery] Basic Jquery

Deskripsi
      Basic Instalasi Jquery dan penggunaannya.

HowTo
1.Panggil file Jquery, minimal seperti list dibawah ini, penulisan berada didalam tag <head></head>
   * CSS File Jquery
      - jquery-ui-1.9.0.custom.css
      - jquery-ui-1.9.0.custom.min.css

   * Script File Jquery

      - jquery-ui-1.9.0.custom.js
      - jquery-ui-1.9.0.custom.min.js

2.Untuk menggunakan Jquery harus menuliskan script dasar seperti dibawah ini
<script>
     $("document").ready(function(){
                // your jquery script here
     })
</script>

3. Selanjutnya tinggal menggunakan fungsi-fungsi yang disediakan Jquery.


My Note Work :

* Ajax Change Page
   $.ajax({
               url: "myfileajax.html",
               beforeSend: function()
               {
                    $('#loadingajax').show();
               },
               success: function(html)
               {
                    $('#container').html(html); // div id container will change content
                    alert("Success");
               }  
            });
* in cakephp you can use url like this :
"<?php echo $this->Html->url(array('controller'=>'ctrl','action'=>'act')) ?>"
if you have var JS you can write url like this :
"<?php echo $this->Html->url(array('controller'=>'ctrl','action'=>'act')) ?>" + '/' + param1 + '/' + 'param2'


* Ajax Submit Form

    $('#myform').submit(function(e){
            if(confirm('Add ?'))
            {
            e.preventDefault(); // stop process change page
            $.ajax({
               'type': 'POST',
               'url': $(this).attr('action'),
               'data': $(this).serialize(),
               beforeSend: function()
               {
                $('#loadingajax').show();
               },
               'success': function(html)
               {
                    alert("Success");
               }
               });
            }
            else
            {
            e.preventDefault();
            }
    });


*Datepicker
  $('#mytextfield').datepicker({dateFormat: 'dd-mm-yy'});

Post a Comment

Harap gunakan bahasa yang baik dan sopan, terima kasih