Boostrap Auto Suggestion

In this code we will do three things:

  1. We will  make Ajax call to get suggestion remotely
  2. Place the Suggestion in input box
  3. After that It will  call a remote ajax call to get the relevant data for the particular suggestion

HTML FORM

 <input id="cc_pay_to_name" class="typeahead form-control" step="any" type="text" placeholder="Enter Full Legal Name" />

JAVASCRIPT

$('input.typeahead').typeahead({
minLength: 3,
source: function (query, process) {
return $.get('check.php?action=getPayeeNameSuggestion', { query: query }, function (data) {
console.log(data);
data = $.parseJSON(data);

return process(data);
});
},
updater: function (data) {
console.log(data);
getPayeeInformation(data.id);
//alert(JSON.parse(data).id);
//return JSON.parse(data).name;
}

});

function getPayeeInformation(id)
{
$.getJSON(“action.php?action=getPayeeInformation&payee_id=” + id, function (data) {
$(“#cc_pay_to_name”).val(data.name);
$(“#cc_address_1”).val(data.address_1);
$(“#cc_address_2”).val(data.address_2);
$(“#cc_city”).val(data.city);
$(“#cc_state”).val(data.state);
$(“#cc_zip”).val(data.zip);

});
}

Replace Tab to Enter

<script>
// REPLACE THE TASK OF ENTER
jQuery.extend(jQuery.expr[‘:’], {
focusable: function (el, index, selector) {
return $(el).is(‘a, button, :input, [tabindex]’);
}
});

$(document).on(‘keypress’, ‘input,select’, function (e) {
if (e.which == 13) {
e.preventDefault();
// Get all focusable elements on the page
var $canfocus = $(‘:focusable’);
var index = $canfocus.index(this) + 1;
if (index >= $canfocus.length) index = 0;
$canfocus.eq(index).focus();

$canfocus.eq(index).select();
}
});
$(document).ready(function() {
var $header = $(“header”),
$clone = $header.before($header.clone().addClass(“clone”));

$(window).on(“scroll”, function() {
var fromTop = $(window).scrollTop();
$(“body”).toggleClass(“down”, (fromTop > 400));
});
});

আপনি কেন jQuery শিখবেন

আপনি কেন jQuery শিখবেন 😊
===============================================

jQuery কোন প্রোগ্রামিং ল্যাঙ্গুয়েজের নাম নয় … কেউ কেউ আবার এটাকে জাভাস্ক্রিপ্ট ফ্রেমওয়ার্ক মনে করেও ভুল করেন … jQuery জাভাস্ক্রিপ্টের কোন ফ্রেমওয়ার্কের নাম নয় … JQuery is simply a specific library of JavaScript codes nothing else …

.

jQuery এর প্রাইমারি ফোকাস হল ডেভেলপমেন্টের টাইম স্প্যান কমানো … উদাহরণ হিসেবে, ধরা যাক, আমাদের HTML এ একটা প্যারাগ্রাফ p ট্যাগ রয়েছে যার ক্লাসের নাম dmsumon … পেইজ লোড হবার পরে DOM ম্যানিপুলেট করে তাতে একটা নতুন ক্লাস dms_selected যোগ করতে চাই …

.
.

<p class=”dmsumon”>If you don’t code much you’d be forgiven</p>

পেইজ লোড হবার পর তা হবে …

<p class=”dmsumon dms_selected”>If you don’t code much you’d be forgiven</p>

.
.

এ কাজের জন্য আমাকে নিচের মত JS কোড লিখতে হবে …

var d = document.getElementsByClassName(“dmsumon”);

var i;

for (i = 0; i < d.length; i++) {

d[i].className = d[i].className + ” dms_selected”;

}

.
.

বেশ কঠিন তাই না ? … আর jQuery তে একই কাজ achieve করতে কোড লিখতে হবে নিচের মত …

$(“.dmsumon”).addClass( “dms_selected” );

.
.

৫ লাইনের কোড ১ লাইনে শেষ … তাই jQuery অনেক টাইম সেভিং … বড় প্রজেক্টের ক্ষেত্রে হয়তো বা ২০০ লাইনের জাভাস্ক্রিপ্ট কোড ১০০ এরও কম লাইনের কোড লিখতে হবে jQuery তে, ক্ষেত্র বিশেষে আরও কম … কিনতু তার মানে এই না যে আপনি JS শিখবেন না বা jQuery is better than JS … দু’ টারই সুবিধা-অসুবিধা রয়েছে …

.
.
.

এক নজরে jQuery এর সুবিধা সমূহ 😊
===============================================

১) জাভাস্ক্রিপ্টের এর তুলনায় শেখা অনেক সহজ … অনেক কম সময় লাগে …

২) ডেভেলপমেন্টের কাজ দ্রুততর করে …

.

৩) jQuery প্লাগিন সাপোর্ট করে … ইচ্ছেমত প্লাগিন বানিয়ে নেয়া যায় বা মার্কেটে হাজার হাজার ফ্রি প্লাগিন পাওয়া যায় … যা দিয়ে খুব সহজে প্রফেশনাল কাজ করা যায় … যেমনঃ আমার অনেক প্রোজেক্টে MixItUp jQuery প্লাগিন ব্যবহার করেছি … দেখে আসতে পারেন https://goo.gl/UGveqJ

.
.

৪) jQuery এর আরেকটি সবচেয়ে বড় সুবিধা হল … jQuery has been optimized to work with a variety of browsers automatically … ক্রস ব্রাউজার সাপোর্ট jQuery এর বিশাল এক আশীর্বাদ … কারণ jQuery কে সেভাবে অপটিমাইজড করেই ডেভেলপ করা হয়েছে …

.
.

একটা জাভাস্ক্রিপ্টের কোড স্ট্যাক ক্রস ব্রাউজার compatible করতে যথেষ্ট পরিশ্রম দিতে হবে … অনেক সময় তা মাথা ব্যথার কারণও হতে পারে …

হয়তো দেখা গেল কোড Mozilla তে ঠিকঠাক মত কাজ করছে কিনতু IE বা Chrome এ করছে না, বেশ ঝামেলা করছে … অন্যদিকে jQuery এই ঝামেলা মুক্ত … আপনার সেই টেনশন কমিয়ে দেবে ৯৯% …

.
.

৫) আজকাল সকল মডার্ন ব্রাউজারেই jQuery প্রায় পিউর JavaScript এর মতই ফাস্ট কাজ করে …

৬) Ajax সাপোর্ট করে …

