Cara Mengatasi Jquery Tidak Selalu Berjalan - Uncaught TypeError: $ is not a function

JQuery - Membuka Sebuah Halaman dengan Selector

Jika jquery kita tidak berjalan semestinya, maka web tidak akan terbuka sepenuhnya. Ini bisa dilihat ketika running atau menjalankan link website, kita spek element akan muncul error seperti di bawah ini:

Uncaught TypeError: $ is not a function

Mungkin salah satu penyebabnya adalah jquery tidak terpanggil semestinya, berikut cara mengatasinya:

Setelah jquery dipanggil, di dalam tag <head /> dimasukkan kode di bawah ini:

Sekian, terimakasih atas kunjungannya.

Salam,

PHP Aku : Membangun web terorganisasi dan mudah dimengerti, contoh tutorial dengan menggunakan HTML, CSS, JavaScript, SQL, PHP, dan XML.

JQuery - Membuka Sebuah Halaman menggunakan Selector

Add Comment

Bagaimana cara membuka sebuah halaman menggunakan selector id atau class? Berikut contohnya:

$(document).ready(function () {

$('#loads').fadeOut(5000, function () {

$("#data").load("<?php echo site_url('dashboard/data_skpd'); ?>" + id, function() {

});

</script>

Sekian, terimakasih atas kunjungannya.

Salam,

PHP Aku : Membangun web terorganisasi dan mudah dimengerti, contoh tutorial dengan menggunakan HTML, CSS, JavaScript, SQL, PHP, dan XML.

Membandingkan Dua atau Lebih Array di PHP

Add Comment

Bagaimana cara membandingkan dua array di PHP? Berikut contohnya:

<!DOCTYPE html>

<html>

<body>

<?php

$a1=array("a"=>"nilai satu","b"=>"nilai dua","c"=>"nilai tiga","d"=>"nilai empat");

$a2=array("e"=>"nilai satu","f"=>"nilai dua","g"=>"nilai tiga");

$result=array_diff($a1,$a2);

print_r($result);

</body>

</html>

Sekian, terimakasih atas kunjungannya.

Salam,

PHP Aku : Membangun web terorganisasi dan mudah dimengerti, contoh tutorial dengan menggunakan HTML, CSS, JavaScript, SQL, PHP, dan XML.

Show Hidden Div Menggunakan Javascript

Add Comment

#html:
<div class="row">
<div class="col-md-6 col-xs-12">
<div class="panel panel-default">

<div class="panel-heading relative panel-heading2">
<h2 style="text-align: left;">Pemasukan</h2>
<button class="btn btn-xs btn-danger pull-right" title="Informasi" onclick="swap('a1')"><i class="fa fa-exchange fa-fw"></i> </button>
</div>

<div id="chart_a1" class="panel panel-default" style="padding-left: 15px;">
//konten1
</div>

<div id="info_a1" class="panel panel-default hidden">
<blockquote>
<p>Pendapatan</p>
<footer>Merupakan total rencana pendapatan selama setahun</footer><br/>
</blockquote>
</div>
</div>
</div>
</div>

//CSS:
.hidden{display: none;}

//JavaScript:
function swap(name) {
if ($('#info_' + name).hasClass("hidden")) {
$('#info_' + name).removeClass('hidden').addClass('show');
$('#chart_' + name).removeClass('show').addClass('hidden');
}
else if ($('#info_' + name).hasClass("show")) {
$('#info_' + name).removeClass('show').addClass('hidden');
$('#chart_' + name).removeClass('hidden').addClass('show');
}
}

Atau dapat juga menggunakan cara ini:
element.css('display', 'block'); //untuk menampilkan
element.css('display', 'none'); //untuk menyembunyikan

Sekian, terimakasih atas kunjungannya.

Salam,

PHP Aku : Membangun web terorganisasi dan mudah dimengerti, contoh tutorial dengan menggunakan HTML, CSS, JavaScript, SQL, PHP, dan XML.

Cara Membuat Line Chart Menggunakan Highchart Versi 2

Add Comment

Dari pada ribet, saya contohkan bagaimana membuat line chart dengan highchart-nya.

//CSS

//VIEW

//JQUERY & JAVASCRIPT

//progres fisik dan keuangan theme

$(function () {

Highcharts.createElement('link', {

href: '//fonts.googleapis.com/css?family=Unica+One',

rel: 'stylesheet',

type: 'text/css'

}, null, document.getElementsByTagName('head')[0]);

Highcharts.theme = {

colors: ["#2b908f", "#90ee7e"],

chart: {

type: 'areaspline',

backgroundColor: {

linearGradient: {x1: 0, y1: 0, x2: 1, y2: 1},

stops: [

[0, '#395168']

]

plotBorderColor: '#606063'

title: {

style: {

color: '#E0E0E3',

textTransform: 'uppercase',

fontSize: '20px'

}

subtitle: {

style: {

color: '#E0E0E3',

textTransform: 'uppercase'

}

xAxis: {

gridLineColor: '#707073',

labels: {

style: {

color: '#E0E0E3'

}

lineColor: '#707073',

minorGridLineColor: '#505053',

tickColor: '#707073',

title: {

style: {

color: '#A0A0A3'

}

yAxis: {

gridLineColor: '#707073',

labels: {

style: {

color: '#E0E0E3'

}

lineColor: '#707073',

minorGridLineColor: '#505053',

tickColor: '#707073',

tickWidth: 1,

title: {

style: {

color: '#A0A0A3'

}

tooltip: {

valueSuffix: ' %',

backgroundColor: 'rgba(0, 0, 0, 0.85)',

style: {

color: '#F0F0F0'

}

plotOptions: {

series: {

dataLabels: {

color: '#B0B0B3'

marker: {

lineColor: '#333'

}

boxplot: {

fillColor: '#505053'

candlestick: {

lineColor: 'white'

errorbar: {

color: 'white'

areaspline: {

fillOpacity: 0.3

}

legend: {

itemStyle: {

color: '#E0E0E3'

itemHoverStyle: {

color: '#FFF'

itemHiddenStyle: {

color: '#606063'

}

credits: {

enabled: false

title: {

text: '',

style: {

display: 'none'

}

// special colors for some of the

legendBackgroundColor: 'rgba(0, 0, 0, 0.5)',

background2: '#505053',

dataLabelsColor: '#B0B0B3',

textColor: '#C0C0C0',

contrastTextColor: '#F0F0F3',

maskColor: 'rgba(255,255,255,0.3)'

};

Highcharts.setOptions(Highcharts.theme);

//progres fisik

var chart = new Highcharts.Chart({

chart: {

renderTo: 'chart_progres_realisasi_fisik'

legend: {

align: 'left',

verticalAlign: 'top',

x: 150,

y: 100,

floating: true,

borderWidth: 1,

backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'

xAxis: {

categories: [

'Jan',

'Feb',

'Mar',

'Apr',

'Mei',

'Jun',

'Jul',

'Agt',

'Sep',

'Okt',

'Nov',

'Des'

]

yAxis: {

title: {

text: 'Progres (%)'

}

series: [{

data: [10, 20, 30, 40, 50, 60, 70, 80, 90, 100, 100, 100]

}, {

data: [15, 15, 25, 50, 50, 55, 60, 70, 80, 100, 100, 100]

}]

});

</script>

Sumber: highcharts[dot]com

Sekian, terimakasih atas kunjungannya.

Salam,

PHP Aku : Membangun web terorganisasi dan mudah dimengerti, contoh tutorial dengan menggunakan HTML, CSS, JavaScript, SQL, PHP, dan XML.

Memotong Desimal dalam PHP

Add Comment

Pernahkah kamu menemui kasus desimal tanpa henti atau berapa banyak angka di belakang koma? Nah, berikut contoh cara memaksa / memotong berapa angka di belakang koma:

$float = 1.505;
echo sprintf("%.2f", $float);
//tampil: 1.50

$float = 1.505;
echo sprintf("%.1f", $float);
//tampil: 1.5

Sekian, terimakasih atas kunjungannya.

Salam,

PHP Aku : Membangun web terorganisasi dan mudah dimengerti, contoh tutorial dengan menggunakan HTML, CSS, JavaScript, SQL, PHP, dan XML.

HMVC: Message: Undefined Property CI::$data

Add Comment

A PHP Error was encountered

Severity: Notice

Message: Undefined Property CI::$data

Filename: MX/Controller.php

Line number: 57

solusinya:

Buat variabel public seperti di bawah ini

class Quotes extends MX_Controller
{

public $data; //<-- ini
public function index(){
...
}

}

Sekian, terimakasih atas kunjungannya.

Salam,

PHP Aku : Membangun web terorganisasi dan mudah dimengerti, contoh tutorial dengan menggunakan HTML, CSS, JavaScript, SQL, PHP, dan XML.

Cek Kondisi Checked di Javascript

Add Comment

Contoh 1:
<script type="text/javascript">
function validate() {
if (document.getElementById('remember').checked) {
alert("checked");
} else {
alert("You didn't check it! Let me check it for you.");
}
}
</script>

Contoh 2:
<script type="text/javascript">
$(document).ready(function() {
$('.checkbox_dak_1').on("click", function(e) {
if ($(this).is(':checked')) {//centang
$('.elemen_yang_disabled').prop('disabled', false);
}
else {//tidak centang
$('.elemen_yang_disabled').prop('disabled', true);
}
});

});
</script>

Contoh 3:
function check() {
document.getElementById("myCheck").checked = true;
}
function uncheck() {
document.getElementById("myCheck").checked = false;
}

Sekian, terimakasih atas kunjungannya.

Salam,

PHP Aku : Membangun web terorganisasi dan mudah dimengerti, contoh tutorial dengan menggunakan HTML, CSS, JavaScript, SQL, PHP, dan XML.

Disabled Object Menggunakan CSS

Add Comment

Disabled object:

<!DOCTYPE html>
<html>
<head>
<style>
input[type=text]:enabled {background: #ffff00;}
input[type=text]:disabled {background: #dddddd;}
</style>
</head>
<body>

<input type="text" disabled="disabled" value="PHP Aku">

</body>
</html>

Sekian, terimakasih atas kunjungannya.

Salam,

PHP Aku : Membangun web terorganisasi dan mudah dimengerti, contoh tutorial dengan menggunakan HTML, CSS, JavaScript, SQL, PHP, dan XML.

Disabled Object Menggunakan Javascript

Add Comment

Disabled object:

$('.element').prop('disabled', true);

// The following do not require jQuery
$element.get(0).disabled = true;
$element.get(0).setAttribute('disabled', true);
$element[0].disabled = true;

$element[0].setAttribute('disabled', true);

Sekian, terimakasih atas kunjungannya.

Salam,

PHP Aku : Membangun web terorganisasi dan mudah dimengerti, contoh tutorial dengan menggunakan HTML, CSS, JavaScript, SQL, PHP, dan XML.

Cara Membuat Animasi Scroll ke Atas dan ke Bawah

Add Comment

Ketika sebuah halaman web memiliki artikel atau konten yang sangat panjang untuk dibaca, untuk mempermudah pembaca kembali ke posisi paling atas atau ke bawah, kita sebaiknya menggunakan "Animated Scroll to Top" dan "Animated Scroll to Bottom". Berikut yang saya dapat contohkan:

//ASSET IMAGES

//CSS

/*scrollToTop*/

.scrollToTop{

text-align:center;

background: transparent;

font-weight: bold;

color: #444;

text-decoration: none;

position: fixed;

top: 50%;

margin-top: -40px;

right: 0px;

display: none;

opacity: .7;

float: right;

}

.scrollToTop img {width: 50%}

.scrollToTop:hover{

text-decoration:none;

}

.scrollToBottom{

text-align:center;

background: transparent;

font-weight: bold;

color: #444;

text-decoration: none;

position: fixed;

top: 50%;

margin-top: 40px;

right: 0px;

display: none;

opacity: .7;

float: right;

}

.scrollToBottom img {width: 50%}

.scrollToBottom:hover{

text-decoration:none;

}

/*scrollToBottom*/

//VIEW

</footer>

//JQUERY & JAVASCRIPT

$(function () {

var scrollHeight = $(document).height() - $(window).height() - $(window).scrollTop();

//var scrollBottom = $(window).scrollBottom();

$(window).scroll(function () {

if ($(this).scrollTop() > 300) {

$('.scrollToTop').fadeIn();

} else {

$('.scrollToTop').fadeOut();

}

if ($(this).scrollBottom() === scrollHeight) {

$('.scrollToBottom').fadeOut();

} else {

$('.scrollToBottom').fadeIn();

}

});

$('.scrollToTop').click(function () {

$('html, body').animate({scrollTop: 0}, 800);

return false;

});

$('.scrollToBottom').click(function () {

$('html, body').animate({scrollTop: $('footer').offset().top}, 'fast');

return false;

});

</script>

Sekian, terimakasih atas kunjungannya.

Salam,

PHP Aku : Membangun web terorganisasi dan mudah dimengerti, contoh tutorial dengan menggunakan HTML, CSS, JavaScript, SQL, PHP, dan XML.

PHP Aku

Cara Mengatasi Jquery Tidak Selalu Berjalan - Uncaught TypeError: $ is not a function

JQuery - Membuka Sebuah Halaman menggunakan Selector

Membandingkan Dua atau Lebih Array di PHP

Show Hidden Div Menggunakan Javascript

Cara Membuat Line Chart Menggunakan Highchart Versi 2

Memotong Desimal dalam PHP

HMVC: Message: Undefined Property CI::$data

Cek Kondisi Checked di Javascript

Disabled Object Menggunakan CSS

Disabled Object Menggunakan Javascript

Cara Membuat Animasi Scroll ke Atas dan ke Bawah

Angular

PHP

CSS

Laravel

Belajar Selanjutnya

JavaScript

Append

Dropdown

DataTables