上善 edwardNotes 若水: jquery

顯示具有 jquery 標籤的文章。顯示所有文章

2014年12月2日星期二

jquery-not

$('button:not(#vView)').each(function() {this.disabled='disabled';})

2014年11月1日星期六

http://jqueryui.com/dialog/#modal-form

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Dialog - Modal form</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<style>
body { font-size: 62.5%; }
label, input { display:block; }
input.text { margin-bottom:12px; width:95%; padding: .4em; }
fieldset { padding:0; border:0; margin-top:25px; }
h1 { font-size: 1.2em; margin: .6em 0; }
div#users-contain { width: 350px; margin: 20px 0; }
div#users-contain table { margin: 1em 0; border-collapse: collapse; width: 100%; }
div#users-contain table td, div#users-contain table th { border: 1px solid #eee; padding: .6em 10px; text-align: left; }
.ui-dialog .ui-state-error { padding: .3em; }
.validateTips { border: 1px solid transparent; padding: 0.3em; }
</style>
<script>
$(function() {
var dialog, form,

// From http://www.whatwg.org/specs/web-apps/current-work/multipage/states-of-the-type-attribute.html#e-mail-state-%28type=email%29
emailRegex = /^[a-zA-Z0-9.!#$%&'*+\/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/,
name = $( "#name" ),
email = $( "#email" ),
password = $( "#password" ),
allFields = $( [] ).add( name ).add( email ).add( password ),
tips = $( ".validateTips" );

function updateTips( t ) {
tips
.text( t )
.addClass( "ui-state-highlight" );
setTimeout(function() {
tips.removeClass( "ui-state-highlight", 1500 );
}, 500 );
}

function checkLength( o, n, min, max ) {
if ( o.val().length > max || o.val().length < min ) {
o.addClass( "ui-state-error" );
updateTips( "Length of " + n + " must be between " +
min + " and " + max + "." );
return false;
} else {
return true;
}
}

function checkRegexp( o, regexp, n ) {
if ( !( regexp.test( o.val() ) ) ) {
o.addClass( "ui-state-error" );
updateTips( n );
return false;
} else {
return true;
}
}

function addUser() {
var valid = true;
allFields.removeClass( "ui-state-error" );

valid = valid && checkLength( name, "username", 3, 16 );
valid = valid && checkLength( email, "email", 6, 80 );
valid = valid && checkLength( password, "password", 5, 16 );

valid = valid && checkRegexp( name, /^[a-z]([0-9a-z_\s])+$/i, "Username may consist of a-z, 0-9, underscores, spaces and must begin with a letter." );
valid = valid && checkRegexp( email, emailRegex, "eg. ui@jquery.com" );
valid = valid && checkRegexp( password, /^([0-9a-zA-Z])+$/, "Password field only allow : a-z 0-9" );

if ( valid ) {
$( "#users tbody" ).append( "<tr>" +
"<td>" + name.val() + "</td>" +
"<td>" + email.val() + "</td>" +
"<td>" + password.val() + "</td>" +
"</tr>" );
dialog.dialog( "close" );
}
return valid;
}

dialog = $( "#dialog-form" ).dialog({
autoOpen: false,
height: 300,
width: 350,
modal: true,
buttons: {
"Create an account": addUser,
Cancel: function() {
dialog.dialog( "close" );
}
},
close: function() {
form[ 0 ].reset();
allFields.removeClass( "ui-state-error" );
}
});

form = dialog.find( "form" ).on( "submit", function( event ) {
event.preventDefault();
addUser();
});

$( "#create-user" ).button().on( "click", function() {
dialog.dialog( "open" );
});
});
</script>
</head>
<body>

<div id="dialog-form" title="Create new user">
<p class="validateTips">All form fields are required.</p>

<form>
<fieldset>
<label for="name">Name</label>
<input type="text" name="name" id="name" value="Jane Smith" class="text ui-widget-content ui-corner-all">
<label for="email">Email</label>
<input type="text" name="email" id="email" value="jane@smith.com" class="text ui-widget-content ui-corner-all">
<label for="password">Password</label>
<input type="password" name="password" id="password" value="xxxxxxx" class="text ui-widget-content ui-corner-all">


<input type="submit" tabindex="-1" style="position:absolute; top:-1000px">
</fieldset>
</form>
</div>

<div id="users-contain" class="ui-widget">
<h1>Existing Users:</h1>
<table id="users" class="ui-widget ui-widget-content">
<thead>
<tr class="ui-widget-header ">
<th>Name</th>
<th>Email</th>
<th>Password</th>
</tr>
</thead>
<tbody>
<tr>
<td>John Doe</td>
<td>john.doe@example.com</td>
<td>johndoe1</td>
</tr>
</tbody>
</table>
</div>
<button id="create-user">Create new user</button>

</body>
</html>

2014年10月24日星期五

html-width jquery control width

$('tr:first td > input').each(function(){
    $(this).width($(this).parent().width());
});

2014年6月15日星期日

jquery-date-datepicker

picker date date pick tick date date tick
double click
http://forum.jquery.com/topic/datepicker-showon-double-click

http://api.jqueryui.com/datepicker/#option-dateFormat
datepicker api

javascript-date html-date

<input type=text class='datepicker'> </input>
$( ".datepicker" ).datepicker();
$( ".datepicker" ).datepicker( "option", "dateFormat", 'yy-mm-dd' ); //2016-06-16

2014年5月21日星期三

jquery-getjson example

function _ip(){
var r="";
$.getJSON( "http://smart-ip.net/geoip-json?callback=?",
function(data){r=data.host;})
return r;
}

2014年4月25日星期五

javascript-array jquery-each jquery-table

javascript-array
jquery-each-this
jquery-table-control

var textAligns = new Array();
var widths = new Array();
r=0
$('#maintable > tbody > tr:first-child >td').each(function() {
textAligns[r]=$(this).css('textAlign');
widths[r++]=$(this).width();
});
r=0
$('#maintable > thead > tr:first-child >th').each(function() {
$(this).css(textAligns[r]);
$(this).width(widths[r++]);
});

2014年3月16日星期日

jquery-menu-click

click to change colour

$('a[class="oe_menu_leaf"]').click(function(){
$(".oe_menu_leaf").css('color','');
$(".oe_menu_leaf").css('background-color','');
$(this).css('color','black');
$(this).css('background-color','#00FFFF');
});

2014年1月3日星期五

jquery=getjson

http://stackoverflow.com/questions/6643838/jquery-ajax-parsererror

it's because you're telling jQuery that you're expecting JSON-P, not JSON, back. But the return is JSON. JSON-P is horribly mis-named, named in a way that causes no end of confusion. It's a convention for conveying data to a function via a script tag. In contrast, JSON is a data format.

Example of JSON:

{"foo": "bar"}

Example of JSON-P:

yourCallback({"foo": "bar"});

server side

String callback = request.getParameter("callback");
String _r = callback ;
out.print(_r);
out.print("({\"foo\": \"bar\"});");

Client Side

s4=_lookup("lingual");
s3=<%=bean.getRecordid().trim()%>;
s= "tableWrite?"+
"db=erp&"+
"table=USER&"+
"fields=lingual&"+
"values='"+s4+"'"+
"&key=recordID&value="+s3+
"&callback=?";
url=s;

$.ajax({
url: url,
async:false,
dataType: 'json',
// jsonpCallback: 'alert("fnsuccesscallback");',
success: function(result){
alert(1);
alert("token recieved: " + result.token);
},
error: function(request, textStatus, errorThrown) {
alert(2);
alert(textStatus);
},
complete: function(request, textStatus) { //for additional info
alert(3);
alert(request.responseText);
alert(textStatus);
//window.open("http://www.google.com.hk","_blank")
//window.open("index.jsp","_blank")
//location.reload();
//window.open("index.jsp","_self")
//window.location.replace("http://stackoverflow.com");
}
});

//document.write(s);

$.getJSON(s,
function(data) {
if (data[0]){
alert(11);

} else {
alert(22);
$.getJSON(s,
function(data) {
if (data[0]){
alert(11);

} else {
alert(23);
}
}
); //endofgetJson
}
}
); //endofgetJson

2013年12月16日星期一

jquery-tutorial

http://www.w3school.com.cn/jquery/jquery_css_classes.asp

2013年12月15日星期日

jquery-getJson, when 2 getJson at the same time $.ajaxSetup({ async: false });

$.ajaxSetup({
async: false
});

var obj_field=document.getElementById('CUSTOMER.PAYMENT_TERMS_CODE');
obj_field.options[0] = new Option('','');
s='tableRead?table=PAYMENT_TERMS&fields=CODE,DESCRIPTION&where=where status:`A` or status:`D` &format=S,S&callback=?&db=BR201312111529'
$.getJSON(s,
function(data) {
if (data[0]){
for (r=0 ; r<data.length; r++)
{
$(obj_field).append($('<option></option>').val(data[r][0]).html(data[r][1]));
}
}
}
)

var obj_field=document.getElementById('CUSTOMER.PAYMENT_METHOD_CODE');
obj_field.options[0] = new Option('','');
s='tableRead?table=PAYMENT_METHOD&fields=CODE,DESCRIPTION&where=where status:`A` or status:`D` &format=S,S&callback=?&db=BR201312111529'
$.getJSON(s,
function(data) {
if (data[0]){
for (r=0 ; r<data.length; r++)
{
//combo.jsoncall20131213
//obj_field.options[r+1] = new Option(data[r][0],data[r][1]);
$(obj_field).append($('<option></option>').val(data[r][0]).html(data[r][1]));
}
}
}
)

2013年12月11日星期三

jquery-json example check userid user id had create or not

s="tableRead? db=erp&table=USER&fields=login_id&key=login_id&value='"+s1+"'&format=S&callback=?";

s="tableRead?"+
"db=erp&table=USER&"+
"fields=login_id&"+
"key=login_id&"+
"value='"+s4+"'&"+
"where= where login_id:`"+s4+"` and db: `"+s5+"` &" +
"format=S&callback=?";

$.getJSON(s,
function(data) {
if (data[0]){
$("#dialog").dialog( "open" );
$("#dialog").dialog('option', 'title', 'User Add Message');
$("#dialog p").html("This user account had created !!");
return false;
}
}
)

2013年12月4日星期三

jquery-option select ADD and REMOVE

javascript-combo
javascript-select-option

$( "#password" ).blur(function() {
s0=_lookup('username');
s1=_lookup('password');
s='tableRead?db=hr&table=USER&fields=COMPANY_NAME&where=where '+
'login_id:`'+s0+'` and password:sha(`'+s1+'`) &format=S&callback=?';
$.getJSON(s,
function(data) {
if (data[0]){
$("#companyname").removeAttr("disabled");
$('#companyname').find('option').remove().end() //combo clear combo-clear
for (r=0; r<data.length; r++){
var o = new Option(data[r][0],data[r][0] );
$(o).html(data[r][0]);
$("#companyname").append(o);
}
} else {
$('#companyname').find('option').remove().end().append('<option value=""></option>').val('');
$("#companyname").attr( "disabled", "disabled" );
}
}
);
});

jquery-disable jquery-enable password verify

$("#pgdnButton,#pgupButton").removeAttr('disabled');
if(reccount*1<=limit*1) $("#pgdnButton,#pgupButton").each(function() {this.disabled='disabled';});

/*****************************************************************/

javascript-enable
jquery disable
jquery enable

$( "#password" ).blur(function() {
s0=_lookup('username');
s1=_lookup('password');
s='tableRead?db=hr&table=USER&fields=COMPANY_NAME&where=where '+
'login_id:`'+s0+'` and password:sha(`'+s1+'`) &format=S&callback=?';
$.getJSON(s,
function(data) {
if (data[0]){
$("#companyname").removeAttr("disabled");
} else {
$("#companyname").attr( "disabled", "disabled" );
}
}
);
});

2013年10月16日星期三

html-exit-templage,javascript-jconfirm

2013年10月4日星期五

jquery-checked

*****************************************

$('.SALES_ORDER_PO_DESC_CONFIRM').prop('checked', true);

******************************************

$('.SALES_ORDER_INV_DESC_CONFIRM' ).each(function( index ) {this.checked =(!this.checked)})

***************************************

s=""
dl=""
if ($('#ID').is(":checked")) {
s=s+dl+"ID"
dl=","
}

$("input[type='checkbox']").val();
Or if you have set a class or id for it, you can:

$('#check_id').val();
$('.check_class').val();
Also you can check whether it is checked or not like:

if ($('#check_id').is(":checked"))
{
// it is checked
}

$('#some_id').attr('checked') ? 1 : 0;

2013年9月27日星期五

jquery-event jquery-mouseup jquery-mouse-up

$(function(){
$('#elementId').mouseup(function(e){
var isCtrlPressed = e.ctrlKey;
// true or false whether ctrl is pressed or not
});
});

2013年9月22日星期日

jquery-click 20141106

jquery-onclick

$("#fool").click(function(e){};)
.click([eventData],handler(eventObject))
eventData A map of data that will be passed to the vent.
handler (event Object) handler A function to execute each time the event is triggered.
$('.abc').click(add_event);
function add_event(){}

$('some_selector').click{para1:'Hello', param2:'World'},cool_function);
function cool_function (event) {alert {event.data.param; alert (event.data.param2);}

$('.selector').click(function(){add_event('shot')});
$('.leadToScore').click(function(){add_event('shot')})

$('.selector').bind('click',{param:'shot'},add_event);
functioin add_event (event){event.data.param=='shot';}

$('.leadtoscore').click(add_event('shot'));
function add_event(param) {return function(){alert(param;}}

menu3.jsp

$('a[class="oe_menu_leaf"]').click(function(){
if(timeOut){clearTimeout(timeOut); timeOut=0;}
$(".oe_menu_leaf").css('color','');
$(".oe_menu_leaf").css('background-color','');
$(this).css('color','black');
$(this).css('background-color','#FDA352');
});

event Data

A map of data that will be passed to the event handler.

$("someSelector").click{
param1: "hello",
param2:"world"
}

$('.selector').bind('click',{param:'shot'},add_event);
function add_event(event){
//event.data.para=="shot";
}

$("#foo-ld").click(function(e){})

.click([event Data],handler(eventObject))

xxxxxxxxxxxxxxxxxxxxxxxxxxx

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

  alert( "Handler for .click() called." );

});

