Working Log: JQuery

Showing posts with label JQuery. Show all posts

Friday, February 20, 2015

jquery loading animation

you can add loading animation on even submit.
before add loading animation, you can make a loading animation here
download and then make id default value on ready function $('#wait').hide();
and then show loading animation like here,

$('#form').submit(function() {
$.ajax({
url: '/whatever.php',
beforeSend: function() { $('#wait').show(); },
complete: function() { $('#wait').hide(); }
});
return false;
});

Monday, January 6, 2014

How to get values of combobox using jquery.

HTML Script :

How to get Value of comboboxyear using Jquery

var year = $("#comboboxyear option:selected").val();

Tuesday, September 10, 2013

Upload File dengan JQuery

Script HTML :

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>HTML5 File API</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div id="main">
<form method="post" enctype="multipart/form-data" action="">
<input type="file" name="filename" id="filename" multiple />
<button type="submit" id="btn">Upload Files!</button>
</form>

<div id="response"></div>

</div>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script src="upload.js"></script>
</body>
</html>

Simpan Dengan nama index.php

Script PHP :

<?php

foreach ($_FILES["filename"]["error"] as $key => $error) {
if ($error == UPLOAD_ERR_OK) {
$name = $_FILES["filename"]["name"][$key];
move_uploaded_file( $_FILES["filename"]["tmp_name"][$key], "/var/www/DMSStore/" . $_FILES['filename']['name'][$key]);
}
}

echo "<h2>Successfully Uploaded Images</h2>";

Simpan Dengan nama upload.php

Script JQuery :

Simpan Dengan nama upload.js

Sunday, March 10, 2013

Upload file with Jquery

Script HTML :

Simpan Dengan nama index.php

Script PHP :

Simpan Dengan nama upload.php

Script JQuery :

Simpan Dengan nama upload.js

Wednesday, March 6, 2013

How to Read multiple Checkboc value using JQuery

html script :

Jquery script :

$(function(){
$('#save_value').click(function(){
var val = [];
$(':checkbox:checked').each(function(i){
val[i] = $(this).val();
});
});
});

Wednesday, February 27, 2013

Set value to hidden input JQuery

$(“input[id=PO_Code]“).val(id_flag)

Trik dan tips Penggunaan Jquery

1. meminimalisir data yg di loading di awal seperti load data combobox. dilakukan dengan cara, data di loading saat di klik saja

$(“#combobox”).click(function(){

loadData(“combobox”,parentid);

});
2. clear grid saat finder pop up di close. sebelumnya jika tidak di clear, maka saat buka pop up yg lain, grid yg sebelumnya muncul dulu sebentar.

