{"id":538,"date":"2016-12-30T13:15:50","date_gmt":"2016-12-30T06:15:50","guid":{"rendered":"http:\/\/www.yellowweb.id\/blog\/?p=538"},"modified":"2016-12-30T13:15:50","modified_gmt":"2016-12-30T06:15:50","slug":"auto-refresh-jquery","status":"publish","type":"post","link":"https:\/\/www.yellowweb.id\/blog\/auto-refresh-jquery\/","title":{"rendered":"Auto Refresh jQuery"},"content":{"rendered":"

Tutorial kali ini akan menampilkan langkah demi langkah bagaimana caranya melakukan auto refresh pada sebuah halaman web. Adakalanya kita ingin menampilkan sebuah halaman web yang setiap beberapa detik secara otomatis menampilkan data atau informasi terbaru (update). Misalnya:<\/p>\n

<\/p>\n

Dalam beberapa kasus kita temui,
\na. menampilkan pesan yang masuk dalam inbox
\nb. menampilkan jumlah order keranjang belanja<\/p>\n

Untuk menerapkannya ke dalam sebuah web, kita memerlukan perintah auto refresh secara otomatis atau berkala. Untuk tutorial kali ini kita akan menggunakan jQuery.<\/p>\n

Berikut ini skrip yang digunakan untuk melakukan hal tersebut:<\/p>\n

<!DOCTYPE html>\r\n<html>\r\n<head>\r\n\t<title>Autoload<\/title>\r\n\t<script src=\"jquery-3.1.1.js\" type=\"text\/javascript\"><\/script>\r\n        <script>\r\n           setInterval(function() { $(\".tempat\").load(\"file.txt\"); }, 5000);\r\n        <\/script>\r\n<\/head>\r\n<body>\r\n\t<div class=\"tempat\">\r\n           Ini div yang akan di refresh dengan jquery .\r\n        <div>\r\n\r\n<\/body>\r\n<\/html><\/pre>\n
1. Donwload file jQuery terbaru<\/a>
\n2. Siapkan satu buah file dengan nama file.txt<\/p>\n
Keterangan skrip:<\/em>
\n 5000(milisecond) adalah interval div saat di refresh. Berarti div akan di refresh setiap 5 detik. load disini akan memuat file yang akan ditampilkan.
\n<\/em><\/p>\n
Dengan menggunakan fitur autoload ini, kita tidak harus meload atau refresh seluruh halaman, namun bisa kita atur berdasarkan div (content) tertentu.<\/p>\n
Silahkan teman-teman dapat mengembangkan skrip yang sederhana ini sesuai dengan kebutuhan aplikasi yang sedang di buat.<\/p>\n","protected":false},"excerpt":{"rendered":"
Tutorial kali ini akan menampilkan langkah demi langkah bagaimana caranya melakukan auto refresh pada sebuah halaman web. Adakalanya kita ingin menampilkan sebuah halaman web yang setiap beberapa detik secara otomatis menampilkan data atau informasi terbaru (update). Misalnya:<\/p>\n","protected":false},"author":1,"featured_media":542,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[265,116,11],"tags":[266,288,289,18],"class_list":["post-538","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-ajax","category-jquery","category-tutorial","tag-ajax","tag-autoload","tag-autorefresh","tag-jquery"],"yoast_head":"\nAuto Refresh jQuery - YELLOWWEB.ID<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.yellowweb.id\/blog\/auto-refresh-jquery\/\" \/>\n<meta property=\"og:locale\" content=\"en_GB\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Auto Refresh jQuery - YELLOWWEB.ID\" \/>\n<meta property=\"og:description\" content=\"Tutorial kali ini akan menampilkan langkah demi langkah bagaimana caranya melakukan auto refresh pada sebuah halaman web. Adakalanya kita ingin menampilkan sebuah halaman web yang setiap beberapa detik secara otomatis menampilkan data atau informasi terbaru (update). Misalnya:\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.yellowweb.id\/blog\/auto-refresh-jquery\/\" \/>\n<meta property=\"og:site_name\" content=\"YELLOWWEB.ID\" \/>\n<meta property=\"article:published_time\" content=\"2016-12-30T06:15:50+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/i0.wp.com\/www.yellowweb.id\/blog\/wp-content\/uploads\/2016\/12\/EasyRefresh.jpeg?fit=320%2C480&ssl=1\" \/>\n\t<meta property=\"og:image:width\" content=\"320\" \/>\n\t<meta property=\"og:image:height\" content=\"480\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"yellowweb\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"yellowweb\" \/>\n\t<meta name=\"twitter:label2\" content=\"Estimated reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.yellowweb.id\\\/blog\\\/auto-refresh-jquery\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.yellowweb.id\\\/blog\\\/auto-refresh-jquery\\\/\"},\"author\":{\"name\":\"yellowweb\",\"@id\":\"https:\\\/\\\/www.yellowweb.id\\\/blog\\\/#\\\/schema\\\/person\\\/75188044e080844724e381ab6a5b9829\"},\"headline\":\"Auto Refresh jQuery\",\"datePublished\":\"2016-12-30T06:15:50+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.yellowweb.id\\\/blog\\\/auto-refresh-jquery\\\/\"},\"wordCount\":163,\"image\":{\"@id\":\"https:\\\/\\\/www.yellowweb.id\\\/blog\\\/auto-refresh-jquery\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.yellowweb.id\\\/blog\\\/wp-content\\\/uploads\\\/2016\\\/12\\\/EasyRefresh.jpeg\",\"keywords\":[\"ajax\",\"autoload\",\"autorefresh\",\"jquery\"],\"articleSection\":[\"ajax\",\"jQuery\",\"Tutorial\"],\"inLanguage\":\"en-GB\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.yellowweb.id\\\/blog\\\/auto-refresh-jquery\\\/\",\"url\":\"https:\\\/\\\/www.yellowweb.id\\\/blog\\\/auto-refresh-jquery\\\/\",\"name\":\"Auto Refresh jQuery - YELLOWWEB.ID\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.yellowweb.id\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.yellowweb.id\\\/blog\\\/auto-refresh-jquery\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.yellowweb.id\\\/blog\\\/auto-refresh-jquery\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.yellowweb.id\\\/blog\\\/wp-content\\\/uploads\\\/2016\\\/12\\\/EasyRefresh.jpeg\",\"datePublished\":\"2016-12-30T06:15:50+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/www.yellowweb.id\\\/blog\\\/#\\\/schema\\\/person\\\/75188044e080844724e381ab6a5b9829\"},\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.yellowweb.id\\\/blog\\\/auto-refresh-jquery\\\/#breadcrumb\"},\"inLanguage\":\"en-GB\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.yellowweb.id\\\/blog\\\/auto-refresh-jquery\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-GB\",\"@id\":\"https:\\\/\\\/www.yellowweb.id\\\/blog\\\/auto-refresh-jquery\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.yellowweb.id\\\/blog\\\/wp-content\\\/uploads\\\/2016\\\/12\\\/EasyRefresh.jpeg\",\"contentUrl\":\"https:\\\/\\\/www.yellowweb.id\\\/blog\\\/wp-content\\\/uploads\\\/2016\\\/12\\\/EasyRefresh.jpeg\",\"width\":320,\"height\":480,\"caption\":\"auto-refresh\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.yellowweb.id\\\/blog\\\/auto-refresh-jquery\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.yellowweb.id\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Auto Refresh jQuery\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.yellowweb.id\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.yellowweb.id\\\/blog\\\/\",\"name\":\"YELLOWWEB.ID\",\"description\":\"Kursus Web Design | Kursus Web Programming | Mobile Web Apps | Digital Marketing\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.yellowweb.id\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-GB\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.yellowweb.id\\\/blog\\\/#\\\/schema\\\/person\\\/75188044e080844724e381ab6a5b9829\",\"name\":\"yellowweb\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-GB\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/5afd1bfac26e9377e8f5e36afb624cf3690dd31cb07c3961dfbc736b9ff1912f?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/5afd1bfac26e9377e8f5e36afb624cf3690dd31cb07c3961dfbc736b9ff1912f?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/5afd1bfac26e9377e8f5e36afb624cf3690dd31cb07c3961dfbc736b9ff1912f?s=96&d=mm&r=g\",\"caption\":\"yellowweb\"},\"sameAs\":[\"https:\\\/\\\/www.yellowweb.id\"],\"url\":\"https:\\\/\\\/www.yellowweb.id\\\/blog\\\/author\\\/yellowweb\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Auto Refresh jQuery - YELLOWWEB.ID","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.yellowweb.id\/blog\/auto-refresh-jquery\/","og_locale":"en_GB","og_type":"article","og_title":"Auto Refresh jQuery - YELLOWWEB.ID","og_description":"Tutorial kali ini akan menampilkan langkah demi langkah bagaimana caranya melakukan auto refresh pada sebuah halaman web. Adakalanya kita ingin menampilkan sebuah halaman web yang setiap beberapa detik secara otomatis menampilkan data atau informasi terbaru (update). Misalnya:","og_url":"https:\/\/www.yellowweb.id\/blog\/auto-refresh-jquery\/","og_site_name":"YELLOWWEB.ID","article_published_time":"2016-12-30T06:15:50+00:00","og_image":[{"width":320,"height":480,"url":"https:\/\/i0.wp.com\/www.yellowweb.id\/blog\/wp-content\/uploads\/2016\/12\/EasyRefresh.jpeg?fit=320%2C480&ssl=1","type":"image\/jpeg"}],"author":"yellowweb","twitter_card":"summary_large_image","twitter_misc":{"Written by":"yellowweb","Estimated reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.yellowweb.id\/blog\/auto-refresh-jquery\/#article","isPartOf":{"@id":"https:\/\/www.yellowweb.id\/blog\/auto-refresh-jquery\/"},"author":{"name":"yellowweb","@id":"https:\/\/www.yellowweb.id\/blog\/#\/schema\/person\/75188044e080844724e381ab6a5b9829"},"headline":"Auto Refresh jQuery","datePublished":"2016-12-30T06:15:50+00:00","mainEntityOfPage":{"@id":"https:\/\/www.yellowweb.id\/blog\/auto-refresh-jquery\/"},"wordCount":163,"image":{"@id":"https:\/\/www.yellowweb.id\/blog\/auto-refresh-jquery\/#primaryimage"},"thumbnailUrl":"https:\/\/www.yellowweb.id\/blog\/wp-content\/uploads\/2016\/12\/EasyRefresh.jpeg","keywords":["ajax","autoload","autorefresh","jquery"],"articleSection":["ajax","jQuery","Tutorial"],"inLanguage":"en-GB"},{"@type":"WebPage","@id":"https:\/\/www.yellowweb.id\/blog\/auto-refresh-jquery\/","url":"https:\/\/www.yellowweb.id\/blog\/auto-refresh-jquery\/","name":"Auto Refresh jQuery - YELLOWWEB.ID","isPartOf":{"@id":"https:\/\/www.yellowweb.id\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.yellowweb.id\/blog\/auto-refresh-jquery\/#primaryimage"},"image":{"@id":"https:\/\/www.yellowweb.id\/blog\/auto-refresh-jquery\/#primaryimage"},"thumbnailUrl":"https:\/\/www.yellowweb.id\/blog\/wp-content\/uploads\/2016\/12\/EasyRefresh.jpeg","datePublished":"2016-12-30T06:15:50+00:00","author":{"@id":"https:\/\/www.yellowweb.id\/blog\/#\/schema\/person\/75188044e080844724e381ab6a5b9829"},"breadcrumb":{"@id":"https:\/\/www.yellowweb.id\/blog\/auto-refresh-jquery\/#breadcrumb"},"inLanguage":"en-GB","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.yellowweb.id\/blog\/auto-refresh-jquery\/"]}]},{"@type":"ImageObject","inLanguage":"en-GB","@id":"https:\/\/www.yellowweb.id\/blog\/auto-refresh-jquery\/#primaryimage","url":"https:\/\/www.yellowweb.id\/blog\/wp-content\/uploads\/2016\/12\/EasyRefresh.jpeg","contentUrl":"https:\/\/www.yellowweb.id\/blog\/wp-content\/uploads\/2016\/12\/EasyRefresh.jpeg","width":320,"height":480,"caption":"auto-refresh"},{"@type":"BreadcrumbList","@id":"https:\/\/www.yellowweb.id\/blog\/auto-refresh-jquery\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.yellowweb.id\/blog\/"},{"@type":"ListItem","position":2,"name":"Auto Refresh jQuery"}]},{"@type":"WebSite","@id":"https:\/\/www.yellowweb.id\/blog\/#website","url":"https:\/\/www.yellowweb.id\/blog\/","name":"YELLOWWEB.ID","description":"Kursus Web Design | Kursus Web Programming | Mobile Web Apps | Digital Marketing","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.yellowweb.id\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-GB"},{"@type":"Person","@id":"https:\/\/www.yellowweb.id\/blog\/#\/schema\/person\/75188044e080844724e381ab6a5b9829","name":"yellowweb","image":{"@type":"ImageObject","inLanguage":"en-GB","@id":"https:\/\/secure.gravatar.com\/avatar\/5afd1bfac26e9377e8f5e36afb624cf3690dd31cb07c3961dfbc736b9ff1912f?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/5afd1bfac26e9377e8f5e36afb624cf3690dd31cb07c3961dfbc736b9ff1912f?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/5afd1bfac26e9377e8f5e36afb624cf3690dd31cb07c3961dfbc736b9ff1912f?s=96&d=mm&r=g","caption":"yellowweb"},"sameAs":["https:\/\/www.yellowweb.id"],"url":"https:\/\/www.yellowweb.id\/blog\/author\/yellowweb\/"}]}},"_links":{"self":[{"href":"https:\/\/www.yellowweb.id\/blog\/wp-json\/wp\/v2\/posts\/538","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.yellowweb.id\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.yellowweb.id\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.yellowweb.id\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.yellowweb.id\/blog\/wp-json\/wp\/v2\/comments?post=538"}],"version-history":[{"count":3,"href":"https:\/\/www.yellowweb.id\/blog\/wp-json\/wp\/v2\/posts\/538\/revisions"}],"predecessor-version":[{"id":541,"href":"https:\/\/www.yellowweb.id\/blog\/wp-json\/wp\/v2\/posts\/538\/revisions\/541"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.yellowweb.id\/blog\/wp-json\/wp\/v2\/media\/542"}],"wp:attachment":[{"href":"https:\/\/www.yellowweb.id\/blog\/wp-json\/wp\/v2\/media?parent=538"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.yellowweb.id\/blog\/wp-json\/wp\/v2\/categories?post=538"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.yellowweb.id\/blog\/wp-json\/wp\/v2\/tags?post=538"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}