jQuery

jQuery : Disable and Enable Selected Options in DropDownList

Snippets

To disable the selected option from select input element, following piece of code can be used,

$("#selectid option:selected").attr('disabled','disabled');

1	$("#selectid option:selected").attr('disabled','disabled');

and to enable an option that is disabled already,

$("#selectid option[value="somevalue"]").removeAttr('disabled');

1	$("#selectid option[value="somevalue"]").removeAttr('disabled');

In this example, let us have one div for each option of select element with the option text and a remove link which

Snippets

The Hypertext Transfer Protocol (HTTP) is an application-level protocol for distributed, collaborative, hypermedia information systems. This is the foundation for data communication for the World Wide Web (i.e. internet) since 1990. HTTP is a generic and stateless protocol which can be used for other purposes as well using extensions of

Snippets

The XMLHttpRequest object is used to exchange data with a server.

To send a request to a server, we use the open() and send() methods of the XMLHttpRequest object:

xhttp.open("GET", "ajax_info.txt", true);
xhttp.send();

1 2	xhttp.open("GET", "ajax_info.txt", true); xhttp.send();

<html>
<head>
<script>
function showHint(str) {
    if (str.length == 0) {
        document.getElementById("txtHint").innerHTML = "";
        return;
    } else {
        var xmlhttp = new XMLHttpRequest();
        xmlhttp.onreadystatechange = function() {
            if (this.readyState == 4 && this.status == 200) {
                document.getElementById("txtHint").innerHTML = this.responseText;
            }
        };
        xmlhttp.open("GET", "gethint.php?q=" + str, true);
        xmlhttp.send();
    }
}
</script>
</head>
<body>

<p><b>Start typing a name in the input field below:</b></p>
<form>
First name: <input type="text" onkeyup="showHint(this.value)">
</form>
<p>Suggestions: <span id="txtHint"></span></p>
</body>
</html>

<html>

<head>

