Month: January 2014

Tags to input Box Jquery

1)Script file

(function($) {

	var delimiter = new Array();
	var tags_callbacks = new Array();
	$.fn.doAutosize = function(o){
	    var minWidth = $(this).data('minwidth'),
	        maxWidth = $(this).data('maxwidth'),
	        val = '',
	        input = $(this),
	        testSubject = $('#'+$(this).data('tester_id'));
	
	    if (val === (val = input.val())) {return;}
	
	    // Enter new content into testSubject
	    var escaped = val.replace(/&/g, '&').replace(/\s/g,' ').replace(//g, '>');
	    testSubject.html(escaped);
	    // Calculate new width + whether to change
	    var testerWidth = testSubject.width(),
	        newWidth = (testerWidth + o.comfortZone) >= minWidth ? testerWidth + o.comfortZone : minWidth,
	        currentWidth = input.width(),
	        isValidWidthChange = (newWidth = minWidth)
	                             || (newWidth > minWidth && newWidth < maxWidth);
	
	    // Animate width
	    if (isValidWidthChange) {
	        input.width(newWidth);
	    }


  };
  $.fn.resetAutosize = function(options){
    // alert(JSON.stringify(options));
    var minWidth =  $(this).data('minwidth') || options.minInputWidth || $(this).width(),
        maxWidth = $(this).data('maxwidth') || options.maxInputWidth || ($(this).closest('.tagsinput').width() - options.inputPadding),
        val = '',
        input = $(this),
        testSubject = $('').css({
            position: 'absolute',
            top: -9999,
            left: -9999,
            width: 'auto',
            fontSize: input.css('fontSize'),
            fontFamily: input.css('fontFamily'),
            fontWeight: input.css('fontWeight'),
            letterSpacing: input.css('letterSpacing'),
            whiteSpace: 'nowrap'
        }),
        testerId = $(this).attr('id')+'_autosize_tester';
    if(! $('#'+testerId).length > 0){
      testSubject.attr('id', testerId);
      testSubject.appendTo('body');
    }

    input.data('minwidth', minWidth);
    input.data('maxwidth', maxWidth);
    input.data('tester_id', testerId);
    input.css('width', minWidth);
  };
  
	$.fn.addTag = function(value,options) {
			options = jQuery.extend({focus:false,callback:true},options);
			this.each(function() { 
				var id = $(this).attr('id');

				var tagslist = $(this).val().split(delimiter[id]);
				if (tagslist[0] == '') { 
					tagslist = new Array();
				}

				value = jQuery.trim(value);
		
				if (options.unique) {
					var skipTag = $(this).tagExist(value);
					if(skipTag == true) {
					    //Marks fake input as not_valid to let styling it
    				    $('#'+id+'_tag').addClass('not_valid');
    				}
				} else {
					var skipTag = false; 
				}
				
				if (value !='' && skipTag != true) { 
                    $('<span>').addClass('tag').append(
                        $('<span>').text(value).append('&nbsp;&nbsp;'),
                        $('<a class="tagsinput-remove-link">', {
                            href  : '#',
                            title : 'Remove tag',
                            text  : ''
                        }).click(function () {
                            return $('#' + id).removeTag(escape(value));
                        })
                    ).insertBefore('#' + id + '_addTag');

					tagslist.push(value);
				
					$('#'+id+'_tag').val('');
					if (options.focus) {
						$('#'+id+'_tag').focus();
					} else {		
						$('#'+id+'_tag').blur();
					}
					
					$.fn.tagsInput.updateTagsField(this,tagslist);
					
					if (options.callback &amp;&amp; tags_callbacks[id] &amp;&amp; tags_callbacks[id]['onAddTag']) {
						var f = tags_callbacks[id]['onAddTag'];
						f.call(this, value);
					}
					if(tags_callbacks[id] &amp;&amp; tags_callbacks[id]['onChange'])
					{
						var i = tagslist.length;
						var f = tags_callbacks[id]['onChange'];
						f.call(this, $(this), tagslist[i-1]);
					}					
				}
		
			});		
			
			return false;
		};
		
	$.fn.removeTag = function(value) { 
			value = unescape(value);
			this.each(function() { 
				var id = $(this).attr('id');
	
				var old = $(this).val().split(delimiter[id]);
					
				$('#'+id+'_tagsinput .tag').remove();
				str = '';
				for (i=0; i= 0); //true when tag exists, false when not
	};
	
	// clear all existing tags and import new ones from a string
	$.fn.importTags = function(str) {
                id = $(this).attr('id');
		$('#'+id+'_tagsinput .tag').remove();
		$.fn.tagsInput.importTags(this,str);
	}
		
	$.fn.tagsInput = function(options) { 
    var settings = jQuery.extend({
      interactive:true,
      defaultText:'',
      minChars:0,
      width:'',
      height:'',
      autocomplete: {selectFirst: false },
      'hide':true,
      'delimiter':',',
      'unique':true,
      removeWithBackspace:true,
      placeholderColor:'#666666',
      autosize: true,
      comfortZone: 20,
      inputPadding: 6*2
    },options);

		this.each(function() { 
			if (settings.hide) { 
				$(this).hide();				
			}
			var id = $(this).attr('id');
			if (!id || delimiter[$(this).attr('id')]) {
				id = $(this).attr('id', 'tags' + new Date().getTime()).attr('id');
			}
			
			var data = jQuery.extend({
				pid:id,
				real_input: '#'+id,
				holder: '#'+id+'_tagsinput',
				input_wrapper: '#'+id+'_addTag',
				fake_input: '#'+id+'_tag'
			},settings);
	
			delimiter[id] = data.delimiter;
			
			if (settings.onAddTag || settings.onRemoveTag || settings.onChange) {
				tags_callbacks[id] = new Array();
				tags_callbacks[id]['onAddTag'] = settings.onAddTag;
				tags_callbacks[id]['onRemoveTag'] = settings.onRemoveTag;
				tags_callbacks[id]['onChange'] = settings.onChange;
			}
	
            var containerClass = $('#'+id).attr('class').replace('tagsinput', '');
			var markup = '<div id="'+id+'_tagsinput" class="tagsinput '+containerClass+'"><div class="tagsinput-add-container" id="'+id+'_addTag"><div class="tagsinput-add"></div>';
			
			if (settings.interactive) {
				markup = markup + '';
			}
			
			markup = markup + '</div></div>';
			
			$(markup).insertAfter(this);

			$(data.holder).css('width',settings.width);
			$(data.holder).css('min-height',settings.height);
			$(data.holder).css('height','100%');
	
			if ($(data.real_input).val()!='') { 
				$.fn.tagsInput.importTags($(data.real_input),$(data.real_input).val());
			}		
			if (settings.interactive) { 
				$(data.fake_input).val($(data.fake_input).attr('data-default'));
				$(data.fake_input).css('color',settings.placeholderColor);
		        $(data.fake_input).resetAutosize(settings);
		
				$(data.holder).bind('click',data,function(event) {
					$(event.data.fake_input).focus();
				});
			
				$(data.fake_input).bind('focus',data,function(event) {
					if ($(event.data.fake_input).val()==$(event.data.fake_input).attr('data-default')) { 
						$(event.data.fake_input).val('');
					}
					$(event.data.fake_input).css('color','#000000');		
				});
						
				if (settings.autocomplete_url != undefined) {
					autocomplete_options = {source: settings.autocomplete_url};
					for (attrname in settings.autocomplete) { 
						autocomplete_options[attrname] = settings.autocomplete[attrname]; 
					}
				
					if (jQuery.Autocompleter !== undefined) {
						$(data.fake_input).autocomplete(settings.autocomplete_url, settings.autocomplete);
						$(data.fake_input).bind('result',data,function(event,data,formatted) {
							if (data) {
								$('#'+id).addTag(data[0] + "",{focus:true,unique:(settings.unique)});
							}
					  	});
					} else if (jQuery.ui.autocomplete !== undefined) {
						$(data.fake_input).autocomplete(autocomplete_options);
						$(data.fake_input).bind('autocompleteselect',data,function(event,ui) {
							$(event.data.real_input).addTag(ui.item.value,{focus:true,unique:(settings.unique)});
							return false;
						});
					}
				
					
				} else {
						// if a user tabs out of the field, create a new tag
						// this is only available if autocomplete is not used.
						$(data.fake_input).bind('blur',data,function(event) { 
							var d = $(this).attr('data-default');
							if ($(event.data.fake_input).val()!='' &amp;&amp; $(event.data.fake_input).val()!=d) { 
								if( (event.data.minChars = $(event.data.fake_input).val().length)) )
									$(event.data.real_input).addTag($(event.data.fake_input).val(),{focus:true,unique:(settings.unique)});
							} else {
								$(event.data.fake_input).val($(event.data.fake_input).attr('data-default'));
								$(event.data.fake_input).css('color',settings.placeholderColor);
							}
							return false;
						});
				
				}
				// if user types a comma, create a new tag
				$(data.fake_input).bind('keypress',data,function(event) {
					if (event.which==event.data.delimiter.charCodeAt(0) || event.which==13 ) {
					    event.preventDefault();
						if( (event.data.minChars = $(event.data.fake_input).val().length)) )
							$(event.data.real_input).addTag($(event.data.fake_input).val(),{focus:true,unique:(settings.unique)});
					  	$(event.data.fake_input).resetAutosize(settings);
						return false;
					} else if (event.data.autosize) {
			            $(event.data.fake_input).doAutosize(settings);
            
          			}
				});
				//Delete last tag on backspace
				data.removeWithBackspace &amp;&amp; $(data.fake_input).bind('keydown', function(event)
				{
					if(event.keyCode == 8 &amp;&amp; $(this).val() == '')
					{
						 event.preventDefault();
						 var last_tag = $(this).closest('.tagsinput').find('.tag:last').text();
						 var id = $(this).attr('id').replace(/_tag$/, '');
						 last_tag = last_tag.replace(/[\s\u00a0]+x$/, '');
						 $('#' + id).removeTag(escape(last_tag));
						 $(this).trigger('focus');
					}
				});
				$(data.fake_input).blur();
				
				//Removes the not_valid class when user changes the value of the fake input
				if(data.unique) {
				    $(data.fake_input).keydown(function(event){
				        if(event.keyCode == 8 || String.fromCharCode(event.which).match(/\w+|[áéíóúÁÉÍÓÚñÑ,/]+/)) {
				            $(this).removeClass('not_valid');
				        }
				    });
				}
			} // if settings.interactive
		});
			
		return this;
	
	};
	
	$.fn.tagsInput.updateTagsField = function(obj,tagslist) { 
		var id = $(obj).attr('id');
		$(obj).val(tagslist.join(delimiter[id]));
	};
	
	$.fn.tagsInput.importTags = function(obj,val) {			
		$(obj).val('');
		var id = $(obj).attr('id');
		var tags = val.split(delimiter[id]);
		for (i=0; i&lt;tags.length; i++) { 
			$(obj).addTag(tags[i],{focus:false,callback:false});
		}
		if(tags_callbacks[id] &amp;&amp; tags_callbacks[id]['onChange'])
		{
			var f = tags_callbacks[id]['onChange'];
			f.call(obj, obj, tags[i]);
		}
	};

})(jQuery);

2)Css