Now if we click on this element, the alert is displayed:

Handler for .click() called.

We can also trigger the event when a different element is clicked:

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

  $( "#target" ).click();

});

2013年9月19日星期四

jquery-ajax2table

function _dimension(rows){

  var arr = [];
  for (var i=0;i<rows;i++) {
     arr[i] = [];
  }
  return arr;
}

var arr = _dimension(50);

var _VALUES="field1,field2,field3,field4"


var _BodyValue="field5,field6,field7"

function ajax(){

$.ajax({

type: "GET",

url: "fileName.java",

dataType: "xml",

data: { Sql: SQL}, //xml   
success: function(data)
{if (data.getElementsByTagName("Code")[0])   //Code
{ 
 NumberOfLine=data.getElementsByTagName('Code').length;
 _b = _VALUES.split(',');
 _gentable("td_id",_b.length+1,NumberOfLine);

 for (rr=0; rr<NumberOfLine;rr++)
 {   
  for (a=0;a<_b.length;a++){
   _1=_b[a];
   _value=data.getElementsByTagName(_1)[rr].childNodes[0].nodeValue
   _refresh("td_id"+"["+(rr+1)+"]"+"["+(a+1)+"]",_value);
  }
 }
 if (_BodyValue){_p1=_VALUES+","+_BodyValue;} else {_p1=_VALUES;} 
 _b = _p1.split(',');  
 for (rr=0; rr<NumberOfLine;rr++)
 {  var _2="";
  var delimiter="";
  for (a=0;a<_b.length;a++){
   _1=_b[a];
   _value=data.getElementsByTagName(_1)[rr].childNodes[0].nodeValue
   _2=_2+delimiter+_value;
   delimiter=",";
  }
  arr[rr+1]=_2;
 }
 
  _a=arr[1];
   var _b = _a.split(',');
 for (i in _b){ _refresh("tb_body"+"["+(i*1+1)+"]"+"["+1+"]",_b[i]);   }   
 $("#td_id tr").not(':first').hover(function () {
// $('#td_id tr').not(':first').on('click hover', function () { 
   var RowIndex = $(this).index(); 
  _refreshv('rowno',RowIndex);
  _a=arr[RowIndex];
   var _b = _a.split(',');
 for (i in _b){
 _refresh("tb_body"+"["+(i*1+1)+"]"+"["+1+"]",_b[i]);
   }
  $(this).css("background","yellow");  
  }, 
  function () {$(this).css("background",""); 
});} } })}

