I am using a tour booking theme. I do not want the dates in the theme reservation calendar to be opened in the form of a calendar and I want to remove the passive dates that appear on the calendar. How should I code for this. Can you help me?
I want to do:I want to do:
on my site:on my site:
calendar plugin:calendar plugin:
(function ($) {
new Vue({
el:'#bravo_tour_book_app',
data:{
id:'',
extra_price:[],
person_types:[],
message:{
content:'',
type:false
},
html:'',
onSubmit:false,
start_date:'',
start_date_html:'',
step:1,
guests:1,
price:0,
max_guests:1,
start_date_obj:'',
duration:0,
allEvents:[],
buyer_fees:[],
},
watch:{
extra_price:{
handler:function f() {
this.step = 1;
},
deep:true
},
start_date(){
this.step = 1;
},
guests(){
this.step = 1;
},
person_types:{
handler:function f() {
this.step = 1;
},
deep:true
},
},
computed:{
total_price:function(){
var me = this;
if (me.start_date !== "") {
var total = 0;
var total_guests = 0;
var startDate = new Date(me.start_date).getTime();
for (var ix in me.allEvents) {
var item = me.allEvents[ix];
var cur_date = new Date(item.start).getTime();
if (cur_date === startDate) {
if (item.person_types != null) {
me.person_types = Object.assign([], item.person_types);
} else {
me.person_types = null
}
me.max_guests = parseInt(item.max_guests);
me.price = parseFloat(item.price);
}
}
// for person types
if (me.person_types != null) {
for (var ix in me.person_types) {
var person_type = me.person_types[ix];
total += parseFloat(person_type.price) * parseInt(person_type.number);
total_guests += parseInt(person_type.number);
}
}else{
// for default
total_guests = me.guests;
total += me.guests * me.price;
}
for (var ix in me.extra_price) {
var item = me.extra_price[ix];
var type_total = 0;
if (item.enable === true) {
switch (item.type) {
case "one_time":
type_total += parseFloat(item.price);
break;
case "per_hour":
if (me.duration > 0) {
type_total += parseFloat(item.price) * parseFloat(me.duration);
}
break;
case "per_day":
if (me.duration > 0) {
type_total += parseFloat(item.price) * Math.ceil(parseFloat(me.duration) / 24);
}
break;
}
if (typeof item.per_person !== "undefined") {
type_total = type_total * total_guests;
}
total += type_total;
}
}
for (var ix in me.buyer_fees) {
var item = me.buyer_fees[ix];
var type_total = 0;
type_total += parseFloat(item.price);
if (typeof item.per_person !== "undefined") {
type_total = type_total * total_guests;
}
total += type_total;
}
return total;
}
return 0;
},
total_price_html:function(){
if(!this.total_price) return '';
return window.bravo_format_money(this.total_price);
},
daysOfWeekDisabled(){
var res = [];
for(var k in this.open_hours)
{
if(typeof this.open_hours[k].enable == 'undefined' || this.open_hours[k].enable !=1 ){
if(k == 7){
res.push(0);
}else{
res.push(k);
}
}
}
return res;
}
},
created:function(){
for(var k in bravo_booking_data){
this[k] = bravo_booking_data[k];
}
},
mounted(){
var me = this;
/*$(".bravo_tour_book").sticky({
topSpacing:30,
bottomSpacing:$(document).height() - $('.end_tour_sticky').offset().top + 40
});*/
var options = {
singleDatePicker: true,
showCalendar: false,
sameDate: true,
autoApply : true,
disabledPast : true,
dateFormat : bookingCore.date_format,
enableLoading : true,
showEventTooltip : true,
classNotAvailable : ['disabled', 'off'],
disableHightLight: true,
minDate:this.minDate,
opens:'left',
isInvalidDate:function (date) {
for(var k = 0 ; k < me.allEvents.length ; k++){
var item = me.allEvents[k];
if(item.start == date.format('YYYY-MM-DD')){
return item.active ? false : true;
}
}
return false;
}
};
if (typeof daterangepickerLocale == 'object') {
options.locale = _.merge(daterangepickerLocale,options.locale);
}
this.$nextTick(function () {
$(this.$refs.start_date).daterangepicker(options).on('apply.daterangepicker',
function (ev, picker) {
me.start_date = picker.startDate.format('YYYY-MM-DD');
me.start_date_html = picker.startDate.format(bookingCore.date_format);
})
.on('update-calendar',function (e,obj) {
me.fetchEvents(obj.leftCalendar.calendar[0][0], obj.leftCalendar.calendar[5][6])
});
});
},
methods:{
handleTotalPrice: function () {
},
fetchEvents(start,end){
var me = this;
var data = {
start: start.format('YYYY-MM-DD'),
end: end.format('YYYY-MM-DD'),
id:bravo_booking_data.id,
for_single:1
};
console.log(data);
$.ajax({
url: bravo_booking_i18n.load_dates_url,
dataType:"json",
type:'get',
data:data,
beforeSend: function() {
$('.daterangepicker').addClass("loading");
},
success:function (json) {
me.allEvents = json;
var drp = $(me.$refs.start_date).data('daterangepicker');
drp.allEvents = json;
drp.renderCalendar('left');
if (!drp.singleDatePicker) {
drp.renderCalendar('right');
}
$('.daterangepicker').removeClass("loading");
},
error:function (e) {
console.log(e);
console.log("Can not get availability");
}
});
},
formatMoney: function (m) {
return window.bravo_format_money(m);
},
validate(){
if(!this.start_date)
{
this.message.status = false;
this.message.content = bravo_booking_i18n.no_date_select;
return false;
}
return true;
},
If what you would like to use is simply a drop down list, why don't you create a simple one as follows?
<select name="availableDates">
<option value="0">Select a date</option>
<?php
//get the available dates from your database (or whatever source)
$getDates = $connection->prepare("select Date from availableDatesTable where hotelID=?");
$getDates->bind_param('i',$hotelID); //you could get the hotel ID via a $_GET variable
//store the results into an array
//loop through the array as follows:
foreach($resultArray as $res)
{
echo '<option value="'.$res.'">'.date('d F Y',$res).'</option>';
}
?>
</select>
Not sure what data source you are using, but this is a suggestion that could hopefully lead to the solution you're seeking.
Related
i made a module for odoo 12 to lock the pos screen the code works fine in odoo 10, but gives error this.pos is null or this.pos.currency is undefined. in the models.js, i want to switch the orders of different cashiers but this.pos is not initialized, what should i do so that it becomes initialized?
here is my code:
odoo.define('pos_user_lock.models',
//['point_of_sale.models','point_of_sale.screens','point_of_sale.chrome'
//,'web.ajax','web.core'],
function (require) {
"use strict";
var ajax = require('web.ajax');
var screens = require('point_of_sale.screens');
var models = require('point_of_sale.models');
var chrome = require('point_of_sale.chrome');
var core = require('web.core');
var QWeb = core.qweb;
var _t = core._t;
models.Order = models.Order.extend({
initialize: function(attributes,options){
var order = models.Order.__super__.initialize.call(this,attributes,options);
if (!this.cashier)
{
this.cashier = this.pos.cashier || this.pos.user;
}
this.is_last_selected = (this.is_last_selected === undefined) ? false:this.is_last_selected;
return order;
},
finalize: function() {
var res = models.Order.__super__.finalize.call(this);
this.pos.lock_user_screen();
},
init_from_JSON: function(json) {
var user = this.get_user_by_id(json.user_id);
if (user)
this.cashier = user;
this.is_last_selected = json.is_last_selected;
models.Order.__super__.init_from_JSON.call(this, json);
},
export_as_JSON: function() {
var res = models.Order.__super__.export_as_JSON.call(this);
if (this.cashier)
res.user_id = this.cashier.id ;
if(this.pos && this.pos.get_cashier())
res.user_id = this.pos.get_cashier().id ;
res.is_last_selected = this.is_last_selected;
return res;
},
get_user_by_id: function(id) {
var users = this.pos.users;
for (var i = 0; i < users.length; i++) {
var user = users[i];
if (user.id == id)
return user;
}
},
});
models.PosModel = models.PosModel.extend({
initialize: function(session, attributes) {
models.PosModel.__super__.initialize.call(this, session, attributes);
var self = this;
alert(JSON.stringify(attributes.pos));
this.ready.then(function(){
if (self.config.auto_push_order)
self.config.iface_precompute_cash = true;
});
},
is_locked: function(){
if (
this.gui.current_popup
&& this.gui.current_popup.template == 'PasswordPinPopupWidget'
){
return true;
}
return false;
},
unlock: function(){
if (this.is_locked()){
this.gui.close_popup();
}
},
lock_user_screen: function(){
var self = this;
if (!this.config.lock_users) return;
this.gui.show_popup('passwordPin',{
'title': _t('Insert password or scan your barcode'),
});
},
get_last_order: function(){
var orders = this.get_order_list();
for (var i = 0; i < orders.length; i++) {
if (orders[i].is_last_selected) {
return orders[i];
}
}
return null;
},
set_last_order: function(order){
var orders = this.get_order_list();
for (var i = 0; i < orders.length; i++) {
if (orders[i].uid == order.uid) {
orders[i].is_last_selected = true;
}else{
orders[i].is_last_selected = false;
}
}
return null;
},
set_order: function(order){
models.PosModel.__super__.set_order.call(this, order);
this.set_last_order(order);
},
get_order_list: function(){
var orders = models.PosModel.__super__.get_order_list.call(this);
var c_orders = [];
var cashier = this.cashier || this.user;
for (var i = 0; i < orders.length; i++) {
if (cashier && orders[i].cashier.id === cashier.id) {
c_orders.push(orders[i]);
}
}
return c_orders;
},
switch_order: function(){
var self = this;
if(self.pos)
{
}
else
{
alert("self.pos is null");
}
if(self !== undefined && self != null && self.pos !== undefined && self.pos.currency != null)
{
alert("in switch order");
//console.log(this.pos.currency);
if (!self.config.lock_users) return;
var user = self.pos.get_cashier() || self.user;
var orders = self.get_order_list();
var last_order = self.get_last_order() || orders[0];
if (orders.length) {
self.set_order(last_order);
}
else {
self.add_new_order();
}
}
},
set_cashier: function(user){
models.PosModel.__super__.set_cashier.call(this,user);
if(this.pos)
{
alert("this.pos is not null in set_cashier");
}
else
{
alert("this.pos is null in set_cashier");
}
this.switch_order(this);
if (!this.table && this.config.iface_floorplan)
this.set_table(null);
},
});
return models;
});
the web page shows this.pos is null. and this.currency is null.
i found the solution by adding:
this.pos = this;
inside initialize function of PosModel.
i want to set my own customize form in wdCalendar add event like first name last name instead of "what". where in jquery.calendar.js i find quickadd function which one is used when user click on calendar to add event then form appear help of quickadd function but i dont know how to set custom field in this function so please help me
below one is quickadd function of jquery.calender.js
function quickadd(start, end, isallday, pos) {
if ((!option.quickAddHandler && option.quickAddUrl == "") || option.readonly) {
return;
}
var buddle = $("#bbit-cal-buddle");
if (buddle.length == 0) {
var temparr = [];
temparr.push('<div id="bbit-cal-buddle" style="z-index: 180; width: 400px;visibility:hidden;" class="bubble">');
temparr.push('<table class="bubble-table" cellSpacing="0" cellPadding="0"><tbody><tr><td class="bubble-cell-side"><div id="tl1" class="bubble-corner"><div class="bubble-sprite bubble-tl"></div></div>');
temparr.push('<td class="bubble-cell-main"><div class="bubble-top"></div><td class="bubble-cell-side"><div id="tr1" class="bubble-corner"><div class="bubble-sprite bubble-tr"></div></div> <tr><td class="bubble-mid" colSpan="3"><div style="overflow: hidden" id="bubbleContent1"><div><div></div><div class="cb-root">');
temparr.push('<table class="cb-table" cellSpacing="0" cellPadding="0"><tbody><tr><th class="cb-key">');
temparr.push(i18n.xgcalendar.time, ':</th><td class=cb-value><div id="bbit-cal-buddle-timeshow"></div></td></tr><tr><th class="cb-key">');
temparr.push(i18n.xgcalendar.content, ':</th><td class="cb-value"><div class="textbox-fill-wrapper"><div class="textbox-fill-mid"><input id="bbit-cal-what" class="textbox-fill-input"/></div></div><div class="cb-example">');
temparr.push(i18n.xgcalendar.example, '</div></td></tr></tbody></table><input id="bbit-cal-start" type="hidden"/><input id="bbit-cal-end" type="hidden"/><input id="bbit-cal-allday" type="hidden"/><input id="bbit-cal-quickAddBTN" value="');
temparr.push(i18n.xgcalendar.create_event, '" type="button"/> <SPAN id="bbit-cal-editLink" class="lk">');
temparr.push(i18n.xgcalendar.update_detail, ' <StrONG>>></StrONG></SPAN></div></div></div><tr><td><div id="bl1" class="bubble-corner"><div class="bubble-sprite bubble-bl"></div></div><td><div class="bubble-bottom"></div><td><div id="br1" class="bubble-corner"><div class="bubble-sprite bubble-br"></div></div></tr></tbody></table><div id="bubbleClose1" class="bubble-closebutton"></div><div id="prong2" class="prong"><div class=bubble-sprite></div></div></div>');
var tempquickAddHanler = temparr.join("");
temparr = null;
$(document.body).append(tempquickAddHanler);
buddle = $("#bbit-cal-buddle");
var calbutton = $("#bbit-cal-quickAddBTN");
var lbtn = $("#bbit-cal-editLink");
var closebtn = $("#bubbleClose1").click(function() {
$("#bbit-cal-buddle").css("visibility", "hidden");
realsedragevent();
});
calbutton.click(function(e) {
if (option.isloading) {
return false;
}
option.isloading = true;
var what = $("#bbit-cal-what").val();
var datestart = $("#bbit-cal-start").val();
var dateend = $("#bbit-cal-end").val();
var allday = $("#bbit-cal-allday").val();
var f = /^[^\$\<\>]+$/.test(what);
if (!f) {
alert(i18n.xgcalendar.invalid_title);
$("#bbit-cal-what").focus();
option.isloading = false;
return false;
}
var zone = new Date().getTimezoneOffset() / 60 * -1;
var param = [{ "name": "CalendarTitle", value: what },
{ "name": "CalendarStartTime", value: datestart },
{ "name": "CalendarEndTime", value: dateend },
{ "name": "IsAllDayEvent", value: allday },
{ "name": "timezone", value: zone}];
if (option.extParam) {
for (var pi = 0; pi < option.extParam.length; pi++) {
param[param.length] = option.extParam[pi];
}
}
if (option.quickAddHandler && $.isFunction(option.quickAddHandler)) {
option.quickAddHandler.call(this, param);
$("#bbit-cal-buddle").css("visibility", "hidden");
realsedragevent();
}
else {
$("#bbit-cal-buddle").css("visibility", "hidden");
var newdata = [];
var tId = -1;
option.onBeforeRequestData && option.onBeforeRequestData(2);
$.post(option.quickAddUrl, param, function(data) {
if (data) {
if (data.IsSuccess == true) {
option.isloading = false;
option.eventItems[tId][0] = data.Data;
option.eventItems[tId][8] = 1;
render();
option.onAfterRequestData && option.onAfterRequestData(2);
}
else {
option.onRequestDataError && option.onRequestDataError(2, data);
option.isloading = false;
option.onAfterRequestData && option.onAfterRequestData(2);
}
}
}, "json");
newdata.push(-1, what);
var sd = strtodate(datestart);
var ed = strtodate(dateend);
var diff = DateDiff("d", sd, ed);
newdata.push(sd, ed, allday == "1" ? 1 : 0, diff > 0 ? 1 : 0, 0);
newdata.push(-1, 0, "", "");
tId = Ind(newdata);
realsedragevent();
render();
}
});
lbtn.click(function(e) {
if (!option.EditCmdhandler) {
alert("EditCmdhandler" + i18n.xgcalendar.i_undefined);
}
else {
if (option.EditCmdhandler && $.isFunction(option.EditCmdhandler)) {
option.EditCmdhandler.call(this, ['0', $("#bbit-cal-what").val(), $("#bbit-cal-start").val(), $("#bbit-cal-end").val(), $("#bbit-cal-allday").val()]);
}
$("#bbit-cal-buddle").css("visibility", "hidden");
realsedragevent();
}
return false;
});
buddle.mousedown(function(e) { return false });
}
var dateshow = CalDateShow(start, end, !isallday, true);
var off = getbuddlepos(pos.left, pos.top);
if (off.hide) {
$("#prong2").hide()
}
else {
$("#prong2").show()
}
$("#bbit-cal-buddle-timeshow").html(dateshow);
var calwhat = $("#bbit-cal-what").val("");
$("#bbit-cal-allday").val(isallday ? "1" : "0");
$("#bbit-cal-start").val(dateFormat.call(start, i18n.xgcalendar.dateformat.fulldayvalue + " HH:mm"));
$("#bbit-cal-end").val(dateFormat.call(end, i18n.xgcalendar.dateformat.fulldayvalue + " HH:mm"));
buddle.css({ "visibility": "visible", left: off.left, top: off.top });
calwhat.blur().focus(); //add 2010-01-26 blur() fixed chrome
$(document).one("mousedown", function() {
$("#bbit-cal-buddle").css("visibility", "hidden");
realsedragevent();
});
return false;
}
could i add ajax link on add event and display custom form and add data to database ?
is there any solution of this type to direct open popup as in add event as like open in edit event ?
And Here we go..
just copy paste this code in your jquery.form.js
it will provide you and extra field to input text.
jquery.form.js
<script>
(function($) {
$.fn.ajaxSubmit = function(options) {
if (!this.length) {
log('ajaxSubmit: skipping submit process - no element selected');
return this;
}
if (typeof options == 'function')
options = { success: options };
options = $.extend({
url: this.attr('action') || window.location.toString(),
type: this.attr('method') || 'GET'
}, options || {});
var veto = {};
this.trigger('form-pre-serialize', [this, options, veto]);
if (veto.veto) {
log('ajaxSubmit: submit vetoed via form-pre-serialize trigger');
return this;
}
if (options.beforeSerialize && options.beforeSerialize(this, options) === false) {
log('ajaxSubmit: submit aborted via beforeSerialize callback');
return this;
}
var a = this.formToArray(options.semantic);
if (options.data) {
options.extraData = options.data;
for (var n in options.data) {
if(options.data[n] instanceof Array) {
for (var k in options.data[n])
a.push( { name: n, value: options.data[n][k] } )
}
else
a.push( { name: n, value: options.data[n] } );
}
}
if (options.beforeSubmit && options.beforeSubmit(a, this, options) === false) {
log('ajaxSubmit: submit aborted via beforeSubmit callback');
return this;
}
this.trigger('form-submit-validate', [a, this, options, veto]);
if (veto.veto) {
log('ajaxSubmit: submit vetoed via form-submit-validate trigger');
return this;
}
var q = $.param(a);
if (options.type.toUpperCase() == 'GET') {
options.url += (options.url.indexOf('?') >= 0 ? '&' : '?') + q;
options.data = null;
}
else
options.data = q;
var $form = this, callbacks = [];
if (options.resetForm) callbacks.push(function() { $form.resetForm(); });
if (options.clearForm) callbacks.push(function() { $form.clearForm(); });
if (!options.dataType && options.target) {
var oldSuccess = options.success || function(){};
callbacks.push(function(data) {
$(options.target).html(data).each(oldSuccess, arguments);
});
}
else if (options.success)
callbacks.push(options.success);
options.success = function(data, status) {
for (var i=0, max=callbacks.length; i < max; i++)
callbacks[i].apply(options, [data, status, $form]);
};
var files = $('input:file', this).fieldValue();
var found = false;
for (var j=0; j < files.length; j++)
if (files[j])
found = true;
if (options.iframe || found) {
if ($.browser.safari && options.closeKeepAlive)
$.get(options.closeKeepAlive, fileUpload);
else
fileUpload();
}
else
$.ajax(options);
this.trigger('form-submit-notify', [this, options]);
return this;
function fileUpload() {
var form = $form[0];
if ($(':input[#name=submit]', form).length) {
alert('Error: Form elements must not be named "submit".');
return;
}
var opts = $.extend({}, $.ajaxSettings, options);
var s = jQuery.extend(true, {}, $.extend(true, {}, $.ajaxSettings), opts);
var id = 'jqFormIO' + (new Date().getTime());
var $io = $('<iframe id="' + id + '" name="' + id + '" />');
var io = $io[0];
if ($.browser.msie || $.browser.opera)
io.src = 'javascript:false;document.write("");';
$io.css({ position: 'absolute', top: '-1000px', left: '-1000px' });
var xhr = {
aborted: 0,
responseText: null,
responseXML: null,
status: 0,
statusText: 'n/a',
getAllResponseHeaders: function() {},
getResponseHeader: function() {},
setRequestHeader: function() {},
abort: function() {
this.aborted = 1;
$io.attr('src','about:blank');
}
};
var g = opts.global;
if (g && ! $.active++) $.event.trigger("ajaxStart");
if (g) $.event.trigger("ajaxSend", [xhr, opts]);
if (s.beforeSend && s.beforeSend(xhr, s) === false) {
s.global && jQuery.active--;
return;
}
if (xhr.aborted)
return;
var cbInvoked = 0;
var timedOut = 0;
var sub = form.clk;
if (sub) {
var n = sub.name;
if (n && !sub.disabled) {
options.extraData = options.extraData || {};
options.extraData[n] = sub.value;
if (sub.type == "image") {
options.extraData[name+'.x'] = form.clk_x;
options.extraData[name+'.y'] = form.clk_y;
}
}
}
setTimeout(function() {
var t = $form.attr('target'), a = $form.attr('action');
$form.attr({
target: id,
method: 'POST',
action: opts.url
});
if (! options.skipEncodingOverride) {
$form.attr({
encoding: 'multipart/form-data',
enctype: 'multipart/form-data'
});
}
if (opts.timeout)
setTimeout(function() { timedOut = true; cb(); }, opts.timeout);
var extraInputs = [];
try {
if (options.extraData)
for (var n in options.extraData)
extraInputs.push(
$('<input type="hidden" name="'+n+'" value="'+options.extraData[n]+'" />')
.appendTo(form)[0]);
$io.appendTo('body');
io.attachEvent ? io.attachEvent('onload', cb) : io.addEventListener('load', cb, false);
form.submit();
}
finally {
$form.attr('action', a);
t ? $form.attr('target', t) : $form.removeAttr('target');
$(extraInputs).remove();
}
}, 10);
function cb() {
if (cbInvoked++) return;
io.detachEvent ? io.detachEvent('onload', cb) : io.removeEventListener('load', cb, false);
var operaHack = 0;
var ok = true;
try {
if (timedOut) throw 'timeout';
var data, doc;
doc = io.contentWindow ? io.contentWindow.document : io.contentDocument ? io.contentDocument : io.document;
if (doc.body == null && !operaHack && $.browser.opera) {
operaHack = 1;
cbInvoked--;
setTimeout(cb, 100);
return;
}
xhr.responseText = doc.body ? doc.body.innerHTML : null;
xhr.responseXML = doc.XMLDocument ? doc.XMLDocument : doc;
xhr.getResponseHeader = function(header){
var headers = {'content-type': opts.dataType};
return headers[header];
};
if (opts.dataType == 'json' || opts.dataType == 'script') {
var ta = doc.getElementsByTagName('textarea')[0];
xhr.responseText = ta ? ta.value : xhr.responseText;
}
else if (opts.dataType == 'xml' && !xhr.responseXML && xhr.responseText != null) {
xhr.responseXML = toXml(xhr.responseText);
}
data = $.httpData(xhr, opts.dataType);
}
catch(e){
ok = false;
$.handleError(opts, xhr, 'error', e);
}
if (ok) {
opts.success(data, 'success');
if (g) $.event.trigger("ajaxSuccess", [xhr, opts]);
}
if (g) $.event.trigger("ajaxComplete", [xhr, opts]);
if (g && ! --$.active) $.event.trigger("ajaxStop");
if (opts.complete) opts.complete(xhr, ok ? 'success' : 'error');
// clean up
setTimeout(function() {
$io.remove();
xhr.responseXML = null;
}, 100);
};
function toXml(s, doc) {
if (window.ActiveXObject) {
doc = new ActiveXObject('Microsoft.XMLDOM');
doc.async = 'false';
doc.loadXML(s);
}
else
doc = (new DOMParser()).parseFromString(s, 'text/xml');
return (doc && doc.documentElement && doc.documentElement.tagName != 'parsererror') ? doc : null;
};
};
};
$.fn.ajaxForm = function(options) {
return this.ajaxFormUnbind().bind('submit.form-plugin',function() {
$(this).ajaxSubmit(options);
return false;
}).each(function() {
$(":submit,input:image", this).bind('click.form-plugin',function(e) {
var form = this.form;
form.clk = this;
if (this.type == 'image') {
if (e.offsetX != undefined) {
form.clk_x = e.offsetX;
form.clk_y = e.offsetY;
} else if (typeof $.fn.offset == 'function') { // try to use dimensions plugin
var offset = $(this).offset();
form.clk_x = e.pageX - offset.left;
form.clk_y = e.pageY - offset.top;
} else {
form.clk_x = e.pageX - this.offsetLeft;
form.clk_y = e.pageY - this.offsetTop;
}
}
// clear form vars
setTimeout(function() { form.clk = form.clk_x = form.clk_y = null; }, 10);
});
});
};
$.fn.ajaxFormUnbind = function() {
this.unbind('submit.form-plugin');
return this.each(function() {
$(":submit,input:image", this).unbind('click.form-plugin');
});
};
$.fn.formToArray = function(semantic) {
var a = [];
if (this.length == 0) return a;
var form = this[0];
var els = semantic ? form.getElementsByTagName('*') : form.elements;
if (!els) return a;
for(var i=0, max=els.length; i < max; i++) {
var el = els[i];
var n = el.name;
if (!n) continue;
if (semantic && form.clk && el.type == "image") {
// handle image inputs on the fly when semantic == true
if(!el.disabled && form.clk == el)
a.push({name: n+'.x', value: form.clk_x}, {name: n+'.y', value: form.clk_y});
continue;
}
var v = $.fieldValue(el, true);
if (v && v.constructor == Array) {
for(var j=0, jmax=v.length; j < jmax; j++)
a.push({name: n, value: v[j]});
}
else if (v !== null && typeof v != 'undefined')
a.push({name: n, value: v});
}
if (!semantic && form.clk) {
// input type=='image' are not found in elements array! handle them here
var inputs = form.getElementsByTagName("input");
for(var i=0, max=inputs.length; i < max; i++) {
var input = inputs[i];
var n = input.name;
if(n && !input.disabled && input.type == "image" && form.clk == input)
a.push({name: n+'.x', value: form.clk_x}, {name: n+'.y', value: form.clk_y});
}
}
return a;
};
$.fn.formSerialize = function(semantic) {
return $.param(this.formToArray(semantic));
};
$.fn.fieldSerialize = function(successful) {
var a = [];
this.each(function() {
var n = this.name;
if (!n) return;
var v = $.fieldValue(this, successful);
if (v && v.constructor == Array) {
for (var i=0,max=v.length; i < max; i++)
a.push({name: n, value: v[i]});
}
else if (v !== null && typeof v != 'undefined')
a.push({name: this.name, value: v});
});
return $.param(a);
};
$.fn.fieldValue = function(successful) {
for (var val=[], i=0, max=this.length; i < max; i++) {
var el = this[i];
var v = $.fieldValue(el, successful);
if (v === null || typeof v == 'undefined' || (v.constructor == Array && !v.length))
continue;
v.constructor == Array ? $.merge(val, v) : val.push(v);
}
return val;
};
$.fieldValue = function(el, successful) {
var n = el.name, t = el.type, tag = el.tagName.toLowerCase();
if (typeof successful == 'undefined') successful = true;
if (successful && (!n || el.disabled || t == 'reset' || t == 'button' ||
(t == 'checkbox' || t == 'radio') && !el.checked ||
(t == 'submit' || t == 'image') && el.form && el.form.clk != el ||
tag == 'select' && el.selectedIndex == -1))
return null;
if (tag == 'select') {
var index = el.selectedIndex;
if (index < 0) return null;
var a = [], ops = el.options;
var one = (t == 'select-one');
var max = (one ? index+1 : ops.length);
for(var i=(one ? index : 0); i < max; i++) {
var op = ops[i];
if (op.selected) {
var v = $.browser.msie && !(op.attributes['value'].specified) ? op.text : op.value;
if (one) return v;
a.push(v);
}
}
return a;
}
return el.value;
};
$.fn.clearForm = function() {
return this.each(function() {
$('input,select,textarea', this).clearFields();
});
};
$.fn.clearFields = $.fn.clearInputs = function() {
return this.each(function() {
var t = this.type, tag = this.tagName.toLowerCase();
if (t == 'text' || t == 'password' || tag == 'textarea')
this.value = '';
else if (t == 'checkbox' || t == 'radio')
this.checked = false;
else if (tag == 'select')
this.selectedIndex = -1;
});
};
$.fn.resetForm = function() {
return this.each(function() {
if (typeof this.reset == 'function' || (typeof this.reset == 'object' && !this.reset.nodeType))
this.reset();
});
};
$.fn.enable = function(b) {
if (b == undefined) b = true;
return this.each(function() {
this.disabled = !b
});
};
$.fn.selected = function(select) {
if (select == undefined) select = true;
return this.each(function() {
var t = this.type;
if (t == 'checkbox' || t == 'radio')
this.checked = select;
else if (this.tagName.toLowerCase() == 'option') {
var $sel = $(this).parent('select');
if (select && $sel[0] && $sel[0].type == 'select-one') {
// deselect all other options
$sel.find('option').selected(false);
}
this.selected = select;
}
});
};
function log() {
if ($.fn.ajaxSubmit.debug && window.console && window.console.log)
window.console.log('[jquery.form] ' + Array.prototype.join.call(arguments,''));
};
})(jQuery);
</script>
hello all i am using the following js code to convert the input type date into three different text boxes for day,month and year.
js
(function () {
var sign = function(x) {
return typeof x === 'number' ? x ? x < 0 ? -1 : 1 : x === x ? 0 : NaN : NaN;
};
// TODO Calcular año bisiesto
var bisiesto = function(year)
{
return true;
// return (((year % 4 == 0) && (year % 100 != 0)) || (year % 400 == 0)) ? 1 : 0;
};
$.fn.insertAt = $.fn.insertAt || function(index, $parent) {
return this.each(function() {
if (index === 0) {
$parent.prepend(this);
} else {
$parent.children().eq(index - 1).after(this);
}
});
};
var Crossdp = function(e, o) {
if (e.data("cross-datepicker")) {
return this;
}
e.attr("type", "text");
o = $.extend({}, $.fn.cdp.defaults, o);
if(o.hideInput)
e.hide();
var cnt = $("<div>").addClass(o.classes.container || "").data("input", e).insertBefore(e);
// Data
var days = [31, 29, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
// Read format
var d = $("<select>").addClass(o.classes.controls || "").addClass(o.classes.days || ""),
m = $("<select>").addClass(o.classes.controls || "").addClass(o.classes.months || ""),
y = $("<select>").addClass(o.classes.controls || "").addClass(o.classes.year || "");
/**
* Gets the format metadata.
*/
var getFormat = function(format) {
var f = {},
last = "",
order = 0,
elements = {
"d": d,
"m": m,
"y": y
};
for(var i = 0, of=format; i < of.length; i++) {
var c = of[i];
if(last == c) {
f[c].count ++;
}
else if(c == "d" || c == "y" || c == "m") {
f[c] = {
"count": 1,
"order": order++,
"e": elements[c]
};
elements[c].data("order", f[c].order);
last = c;
}
if(order > 3) {
throw "Invalid date format";
}
}
return f;
};
var iF = getFormat(o.inputFormat),
f = getFormat(o.format);
for(var i in f) {
f[i].e.appendTo(cnt);
}
cnt.sort(function(a, b) {
if(a.data("order") > b.data("order")) {
return 1;
}
else if(a.data("order") < b.data("order")) {
return -1;
}
else {
return 0;
}
});
// Helpers
/**
* Format a numeric day to string.
*/
var formatDay = function(day, format) {
var text = String(day),
c = format || f.d.count;
while(c > text.length) {
text = "0" + text;
}
return text;
};
/**
* Format a numeric month to string.
*/
var formatMonth = function(month, format) {
if(month > 12) {
throw "Invalid month: "+month;
}
var c = format || f.m.count,
text = String(month);
if(c == 2) {
if(text.length == 1) {
text = "0" + text;
}
}
else if(c == 3) {
text = o.months[i-1].substr(0, 3);
}
else if(c == 4) {
text = o.months[i-1];
}
else {
throw "Invalid month format";
}
return text;
};
/**
* Format a numeric month to string.
*/
var formatYear = function(year, format) {
var text = String(year),
c = format || f.y.count;
if(c == 2) {
text = text.substr(text.length-2, 2);
}
else if(c != 4) {
throw "Invalid year format";
}
return text;
};
var parseYear = function(date, format) {
// TODO
};
// Update input function
var formatDate = function(resultFormat, readFormat, years, months, days) {
var a = ["d", "m", "y"],
result = resultFormat;
if(typeof days === 'string')
days = parseInt(days);
if(typeof months === 'string')
months = parseInt(months);
if(typeof years === 'string')
years = parseInt(years);
for(var i = 0; i < a.length; i++) {
var ch = a[i], /* Example: a[0]='d' */
format = readFormat[ch], /* Example: uF['d']='dd' */
word = "",
formatted = "";
for(var j = 0; j < format.count; j++) {
word += ch;
}
if(ch == "d") {
formatted = formatDay(days, format.count);
}
else if(ch == "m") {
formatted = formatMonth(months, format.count);
}
else {
formatted = formatYear(years, format.count);
}
result = result.replace(word, formatted);
}
return result;
};
var updateInput = function() {
e.val(formatDate(o.inputFormat, iF, y.val(), m.val(), d.val()));
};
this.updateInput = function() {
updateInput();
};
var updateFromInput = function() {
// TODO
};
// Generate 3 selects
/* Days */
d.data("days", 0);
/**
* Days of determinated month.
*/
var generateDays = function(month) {
if(d.data("days") == days[month-1]) {
return;
}
var selected = parseInt(d.val() || "1");
d.html("");
if(month == 0) {
return;
}
if(o.addNullOption) {
d.append("<option value=''>"+o.nullOptionText+"</option>");
}
for(var i = 1; i <= days[month-1]; i++) {
$("<option>").attr("value", i).text(formatDay(i)).appendTo(d);
}
d.val(selected);
};
d.change(function() {
updateInput();
});
generateDays(1);
/* Months */
m.change(function() {
// Regenerate days
generateDays(parseInt($(this).val()));
updateInput();
});
if(o.addNullOption) {
m.append("<option value='0'>"+o.nullOptionText+"</option>");
}
for(var i = 1; i <= 12; i++) {
m.append("<option value='"+i+"'>"+formatMonth(i)+"</option>");
}
/* Years */
var from,
to;
if(typeof o.years[0] == 'string') {
var current = new Date().getFullYear(),
count;
if(o.years.length == 3) {
current += o.years[1];
count = o.years[2];
}
else {
count = o.years[1];
}
for(var i = current; i != current + count; i += sign(count)) {
y.append("<option value='"+i+"'>"+formatYear(i)+"</option>");
}
}
else {
for(var i = o.years[0]; i != o.years[1]; i += sign(o.years[1]-o.years[0])) {
y.append("<option value='"+i+"'>"+formatYear(i)+"</option>");
}
}
y.change(function() {
updateInput();
});
// Save
this.inputs = {
d: d,
y: y,
m: m
};
// Finish
if(e.data("initial-day")) {
$(function() {
$.fn.cdp.statics.fns.set(e, [
e.data("initial-year"),
e.data("initial-month"),
e.data("initial-day")]);
});
}
updateInput();
e.data("cross-datepicker", this);
};
$.fn.cdp = function (o, arg) {
var e = $(this);
if (e.length == 0) {
return this;
}
else if (e.length > 1) {
e.each(function () {
$(this).cdp(o);
});
return this;
}
if(!e.is("input")) {
throw "You can apply Cross-DatePicker only on an 'input' element";
}
if(typeof o === 'string') {
var st = $.fn.cdp.statics;
if(!st.fns[o]) {
console.error("Unknown function "+o);
}
st.fns[o](e, arg);
return this;
}
var cdp = new Crossdp(e, o);
return this;
}
$.fn.cdp.defaults = {
hideInput: true,
format: "d/mmm/yyyy",
inputFormat: "yyyy-mm-dd",
years: ["now", -100], // [initial year, final year] or ["now", relative years count] or ["now", relative years from, relative years count]
months: ["Enero", "Febrero", "Marzo", "Abril", "Mayo", "Junio", "Julio", "Agosto", "Septiembre", "Octubre", "Noviembre", "Diciembre"],
addNullOption: false,
nullOptionText: "Select",
classes: {
container: "cdp-container",
controls: "cdp-select",
days: "cdp-d",
months: "cdp-m",
years: "cdp-y"
}
};
$.fn.cdp.statics = {
fns: {
set: function(e, arg) {
var st = $.fn.cdp.statics,
obj = e.data("cross-datepicker"),
y,m,d;
if($.isArray(arg)) {
y = arg[0];
m = arg[1];
d = arg[2];
}
else if(typeof arg === 'string') {
var array = arg.split("-");
y = parseInt(array[0]);
m = parseInt(array[1]);
d = parseInt(array[2]);
}
else {
y = arg.year || arg.y;
m = arg.month || arg.m;
d = arg.day || arg.d;
}
obj.inputs.y.val(String(y));
obj.inputs.m.val(String(m));
obj.inputs.d.val(String(d));
obj.updateInput();
}
}
};
})();
how to implement
html
<input type="date" data-initial-day="20" data-initial-year="2010" data-initial-month="64" />
<!-- Required scripts -->
<script src='https://code.jquery.com/jquery-2.1.0.min.js'></script>
<script src='../src/cross-datepicker.js'></script>
<script>
$(function() {
$("input[type='date']").cdp();
});
</script>
the problem is that the code works great when defined data-initial-year for month and day also but when i want to show the default none selected date like select day select month and select year it shows blank or 0 .
i dont know how to solve this i have tried to solve the problem by adding some text into the js file but no help .
if you can suggest me something it would be great.
The plugin code needs to check if an entry is valid before setting it.
First off, set the addNullOption to true so that a "Select" text is visible.
$(function() {
$("input[type='date']").cdp({
addNullOption : true,
nullOptionText: "Select"
});
});
Then modify the last function $.fn.cdp.statics with the "check valid" code included below (demo):
$.fn.cdp.statics = {
fns: {
set: function(e, arg) {
var st = $.fn.cdp.statics,
obj = e.data("cross-datepicker"),
y,m,d;
if($.isArray(arg)) {
y = arg[0];
m = arg[1];
d = arg[2];
}
else if(typeof arg === 'string') {
var array = arg.split("-");
y = parseInt(array[0]);
m = parseInt(array[1]);
d = parseInt(array[2]);
}
else {
y = arg.year || arg.y;
m = arg.month || arg.m;
d = arg.day || arg.d;
}
// check valid
if ( obj.inputs.y.find('option[value="' + y + '"]').length ) {
obj.inputs.y.val(String(y));
}
if ( obj.inputs.m.find('option[value="' + m + '"]').length ) {
obj.inputs.m.val(String(m));
}
if ( obj.inputs.d.find('option[value="' + d + '"]').length ) {
obj.inputs.d.val(String(d));
}
obj.updateInput();
}
}
};
To show "Select" in the other selects, I ended up adding the following code because the year select didn't have a null option:
if (o.addNullOption) {
y.append("<option value='0'>"+o.nullOptionText+"</option>");
}
and changing the "check valid" code to:
// check valid
y = obj.inputs.y.find('option[value="' + y + '"]').length ? y : 0;
obj.inputs.y.val(String(y));
m = obj.inputs.m.find('option[value="' + m + '"]').length ? m : 0;
obj.inputs.m.val(String(m));
d = obj.inputs.d.find('option[value="' + d + '"]').length ? d : 0;
obj.inputs.d.val(String(d));
Get the full code from this updated demo.
I'm working with a drag and drop plugin . fieldChooser
I want to call a method and an event But I don't know how .
this is the function :
(function($) {
$.fn.fieldChooser = function (sourceList, destinationList, options)
{
var fieldChooser = this;
//----------------------------------------------------------------------
// Poor man's singleton
//----------------------------------------------------------------------
if (this.getOptions)
{
return this;
}
//----------------------------------------------------------------------
// Private methods
//----------------------------------------------------------------------
function getBounds(element)
{
var offset = element.offset();
return {
left: offset.left,
right: offset.left + element.width(),
top: offset.top,
bottom: offset.top + element.height()
}
}
function translateBounds(bounds, newPosition)
{
return {
left: newPosition.left,
right: bounds.right + newPosition.left - bounds.left,
top: newPosition.top,
bottom: bounds.bottom + newPosition.top - bounds.top
}
}
function hitTest(container, element, newPosition)
{
var containerBounds = getBounds(container);
var elementBounds = getBounds(element);
elementBounds = translateBounds(elementBounds, newPosition);
var hit = true;
if (elementBounds.right < containerBounds.left)
{
hit = false;
}
else if (elementBounds.left > containerBounds.right)
{
hit = false;
}
else if (elementBounds.bottom < containerBounds.top)
{
hit = false;
}
else if (elementBounds.top > containerBounds.bottom)
{
hit = false;
}
return hit;
}
var _chooser = this;
var _lastSelectionList = null;
function onListSelectionChanged(event, list)
{
if (_lastSelectionList)
{
if (_lastSelectionList == list)
{
// continue
}
else
{
var otherList = _chooser.getSourceList();
if (list == _chooser.getSourceList())
{
otherList = _chooser.getDestinationList();
}
otherList.clearSelection(true);
}
}
_lastSelectionList = list;
}
//----------------------------------------------------------------------
// fieldList class
//----------------------------------------------------------------------
var fieldList = function (parent, tabIndex)
{
var _list = $(parent);
_list.addClass("fc-field-list");
_list.attr("tabIndex", tabIndex);
var _selectedIndex = -1;
var _extendedSelectionIndex = -1;
var prepareListFields = function (content)
{
content.addClass("fc-field");
content.attr("tabIndex", tabIndex);
content.off("click.field");
content.on("click.field", function (event)
{
event.stopPropagation();
event.preventDefault();
var $this = $(this);
var currentList = _chooser.getFieldList($this);
if (event.ctrlKey || event.metaKey)
{
currentList.toggleFieldSelection($this);
}
else if (event.shiftKey)
{
currentList.selectTo($this);
}
else
{
currentList.selectField($this);
}
_currentList = currentList;
});
};
prepareListFields(_list.children());
_list.selectAt = function (index)
{
this.clearSelection(true);
var fields = _list.getFields();
if (index >= fields.length)
{
index = fields.length - 1;
}
var selectedField = null;
if (index >= 0)
{
selectedField = fields.eq(index);
}
if (selectedField)
{
selectedField.addClass("fc-selected");
_selectedIndex = index;
_list.scrollToField(selectedField);
}
else
{
_selectedIndex = -1;
}
_list.trigger("selectionChanged", [_list]);
}
_list.extendSelection = function (up)
{
var selectedIndex = this.getSelectedIndex();
var extendedIndex = this.getExtendedSelectionIndex();
var newIndex = extendedIndex;
var extend = true;
if (up)
{
if (newIndex < 0)
{
newIndex = _list.getFields().length;
_selectedIndex = newIndex - 1;
}
if (extendedIndex > selectedIndex)
{
extend = false;
}
else
{
newIndex--;
}
}
else
{
if (newIndex < 0)
{
_selectedIndex = 0;
}
if (extendedIndex < selectedIndex)
{
extend = false;
}
else
{
newIndex++;
}
}
var fields = _list.getFields();
if (newIndex < 0 || newIndex >= fields.length)
{
// continue
}
else
{
var selectedField = fields.eq(newIndex);
if (extend)
{
selectedField.addClass("fc-selected");
}
else
{
selectedField.removeClass("fc-selected");
if (up)
{
newIndex--;
}
else
{
newIndex++;
}
if (newIndex >= 0 && newIndex < fields.length)
{
selectedField = fields.eq(newIndex);
}
}
_list.scrollToField(selectedField);
_list.trigger("selectionChanged", [_list]);
_extendedSelectionIndex = newIndex;
}
}
_list.selectField = function (field)
{
this.clearSelection(true);
field.addClass("fc-selected");
_selectedIndex = field.index();
_list.trigger("selectionChanged", [_list]);
}
_list.toggleFieldSelection = function (field)
{
field.toggleClass("fc-selected");
if (field.hasClass("fc-selected"))
{
_selectedIndex = field.index();
_extendedSelectionIndex = -1;
}
else
{
if (_selectedIndex == field.index())
{
_selectedIndex = _list.children(".fc-selected").first().index();
}
}
_list.trigger("selectionChanged", [_list]);
}
_list.selectTo = function (fieldOrIndex)
{
var fieldIndex = fieldOrIndex;
if (typeof fieldOrIndex == "object")
{
fieldIndex = fieldOrIndex.index();
}
if (_selectedIndex == -1)
{
_selectedIndex = 0;
}
var children = _list.children();
if (fieldIndex > _selectedIndex)
{
for (var counter = _selectedIndex;
counter < children.length;
counter++)
{
if (counter <= fieldIndex)
{
children.eq(counter).addClass("fc-selected");
}
else
{
children.eq(counter).removeClass("fc-selected");
}
}
}
else
{
for (var counter = _selectedIndex;
counter >= 0;
counter--)
{
if (counter >= fieldIndex)
{
children.eq(counter).addClass("fc-selected");
}
else
{
children.eq(counter).removeClass("fc_selected");
}
}
}
_extendedSelectionIndex = fieldIndex;
_list.trigger("selectionChanged", [_list]);
}
_list.getSelectedIndex = function ()
{
return _selectedIndex;
}
_list.getExtendedSelectionIndex = function ()
{
var index = _extendedSelectionIndex;
if (index < 0)
{
index = _selectedIndex;
}
return index;
}
_list.getSelection = function ()
{
return this.children(".fc-selected");
}
_list.clearSelection = function (suppressEvent)
{
_selectedIndex = -1;
_extendedSelectionIndex = -1;
this.children().removeClass("fc-selected");
if (suppressEvent)
{
// continue
}
else
{
_list.trigger("selectionChanged", [_list]);
}
};
_list.add = function (content)
{
prepareListFields(content);
content.appendTo(_list);
return _list;
};
_list.getFields = function ()
{
return _list.children();
}
_list.scrollToField = function (field)
{
var listTop = _list.position().top;
var listScrollTop = _list.scrollTop();
var listHeight = _list.height();
var listScrollBottom = listScrollTop + listHeight;
var fieldHeight = field.outerHeight();
var fieldTop = listScrollTop + field.position().top - listTop;
var fieldBottom = fieldTop + fieldHeight;
if (fieldTop < listScrollTop)
{
_list.scrollTop(fieldTop);
}
else if (fieldBottom > listScrollBottom)
{
_list.scrollTop(listScrollTop + (fieldBottom - listScrollBottom));
}
};
_list.sortable({
connectWith: ".fc-field-list",
cursor: "move",
opacity: 0.75,
cursorAt: { left: 5, top: 5 },
helper: function (event, field)
{
if (field.hasClass("fc-selected"))
{
// continue
}
else
{
_list.selectField(field);
}
var helper = fieldChooser.getOptions().helper(_list);
var selection = _list.getSelection().clone();
if (helper)
{
// continue
}
else
{
helper = $("<div/>").append(selection);
}
field.data("selection", selection);
field.siblings(".fc-selected").remove();
return helper;
}
});
return _list;
};
//----------------------------------------------------------------------
// Private variables
//----------------------------------------------------------------------
var _options = $.extend({}, $.fn.fieldChooser.defaults, options);
var tabIndex = parseInt(this.attr("tabIndex"));
if (isNaN(tabIndex))
{
tabIndex = 0;
}
this.removeAttr("tabIndex");
var _sourceList = new fieldList(sourceList, tabIndex).addClass("fc-source-fields");
var _destinationList =
new fieldList(destinationList, tabIndex).addClass("fc-destination-fields");
var _currentList = null;
//----------------------------------------------------------------------
// Public properties
//----------------------------------------------------------------------
this.getOptions = function ()
{
return _options;
};
this.getSourceList = function ()
{
return _sourceList;
};
this.getDestinationList = function ()
{
return _destinationList;
};
this.getFieldList = function (field)
{
var list = _destinationList;
if (field.parent().hasClass("fc-source-fields"))
{
list = _sourceList;
}
return list;
}
//----------------------------------------------------------------------
// Public methods
//----------------------------------------------------------------------
this.destroy = function ()
{
this.getOptions = null;
_sourceList.sortable("destroy");
_destinationList.sortable("destroy");
};
//----------------------------------------------------------------------
// Event handlers
//----------------------------------------------------------------------
_destinationList.on("sortstop", function (event, ui)
{
var selection = ui.item.data("selection");
if (hitTest(_sourceList, ui.item, ui.offset))
{
_currentList = _sourceList;
_sourceList.add(selection);
_destinationList.clearSelection();
_sourceList.trigger("selectionChanged", [_sourceList]);
_chooser.trigger("listChanged", [selection, _sourceList]);
ui.item.after(selection).remove();
}
else if (hitTest(_destinationList, ui.item, ui.offset))
{
ui.item.after(selection).remove();
}
else
{
_destinationList.getSelection().remove();
_sourceList.add(selection);
_sourceList.scrollToField(selection);
_destinationList.clearSelection();
_sourceList.trigger("selectionChanged", [_sourceList]);
_currentList = _sourceList;
_chooser.trigger("listChanged", [selection, _sourceList]);
}
});
_sourceList.on("sortstop", function (event, ui)
{
var selection = ui.item.data("selection");
if (hitTest(_destinationList, ui.item, ui.offset))
{
_currentList = _destinationList;
_destinationList.add(selection);
_sourceList.clearSelection();
_destinationList.trigger("selectionChanged", [_destinationList]);
_chooser.trigger("listChanged", [selection, _destinationList]);
}
else if (hitTest(_sourceList, ui.item, ui.offset))
{
// continue
}
else
{
_sourceList.sortable("cancel");
}
ui.item.after(selection).remove();
});
_destinationList.on("selectionChanged", onListSelectionChanged);
_sourceList.on("selectionChanged", onListSelectionChanged);
_destinationList.on("focusin", function ()
{
_currentList = _destinationList;
});
_destinationList.on("focusout", function ()
{
if (_currentList == _destinationList)
{
_currentList = null;
}
});
_sourceList.on("focusin", function ()
{
_currentList = _sourceList;
});
_sourceList.on("focusout", function ()
{
if (_currentList == _sourceList)
{
_currentList = null;
}
});
$(document).keydown(function (event)
{
if (_currentList)
{
if (event.which == 38)
{ // up arrow
event.stopPropagation();
event.preventDefault();
if (event.shiftKey)
{
_currentList.extendSelection(true);
}
else
{
var selectedIndex = _currentList.getSelectedIndex();
var newIndex = selectedIndex - 1;
if (newIndex < 0)
{
newIndex = 0;
}
_currentList.selectAt(newIndex);
}
}
else if (event.which == 40)
{ // down arrow
event.stopPropagation();
event.preventDefault();
if (event.shiftKey)
{
_currentList.extendSelection(false);
}
else
{
var selectedIndex = _currentList.getSelectedIndex();
var newIndex = selectedIndex + 1;
if (selectedIndex < 0)
{
newIndex = _currentList.getFields().length - 1;
}
_currentList.selectAt(newIndex);
}
}
else if (event.which == 27)
{ // escape
_currentList.selectAt(-1);
}
}
});
return this;
};
//--------------------------------------------------------------------------
// Class defaults
//--------------------------------------------------------------------------
$.fn.fieldChooser.defaults = {
helper: function (list) { return null; }
};
}(jQuery));
I want just 2-3 functions and I don't need other ones .
I want to call getDestinationList() to get the fields inside destinationlist and call selectionChanged() event.
Could you help me ? How can I call them ?
these are the definition codes :
$(document).ready(function () {
var $sourceFields = $("#sourceFields");
var $destinationFields = $("#destinationFields");
var $chooser = $("#fieldChooser").fieldChooser(sourceFields, destinationFields);
});
I'm looking forward to hear from you
Try this:
$chooser.on("listChanged",function(event,selection,list){
//event <- The jQuery event invoking the callback.
//selection <- The field (or set of fields) which has moved.
//list <- The field list to which the selection has moved.
alert("listChanged");
}
Documentation link: https://github.com/mateagar/fieldChooser
I hope this help.
I build a prototype that handle pages, I successfully add (push), but can get the data, I failed:
var foundImageIndex = Pages.indexFirst(function (item) { if (item.PageID == PageID) return true; });
Here the javascript page handler:
var Pages = new Array();
PageContainer = function () //constructor for the proxy
{
// this._baseURL = url;
};
PageContainer.prototype =
{
AddPage: function (data) {
if (data == null) return;
Pages.push({ PageID: data.PageID, SegmentID: data.SegmentID });
},
GetPage: function (PageID) {
alert('getPage('+PageID+')=' + JSON.stringify(Pages));
var foundImageIndex = Pages.indexFirst(function (item) { if (item.PageID == PageID) return true; });
var dt = { PageID: Pages[foundImageIndex].PageID, SegmentID: Pages[foundImageIndex].SegmentID };
return dt;
}
};
I call from other js as following:
var gPageContainer = new PageContainer();
for (var i = 0; i < SegStruct.SegmentsCount; i++) {
var segRClass = //get from webservice
gPageContainer.AddPage({ PageID: i, SegmentID: segRClass.SegmentID });
}
I trying to call: gPageContainer.GetPage(1); but it failed in GetPage: function (PageID) it returns -1 in:
var foundImageIndex = Pages.indexFirst(function (item) { if (item.PageID == PageID) return true; });
foundImageIndex always -1
why?
Simply add the following before the constructor:
if (typeof Array.prototype.indexFirst == 'undefined') {
Array.prototype.indexFirst = function (validator) {
for (var i = 0; i <= this.length - 1; i++) {
if (validator(this[i])) {
return i;
}
}
return -1;
};
}