/* tags input  */
.tagsinput {
    border: 1px solid #e3e6ed;
    border-radius: 6px;
   
    padding: 6px 1px 1px 6px;
    overflow-y: auto;
    text-align: left;
}
.tagsinput .tag {
    border-radius: 4px;
    background-color: #41cac0;
    color: #ffffff;
    cursor: pointer;
    margin-right: 5px;
    margin-bottom: 5px;
    overflow: hidden;
    line-height: 15px;
    padding: 6px 13px 8px 19px;
    position: relative;
    vertical-align: middle;
    display: inline-block;
    zoom: 1;
    *display: inline;
    -webkit-transition: 0.14s linear;
    -moz-transition: 0.14s linear;
    -o-transition: 0.14s linear;
    transition: 0.14s linear;
    -webkit-backface-visibility: hidden;
}
.tagsinput .tag:hover {
    background-color: #39b1a8;
    color: #ffffff;
    padding-left: 12px;
    padding-right: 20px;
}
.tagsinput .tag:hover .tagsinput-remove-link {
    color: #ffffff;
    opacity: 1;
    display: block\9;
}
.tagsinput input {
    background: transparent;
    border: none;
    color: #34495e;
    font-family: 'Lato', sans-serif;
    font-size: 14px;
    margin: 0px;
    padding: 0 0 0 5px;
    outline: 0;
    margin-right: 5px;
    margin-bottom: 5px;
    width: 12px;
}
.tagsinput-remove-link {
    bottom: 0;
    color: #ffffff;
    cursor: pointer;
    font-size: 12px;
    opacity: 0;
    padding: 7px 7px 5px 0;
    position: absolute;
    right: 0;
    text-align: right;
    text-decoration: none;
    top: 0;
    width: 100%;
    z-index: 2;
    display: none\9;
}
.tagsinput-remove-link:before {
    color: #ffffff;
    content: '\f00d';
    font-family: 'FontAwesome';
}
.tagsinput-add-container {
    vertical-align: middle;
    display: inline-block;
    zoom: 1;
    *display: inline;
}
.tagsinput-add {
    background-color: #d6dbdf;
    border-radius: 3px;
    color: #ffffff;
    cursor: pointer;
    margin-bottom: 5px;
    padding: 6px 9px;
    display: inline-block;
    zoom: 1;
    *display: inline;
    -webkit-transition: 0.25s;
    -moz-transition: 0.25s;
    -o-transition: 0.25s;
    transition: 0.25s;
    -webkit-backface-visibility: hidden;
}
.tagsinput-add:hover {
    background-color: #3bb8af;
}
.tagsinput-add:before {
    content: '\f067';
    font-family: 'FontAwesome';
}
.tags_clear {
    clear: both;
    width: 100%;
    height: 0px;
}

