KELEMAHAN JQUERY?

 

Mengatasi error 307 redirect pada jquery !!!!

Dalam membuat website atau web programming kita akan seringkali berkutat dengan javascript.

Dan kita seringkali menggunakan plugin-plugin untuk mempercantik atau untuk kebutuhan web kita, dan seringkali kita membutuhkan jquery untuk mempermudah pengerjaan kita dalam development.

Memang jquery dikenal dengan “berat” nya, tapi karena kebutuhan masih banyak dari programmer menggunakannya.

Walaupun saat ini sudah banyak “pergerakan” meninggalkan jquery tapi karena masih banyak juga yang menggunakannya dan kebetulan saya baru saja mengupdate system yang dulu saya build dengan banyak bantuan jquery akhirnya saya tulis artikel ini.

Kejadiannya adalah pagi ini saya mengupdate sebuah ERP di perusahaan tempat saya mengais rejeki disana setiap kali session user habis namun setInterval yang melakukan get sebuah nilai dari server tetap berjalan maka akan menghasilkan sebuah bug.

Alurnya seperti ini :

  1. Notifikasi menggunakan setInterval untuk get data dari server (Ya, saya masih menggunakan set interval untuk get ajax saat membuat sistem ini)
  2. Server API dapat diambil datanya jika client memiliki session
  3. Saat session habis maka setiap get akan diredirect ke halaman utama

Nah, bug disini adalah saat user meninggalkan halaman web untuk pergi makan, meeting atau yang lain maka get data untuk cek notifikasi akan diredirect oleh server karena session sudah habis.

Seperti ini tampilan error get, karena harusnya saat melakukan get hasilnya akan ditampilkan di bilah notifikasi. Karena diredirect ke halaman login akhirnya yg ditampilkan di bilah notifikasi jadi seprti ini.

Solusinya sebenarnya ada banyak, cukup dengan memperpanjang session user, mengubah system menjadi notifikasinya menggunakan web socket atau mungkin dengan cara lain.

Seperti ini jquery yang saya gunakan

function notif(){
    $.get(
    {
        url 	: '<?php echo base_url() ?>api_ver1/notif',
        success : function(data)
        {
            $('.count-notif').html(data);
        }
    })
}

setInterval(function(){
    notif();
},60000)

Nah, disini jika di cek di console maka header akan menghasilkan seperti gambar dibawah ini

Dan jquery setelah saya coba bertanya-tanya pada diri sendiri saya tidak menemukan solusi jquery untuk menghandle error 307 ini.

Akhirnya saya putuskan untuk menggunakan fetch saja dari pada kekeuh menggunakan jquery

AKhirnya script jadi seperti ini

function notif(){
	// GET ganti pakai fetch
	fetch('<?php echo base_url() ?>api_ver1/notif')
	.then( response => {
		if ( response.redirected ) { //Mendeteksi hasil apakah redirect atau tidak
			location.reload() //Jika redirect maka reload halaman
		} else {
			response.text()
			.then( text => {

				const target = document.getElementsByClassName('count-notif')
				for (let i = 0; i < target.length; i++) {
					const x = target[i]
					x.innerHTML = text //hasil get masukkan ke bilah notifikasi
				}
			});
		}
	})
	
	/* GET dengan jquery saya tinggalkan
    $.get(
	{
        url 	: '<?php echo base_url() ?>api_ver1/notif',
        success : function(data)
        {
        	$('.count-notif').html(data);
        }
    })
    */
}

setInterval(function(){
	notif();
},60000)

Dan akhirya bug sudah hilang, dan PR selanjutnya adalah mengupdate fitur-fitur lainnya.

Tareeeekkk Sesssss !!!!!!!!!!!!!!!!!!!!!!!!!!!!

mengatasi error 307 redirect jquery tutorial jquery fetch javascript web programming

COMMENT
  • Belum ada comment untuk saat ini, jadilah yang pertama
    Kamis, 11 Maret 2021 | by Admin

If you login by google, we're not save your important data and your mail is not published