৭) JavaScript দিয়ে বিভিন্ন সুন্দর সুন্দর এনিমেশন তৈরি করা যেখানে বেশ পেইনফুল … jQuery তে জাস্ট পিস অফ কেক …

.
.
.

এক নজরে jQuery এর কিছু অসুবিধা সমূহ 😊
===============================================

১) jQuery এর সবচেয়ে বড় অসুবিধা হইল … এটা ব্যবহার করতে হলে পেইজে পুরো jQuery লাইব্রেরিটা ডাউনলোড করতে হয় … যখন আমি লেখাটা লিখছি তখন পর্যন্ত সবচেয়ে লেটেস্ট jQuery লাইব্রেরির মিনিফাইড ভার্সনের সাইজ এরাউন্ড 82 KB …

.

আর এই বিশাল ডাটার বলতে গেলে বেশিরভাগই আপনি ব্যবহার না করলেও লোড করছেন … এটাই যে কোন লাইব্রেরি আর ফ্রেমওয়ার্কের সবচেয়ে বড় অসুবিধা গুলোর মাঝে একটি … আপনি যে অংশ ব্যবহার করছেন না তাও লোড করে সার্ভার রিসোর্সকে বিজি রাখছেন …

.

82 KB হয়তোবা আপনার কাছে সাইজের ক্ষেত্রে সাহারা মরুভূমির একটা বালি কণা মনে হতে পারে … কিনতু ওয়েবের পারফরমেন্সের ক্ষেত্রে এভরি সিঙ্গেল বাইটস ম্যাটারস …