3)Usage

$('#giftsuggestionkey').tagsInput({
    
});
Advertisements

Javascript autocomplete

The html
autocomplete country script

window.onload = function() {
		AC.init("stateField");
	}
		
	
<div class="container">
		Country: 
</div>

The CSS

body {
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	background: #FFF;
	font-family: Arial;
	font-size: 20px;
}
.container {
	display: block;
	width: 300px;
	margin: 0 auto;
	padding: 30px 0 0 0;
}
#stateField {
	width: 300px;
	display: block;
	padding: 8px;
	border: solid 2px #999;
	font-size: 15px;
	margin: 10px 0 0 0;
}

#helper {
	display: block;
	position: absolute;
	left: 0;
	top: 0;
}
#helper a {
	display: block;
	width: 100%;
	padding: 10px;
	border-bottom: solid 1px #999;
	border-left: solid 1px #999;
	border-right: solid 1px #999;
	font-size: 12px;
	color: #000;
	text-decoration: none;
	background: #FFF;
}
#helper a:hover {
	background: #999;
	color: #FFF;
}

And Javascript File

var AutoCountry = {};
AutoCountry = function() {
	this.minChars = 1;
	this.field = null;
	this.countryLoopId = 0;
	this.helper = null;
	this.helperContent = "";
}
AutoCountry.prototype = {
	init:function(idOfTheField) {
		this.field = document.getElementById(idOfTheField);
		if(!this.field) {
			alert("Wrong input !");
		} else {
		
			this.createHelper();
			this.field.onkeyup = this.onFieldIn;
			this.field.onblur = this.onFieldOut;
		}
	},
	onFieldIn:function() {
	
		AC.loop();
	},
	onFieldOut:function() {
		clearTimeout(AC.countryLoopId);
		setTimeout("AC.hideHelper()", 600);
	},
	loop:function() {
		var list = "";
		var value = AC.field.value;
		if(value.length &gt;= this.minChars) {
			var numOfCountries = countries.length;
			for(var i=0; i&lt;numOfCountries; i++) {
				if(value.toLowerCase() == countries[i].substr(0, value.length).toLowerCase()) {
					list += '<a href="AC.setCountry(\'' + countries[i] + '\');">' + countries[i] + '</a>'
				}
			}
		}
		if(list != "") {
			if(this.helperContent != list) {
				this.helperContent = list;
				this.helper.innerHTML = this.helperContent;
			}
			this.showHelper();
		} else {
			this.hideHelper();
		}
		AC.countryLoopId = setTimeout("AC.loop()", 200);
	},
	setCountry:function(country) {
		this.field.value = country;
		this.hideHelper();
	},
	// helper
	createHelper:function() {
		this.helper = document.createElement("div");
		this.helper.style.width = (this.field.offsetWidth - 22) + "px";
		this.helper.setAttribute("id", "helper");
		this.helper.innerHTML = "";
		document.body.appendChild(this.helper);
		this.positionHelper();
		this.hideHelper();
	},
	positionHelper:function() {
		var position = {x:0, y:0};
		var e = this.field;
		while(e) {
			position.x += e.offsetLeft;
			position.y += e.offsetTop;
			e = e.offsetParent;
		}
		this.helper.style.left = position.x + "px";
		this.helper.style.top = (position.y + this.field.offsetHeight)+ "px";
	},
	showHelper:function() {
		this.helper.style.display = "block";
	},
	hideHelper:function() {
		this.helper.style.display = "none";
	}
}