function showHint(str) {

if (str.length == 0) {

document.getElementById("txtHint").innerHTML = "";

return;

} else {

var xmlhttp = new XMLHttpRequest();

xmlhttp.onreadystatechange = function() {

if (this.readyState == 4 && this.status == 200) {

document.getElementById("txtHint").innerHTML = this.responseText;

}

};

xmlhttp.open("GET", "gethint.php?q=" + str, true);

xmlhttp.send();

}

</script>

</head>

<body>

<p><b>Start typing a name in the input field below:</b></p>

<form>

First name: <input type="text" onkeyup="showHint(this.value)">

</form>

<p>Suggestions: <span id="txtHint"></span></p>

</body>

</html>

Snippets

window.addEventListener('load', () => {
				// noinspection JSUnresolvedVariable
				let audioCtx = new (window.AudioContext || window.webkitAudioContext)();
				let xhr = new XMLHttpRequest();
				xhr.open('GET', 'audio-autoplay.wav');
				xhr.responseType = 'arraybuffer';
				xhr.addEventListener('load', () => {
					let playsound = (audioBuffer) => {
						let source = audioCtx.createBufferSource();
						source.buffer = audioBuffer;
						source.connect(audioCtx.destination);
						source.loop = false;
						source.start();

						setTimeout(function () {
							let t = document.createElement('p');
							t.appendChild(document.createTextNode((new Date()).toLocaleString() + ': Sound played'));
							document.querySelector('.output').appendChild(t);
							playsound(audioBuffer);
						}, 1000 + Math.random()*2500);
					};

					audioCtx.decodeAudioData(xhr.response).then(playsound);
				});
				xhr.send();
			});

window.addEventListener('load', () => {

// noinspection JSUnresolvedVariable

let audioCtx = new (window.AudioContext || window.webkitAudioContext)();

let xhr = new XMLHttpRequest();

xhr.open('GET', 'audio-autoplay.wav');

xhr.responseType = 'arraybuffer';

xhr.addEventListener('load', () => {

let playsound = (audioBuffer) => {

let source = audioCtx.createBufferSource();

source.buffer = audioBuffer;

source.connect(audioCtx.destination);

source.loop = false;

source.start();

setTimeout(function () {

let t = document.createElement('p');

t.appendChild(document.createTextNode((new Date()).toLocaleString() + ': Sound played'));

document.querySelector('.output').appendChild(t);

playsound(audioBuffer);

}, 1000 + Math.random()*2500);

};

audioCtx.decodeAudioData(xhr.response).then(playsound);

});

xhr.send();

});

Snippets

function ajaxCall() {
    this.send = function(data, url, method, success, type) {
        type = type || 'json';
        var successRes = function(data) {
            success(data);
        };

        var errorRes = function(e) {
            console.log(e);
            alert("Error found \nError Code: " + e.status + " \nError Message: " + e.statusText);
        };
        $.ajax({
            url: url,
            type: method,
            data: data,
            success: successRes,
            error: errorRes,
            dataType: type,
            timeout: 60000
        });

    }

}

function locationInfo(rootUrl) {
    // TODO:: BASE URL
    //var rootUrl = "https://healthxe.com/home/dropdownapi";
    var call = new ajaxCall();
    this.getCities = function(id) {
        $(".cities option:gt(0)").remove();
        var url = rootUrl + 'home/dropdownapi?type=getCities&stateId=' + id;
        var method = "post";
        var data = {};
        $('.cities').find("option:eq(0)").html("Please wait..");
        call.send(data, url, method, function(data) {
            $('.cities').find("option:eq(0)").html("Select City");
            if (data.tp == 1) {
                $.each(data['result'], function(key, val) {
                    var option = $('<option />');
                    option.attr('value', key).text(val);
                    $('.cities').append(option);
                    $('.cities').trigger("chosen:updated");
                });
                $(".cities").prop("disabled", false);
            } else {
                alert(data.msg);
            }
        });
    };

    this.getStates = function(id) {
        $(".states option:gt(0)").remove();
        $(".cities option:gt(0)").remove();
        var url = rootUrl + 'home/dropdownapi?type=getStates&countryId=' + id;
        var method = "post";
        var data = {};
        $('.states').find("option:eq(0)").html("Please wait..");
        call.send(data, url, method, function(data) {
            $('.states').find("option:eq(0)").html("Select State");
            if (data.tp == 1) {
                $.each(data['result'], function(key, val) {
                    var option = $('<option />');
                    option.attr('value', key).text(val);
                    $('.states').append(option);
                    $('.states').trigger("chosen:updated");
                });
                $(".states").prop("disabled", false);
            } else {
                alert(data.msg);
            }
        });
    };

    this.getCountries = function() {
        var url = rootUrl + 'home/dropdownapi?type=getCountries';
        var method = "post";
        var data = {};
        $('.countries').find("option:eq(0)").html("Please wait..");
        call.send(data, url, method, function(data) {
            $('.countries').find("option:eq(0)").html("Select Country");
            //            console.log(data);
            if (data.tp == 1) {
                $.each(data['result'], function(key, val) {
                    var option = $('<option />');
                    option.attr('value', key).text(val);
                    $('.countries').append(option);
                    $('.countries').trigger("chosen:updated");
                });
                $(".countries").prop("disabled", false);

            } else {
                alert(data.msg);
            }
        });
    };

}

function ajaxCall() {

this.send = function(data, url, method, success, type) {

type = type || 'json';

var successRes = function(data) {

success(data);

};

var errorRes = function(e) {

console.log(e);

alert("Error found \nError Code: " + e.status + " \nError Message: " + e.statusText);

};

$.ajax({

url: url,

type: method,

data: data,

success: successRes,

error: errorRes,

dataType: type,

timeout: 60000

});

}

function locationInfo(rootUrl) {

// TODO:: BASE URL

//var rootUrl = "https://healthxe.com/home/dropdownapi";

var call = new ajaxCall();

this.getCities = function(id) {

$(".cities option:gt(0)").remove();

var url = rootUrl + 'home/dropdownapi?type=getCities&stateId=' + id;

var method = "post";

var data = {};

$('.cities').find("option:eq(0)").html("Please wait..");

call.send(data, url, method, function(data) {

$('.cities').find("option:eq(0)").html("Select City");

if (data.tp == 1) {

$.each(data['result'], function(key, val) {

var option = $('<option />');

option.attr('value', key).text(val);

$('.cities').append(option);

$('.cities').trigger("chosen:updated");

});

$(".cities").prop("disabled", false);

} else {

alert(data.msg);

}

});

};

this.getStates = function(id) {

$(".states option:gt(0)").remove();

$(".cities option:gt(0)").remove();

var url = rootUrl + 'home/dropdownapi?type=getStates&countryId=' + id;

var method = "post";

var data = {};

$('.states').find("option:eq(0)").html("Please wait..");

call.send(data, url, method, function(data) {

$('.states').find("option:eq(0)").html("Select State");

if (data.tp == 1) {

$.each(data['result'], function(key, val) {

var option = $('<option />');

option.attr('value', key).text(val);

$('.states').append(option);

$('.states').trigger("chosen:updated");

});

$(".states").prop("disabled", false);

} else {

alert(data.msg);

}

});

};

this.getCountries = function() {

var url = rootUrl + 'home/dropdownapi?type=getCountries';

var method = "post";

var data = {};

$('.countries').find("option:eq(0)").html("Please wait..");

call.send(data, url, method, function(data) {

$('.countries').find("option:eq(0)").html("Select Country");

// console.log(data);

if (data.tp == 1) {

$.each(data['result'], function(key, val) {

var option = $('<option />');

option.attr('value', key).text(val);

$('.countries').append(option);

$('.countries').trigger("chosen:updated");

});

$(".countries").prop("disabled", false);

} else {

alert(data.msg);

}

});

};

}

Snippets

function slugify(text)
{
  return text.toString().toLowerCase()
    .replace(/\s+/g, '-')           // Replace spaces with -
    .replace(/[^\w\-]+/g, '')       // Remove all non-word chars
    .replace(/\-\-+/g, '-')         // Replace multiple - with single -
    .replace(/^-+/, '')             // Trim - from start of text
    .replace(/-+$/, '');            // Trim - from end of text
}

function slugify(text)

{

return text.toString().toLowerCase()

.replace(/\s+/g, '-') // Replace spaces with -

.replace(/[^\w\-]+/g, '') // Remove all non-word chars

.replace(/\-\-+/g, '-') // Replace multiple - with single -

.replace(/^-+/, '') // Trim - from start of text

.replace(/-+$/, ''); // Trim - from end of text

}

Snippets

/*Usage
 * var request = getHTTPObject();
 * if(request){
 * AJAX CODE HERE
 * }
 * 
 * If getHTTPObject returns false, the browser isn't Ajax compatible. The if 
 * statement checks to see if it exists, then runs the code.
 */
function getHTTPObject() {
	var xhr = false;//set to false, so if it fails, do nothing
	if(window.XMLHttpRequest) {//detect to see if browser allows this method
		var xhr = new XMLHttpRequest();//set var the new request
	} else if(window.ActiveXObject) {//detect to see if browser allows this method
		try {
			var xhr = new ActiveXObject("Msxml2.XMLHTTP");//try this method first
		} catch(e) {//if it fails move onto the next
			try {
				var xhr = new ActiveXObject("Microsoft.XMLHTTP");//try this method next
			} catch(e) {//if that also fails return false.
				xhr = false;
			}
		}
	}
	return xhr;//return the value of xhr
}

/*Usage

* var request = getHTTPObject();

* if(request){

* AJAX CODE HERE

* }

* If getHTTPObject returns false, the browser isn't Ajax compatible. The if

* statement checks to see if it exists, then runs the code.

function getHTTPObject() {

var xhr = false;//set to false, so if it fails, do nothing

if(window.XMLHttpRequest) {//detect to see if browser allows this method

var xhr = new XMLHttpRequest();//set var the new request

} else if(window.ActiveXObject) {//detect to see if browser allows this method

try {

var xhr = new ActiveXObject("Msxml2.XMLHTTP");//try this method first

} catch(e) {//if it fails move onto the next

try {

var xhr = new ActiveXObject("Microsoft.XMLHTTP");//try this method next

} catch(e) {//if that also fails return false.

xhr = false;

}

return xhr;//return the value of xhr

}

function loadDoc() {
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      document.getElementById("demo").innerHTML = this.responseText;
    }
  };
  xhttp.open("GET", "ajax_info.txt", true);
  xhttp.send();
}

function loadDoc() {

var xhttp = new XMLHttpRequest();

xhttp.onreadystatechange = function() {

if (this.readyState == 4 && this.status == 200) {

document.getElementById("demo").innerHTML = this.responseText;

}

};

xhttp.open("GET", "ajax_info.txt", true);

xhttp.send();

}

// Get file
function grabFile(file) {
  var request = getHTTPObject();
  //GET
  if (request) {
    request.open('GET', file, true);
    request.send(null);
    request.onreadystatechange = function(){
      if (request.readyState != 4) return false;
      if (request.status == 200 || request.status == 304) {
        console.log(request.responseText);
      }
    };
  }
}

// Get file

function grabFile(file) {

var request = getHTTPObject();

//GET

if (request) {

request.open('GET', file, true);

request.send(null);

request.onreadystatechange = function(){

if (request.readyState != 4) return false;

if (request.status == 200 || request.status == 304) {

console.log(request.responseText);

}

};

}

Snippets

$("form#data").submit(function(){

    var formData = new FormData($(this)[0]);

    $.ajax({
        url: window.location.pathname,
        type: 'POST',
        data: formData,
        async: false,
        success: function (data) {
            alert(data)
        },
        cache: false,
        contentType: false,
        processData: false
    });

    return false;
});

$("form#data").submit(function(){

var formData = new FormData($(this)[0]);

$.ajax({

url: window.location.pathname,

type: 'POST',

data: formData,

async: false,

success: function (data) {

alert(data)

cache: false,

contentType: false,

processData: false

});

return false;

});

Short Version

$("form#data").submit(function() {
    var formData = new FormData($(this)[0]);
    $.post($(this).attr("action"), formData, function(data) {
        alert(data);
    });
    return false;
});

$("form#data").submit(function() {

var formData = new FormData($(this)[0]);

$.post($(this).attr("action"), formData, function(data) {

alert(data);

});

return false;

});

$.ajax({
    url: 'php/upload.php',
    data: $('#file').attr('files'),
    cache: false,
    contentType: 'multipart/form-data',
    processData: false,
    type: 'POST',
    success: function(data){
        alert(data);
    }
});

$.ajax({

url: 'php/upload.php',

data: $('#file').attr('files'),

cache: false,

contentType: 'multipart/form-data',

processData: false,

type: 'POST',

success: function(data){

alert(data);

}

});

Snippets

HTML

<div class="container">
  <p>This captcha will scale when the browser window is smaller than its current width (304 px)</p>  
  <form action="" method="get">
    <div class="g-recaptcha" data-sitekey="6SSSSSSBIgEAplK2EWsVFkaE5o0DWUpsIs"></div>
  </form>
</div>

<p>This captcha will scale when the browser window is smaller than its current width (304 px)</p>

</form>

</div>

CSS

* {
  box-sizing: border-box;
}

.container {
  max-width: 300px;
  background: #ccc;
  padding: 20px;
}

.g-recaptcha {
  transform-origin: left top;
  -webkit-transform-origin: left top;
}

* {

box-sizing: border-box;

}

.container {

max-width: 300px;

background: #ccc;

padding: 20px;

}

.g-recaptcha {

transform-origin: left top;

-webkit-transform-origin: left top;

}

Script

// Resize reCAPTCHA to fit width of container
// Since it has a fixed width, we're scaling
// using CSS3 transforms
// ------------------------------------------
// captchaScale = containerWidth / elementWidth

function scaleCaptcha(elementWidth) {
  // Width of the reCAPTCHA element, in pixels
  var reCaptchaWidth = 304;
  // Get the containing element's width
	var containerWidth = $('.container').width();
  
  // Only scale the reCAPTCHA if it won't fit
  // inside the container
  if(reCaptchaWidth > containerWidth) {
    // Calculate the scale
    var captchaScale = containerWidth / reCaptchaWidth;
    // Apply the transformation
    $('.g-recaptcha').css({
      'transform':'scale('+captchaScale+')'
    });
  }
}

$(function() { 
 
  // Initialize scaling
  scaleCaptcha();
  
  // Update scaling on window resize
  // Uses jQuery throttle plugin to limit strain on the browser
  $(window).resize( $.throttle( 100, scaleCaptcha ) );
  
});

// Resize reCAPTCHA to fit width of container

// Since it has a fixed width, we're scaling

// using CSS3 transforms

// ------------------------------------------

// captchaScale = containerWidth / elementWidth

function scaleCaptcha(elementWidth) {

// Width of the reCAPTCHA element, in pixels

var reCaptchaWidth = 304;

// Get the containing element's width

var containerWidth = $('.container').width();

// Only scale the reCAPTCHA if it won't fit

// inside the container

if(reCaptchaWidth > containerWidth) {

// Calculate the scale

var captchaScale = containerWidth / reCaptchaWidth;

// Apply the transformation

$('.g-recaptcha').css({

'transform':'scale('+captchaScale+')'

});

}

$(function() {

// Initialize scaling

scaleCaptcha();

// Update scaling on window resize

// Uses jQuery throttle plugin to limit strain on the browser

$(window).resize( $.throttle( 100, scaleCaptcha ) );

});

Snippets

(function ($) {
    $.fn.serializeFormJSON = function () {

        var o = {};
        var a = this.serializeArray();
        $.each(a, function () {
            if (o[this.name]) {
                if (!o[this.name].push) {
                    o[this.name] = [o[this.name]];
                }
                o[this.name].push(this.value || '');
            } else {
                o[this.name] = this.value || '';
            }
        });
        return o;
    };
})(jQuery);

$('form').submit(function (e) {
    e.preventDefault();
    var data = $(this).serializeFormJSON();
    console.log(data);

    /* Object
        email: "value"
        name: "value"
        password: "value"
     */
});