.
.

২) অনেক ক্ষেত্রেই ভাল কোডিং করলে পিউর জাভাস্ক্রিপ্টের পারফরমেন্স jQuery থেকে অনেক বেশি ভালো হতে পারে … যেমন এই লিংকে যানhttps://goo.gl/XCgMcg … একটু নিচের দিকে Run tests বাটনে ক্লিক করে পারফরমেন্স দেখে আসতে পারেন …

.
.
.

সে যাই হোক মডার্ন ওয়েব ডেভেলপমেন্ট সেক্টরে jQuery এখন অবিচ্ছেদ্য অংশ … ওয়েব ডেভেলপমেন্টে ক্যারিয়ার গড়তে চাইলে আজ হোক কাল হোক jQuery শিখে ফেলা উচিত … Wikipedia এর মত বিশ্বের শীর্ষ ১০ হাজার ওয়েবসাইটের মাঝে ৫৫%-ই jQuery পাওয়ারড 😃

.
.
.

বিভিন্ন প্রোজেক্টে jQuery ব্যবহার করছে এমন কিছু ওয়েব জায়ান্ট …
==============================================

Microsoft, Google, WordPress, IBM, Adobe etc … ইউজার লিস্টে যখন Google বা Microsoft এর মত জায়ান্টদের নাম এসে যায় তাতেই বুঝা যায় jQuery এর পাওয়ার কতটা …

.
.

jQuery শেখা নিয়ে সবার মাঝে সবচেয়ে কমন যে তিনটি প্রশ্ন চলে আসে 😊
===============================================

প্রশ্নঃ jQuery শিখতে কি আগে JavaScript জানা থাকা লাগে ? 😌

উত্তরঃ আসলে jQuery শিখতে আগে থেকে JavaScript জানা না থাকলেও চলবে … তবে জানা থাকলে অনেক সুবিধা …

.
.

প্রশ্নঃ কোনটা শিখব jQuery নাকি JavaScript? 😢

উত্তরঃ এটার আসলে কোন নির্দিষ্ট উত্তর নেই … এটা পুরোটাই আপনার চাহিদা বা আপনি কি ধরণের কাজ করবেন তার উপর নির্ভর করে … আমার পরামর্শ আপনি দু’ টোই শিখুন …

.
.

প্রশ্নঃ তবে আমি কি আগে JavasScript শিখব নাকি jQuery 😥

উত্তরঃ সেইম কথা এটার কোন নির্দিষ্ট উত্তর নেই … যেহেতু আমি আগেই বলেছি jQuery শিখতে JavaScript আগে থেকে জানা লাগে না, তবে কিছু জানা থাকলে ভালো …

.

এখন আপনি যদি চান আপনি যে jQuery লাইব্রেরি দিয়ে কাজ করছেন তার প্রতিটা ফাংশন কিভাবে কাজ করছে … ইনস এন্ড আউটস সব বুঝতে চান … তাহলে আগে JavaScript দিয়ে শুরু করতে পারেন …

.

নয়তো আপনি আগে jQuery দিয়ে শুরু করেন বা JavaScript দিয়ে … আপনার হারানোর কিছুই নেই …

.
.
.

jQuery শেখার কিছু রিসোর্স 😊
===============================================

১) jQuery তে আমার হাতেখড়ি ২০১২ তে আমার গুরু Jeffrey Way এর হাত ধরে … উনার একটি ফ্রি অনলাইন কোর্স থেকে … এখনও আমার কাছে jQuery শেখার ওয়ান অফ দ্যা বেস্ট রিসোর্স … জাস্ট প্রতিদিন ৩০ মিনিট করে ৩০ দিনের কোর্স …