var AC = new AutoCountry();

var countries = ["Alabama", "Alaska", "Arizona", "Arkansas", "California", "Colorado", "Connecticut","Delaware","District of Columbia","Florida","Georgia","Hawaii","Idaho","Illinois","Indiana","Iowa","Kansas","Kentucky","Louisiana","Maine","Maryland","Massachusettes","Michigan","Minnesota","Mississippi","Missouri","Montana","Nebraska","Nevada","New Hampshire","New Jersey","New Mexico","New York","North Carolina","North Dakota","Ohio","Oklahoma","Oregon","Pennsylvania","Rhode Island","South Carolina","South Dakota","Tennesse","Texas","Utah","Vermont","Virginia","Washington","West Virginia","Wisconsin","Wyoming"] 
;

Simple captcha validation using JQuery

1)Script

$(document).ready(function(){
$(‘#captchaform’).click(function(e){
e.preventDefault();
var firstcap = $(‘#firstcap’).val();
var secondcap = $(‘#secondcap’).val();
var total =$(‘#answercap’).val();
var sum = parseInt(firstcap) + parseInt(secondcap);
if(sum == total)
{
$(“#signinformindex”).submit();
}
else
{
$(“#messagecap”).html(“Captcha didn’t matched !”);
}
});
});

2)Html

<input type=”text” style=”width:20px !important” id=”firstcap” readonly value=”<?php echo rand(1,9);?>” />
+
<input type=”text” style=”width:20px !important” id=”secondcap” readonly value=”<?php echo rand(1,9);?>” /> =
<input type=”text” style=”width:20px !important” id=”answercap” />

Using php mailer instead of mail() function

require ‘PHPMailer/PHPMailerAutoload.php’;
$mail = new PHPMailer();
$mail->setFrom(‘zendcalendar@gmail.com’, ‘Admin’);
$mail->addReplyTo(‘zendcalendar@gmail.com’, ‘Admin’);
$mail->addAddress($to);
$mail->Subject = ‘Password Updated on Babyboom!’;
$mail->Body = ‘Password for babyboom has been updated! ‘;
$mail->send();

CakePHP/PHP Session lost on another controller or on redirect

The problem may be one of these
1)First of all check if session.start is set to true in app/config/core.php

The problem arises when session has not been started in other controller or the view/method you are redirected to

2)Try adding seesion_start(); in the beforeFilter of controller you are redirected to.
Or may be one or all of below in core.php file
Configure::write(‘Security.cookie’, ‘cakephpfdebackend’);
Configure::write(‘Session.cookieTimeout’, 0);
Configure::write(‘Session.checkAgent’, false);
Configure::write(‘Session.cookie_secure’,false);
Configure::write(‘Session.referer_check’ ,false);
Configure::write(‘Session.defaults’, ‘php’);

I would say check if the session has started or not

In core php

1)Please check if seesion is started on top of page,check session id if it is changing on redirect.

2)Check header(location );
The url passed shouldn’t contain the protocol information i.e.http or https