{"id":846,"date":"2022-03-23T08:11:00","date_gmt":"2022-03-23T01:11:00","guid":{"rendered":"https:\/\/www.bagi2info.com\/?p=846"},"modified":"2022-09-11T13:48:28","modified_gmt":"2022-09-11T06:48:28","slug":"script-mudah-membuat-simple-lookup-dengan-popup-colorbox","status":"publish","type":"post","link":"https:\/\/www.bagi2info.com\/en\/easy-script-to-make-simple-lookup-with-colorbox-popup\/","title":{"rendered":"Easy script to make simple lookup with Colorbox popup"},"content":{"rendered":"In making applications, we often need a window to search for certain data, this function we usually call lookup.\r\n\r\nThis time we will create a simple lookup script with the popup library colorbox for the web.\r\n\r\nThe following is a lookup script for the web that functions to display and select data from all existing data lists.\r\n\r\n<strong>Display the results of the script\r\n<\/strong>\r\n<a href=\"https:\/\/www.bagi2info.com\/wp-content\/uploads\/2015\/12\/simplepopup1.jpg\"><img loading=\"lazy\" decoding=\"async\" width=\"604\" height=\"164\" class=\"wp-image-849\" src=\"https:\/\/www.bagi2info.com\/wp-content\/uploads\/2015\/12\/simplepopup1.jpg\" alt=\"simplepopup1\" \/><\/a>\r\n<a href=\"https:\/\/www.bagi2info.com\/wp-content\/uploads\/2015\/12\/simplepopup2.jpg\"><img loading=\"lazy\" decoding=\"async\" width=\"290\" height=\"220\" class=\"wp-image-850\" src=\"https:\/\/www.bagi2info.com\/wp-content\/uploads\/2015\/12\/simplepopup2-290x220.jpg\" alt=\"simplepopup2\" \/><\/a>\r\n\r\nSteps:\r\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_85 counter-hierarchy ez-toc-counter ez-toc-grey ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Table of Contents<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/www.bagi2info.com\/en\/easy-script-to-make-simple-lookup-with-colorbox-popup\/#1_First_create_an_employee_table_in_the_test_database\" >1. First create an employee table in the test database<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/www.bagi2info.com\/en\/easy-script-to-make-simple-lookup-with-colorbox-popup\/#2_Create_an_indexhtml_file_with_the_following_code\" >2. Create an index.html file with the following code:<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/www.bagi2info.com\/en\/easy-script-to-make-simple-lookup-with-colorbox-popup\/#3_Create_the_file_register_pegawaiphp_with_the_following_code\" >3. Create the file register_pegawai.php with the following code:<\/a><\/li><\/ul><\/nav><\/div>\n<h2><span class=\"ez-toc-section\" id=\"1_First_create_an_employee_table_in_the_test_database\"><\/span>1. First create an employee table in the test database<span class=\"ez-toc-section-end\"><\/span><\/h2>\r\n\r\n<pre class=\"wp-block-preformatted\">CREATE TABLE `pegawai` (\r\n `no_int` int(5) NOT NULL auto_increment,\r\n `NIP` char(5) collate latin1_general_ci default NULL,\r\n `nama` varchar(30) collate latin1_general_ci NOT NULL,\r\n `umur` int(2) NOT NULL,\r\n `alamat` varchar(100) collate latin1_general_ci NOT NULL,\r\n PRIMARY KEY (`no_int`)\r\n);\r\n<\/pre>\r\n\r\n<h2><span class=\"ez-toc-section\" id=\"2_Create_an_indexhtml_file_with_the_following_code\"><\/span>2. Create an index.html file with the following code:<span class=\"ez-toc-section-end\"><\/span><\/h2>\r\n\r\n<pre class=\"wp-block-code\"><code class=\"language-markup line-numbers\" lang=\"markup\">&lt;html&gt;\r\n&lt;head&gt;\r\n &lt;title&gt;Searching By Ajax&lt;\/title&gt;\r\n&lt;link rel=\"stylesheet\" href=\"css\/colorbox.css\" \/&gt;\r\n &lt;script src=\"js\/jquery.min.js\"&gt;&lt;\/script&gt;\r\n\t\t&lt;script src=\"js\/jquery.colorbox.js\"&gt;&lt;\/script&gt;\r\n\t\t&lt;script&gt;\r\n\t\t\t$(document).ready(function(){\r\n\t\t\t\t\/\/Examples of how to assign the ColorBox event to elements\r\n\r\n\t\t\t\t$(\".ajax\").colorbox({width:'650px',height:'450px'});\r\n \r\n\t\t\t\t\r\n\t\t\t});\r\n\t\t&lt;\/script&gt;\r\n&lt;!-- new --&gt;\r\n\t&lt;script language=\"javascript\"&gt;\r\n\r\n\t\tvar my_variable = new Array(); \/\/ for example\r\n\t\t\r\n\t\tfunction passingToParent(){\r\n\t\t\r\n\t\t\tarrayOfStrings = my_variable[0].split(',');\r\n\t\t\t\r\n\t\t\tfor (var i=1; i &lt; my_variable.length; i++) {\r\n\t\t\t\t$('#' + arrayOfStrings[i-1]).val(my_variable[i]);\r\n\t\t\t}\r\n\t\t\t\/\/ single form\r\n\t\t\t\/\/parent.$.fn.colorbox.close();\r\n\r\n\t\t\t\/\/ framework form\r\n\t\t\tjQuery.colorbox.close();;\r\n\t\t}\r\n\r\n\t&lt;\/script&gt;\r\n &lt;style&gt;\r\n   body,table,input{\r\n   \tfont-size:12px\r\n   }\r\n &lt;\/style&gt;\r\n&lt;\/head&gt;\r\n&lt;body&gt;\r\n&lt;form action=\"\" method=\"post\"&gt; \r\n\t\r\n Pilih Pegawai: &lt;input type=\"text\" id=\"no_int\" name=\"no_int\" size=\"4\"&gt; \r\n &lt;input id=\"id\" type=\"text\" name=\"pegawai\" size=\"4\" \/&gt; \r\n &lt;input type=\"text\"  id=\"nama_pegawai\" name=\"nama_pegawai\" size=\"20\" readonly \/&gt; \r\n &lt;!-- semua element anchor dengan class=\"thickbox\" akan otomatis menampilkan dialog thickbox, \r\n \t  isi href bisa dimasukan setting thickbox berupa width dan height dari dialog thickbox --&gt;\r\n &lt;a href=\"daftar_pegawai.php\" class=\"ajax\" onClick=\"my_variable[0]='no_int,id,nama_pegawai'\"&gt;\r\n &lt;img src=\"button_search.png\" border=\"0\" \/&gt;&lt;\/a&gt;\r\n &lt;small id=\"divAlertPegawai\"&gt;&lt;\/small&gt;\r\n&lt;\/form&gt;\t\r\n&lt;\/body&gt;\r\n&lt;\/html&gt;\r\n<\/code><\/pre>\r\n&nbsp;\r\n\r\nExplanation of the script: first we include the jquery script and colorbox, then we create a function <strong>passingToParent<\/strong> to receive data passing from the lookup to the form, the id name of the data receiving component is set on the link\r\n<strong>&lt;a href=&#8221;employee_registration.php&#8221; class=&#8221;ajax&#8221; onClick=&#8221;my_variable[0]=&#8217;no_int,id,employee_name'&#8221;&gt;<\/strong>\r\n\r\nwith the onClick attribute containing the input id <strong>my_variable[0]=&#8217;no_int,id,employee_name<\/strong>\r\n<h2><span class=\"ez-toc-section\" id=\"3_Create_the_file_register_pegawaiphp_with_the_following_code\"><\/span>3. Create the file register_pegawai.php with the following code:<span class=\"ez-toc-section-end\"><\/span><\/h2>\r\nExplanation: input component to perform a search, can receive <strong>Enter<\/strong> as search submit, the script function <strong>findRecord<\/strong> will perform an ajax call to <strong>cari_pegawai.php<\/strong> with the search value from the search id, namely the input component, the result of the response is directly written to the result id\r\n\r\n<strong>4. Create the file cari_pegawai.php with the following code:<\/strong>\r\n\r\n\r\n<pre class=\"wp-block-code\"><code class=\"language-php line-numbers\" lang=\"php\">\t&lt;script language=\"javascript\"&gt;\r\n\t\tfunction getSelected(no_int, id, nama){\t\r\n\t\t\t\r\n\t\t\tvar args = new Array();\r\n\t\t\t\r\n\t\t\tfor (var i = 0; i &lt; arguments.length; i++)\r\n\t\t\t\twindow.parent.my_variable[i+1] = arguments[i];\r\n\t\t\t\t\r\n\t\t\twindow.parent.passingToParent();\r\n\t\t}\r\n\r\n  &lt;\/script&gt;\r\n\t&lt;style&gt;\r\n\ttable {\r\n\t border-collapse: collapse;\r\n\t width: 100%;\r\n\t}\r\n\tth, td {\r\n\t text-align: left;\r\n\t padding: 8px;\r\n\t}\r\n\ttr:nth-child(even){background-color: #f2f2f2}\r\n\tth {\r\n\t background-color: #4CAF50;\r\n\t color: white;\r\n\t}\r\n\t&lt;\/style&gt;\r\n\r\n&lt;?php\r\n\r\n\tif (empty($_POST[\"cari\"]))\r\n\t\t$_POST[\"cari\"] = \"\";\r\n\t\r\n\t$mysqli = new mysqli(\"localhost\", \"admin\", \"\", \"test\");\r\n\t\r\n\t $ssql = \"SELECT * FROM pegawai \r\n\t WHERE nip like '%$_POST[cari]%'\r\n\t or nama like '%$_POST[cari]%'\";\r\n\t $query = $mysqli-&gt;query($ssql);\r\n \r\n?&gt;\r\n&lt;table bgcolor=\"#000000\" cellspacing=\"1\" cellpadding=\"3\"&gt;\t\r\n\t&lt;tr bgcolor=\"#DDDDDD\"&gt;\r\n\t\t&lt;th&gt;No. Peg&lt;\/th&gt;\r\n\t\t&lt;th&gt;Nama&lt;\/th&gt;\r\n\t\t&lt;th&gt;Umur&lt;\/th&gt;\r\n\t\t&lt;th&gt;Alamat&lt;\/th&gt;\r\n\t&lt;\/tr&gt;\r\n\t&lt;?php while($row = $query-&gt;fetch_object()): ?&gt;\r\n\t\r\n\t&lt;tr bgcolor=\"#FFFFFF\"&gt;\r\n\t\t&lt;!-- fungsi selectPegawai di deklarasikan di index.html dan file ini bisa memanggilnya selama file ini\r\n\t\t\t dipanggil oleh thickbox dari index.html, fungsi dari selectPegawai adalah untuk memasukan nilai\r\n\t\t\t NIP dan nama pegawai dari masing-masing baris di daftar pegawai ini --&gt;\r\n\t\t&lt;td align=\"center\"&gt;\r\n\t\t\t&lt;a href=\"javascript:getSelected('&lt;?=$row-&gt;no_int?&gt;','&lt;?=$row-&gt;NIP?&gt;','&lt;?=$row-&gt;nama?&gt;')\"&gt;\r\n\t\t\t\t&lt;?=$row-&gt;NIP?&gt;\r\n\t\t\t&lt;\/a&gt;\r\n\t\t&lt;\/td&gt;\r\n\t\t&lt;td&gt;&lt;?=$row-&gt;nama?&gt;&lt;\/td&gt;\r\n\t\t&lt;td align=\"center\"&gt;&lt;?=$row-&gt;umur?&gt;&lt;\/td&gt;\r\n\t\t&lt;td&gt;&lt;?=$row-&gt;alamat?&gt;&lt;\/td&gt;\r\n\t&lt;\/tr&gt;\r\n\t&lt;?php endwhile; ?&gt;\r\n&lt;\/table&gt;<\/code><\/pre>\r\n\r\n\r\nHere&#8217;s a download link for a <a href=\"https:\/\/www.bagi2info.com\/sample\/simplelookup.zip\">simple lookup sample file with a popup colorbox.<\/a>\r\n\r\nNotes:\r\n\r\nThe article above assumes that you already have knowledge about using mysql databases starting from login connections, creating databases, running scripts and creating tables","protected":false},"excerpt":{"rendered":"<p>In making applications, we often need a window to search for certain data, this function we usually call lookup. This time we will create a simple lookup script with the popup library colorbox for&#46;&#46;&#46;<\/p>\n","protected":false},"author":1,"featured_media":850,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[13,2,14],"tags":[],"class_list":["post-846","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-featured","category-komputer","category-recommended"],"aioseo_notices":[],"aioseo_head":"\n\t\t<!-- All in One SEO 4.9.10 - aioseo.com -->\n\t<meta name=\"description\" content=\"Script lookup javascript mengambil data tertentu dari list data. Bagi yang mencari script simple lookup dengan popup colorbox dengan php\" \/>\n\t<meta name=\"robots\" content=\"max-image-preview:large\" \/>\n\t<meta name=\"author\" content=\"webmaster\"\/>\n\t<link rel=\"canonical\" href=\"https:\/\/www.bagi2info.com\/en\/easy-script-to-make-simple-lookup-with-colorbox-popup\/\" \/>\n\t<meta name=\"generator\" content=\"All in One SEO (AIOSEO) 4.9.10\" \/>\n\t\t<meta property=\"og:locale\" content=\"en_US\" \/>\n\t\t<meta property=\"og:site_name\" content=\"Bagi2info.com - Tips dan Trik Komputer, Tutorial Pemrograman, SQL, PHP, React Native - Expo\" \/>\n\t\t<meta property=\"og:type\" content=\"activity\" \/>\n\t\t<meta property=\"og:title\" content=\"Easy script to make simple lookup with Colorbox popup\" \/>\n\t\t<meta property=\"og:description\" content=\"Script lookup javascript mengambil data tertentu dari list data. Bagi yang mencari script simple lookup dengan popup colorbox dengan php\" \/>\n\t\t<meta property=\"og:url\" content=\"https:\/\/www.bagi2info.com\/en\/easy-script-to-make-simple-lookup-with-colorbox-popup\/\" \/>\n\t\t<meta property=\"og:image\" content=\"https:\/\/i0.wp.com\/www.bagi2info.com\/wp-content\/uploads\/2017\/10\/coollogo_com-12072770.png?fit=28164&#038;ssl=1\" \/>\n\t\t<meta property=\"og:image:secure_url\" content=\"https:\/\/i0.wp.com\/www.bagi2info.com\/wp-content\/uploads\/2017\/10\/coollogo_com-12072770.png?fit=28164&#038;ssl=1\" \/>\n\t\t<meta name=\"twitter:card\" content=\"summary\" \/>\n\t\t<meta name=\"twitter:site\" content=\"@bagi2infocom\" \/>\n\t\t<meta name=\"twitter:title\" content=\"Easy script to make simple lookup with Colorbox popup\" \/>\n\t\t<meta name=\"twitter:description\" content=\"Script lookup javascript mengambil data tertentu dari list data. Bagi yang mencari script simple lookup dengan popup colorbox dengan php\" \/>\n\t\t<meta name=\"twitter:creator\" content=\"@bagi2infocom\" \/>\n\t\t<meta name=\"twitter:image\" content=\"https:\/\/i0.wp.com\/www.bagi2info.com\/wp-content\/uploads\/2017\/10\/coollogo_com-12072770.png?fit=28164&amp;ssl=1\" \/>\n\t\t<script type=\"application\/ld+json\" class=\"aioseo-schema\">\n\t\t\t{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"BlogPosting\",\"@id\":\"https:\\\/\\\/www.bagi2info.com\\\/en\\\/easy-script-to-make-simple-lookup-with-colorbox-popup\\\/#blogposting\",\"name\":\"Easy script to make simple lookup with Colorbox popup\",\"headline\":\"Easy script to make simple lookup with Colorbox popup\",\"author\":{\"@id\":\"https:\\\/\\\/www.bagi2info.com\\\/en\\\/author\\\/admin\\\/#author\"},\"publisher\":{\"@id\":\"https:\\\/\\\/www.bagi2info.com\\\/en\\\/#person\"},\"image\":{\"@type\":\"ImageObject\",\"url\":\"https:\\\/\\\/www.bagi2info.com\\\/wp-content\\\/uploads\\\/2015\\\/12\\\/simplepopup2.jpg\",\"width\":709,\"height\":521,\"caption\":\"simple popup lookup\"},\"datePublished\":\"2022-03-23T08:11:00+07:00\",\"dateModified\":\"2022-09-11T13:48:28+07:00\",\"inLanguage\":\"en-US\",\"commentCount\":4,\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.bagi2info.com\\\/en\\\/easy-script-to-make-simple-lookup-with-colorbox-popup\\\/#webpage\"},\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.bagi2info.com\\\/en\\\/easy-script-to-make-simple-lookup-with-colorbox-popup\\\/#webpage\"},\"articleSection\":\"Featured, Komputer, Recommended\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.bagi2info.com\\\/en\\\/easy-script-to-make-simple-lookup-with-colorbox-popup\\\/#breadcrumblist\",\"itemListElement\":[{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/www.bagi2info.com\\\/en\\\/#listItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.bagi2info.com\\\/en\\\/\",\"nextItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/www.bagi2info.com\\\/en\\\/category\\\/komputer\\\/#listItem\",\"name\":\"Komputer\"}},{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/www.bagi2info.com\\\/en\\\/category\\\/komputer\\\/#listItem\",\"position\":2,\"name\":\"Komputer\",\"item\":\"https:\\\/\\\/www.bagi2info.com\\\/en\\\/category\\\/komputer\\\/\",\"nextItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/www.bagi2info.com\\\/en\\\/easy-script-to-make-simple-lookup-with-colorbox-popup\\\/#listItem\",\"name\":\"Easy script to make simple lookup with Colorbox popup\"},\"previousItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/www.bagi2info.com\\\/en\\\/#listItem\",\"name\":\"Home\"}},{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/www.bagi2info.com\\\/en\\\/easy-script-to-make-simple-lookup-with-colorbox-popup\\\/#listItem\",\"position\":3,\"name\":\"Easy script to make simple lookup with Colorbox popup\",\"previousItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/www.bagi2info.com\\\/en\\\/category\\\/komputer\\\/#listItem\",\"name\":\"Komputer\"}}]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.bagi2info.com\\\/en\\\/#person\",\"name\":\"webmaster\",\"image\":{\"@type\":\"ImageObject\",\"@id\":\"https:\\\/\\\/www.bagi2info.com\\\/en\\\/easy-script-to-make-simple-lookup-with-colorbox-popup\\\/#personImage\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/38da1efad6745212e2c3b76c8d8e72f69844b6451e55a9c219cdb2bb8b8901ef?s=96&d=mm&r=g\",\"width\":96,\"height\":96,\"caption\":\"webmaster\"},\"sameAs\":[\"https:\\\/\\\/twitter.com\\\/bagi2infocom\",\"https:\\\/\\\/www.instagram.com\\\/bagi2infocom\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.bagi2info.com\\\/en\\\/author\\\/admin\\\/#author\",\"url\":\"https:\\\/\\\/www.bagi2info.com\\\/en\\\/author\\\/admin\\\/\",\"name\":\"webmaster\",\"image\":{\"@type\":\"ImageObject\",\"@id\":\"https:\\\/\\\/www.bagi2info.com\\\/en\\\/easy-script-to-make-simple-lookup-with-colorbox-popup\\\/#authorImage\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/38da1efad6745212e2c3b76c8d8e72f69844b6451e55a9c219cdb2bb8b8901ef?s=96&d=mm&r=g\",\"width\":96,\"height\":96,\"caption\":\"webmaster\"},\"sameAs\":[\"https:\\\/\\\/twitter.com\\\/bagi2infocom\",\"https:\\\/\\\/www.instagram.com\\\/bagi2infocom\"]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.bagi2info.com\\\/en\\\/easy-script-to-make-simple-lookup-with-colorbox-popup\\\/#webpage\",\"url\":\"https:\\\/\\\/www.bagi2info.com\\\/en\\\/easy-script-to-make-simple-lookup-with-colorbox-popup\\\/\",\"name\":\"Easy script to make simple lookup with Colorbox popup\",\"description\":\"Script lookup javascript mengambil data tertentu dari list data. Bagi yang mencari script simple lookup dengan popup colorbox dengan php\",\"inLanguage\":\"en-US\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.bagi2info.com\\\/en\\\/#website\"},\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.bagi2info.com\\\/en\\\/easy-script-to-make-simple-lookup-with-colorbox-popup\\\/#breadcrumblist\"},\"author\":{\"@id\":\"https:\\\/\\\/www.bagi2info.com\\\/en\\\/author\\\/admin\\\/#author\"},\"creator\":{\"@id\":\"https:\\\/\\\/www.bagi2info.com\\\/en\\\/author\\\/admin\\\/#author\"},\"image\":{\"@type\":\"ImageObject\",\"url\":\"https:\\\/\\\/www.bagi2info.com\\\/wp-content\\\/uploads\\\/2015\\\/12\\\/simplepopup2.jpg\",\"@id\":\"https:\\\/\\\/www.bagi2info.com\\\/en\\\/easy-script-to-make-simple-lookup-with-colorbox-popup\\\/#mainImage\",\"width\":709,\"height\":521,\"caption\":\"simple popup lookup\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.bagi2info.com\\\/en\\\/easy-script-to-make-simple-lookup-with-colorbox-popup\\\/#mainImage\"},\"datePublished\":\"2022-03-23T08:11:00+07:00\",\"dateModified\":\"2022-09-11T13:48:28+07:00\"},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.bagi2info.com\\\/en\\\/#website\",\"url\":\"https:\\\/\\\/www.bagi2info.com\\\/en\\\/\",\"name\":\"Bagi2info.com\",\"description\":\"Tips dan Trik Komputer, Tutorial Pemrograman, SQL, PHP, React Native - Expo\",\"inLanguage\":\"en-US\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.bagi2info.com\\\/en\\\/#person\"}}]}\n\t\t<\/script>\n\t\t<!-- All in One SEO -->\n\n","aioseo_head_json":{"title":"Easy script to make simple lookup with Colorbox popup","description":"Script lookup javascript mengambil data tertentu dari list data. Bagi yang mencari script simple lookup dengan popup colorbox dengan php","canonical_url":"https:\/\/www.bagi2info.com\/en\/easy-script-to-make-simple-lookup-with-colorbox-popup\/","robots":"max-image-preview:large","keywords":"","webmasterTools":{"miscellaneous":""},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"BlogPosting","@id":"https:\/\/www.bagi2info.com\/en\/easy-script-to-make-simple-lookup-with-colorbox-popup\/#blogposting","name":"Easy script to make simple lookup with Colorbox popup","headline":"Easy script to make simple lookup with Colorbox popup","author":{"@id":"https:\/\/www.bagi2info.com\/en\/author\/admin\/#author"},"publisher":{"@id":"https:\/\/www.bagi2info.com\/en\/#person"},"image":{"@type":"ImageObject","url":"https:\/\/www.bagi2info.com\/wp-content\/uploads\/2015\/12\/simplepopup2.jpg","width":709,"height":521,"caption":"simple popup lookup"},"datePublished":"2022-03-23T08:11:00+07:00","dateModified":"2022-09-11T13:48:28+07:00","inLanguage":"en-US","commentCount":4,"mainEntityOfPage":{"@id":"https:\/\/www.bagi2info.com\/en\/easy-script-to-make-simple-lookup-with-colorbox-popup\/#webpage"},"isPartOf":{"@id":"https:\/\/www.bagi2info.com\/en\/easy-script-to-make-simple-lookup-with-colorbox-popup\/#webpage"},"articleSection":"Featured, Komputer, Recommended"},{"@type":"BreadcrumbList","@id":"https:\/\/www.bagi2info.com\/en\/easy-script-to-make-simple-lookup-with-colorbox-popup\/#breadcrumblist","itemListElement":[{"@type":"ListItem","@id":"https:\/\/www.bagi2info.com\/en\/#listItem","position":1,"name":"Home","item":"https:\/\/www.bagi2info.com\/en\/","nextItem":{"@type":"ListItem","@id":"https:\/\/www.bagi2info.com\/en\/category\/komputer\/#listItem","name":"Komputer"}},{"@type":"ListItem","@id":"https:\/\/www.bagi2info.com\/en\/category\/komputer\/#listItem","position":2,"name":"Komputer","item":"https:\/\/www.bagi2info.com\/en\/category\/komputer\/","nextItem":{"@type":"ListItem","@id":"https:\/\/www.bagi2info.com\/en\/easy-script-to-make-simple-lookup-with-colorbox-popup\/#listItem","name":"Easy script to make simple lookup with Colorbox popup"},"previousItem":{"@type":"ListItem","@id":"https:\/\/www.bagi2info.com\/en\/#listItem","name":"Home"}},{"@type":"ListItem","@id":"https:\/\/www.bagi2info.com\/en\/easy-script-to-make-simple-lookup-with-colorbox-popup\/#listItem","position":3,"name":"Easy script to make simple lookup with Colorbox popup","previousItem":{"@type":"ListItem","@id":"https:\/\/www.bagi2info.com\/en\/category\/komputer\/#listItem","name":"Komputer"}}]},{"@type":"Person","@id":"https:\/\/www.bagi2info.com\/en\/#person","name":"webmaster","image":{"@type":"ImageObject","@id":"https:\/\/www.bagi2info.com\/en\/easy-script-to-make-simple-lookup-with-colorbox-popup\/#personImage","url":"https:\/\/secure.gravatar.com\/avatar\/38da1efad6745212e2c3b76c8d8e72f69844b6451e55a9c219cdb2bb8b8901ef?s=96&d=mm&r=g","width":96,"height":96,"caption":"webmaster"},"sameAs":["https:\/\/twitter.com\/bagi2infocom","https:\/\/www.instagram.com\/bagi2infocom"]},{"@type":"Person","@id":"https:\/\/www.bagi2info.com\/en\/author\/admin\/#author","url":"https:\/\/www.bagi2info.com\/en\/author\/admin\/","name":"webmaster","image":{"@type":"ImageObject","@id":"https:\/\/www.bagi2info.com\/en\/easy-script-to-make-simple-lookup-with-colorbox-popup\/#authorImage","url":"https:\/\/secure.gravatar.com\/avatar\/38da1efad6745212e2c3b76c8d8e72f69844b6451e55a9c219cdb2bb8b8901ef?s=96&d=mm&r=g","width":96,"height":96,"caption":"webmaster"},"sameAs":["https:\/\/twitter.com\/bagi2infocom","https:\/\/www.instagram.com\/bagi2infocom"]},{"@type":"WebPage","@id":"https:\/\/www.bagi2info.com\/en\/easy-script-to-make-simple-lookup-with-colorbox-popup\/#webpage","url":"https:\/\/www.bagi2info.com\/en\/easy-script-to-make-simple-lookup-with-colorbox-popup\/","name":"Easy script to make simple lookup with Colorbox popup","description":"Script lookup javascript mengambil data tertentu dari list data. Bagi yang mencari script simple lookup dengan popup colorbox dengan php","inLanguage":"en-US","isPartOf":{"@id":"https:\/\/www.bagi2info.com\/en\/#website"},"breadcrumb":{"@id":"https:\/\/www.bagi2info.com\/en\/easy-script-to-make-simple-lookup-with-colorbox-popup\/#breadcrumblist"},"author":{"@id":"https:\/\/www.bagi2info.com\/en\/author\/admin\/#author"},"creator":{"@id":"https:\/\/www.bagi2info.com\/en\/author\/admin\/#author"},"image":{"@type":"ImageObject","url":"https:\/\/www.bagi2info.com\/wp-content\/uploads\/2015\/12\/simplepopup2.jpg","@id":"https:\/\/www.bagi2info.com\/en\/easy-script-to-make-simple-lookup-with-colorbox-popup\/#mainImage","width":709,"height":521,"caption":"simple popup lookup"},"primaryImageOfPage":{"@id":"https:\/\/www.bagi2info.com\/en\/easy-script-to-make-simple-lookup-with-colorbox-popup\/#mainImage"},"datePublished":"2022-03-23T08:11:00+07:00","dateModified":"2022-09-11T13:48:28+07:00"},{"@type":"WebSite","@id":"https:\/\/www.bagi2info.com\/en\/#website","url":"https:\/\/www.bagi2info.com\/en\/","name":"Bagi2info.com","description":"Tips dan Trik Komputer, Tutorial Pemrograman, SQL, PHP, React Native - Expo","inLanguage":"en-US","publisher":{"@id":"https:\/\/www.bagi2info.com\/en\/#person"}}]},"og:locale":"en_US","og:site_name":"Bagi2info.com - Tips dan Trik Komputer, Tutorial Pemrograman, SQL, PHP, React Native - Expo","og:type":"activity","og:title":"Easy script to make simple lookup with Colorbox popup","og:description":"Script lookup javascript mengambil data tertentu dari list data. Bagi yang mencari script simple lookup dengan popup colorbox dengan php","og:url":"https:\/\/www.bagi2info.com\/en\/easy-script-to-make-simple-lookup-with-colorbox-popup\/","og:image":"https:\/\/i0.wp.com\/www.bagi2info.com\/wp-content\/uploads\/2017\/10\/coollogo_com-12072770.png?fit=28164&#038;ssl=1","og:image:secure_url":"https:\/\/i0.wp.com\/www.bagi2info.com\/wp-content\/uploads\/2017\/10\/coollogo_com-12072770.png?fit=28164&#038;ssl=1","twitter:card":"summary","twitter:site":"@bagi2infocom","twitter:title":"Easy script to make simple lookup with Colorbox popup","twitter:description":"Script lookup javascript mengambil data tertentu dari list data. Bagi yang mencari script simple lookup dengan popup colorbox dengan php","twitter:creator":"@bagi2infocom","twitter:image":"https:\/\/i0.wp.com\/www.bagi2info.com\/wp-content\/uploads\/2017\/10\/coollogo_com-12072770.png?fit=28164&ssl=1"},"aioseo_meta_data":{"post_id":"846","title":null,"description":"Script lookup javascript mengambil data tertentu dari list data. Bagi yang mencari script simple lookup dengan popup colorbox dengan php","keywords":[{"label":"script","value":"script"},{"label":"php","value":"php"},{"label":"colorbox","value":"colorbox"},{"label":"lookup","value":"lookup"},{"label":"simple popup","value":"simple popup"}],"keyphrases":{"focus":{"keyphrase":"","score":0,"analysis":{"keyphraseInTitle":{"score":0,"maxScore":9,"error":1}}},"additional":[]},"primary_term":null,"canonical_url":null,"og_title":null,"og_description":null,"og_object_type":"activity","og_image_type":"default","og_image_url":null,"og_image_width":null,"og_image_height":null,"og_image_custom_url":null,"og_image_custom_fields":null,"og_video":"","og_custom_url":null,"og_article_section":null,"og_article_tags":[],"twitter_use_og":false,"twitter_card":"summary","twitter_image_type":"default","twitter_image_url":null,"twitter_image_custom_url":null,"twitter_image_custom_fields":null,"twitter_title":null,"twitter_description":null,"schema":{"blockGraphs":[],"customGraphs":[],"default":{"data":{"Article":[],"Course":[],"Dataset":[],"FAQPage":[],"Movie":[],"Person":[],"Product":[],"ProductReview":[],"Car":[],"Recipe":[],"Service":[],"SoftwareApplication":[],"WebPage":[]},"graphName":"","isEnabled":true},"graphs":[]},"schema_type":"default","schema_type_options":"{\"article\":{\"articleType\":\"BlogPosting\"},\"course\":{\"name\":\"\",\"description\":\"\",\"provider\":\"\"},\"faq\":{\"pages\":[]},\"product\":{\"reviews\":[]},\"recipe\":{\"ingredients\":[],\"instructions\":[],\"keywords\":[]},\"software\":{\"reviews\":[],\"operatingSystems\":[]},\"webPage\":{\"webPageType\":\"WebPage\"},\"blockGraphs\":[]}","pillar_content":false,"robots_default":true,"robots_noindex":false,"robots_noarchive":false,"robots_nosnippet":false,"robots_nofollow":false,"robots_noimageindex":false,"robots_noodp":false,"robots_notranslate":false,"robots_max_snippet":"-1","robots_max_videopreview":"-1","robots_max_imagepreview":"large","priority":null,"frequency":"default","local_seo":null,"breadcrumb_settings":null,"limit_modified_date":false,"ai":null,"created":"2022-05-12 09:34:24","updated":"2025-06-04 06:58:08","seo_analyzer_scan_date":null},"aioseo_breadcrumb":"<div class=\"aioseo-breadcrumbs\"><span class=\"aioseo-breadcrumb\">\n\t\t\t<a href=\"https:\/\/www.bagi2info.com\/en\/\" title=\"Home\">Home<\/a>\n\t\t<\/span><span class=\"aioseo-breadcrumb-separator\">&raquo;<\/span><span class=\"aioseo-breadcrumb\">\n\t\t\t<a href=\"https:\/\/www.bagi2info.com\/en\/category\/komputer\/\" title=\"Komputer\">Komputer<\/a>\n\t\t<\/span><span class=\"aioseo-breadcrumb-separator\">&raquo;<\/span><span class=\"aioseo-breadcrumb\">\n\t\t\tEasy script to make simple lookup with Colorbox popup\n\t\t<\/span><\/div>","aioseo_breadcrumb_json":[{"label":"Home","link":"https:\/\/www.bagi2info.com\/en\/"},{"label":"Komputer","link":"https:\/\/www.bagi2info.com\/en\/category\/komputer\/"},{"label":"Easy script to make simple lookup with Colorbox popup","link":"https:\/\/www.bagi2info.com\/en\/easy-script-to-make-simple-lookup-with-colorbox-popup\/"}],"_links":{"self":[{"href":"https:\/\/www.bagi2info.com\/en\/wp-json\/wp\/v2\/posts\/846","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.bagi2info.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.bagi2info.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.bagi2info.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.bagi2info.com\/en\/wp-json\/wp\/v2\/comments?post=846"}],"version-history":[{"count":0,"href":"https:\/\/www.bagi2info.com\/en\/wp-json\/wp\/v2\/posts\/846\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.bagi2info.com\/en\/wp-json\/wp\/v2\/media\/850"}],"wp:attachment":[{"href":"https:\/\/www.bagi2info.com\/en\/wp-json\/wp\/v2\/media?parent=846"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.bagi2info.com\/en\/wp-json\/wp\/v2\/categories?post=846"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.bagi2info.com\/en\/wp-json\/wp\/v2\/tags?post=846"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}