function _gentable(tableName,ColNos,RowNos,_Align){
  if (_Align==null){_Align="center";}
  var ThisTable=document.getElementById(tableName);
  while(1){  
  var lastRow = ThisTable.rows.length;
  if (lastRow >=2) ThisTable.deleteRow(lastRow - 1);else break;
  }
    for (var RowNo=1;RowNo<=RowNos;RowNo++)
  {
   
    
   var ThisRow=ThisTable.insertRow(RowNo);
   for (var ColumnNo=0;ColumnNo<ColNos;ColumnNo++)
   {
    var ThisCell=ThisRow.insertCell(ColumnNo);
      ThisCell.id=tableName+"["+RowNo+"]"+"["+ColumnNo+"]"; 
      ThisCell.align=_Align;
    if(ColumnNo==0){ThisCell.innerHTML=RowNo;} 
   }
  }
   }

2013年9月18日星期三

json-sample

http://ws.geonames.org/searchJSON

?([
['1378978499467','1','Lee xx xx','Edward','Temporary','2013-09-12','1000','A'],
['1379035896298','4','Cheng xxx xx','CK','Permanent','2013-09-13','4000','A'],
['1379057643675','6','ssss','albert','Contract','2013-09-13','6000','A'],
['1379301420521','7','fe ho','fat','Contract','2013-09-16','7000','A'],
['1379302408034','8','tam','No Value','Contract','2013-09-16','8000','A'],
['1379303003215','9','leung','No Value','Permanent','2013-09-16','9000','D'],
['1379303085701','10','no 101','No Value','null','2013-09-16','10000','D'],
['1379379769577','11','aaaa','c','null','2013-09-17','11000','D'],
['1379382159261','12','alex Tsang','ddc','null','2013-09-17','12500','D'],
['1379382521290','13','new hire','No Value','null','2013-09-17','13005','D'],
['1379383394058','14','f','dfas','null','2013-01-01','0','D'],
['1379383861851','15','Home','No Value','null','2013-09-17','15005','D'],
['1380072130299','16','aaa','No Value','null','2013-09-25','0','D'],
['1380265835042','20','Wong xan xx','Choi','Permanent','2013-05-05','10000','A'],
['1380266206966','21','null','null','null','2013-01-01','null','A']
]);

2013年9月13日星期五

jquery-validation

http://jquery.bassistance.de/validate/demo/

http://www.position-relative.net/creation/formValidator/

http://www.jqueryrain.com/?_VzOqXOT

$().ready(function() {
$("#inputForm").validate({
rules: {
'employee.surname': "required"
}
)}

訂閱：文章 (Atom)

2014年12月2日 星期二

2014年11月1日 星期六

2014年10月24日 星期五

2014年6月15日 星期日

2014年5月21日 星期三

2014年4月25日 星期五

2014年3月16日 星期日

2014年1月3日 星期五

2013年12月16日 星期一

2013年12月15日 星期日

2013年12月11日 星期三

2013年12月4日 星期三

2013年10月16日 星期三

2013年10月4日 星期五

2013年9月27日 星期五

2013年9月22日 星期日

2013年9月19日 星期四

2013年9月18日 星期三

2013年9月13日 星期五

我的網誌清單