30 Days to Learn jQuery with Jeffrey Way → https://goo.gl/uP6iEL

.
.

২) CodeAcademy → https://goo.gl/xBw9Ky

২) Try jQuery → http://goo.gl/rjRnZd

.
.

Some good books on jQuery 😊
===============================================

1) Head First jQuery :: by Ryan Benedetti

2) jQuery in Action :: by Bear Bibeault

3) Learning jQuery by :: Jonathan Chaffer

4) jQuery, jQuery UI, and jQuery Mobile :: by Adriaan de Jonge

.
.

5) Pro jQuery :: by Adam Freeman

6) jQuery Cookbook :: by Cody Lindley

7) Web Design with HTML, CSS, JavaScript and jQuery Set :: by Jon Duckett

8) A Software Engineer Learns HTML5, JavaScript and jQuery :: by Dane Cameron

9) JavaScript and JQuery :: by Jon Duckett

.
.

পুনশ্চঃ আপনি JavaScript কে jQuery এর পিতা বলতে পারেন … যদিও এটা জাস্ট জাভাস্ক্রিপ্ট কোড লাইব্রেরি … তথাপি এটার কিছু লিমিটেশন অবশ্যই আছে … এর প্যারেন্ট ল্যাঙ্গুয়েজ অনেক কিছুই করতে পারে যা সে করতে পারে না …

.

Last of all … Though jQuery is quick to learn, but it is always difficult to master 😊

Countdown & interval based example

 

var countdown = $(“#countdown”).countdown360({
radius : 100,
seconds : 120,
fontColor : ‘#FFFFFF’,
autostart : false,
onComplete : function () { console.log(‘done’) }
});
countdown.start();

$(document).on(“click”,”button”,function(e){
e.preventDefault();
var type = $(this).attr(“data-type”);
if(type === “time-remaining”)
{
var timeRemaining = countdown.getTimeRemaining();
alert(timeRemaining);
}
else
{
var timeElapsed = countdown.getElapsedTime();
alert(timeElapsed);
}
});

$(function() {
var nre = setInterval(checkit, 5000);
function checkit(){
$.ajax({
url: ‘url’,
dataType: ‘json’,
cache: true,
timeout: 300000,
success: function(data) {

// $(‘#output ul’).append(‘<li>The feed loads fine’);
$.each(data, function(i,datas){
if(datas.status==”Pending”)
{
$(‘#output’).append(“….”);
}
else
{

$(‘#output’).html(“Your Order Accepted and you are going to recived it within “+datas.comment);
clearInterval(nre);
}

});

},
error: function(){
$(‘#output ul’).append(‘<li>Error’);
}
});

}
});

Jquery onchange value change

var bankinfo= {};
bankinfo[‘BRAC’] = 1;
bankinfo[‘HSBC’] = 1;
bankinfo[‘ICBI’] = 2;
bankinfo[‘HSBC’] = 2;
bankinfo[‘ABBL’] = 82;

$(‘.dynamicselect’).bind(‘change’, function () { // bind change event to select
var bankname = $(this).val();

$(‘#rate’).val(bankinfo[bankname]);

});

Sample Jquery

<script>
function confirmPayment(){
$(‘#modal_payment_amount’).html ($(‘#payment_amount’).val());
$(‘#modal_reseller_name’).html ($(‘#reseller_name’).val());
$(‘#modal_payment_memo’).html ($(‘#payment_memo’).val());
}

function makePayment(){

var amount = $(‘#payment_amount’).val();
var pin = $(‘#payment_pin’).val();
var reseller_id = $(‘#reseller_id’).val();
var data1 = “action=add&reseller_id=”+reseller_id+”&amount=”+amount+”&pin=”+pin ;

$.ajax({
type: ‘POST’,
url: “paymentaction.php”,
data: data1,
success: function(mes) {
$(“#myDiv”).html(mes);
},

});

;
}