$(“#subpo”).jqGrid(“GridUnload”);

$(“#dialog-popup” ).dialog( “close” );
3. Untuk Grid dengan data yg banyak, diharuskan loading data parsial. bisa dengan paging ataupun load data auto scroll.

rowNum:20,
scroll: true,
rowList:[10,20,30],
    pager: ‘#tfindsupcode’,
    sortname: ‘SPL_SupCode’,
        sortorder: “desc”,
        pgbuttons: false,
    pgtext: false,
        pginput:false,
        loadonce :true,
        viewrecords: true,
        rownumbers : true,
        ignoreCase: true,
        shrinkToFit :false,
4. Untuk form yg butuh banyak inisialisasi data diawal (khusus form dalam bentuk pop up) . inisiialisasi data bisa memakai settimeout

setTimeout(function(){
                       $.post(‘main.php?action=receipt_data&q=10&sub_poorg=’+subpoorg,
                        { q: ’10′ },
                            function(data){
                                    ReceivedQty= data[0].ReceivedQty;
                                    $(“input[id=ReceivedQty]“).val(ReceivedQty);
                            },’json’
                        );

});
5. Untuk data lookup yg datanya sedikit, diusahakan tidak perlu memakai grid. bisa pakai tabel biasa ataupun pakai comobox saja.
6. Untuk finder grid popup dengan event ondoubleclick dan banyak inisialisasi data yg lain selain data yg terdapat pada grid trsbt, bisa dilakukan parisal.yaitu inisialisasi data pada saat select row, dan parsing data saat doubleclick.

Tuesday, February 26, 2013

Add Footer Summary Data in JQgrid

step :

1. Add properties JQgrid -> footerrow ; true,

2 Add function Load Complete in JQgrid.

-sample script :

footerrow : true,

loadComplete: function() {
var SumQty = jQuery(“#posupreply”).jqGrid(‘getCol’, ‘PS_Qty’, false, ‘sum’);
jQuery(“#posupreply”).jqGrid(‘footerData’,'set’, {PS_SchedSeq : ‘Total:’ , PS_Qty : SumQty }); }

grid fit to div

code :

loadComplete: function(){//in subgrid
lebar1 = $(“#kiri_div”).width();
jQuery(“#series”).jqGrid().setGridWidth(lebar1);

}

Export Data to CSV in JQGRID

Code :

$(“#rdetail”).jqGrid(‘navGrid’, ‘#trdetail’,{view:true, del:false, add:false, edit:false, excel:true})
.navButtonAdd(‘#trdetail’,{
caption:”,
title:’export’,
buttonicon:’ui-icon-newwin’,
position:’last’,
onClickButton:function (){
exportExcel($(this),’main.php?action=receipt_excel’);
}
});

//Craate function exportExcel

function exportExcel($id,path){
var keys=[], ii=0, rows=”";
var ids=$id.getDataIDs(); // Get All IDs
var row=$id.getRowData(ids[0]); // Get First row to get the labels
for (var k in row) {
keys[ii++]=k; // capture col names
rows=rows+k+”\t”; // output each Column as tab delimited
}
rows=rows+”\n”; // Output header with end of line
for(i=0;i<ids.length;i++) {
row=$id.getRowData(ids[i]); // get each row
for(j=0;j<keys.length;j++) rows=rows+row[keys[j]]+”\t”; // output each Row as tab delimited
rows=rows+”\n”; // output each row with end of line
}

rows=rows+”\n”; // end of line at the end
var form = “<form name=’csvexportform’ action=’”+path+”‘ method=’post’>”;
form = form + “<input type=’hidden’ name=’csvBuffer’ value=’”+rows+”‘>”;
form = form + “</form><script>document.csvexportform.submit();</sc”+”ript>”;
OpenWindow=window.open(”, ”);
OpenWindow.document.write(form);
OpenWindow.document.close();
}

Wednesday, February 13, 2013

Read only pada form dengan JQuery

contoh :

<input type="text" id="SeriesNo" name="SeriesNo" >

maka untuk disable nya :

$("#SeriesNo").attr('readonly','readonly');

Monday, February 4, 2013

convert 1 to 0001 in JavaScript

convert 1 to 0001 in JavaScript

example :

var str = "" + 1
var pad = "0000"
pad.substring(0, pad.length - str.length) + str

Tuesday, January 22, 2013

Check checkbox checked using jQuery

if($('#half_day').attr('checked')) {
alert('check')
}
else{
alert('uncheck')
}

Convert javascript date to php date

convert javascript date to php date

function convert_date($date)
{
//original date format=yy-mm-dd
list($d, $m, $y) = split('[/.-]', $date);
$new_date=$y.'/'.$m.'/'.$d;
return $new_date;
}

//panggil funcinnya
$start_date='20/1/2013'
$start_date = convert_date($start_date);

hasilnya :
2013/1/20

Friday, December 14, 2012

Set value to hidden input Jquery

$(“input[id=POSD_PartCode]“).val(id_flag)

Clear grid when Close dialog

$(“#findsupcode”).jqGrid(“GridUnload”);

export data ke csv pada JQGrid

$(“#rdetail”).jqGrid(‘navGrid’, ‘#trdetail’,{view:true, del:false, add:false, edit:false, excel:true})
.navButtonAdd(‘#trdetail’,{
caption:”,
title:’export’,
buttonicon:’ui-icon-newwin’,
position:’last’,
onClickButton:function (){
exportExcel($(this),’main.php?action=receipt_excel’);
}
});

function exportExcel($id,path){
var keys=[], ii=0, rows=”";
var ids=$id.getDataIDs(); // Get All IDs
var row=$id.getRowData(ids[0]); // Get First row to get the labels
for (var k in row) {
keys[ii++]=k; // capture col names
rows=rows+k+”\t”; // output each Column as tab delimited
}
rows=rows+”\n”; // Output header with end of line
for(i=0;i<ids.length;i++) {
row=$id.getRowData(ids[i]); // get each row
for(j=0;j<keys.length;j++) rows=rows+row[keys[j]]+”\t”; // output each Row as tab delimited
rows=rows+”\n”; // output each row with end of line
}
rows=rows+”\n”; // end of line at the end
var form = “<form name=’csvexportform’ action=’”+path+”‘ method=’post’>”;
form = form + “<input type=’hidden’ name=’csvBuffer’ value=’”+rows+”‘>”;
form = form + “</form><script>document.csvexportform.submit();</sc”+”ript>”;
OpenWindow=window.open(”, ”);
OpenWindow.document.write(form);
OpenWindow.document.close();
}

Selamat Mencoba.

Function Export to CSV in JQGRID

$(“#rdetail”).jqGrid(‘navGrid’, ‘#trdetail’,{view:true, del:false, add:false, edit:false, excel:true})
.navButtonAdd(‘#trdetail’,{
caption:”,
title:’export’,
buttonicon:’ui-icon-newwin’,
position:’last’,
onClickButton:function (){
exportExcel($(this),’main.php?action=receipt_excel’);
}
});

function exportExcel($id,path){
var keys=[], ii=0, rows=”";
var ids=$id.getDataIDs(); // Get All IDs
var row=$id.getRowData(ids[0]); // Get First row to get the labels
for (var k in row) {
keys[ii++]=k; // capture col names
rows=rows+k+”\t”; // output each Column as tab delimited
}
rows=rows+”\n”; // Output header with end of line
for(i=0;i<ids.length;i++) {
row=$id.getRowData(ids[i]); // get each row
for(j=0;j<keys.length;j++) rows=rows+row[keys[j]]+”\t”; // output each Row as tab delimited
rows=rows+”\n”; // output each row with end of line
}
rows=rows+”\n”; // end of line at the end
var form = “<form name=’csvexportform’ action=’”+path+”‘ method=’post’>”;
form = form + “<input type=’hidden’ name=’csvBuffer’ value=’”+rows+”‘>”;
form = form + “</form><script>document.csvexportform.submit();</sc”+”ript>”;
OpenWindow=window.open(”, ”);
OpenWindow.document.write(form);
OpenWindow.document.close();
}

Wednesday, October 10, 2012

clear form pada JQuery

Pertama kita membuat class untuk clear form :

kemudian cara memanggilnya bisa dengan buttton:

atau dipanggil dari even lain ketika click atau yang lainya :

clear_form_elements('#id_form');

Wednesday, June 27, 2012

cara membuat link pada grid Jquery

Cara menambahkan link pada JQGrid dengan menambahkan Script ini pada cell yang dituju untuk dibuat link nya.
contoh :
{name:'id',index:'id', width:55},

disisipkan pada tanda sebelum kurawal tutup " }" jangan lupa menambahkan tanda koma sebelumnya " , "

Working Log

Pages