(function ($) {

$.fn.serializeFormJSON = function () {

var o = {};

var a = this.serializeArray();

$.each(a, function () {

if (o[this.name]) {

if (!o[this.name].push) {

o[this.name] = [o[this.name]];

}

o[this.name].push(this.value || '');

} else {

o[this.name] = this.value || '';

}

});

return o;

};

})(jQuery);

$('form').submit(function (e) {

e.preventDefault();

var data = $(this).serializeFormJSON();

console.log(data);

/* Object

email: "value"

name: "value"

password: "value"

});

or another approach

function jQFormSerializeArrToJson(formid) {
 var serializedArr = $("form#" + formid).serializeArray();
 var jsonObj = {};
 jQuery.map(formSerializeArr, function(n, i) {
  jsonObj[n.name] = n.value;
 });

 return jsonObj;
}

$('#formidlogin').submit(function(e) {
 e.preventDefault();
 var data = jQFormSerializeArrToJson('formidlogin');
 data = JSON.stringify(data),
  console.log(data);

 /* Object
     email: "value"
     name: "value"
     password: "value"
  */
});

function jQFormSerializeArrToJson(formid) {

var serializedArr = $("form#" + formid).serializeArray();

var jsonObj = {};

jQuery.map(formSerializeArr, function(n, i) {

jsonObj[n.name] = n.value;

});

return jsonObj;

}

$('#formidlogin').submit(function(e) {

e.preventDefault();

var data = jQFormSerializeArrToJson('formidlogin');

data = JSON.stringify(data),

console.log(data);

/* Object

email: "value"

name: "value"

password: "value"

});

jQuery : Disable and Enable Selected Options in DropDownList

The Hypertext Transfer Protocol (HTTP)

AJAX – Send a Request To a Server

Audio autoplay

Sample Ajax call

Javascript Slugify

Ajax getHTTPObject function

File Upload in Ajax

reCAPTCHA Responsive Scaling

Serialize Form to JSON