PHP Live MySQL Database Search<\/title>\r\n <link rel=\"stylesheet\" href=\"\/\/code.jquery.com\/ui\/1.13.2\/themes\/base\/jquery-ui.css\">\r\n<script src=\"https:\/\/code.jquery.com\/jquery-3.6.0.min.js\"><\/script>\r\n<script src=\"https:\/\/code.jquery.com\/jquery-migrate-1.4.1.min.js\"><\/script>\r\n <script src=\"https:\/\/code.jquery.com\/ui\/1.13.2\/jquery-ui.js\"><\/script>\r\n\r\n\r\n<link rel=\"stylesheet\" href=\"https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@4.5.3\/dist\/css\/bootstrap.min.css\" integrity=\"sha384-TX8t27EcRE3e\/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2\" crossorigin=\"anonymous\">\r\n<script src=\"https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@4.5.3\/dist\/js\/bootstrap.bundle.min.js\" integrity=\"sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ\/JpcUGGOn+Y7RsweNrtN\/tE3MoK7ZeZDyx\" crossorigin=\"anonymous\"><\/script>\r\n\r\n<link rel=\"stylesheet\" type=\"text\/css\" href=\"https:\/\/cdn.datatables.net\/v\/dt\/dt-1.13.1\/datatables.min.css\"\/>\r\n \r\n<script type=\"text\/javascript\" src=\"https:\/\/cdn.datatables.net\/v\/dt\/dt-1.13.1\/datatables.min.js\"><\/script>\r\n\r\n\r\n<style>\r\n body{\r\n font-family: Arial, sans-serif;\r\n \r\n }\r\n .site-content{\r\n height: auto;\r\n font-size:16px; \r\n}\r\n#numerosearch{\r\n max-width: 200px;\r\n float:right;\r\n height: 32px;\r\n padding: 5px 10px;\r\n border: 1px solid #CCCCCC;\r\n font-size: 22px;\r\n max-height: 100px;\r\n}\r\n\r\n.search-box{\r\n margin:5%;\r\n margin-left:10%;\r\n width: 80%;\r\n \r\n position: relative;\r\n display:inline-block;\r\n font-size: 22px;\r\n padding-bottom: 0px;\r\n }\r\n \r\n #column{\r\n background-color:white;\r\n width: 100%;\r\n border-radius: 10px;\r\n \/*box-shadow: 5px 10px #f1f1f1;*\/\r\n \r\n } \r\n .search-box input[type=\"text\"]{\r\n height: 60px;\r\n padding: 5px 10px;\r\n border: 1px solid #CCCCCC;\r\n font-size: 22px;\r\n max-height: 100px;\r\n }\r\n .search-box input[type=\"number\"]{\r\n height: 60px;\r\n padding: 5px 10px;\r\n border: 1px solid #CCCCCC;\r\n font-size: 22px;\r\n max-height: 100px;\r\n }\r\n .result{\r\n z-index: 999;\r\n top: 100%;\r\n left: 0;\r\n overflow: auto;\r\n opacity: 1;\r\n }\r\n .search-box input[type=\"text\"], .result{\r\n width: 100%;\r\n box-sizing: border-box;\r\n max-height: 115px;\r\n opacity: 1;\r\n }\r\n .result p{\r\n margin: 0;\r\n padding: 7px 10px;\r\n border: 1px solid #CCCCCC;\r\n border-top: none;\r\n cursor: pointer;\r\n max-height: 100px;\r\n }\r\n .result p:hover{\r\n background: #f2f2f2;\r\n max-height: 100px;\r\n }\r\n#divtable , #divtable2{\r\n background-color:white; \r\n border-radius: 10px;\r\n font-size:20px; \r\nwidth:auto; \r\nmargin-top:2%;\r\n }\r\n\r\n#divtable h2 , #divtable2 h2{\r\n display:inline; \r\n }\r\n\r\n.cardt{\r\n width:85%;\r\n margin-left:7.5%;\r\n margin-bottom:7.5%;\r\n}\r\n.card-content {\r\n flex: 1 1 auto;\r\n}\r\ndt{\r\n font-size:22px;\r\n\r\n}\r\ndd {\r\n font-size:22px;\r\n}\r\ndl {\r\n display: flex;\r\n flex-wrap: wrap;\r\n margin-right: -15px;\r\n margin-left: -15px;\r\n background: #fff;\r\n padding: 0.7rem 1.5rem;\r\n margin: 0;\r\n position: relative;\r\n\r\n}\r\n.card-content dl dd, .card-content dl dt {\r\n border-bottom: 1px dotted #aab3c1;\r\n padding: 0.8rem 0;\r\n margin: 0;\r\n}\r\n.card-content dl dd:last-of-type , .card-content dl dt:last-of-type {\r\n border:none;\r\n}\r\n .card-content h1 {\r\n text-align:center;\r\n \r\n }\r\n .titlestudy{\r\nborder-top: 1px solid black;\r\nborder-bottom: 1px solid black;\r\n\r\n\r\n margin:auto;\r\n }\r\n@media (max-width: 575.98px) { \r\n .card-content dl dt {\r\n border-bottom: none;\r\n}\r\n\r\n}\r\n\r\n.form-control:focus {\r\n border-color: #0000FF;\r\n box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102,205,170, 0.6);\r\n}\r\ndiv.dataTables_wrapper {\r\n width: 80%;\r\n margin: 2%;\r\n margin-left: 10%;\r\n margin-right: 10%;\r\n\r\n font-size:22px;\r\n \r\n}\r\n.carousel-item.active,\r\n.carousel-control-next,\r\n.carousel-control-prev{\r\n display:flex;\r\n}\r\n\r\n.carousel-control-next,\r\n.carousel-control-prev , \r\n.carousel-indicators {\r\n filter: invert(100%);\r\n}\r\n@media (max-width: 575.98px) { \r\n .card-content dl dt {\r\n border-bottom: none;\r\n}\r\n\r\n}\r\n\r\n\r\n.form-control:focus {\r\n border-color: #0000FF;\r\n box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102,205,170, 0.6);\r\n}\r\n.sample{\r\n font-size:0.9vw;\r\n font-style:italic;\r\n}\r\n\r\n.carousel-control-next,\r\n.carousel-control-prev , \r\n.carousel-indicators {\r\n filter: invert(100%);\r\n}\r\n\r\n\r\n .helpresult{\r\n z-index: 999;\r\n top: 100%;\r\n left: 10%;\r\n overflow: auto;\r\n opacity: 1;\r\n }\r\n #divtable p , #divtable2 p {\r\n color: black !important ;\r\n }\r\n .helpresult p , .helpresult h2{\r\n font-size:0.9vw;\r\n margin: 0;\r\n margin-left:2%;\r\n font-style:italic;\r\n max-height: 100px;\r\n }\r\n \r\n .dataTables_length, .dataTables_length select\r\n { \r\n font-size: 1.5em;\r\n \r\n }\r\n .popover{\r\n font-size: 2em;\r\n\r\n }\r\n caption {\r\n text-align:center;\r\n font-style:italic;\r\n caption-side:top;\r\n }\r\n #modaldesc {\r\n position: absolute;\r\n left: 50%;\r\n top: 50%;\r\n transform: translate(-50%, -50%);\r\n}\r\n.btn-secondary{\r\n width:20%;\r\n font-size:16px;\r\n margin-left:10%;\r\n}\r\n .btn-primary {\r\n width:10%;\r\n font-size:16px;\r\n margin-left:50%;\r\n }\r\n\r\n<\/style>\r\n\r\n<\/script>\r\n<\/head>\r\n<body>\r\n\r\n\r\n\r\n<div id=\"column\">\r\n\r\n<div class=\"search-box\">\r\n\r\n Food or bioactive compound <img id=\"datahelp1\" class=\"help \"src=\"http:\/\/imdeafoodcompubio.com\/wp-content\/uploads\/2022\/06\/icon1.png\" width=\"15\" \/>\r\n <div class=\"helpresult\" id=\"help1\"><\/div>\r\n <input type=\"text\" id=\"key\" class=\"key form-control\" placeholder='Resveratrol'>\r\n <div class=\"result\" id=\"result\"><\/div>\r\n <br>\r\n Cell line\/Sample type <img id=\"datahelpsample\" class=\"help \"src=\"http:\/\/imdeafoodcompubio.com\/wp-content\/uploads\/2022\/06\/icon1.png\" width=\"15\" \/>\r\n <div class=\"helpresult\" id=\"helpsample\"><\/div>\r\n <input type=\"text\" id=\"origen\" class=\"key form-control\" placeholder=''>\r\n <div class=\"result\" id=\"result2\"><\/div>\r\n<\/div> \r\n <\/div>\r\n \r\n <div id='divtable'>\r\n \r\n\r\n<table id=\"table\" class=\"hover\" style=\"width:100%\">\r\n <caption> Click in the row of interest to get more information <\/caption>\r\n<\/table>\r\n<\/div>\r\n\r\n\r\n<div id=\"myCarousel\" class=\"carousel slide card\" data-interval=\"false\" data-ride=\"carousel\">\r\n\r\n\r\n<button type=\"button\" class=\"btn btn-primary\" data-toggle=\"modal\" data-target=\"#modaldesc\">\r\nDownload\r\n<\/button>\r\n\r\n<div class=\"modal fade\" id=\"modaldesc\" role=\"dialog\">\r\n <div class=\"modal-dialog\">\r\n <div class=\"modal-content\">\r\n <div class=\"modal-header\">\r\n <button type=\"button\" class=\"close\" data-dismiss=\"modal\" aria-label=\"Close\">\r\n <span aria-hidden=\"true\">×<\/span>\r\n <\/button>\r\n <\/div>\r\n <div class=\"modal-body\">\r\n <button type=\"button\" id='copy' class=\"btn btn-secondary\">copy\r\n <img id=\"datahelpcopy\" class=\"help \"src=\"http:\/\/imdeafoodcompubio.com\/wp-content\/uploads\/2022\/06\/icon1.png\" width=\"15\" \/> \r\n <\/button>\r\n <button type=\"button\" id='tsv' class=\"btn btn-secondary\">TSV<\/button>\r\n <button type=\"button\" id='csv' class=\"btn btn-secondary\">CSV<\/button>\r\n \r\n <div class=\"helpresult\" id=\"helpcopy\"><\/div>\r\n\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n<\/div>\r\n\r\n <ol class=\"carousel-indicators\">\r\n <\/ol>\r\n\r\n\r\n <div class=\"carousel-inner\">\r\n <\/div>\r\n\r\n <a class=\"carousel-control-prev\" href=\"#myCarousel\" role=\"button\" data-slide=\"prev\">\r\n <span class=\"carousel-control-prev-icon\" aria-hidden=\"true\"><\/span>\r\n <span class=\"sr-only\">Previous<\/span>\r\n <\/a>\r\n <a class=\"carousel-control-next\" href=\"#myCarousel\" role=\"button\" data-slide=\"next\">\r\n <span class=\"carousel-control-next-icon\" aria-hidden=\"true\"><\/span>\r\n <span class=\"sr-only\">Next<\/span>\r\n <\/a>\r\n\r\n<\/div>\r\n\r\n\r\n\r\n<div id='divtable2'>\r\n <button type=\"button\" class=\"btn btn-primary\" data-toggle=\"modal\" data-target=\"#modaldesc2\">\r\nDownload\r\n<\/button>\r\n <table id='table2' class=\"stripe \" style=\"witdh:100%\"><\/table>\r\n \r\n<\/div>\r\n\r\n<div class=\"modal fade\" id=\"modaldesc2\" role=\"dialog\">\r\n <div class=\"modal-dialog\">\r\n <div class=\"modal-content\">\r\n <div class=\"modal-header\">\r\n <button type=\"button\" class=\"close\" data-dismiss=\"modal\" aria-label=\"Close\">\r\n <span aria-hidden=\"true\">×<\/span>\r\n <\/button>\r\n <\/div>\r\n <div class=\"modal-body\">\r\n <button type=\"button\" id='copy' class=\"btn btn-secondary\">copy\r\n <img id=\"datahelpcopy2\" class=\"help \"src=\"http:\/\/imdeafoodcompubio.com\/wp-content\/uploads\/2022\/06\/icon1.png\" width=\"15\" \/> \r\n <\/button>\r\n <button type=\"button\" id='tsv' class=\"btn btn-secondary\">TSV<\/button>\r\n <button type=\"button\" id='csv' class=\"btn btn-secondary\">CSV<\/button>\r\n \r\n <div class=\"helpresult\" id=\"helpcopy2\"><\/div>\r\n\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n<\/body>\r\n<script>\r\n jQuery(document).ready(function($) {\r\n var datacharge=true;\r\n $(\"#divtable\").hide();\r\n $(\"#divtable2\").hide();\r\n\r\n $(\"#myCarousel\").hide();\r\n var table;\r\n var table2;\r\n var orden;\r\n var idmax;\r\n var datanew=[];\r\n var datadescargasample=[];\r\n var registrotrue=true;\r\n var datacharge=true;\r\n var datacharge2=true;\r\n var datoscarousel=[];\r\n var datos=[];\r\n var arraynom = [\"accession\" ,\"gpl\",\"title\",\"abstract\",\"study_type\"];\r\n var arraynom2= [\"treatment\",\"origin_type\",\"origin_name\",\"GSM\",\"time_point\",\"concentration\"]\r\n\r\n\r\n\r\n\r\n $(document).on('click', '.help', function() { \r\n var idhelp = $(this).attr(\"id\");\r\nif (idhelp==\"datahelp1\") {\r\n window.open('http:\/\/imdeafoodcompubio.com\/index.php\/help\/#food', '_blank');\r\n \r\n} \r\n\r\n });\r\n\r\n$(document).on(\"mouseenter\", \".help\", function(){\r\n$(\".helpresult\").empty();\r\nvar idhelp = $(this).attr(\"id\");\r\nif (idhelp==\"datahelp1\") {\r\n $(\"#help1\").append(\"<p>Type the term of interest. If FooDrugs database doesn't have experiments with the query term a \u201cNo Results Found\u201d message will appear.<\/p>\");\r\n \r\n} else if (idhelp==\"datahelpsample\") {\r\n $(\"#helpsample\").append(\"<p>Allow you to filter by cell line or sample type. If FooDrugs database doesn't have cell lines or sample types with the query term a \u201cNo Results Found\u201d message will appear.<\/p>\");\r\n\r\n}\r\nelse if (idhelp==\"datahelpentries\") {\r\n $(\"#helpentries\").append(\"<p>Allow you to filter the number of studies to display<\/p>\");\r\n \r\n} \r\nelse if (idhelp==\"datahelpfilter\") {\r\n $(\"#helpfilter\").append(\"<p>Allow you to filter with free text on the table by any field<\/p>\");\r\n \r\n} else if (idhelp==\"datahelpentries2\") {\r\n $(\"#helpentries2\").append(\"<p>Allow you to filter the number of studies to display<\/p>\");\r\n \r\n} \r\nelse if (idhelp==\"datahelpfilter2\") {\r\n $(\"#helpfilter2\").append(\"<p>Allow you to filter with free text on the table by any field<\/p>\");\r\n \r\n}\r\nelse if (idhelp==\"datahelpcopy\"){\r\n $(\"#helpcopy\").append(\"<p>Allow to copy the information on the clipboard<\/p>\");\r\n\r\n}\r\nelse if (idhelp==\"datahelpcopy2\"){\r\n $(\"#helpcopy2\").append(\"<p>Allow to copy the information on the clipboard<\/p>\");\r\n\r\n}\r\n});\r\n\r\n$(document).on(\"mouseleave\", \".help\", function(){\r\n$(\".helpresult\").empty();\r\n });\r\n\r\n\r\n\r\n\r\n\r\n\r\n \/\/Keyup event to fill the div which will show the autocomplete suggestions\r\n $('.key').on('keyup input', function() { \r\n \/\/We get the value and the id of the input.\r\n \r\nvar key = $(this).val();\r\n orden = $(this).attr(\"id\");\r\n \/\/We check that the value is not null or empty\r\nif(key != \"\"){\r\n jQuery.ajax({\r\n \/\/We make a request to ajax that redirects us to another script where the Mysql query will be executed and will return the first 5 records similar to what is being searched for\r\n url:'https:\/\/imdeafoodcompubio.com\/wp-content\/themes\/bento-child\/foodt\/ajaxsql.php',\r\n type: 'post',\r\n data: {search:key, type:1,orden:orden},\r\n dataType: 'json',\r\n success:function(response){\r\n \/\/Here in this if we check which of the two inputs is the one being written\r\n \/\/We get the length of the response and add one by one the response in the div\r\n if (orden==\"key\") {\r\n var len = response.length;\r\n $(\"#result\").empty();\r\n for( var i = 0; i<len; i++){\r\n var name = response[i]['name'];\r\n $(\"#result\").append(\"<p>\"+name+\"<\/p>\");\r\n } \r\n }else {\r\n var len = response.length;\r\n $(\"#result2\").empty();\r\n for( var i = 0; i<len; i++){\r\n var name = response[i]['name'];\r\n $(\"#result2\").append(\"<p>\"+name+\"<\/p>\");\r\n }\r\n }\r\n }, error: function(XMLHttpRequest, textStatus, errorThrown) { \r\n alert(\"Status: \" + textStatus); alert(\"Error: \" + errorThrown); \r\n } \r\n });\r\n \/\/If the answer is empty, the result is cleaned\r\n}else {\r\n $(\".result\").empty();\r\n}\r\n})\r\n\r\n\/\/CLICK event on any of the input options\r\n$(document).on(\"click\", \".result p\", function(){\r\n \/\/Check what input is clicked and call showtables function\r\n if (orden==\"key\") {\r\n $('#result').empty(); \r\n $('#'+orden).val($(this).text());\r\n mostrartablas();\r\n }else{\r\n $('#result2').empty(); \r\n $('#'+orden).val($(this).text());\r\n \/\/Check the value of the first input to call the function\r\n if ($('#key').val()!=null) {\r\n mostrartablas();\r\n }\r\n }\r\n });\r\n\r\n\/\/Function 'mostrartablas' sends a request to ajax so that it returns the corresponding values\r\nfunction mostrartablas(){\r\n var key = $('#key').val();\r\n\r\n $.ajax({\r\n \r\n url:'https:\/\/imdeafoodcompubio.com\/wp-content\/themes\/bento-child\/foodt\/ajaxsql.php',\r\n type: 'post',\r\n data: {search:key, type:2,search2:\"\"},\r\n dataType: 'json',\r\n success:function(response){\r\n datos=response;\r\n var datostable=[];\r\n console.log(response[0]);\r\n for (let index = 0; index < response.length; index++) {\r\n datostable[index]=[];\r\n datostable[index].push(response[index][arraynom[2]]);\r\n datostable[index].push(response[index][arraynom[4]]);\r\n datostable[index].push(response[index][arraynom[0]]);\r\n}\r\n\r\n\r\n if(datacharge==true){\r\n datacharge=false;\r\n}else {\r\n table.destroy();\r\n \r\n}\r\n\r\n table = $('#table').DataTable({\r\n data: datostable,\r\n columns: [\r\n { title: \"Title\", \"width\": \"60%\"},\r\n { title: \"Study Type\" },\r\n { title: \"<span id='tablepopover' tabindex='0' data-toggle='popover' data-content='GEO Series identifier click on the word to go to the original information source'> GSE <img src='http:\/\/imdeafoodcompubio.com\/wp-content\/uploads\/2022\/06\/icon1.png' width='15' \/> <\/span>\" ,\r\n \"render\": function (data, type, row) {\r\n return '<a href=\"https:\/\/www.ncbi.nlm.nih.gov\/geo\/query\/acc.cgi?acc=GSE' + data + '\" target=\"no_blank\">' + data + '<\/a>';\r\n }\r\n \r\n },\r\n ],\r\n language: {\r\n \"lengthMenu\": '<h2> Show entries <\/h2> <img decoding=\"async\" class=\"help\" id=\"datahelpentries\" src=\"http:\/\/imdeafoodcompubio.com\/wp-content\/uploads\/2022\/06\/icon1.png\" width=\"15\"><\/img> <div class=\"helpresult\" id=\"helpentries\"><\/div> _MENU_' ,\r\n \"search\": ' <h2> Filter Records<\/h2> <img decoding=\"async\" class=\"help\" id=\"datahelpfilter\" src=\"http:\/\/imdeafoodcompubio.com\/wp-content\/uploads\/2022\/06\/icon1.png\" width=\"15\"><\/img> <div class=\"helpresult\" id=\"helpfilter\"><\/div> _INPUT_' \r\n },\r\n });\r\n $('[data-toggle=\"popover\"]').popover({\r\n 'trigger': 'hover',\r\n});\r\n $(\"#divtable\").show();\r\n\r\n } ,error: function(XMLHttpRequest, textStatus, errorThrown) { \r\n alert(\"Status: \" + textStatus); alert(\"Error: \" + errorThrown); \r\n } \r\n });\r\n}\r\n\r\n\r\n\r\n\r\n\r\n\/\/table click event \r\n$(document).on('click', '.sample', function() { \r\n var id = $(this).attr(\"id\");\r\n var x = false;\r\n \/\/Change the color of the cell\r\n var identificador = id.substr(5,1);\r\n id = id.substr(6);\r\n \/\/we get the cell id\r\n id=parseInt(id);\r\n\/\/we make two requests and if both are correct we go to another page\r\n $.ajax({\r\n url:'https:\/\/imdeafoodcompubio.com\/wp-content\/themes\/bento-child\/foodt\/ajaxsql.php',\r\n type: 'post',\r\n data: {search:datos[id]['accession'],type:3},\r\n dataType: 'json',\r\n success:function(response){\r\n var datasamples=[];\r\n datadescargasample=response;\r\n for (let index = 0; index < response.length; index++) {\r\n datasamples[index]=[];\r\nfor (var value in response[index]){ \r\n datasamples[index].push(response[index][value]);\r\n}\r\n}\r\n if(datacharge2==true){\r\n datacharge2=false;\r\n}else {\r\n table2.destroy();\r\n}\r\n $(\"#divtable2\").show();\r\n\r\n table2 = $('#table2').DataTable({\r\n data: datasamples,\r\n columns: [\r\n { title: \"Treatment\"},\r\n { title: \"Cell\/Tissue Type\" },\r\n { title: \"Cell\/Tissue Name\"},\r\n { title: \"<span id='tablepopover' tabindex='0' data-toggle='popover' data-content='GEO Sample identifier click on the word to go to the original information source'> GSM <img src='http:\/\/imdeafoodcompubio.com\/wp-content\/uploads\/2022\/06\/icon1.png' width='15' \/> <\/span>\" ,\r\n \"render\": function (data, type, row) {\r\n return '<a href=\"https:\/\/www.ncbi.nlm.nih.gov\/geo\/query\/acc.cgi?acc=GSM' + data + '\" target=\"no_blank\">' + data + '<\/a>';\r\n }\r\n \r\n },\r\n { title: \"Time Point\"},\r\n { title: \"Concentration\"},\r\n ],\r\n language: {\r\n \"lengthMenu\": '<h2> Show entries <\/h2> <img decoding=\"async\" class=\"help\" id=\"datahelpentries2\" src=\"http:\/\/imdeafoodcompubio.com\/wp-content\/uploads\/2022\/06\/icon1.png\" width=\"15\"><\/img> <div class=\"helpresult\" id=\"helpentries2\"><\/div> _MENU_' ,\r\n \"search\": ' <h2> Filter Records<\/h2> <img decoding=\"async\" class=\"help\" id=\"datahelpfilter2\" src=\"http:\/\/imdeafoodcompubio.com\/wp-content\/uploads\/2022\/06\/icon1.png\" width=\"15\"><\/img> <div class=\"helpresult\" id=\"helpfilter2\"><\/div> _INPUT_' \r\n },\r\n });\r\n $('[data-toggle=\"popover\"]').popover({\r\n 'trigger': 'hover',\r\n});\r\n\r\n elemento = document.getElementById(\"table2\");\r\n elemento.scrollIntoView();\r\n }});\r\n\r\n});\r\n\r\n\r\n\r\n\/\/table click event \r\n $(document).on('click', '#table tr', function() { \r\n $(\"#myCarousel\").show();\r\n \/\/Change the color of the cell\r\n$(\".highlight\").css({'background-color': \"transparent\" });\r\n $( '.highlight' ).removeClass( \"highlight\" );\r\n $(this).css(\"background-color\",\"#CDCDCD\");\r\n var row = table.row( this ).data()\r\n $( this ).addClass( \"highlight\" );\r\n var title = row[0];\r\n datoscarousel.push(datos.filter(function(data){ return data.title == title }));\r\n \r\n if(datoscarousel.length==1){\r\n $(\".carousel-indicators\").append(\"<li id='licarou0' data-target='#myCarousel' data-slide-to='0' class='active'><\/li>\");\r\n $(\".carousel-inner\").append(\"<div class='carousel-item active' id='carou0'><\/div>\");\r\n }\r\n else {\r\n $(\".carousel-indicators\").append(\"<li id='licarou\"+(datoscarousel.length-1)+\"' data-target='#myCarousel' data-slide-to='\"+(datoscarousel.length-1)+\"' ><\/li>\");\r\n $(\".carousel-inner\").append(\"<div class='carousel-item' id='carou\"+(datoscarousel.length-1)+\"'><\/div>\"); \r\n \r\n }\r\n var lon = datoscarousel.length-1;\r\n \r\n $(\"#carou\"+lon).append(\"<div class='cardt'><div class='cardcontent d-block w-100' id='card\"+lon+\"'><\/div><\/div>\");\r\n $(\"#card\"+lon).append(\"<dl class='' id='conte\"+lon+\"'><\/dl>\");\r\n $(\"#conte\"+lon).append(\"<dt class = 'col-sm-3 col-md-6 col-lg-4 col-xl-2'> Title <\/dt>\");\r\n $(\"#conte\"+lon).append(\"<dd class='col-sm-9 col-md-6 col-lg-8 col-xl-10' > \" +datoscarousel[lon][0][arraynom[2]]+\"<\/dd>\");\r\n $(\"#conte\"+lon).append(\"<dt class = 'col-sm-3 col-md-6 col-lg-4 col-xl-2'> Abstract <\/dt>\");\r\n $(\"#conte\"+lon).append(\"<dd class='col-sm-9 col-md-6 col-lg-8 col-xl-10' > \"+datoscarousel[lon][0][arraynom[3]]+\"<\/dd>\");\r\n $(\"#conte\"+lon).append(\"<dt class = 'col-sm-3 col-md-6 col-lg-4 col-xl-2'> Study Type <\/dt>\");\r\n $(\"#conte\"+lon).append(\"<dd class='col-sm-9 col-md-6 col-lg-8 col-xl-10' > \" +datoscarousel[lon][0][arraynom[4]]+\"<\/dd>\");\r\n $(\"#conte\"+lon).append(\"<dt class = 'col-sm-3 col-md-6 col-lg-4 col-xl-2'> Accession <\/dt>\");\r\n $(\"#conte\"+lon).append(\"<dd class='col-sm-9 col-md-6 col-lg-8 col-xl-10' > <a href=https:\/\/www.ncbi.nlm.nih.gov\/geo\/query\/acc.cgi?acc=GSE\"+datoscarousel[lon][0][arraynom[0]]+\" target='_blank'>https:\/\/www.ncbi.nlm.nih.gov\/geo\/query\/acc.cgi?acc=GSE\"+datoscarousel[lon][0][arraynom[0]]+\"<\/a><\/dd>\");\r\n $(\"#conte\"+lon).append(\"<dt class = 'col-sm-3 col-md-6 col-lg-4 col-xl-2'> GLP <\/dt>\");\r\n $(\"#conte\"+lon).append(\"<dd class='col-sm-9 col-md-6 col-lg-8 col-xl-10' > <a href=https:\/\/www.ncbi.nlm.nih.gov\/geo\/query\/acc.cgi?acc=GPL\"+datoscarousel[lon][0][arraynom[1]]+\" target='_blank'> https:\/\/www.ncbi.nlm.nih.gov\/geo\/query\/acc.cgi?acc=GPL\"+datoscarousel[lon][0][arraynom[1]]+\"<\/a><\/dd>\");\r\n $(\"#conte\"+lon).append(\"<dt> Samples <a class='sample' style ='color:#00008b;'id='sample\"+lon+\"'>more info<a\/><\/dt>\");\r\n $('#licarou'+lon).click();\r\n\r\n \r\n \r\n }); \r\n\r\n\r\n\r\n $(document).on('click', '#modaldesc .btn-secondary', function() {\r\n \/\/Get the page where you are and what type of download it iss\r\n var subid= $(this).attr(\"id\");\r\n console.log(datoscarousel);\r\n\/\/Copy with the obtained data, with this it is added to an input and the copy command is executed later the input is deleted\r\n \/\/ With this is on the clipboard\r\n\/\/We remove the fields from the strati num text yendi array so that there is no information \/\/irrelevant for the user\r\n if (subid == \"copy\" ) {\r\n dataacopiar=[];\r\n copy=\"\";\r\n for (let i = 0; i < datoscarousel.length; i++) {\r\n dataacopiar[i]={};\r\n for (let j = 0; j < datoscarousel[i].length; j++) {\r\n for (var dato in datoscarousel[i][j]){\r\n dataacopiar[i][dato]=datoscarousel[i][j][dato];\r\n}\r\n}\r\n}\r\n $('<input id=\"textcopy\">').val(copy).appendTo('body').select(); \r\n document.execCommand('copy'); \r\n var el = document.getElementById('textcopy');\r\n el.remove();\r\n }\r\n \/\/TSV OR CSV the file is sent to descargararchivo.php and the associative array is sent\r\n else {\r\n dataacopiar=[];\r\n for (let i = 0; i < datoscarousel.length; i++) {\r\n dataacopiar[i]={};\r\n for (let j = 0; j < datoscarousel[i].length; j++) {\r\n for (var dato in datoscarousel[i][j]){\r\n dataacopiar[i][dato]=datoscarousel[i][j][dato];\r\n}\r\n}\r\n}\r\n $.ajax({\r\n url:'https:\/\/imdeafoodcompubio.com\/wp-content\/themes\/bento-child\/descargararchivo.php',\r\n type: 'post',\r\n data: {key:subid,data:dataacopiar,name:\"tablefoodstudies\"},\r\n dataType: 'json',\r\n success:function(response){\r\n \/\/Get the name of the file which is on the response and create an element <a> and add the attribute\r\n \/\/'download' and indicate where the file is located and order the element to be clicked\r\n \/\/and start the download\r\n fileName=response;\r\n fileUrl=\"http:\/\/imdeafoodcompubio.com\/wp-content\/uploads\/2022\/desc\/\"+fileName;\r\n var a = document.createElement(\"a\");\r\n a.href = fileUrl;\r\n a.setAttribute(\"download\", fileName);\r\n a.click();\r\n }\r\n });\r\n }\r\n });\r\n \r\n\r\n$(document).on('click', '#modaldesc2 .btn-secondary', function() {\r\n \r\n \/\/Get the page where you are and what type of download it iss\r\n var subid= $(this).attr(\"id\");\r\n\/\/Copy with the obtained data, with this it is added to an input and the copy command is executed later the input is deleted\r\n \/\/ With this is on the clipboard\r\n\/\/We remove the fields from the strati num text yendi array so that there is no information \/\/irrelevant for the user\r\nconsole.log(datadescargasample);\r\n if (subid == \"copy\" ) {\r\n dataacopiar=[];\r\n copy=\"\";\r\n for (let i = 0; i < datadescargasample.length || i < 10 ; i++) {\r\n dataacopiar[i]={};\r\n for (var dato in datadescargasample[i]){\r\n copy=copy+datadescargasample[i][dato];\r\n\r\n}\r\n}\r\n $('<input id=\"textcopy\">').val(copy).appendTo('body').select(); \r\n document.execCommand('copy'); \r\n var el = document.getElementById('textcopy');\r\n el.remove();\r\n }\r\n \/\/TSV OR CSV the file is sent to descargararchivo.php and the associative array is sent\r\n else {\r\n dataacopiar=[];\r\n \r\n for (let i = 0; i < datadescargasample.length; i++) {\r\n dataacopiar[i]={};\r\n for (var dato in datadescargasample[i]){\r\n dataacopiar[i][dato]=datadescargasample[i][dato];\r\n\r\n}\r\n}\r\n $.ajax({\r\n url:'https:\/\/imdeafoodcompubio.com\/wp-content\/themes\/bento-child\/descargararchivo.php',\r\n type: 'post',\r\n data: {key:subid,data:dataacopiar,name:\"tablesamples\"},\r\n dataType: 'json',\r\n success:function(response){\r\n \/\/Get the name of the file which is on the response and create an element <a> and add the attribute\r\n \/\/'download' and indicate where the file is located and order the element to be clicked\r\n \/\/and start the download\r\n fileName=response;\r\n fileUrl=\"http:\/\/imdeafoodcompubio.com\/wp-content\/uploads\/2022\/desc\/\"+fileName;\r\n var a = document.createElement(\"a\");\r\n a.href = fileUrl;\r\n a.setAttribute(\"download\", fileName);\r\n a.click();\r\n }\r\n });\r\n }\r\n });\r\n\r\n });\r\n<\/script>\r\n<\/html>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-17","page","type-page","status-publish","hentry","no-thumb"],"_links":{"self":[{"href":"https:\/\/imdeafoodcompubio.com\/index.php\/wp-json\/wp\/v2\/pages\/17","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/imdeafoodcompubio.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/imdeafoodcompubio.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/imdeafoodcompubio.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/imdeafoodcompubio.com\/index.php\/wp-json\/wp\/v2\/comments?post=17"}],"version-history":[{"count":5,"href":"https:\/\/imdeafoodcompubio.com\/index.php\/wp-json\/wp\/v2\/pages\/17\/revisions"}],"predecessor-version":[{"id":679,"href":"https:\/\/imdeafoodcompubio.com\/index.php\/wp-json\/wp\/v2\/pages\/17\/revisions\/679"}],"wp:attachment":[{"href":"https:\/\/imdeafoodcompubio.com\/index.php\/wp-json\/wp\/v2\/media?parent=17"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":17,"date":"2021-03-04T12:07:35","date_gmt":"2021-03-04T12:07:35","guid":{"rendered":"http:\/\/imdeafoodcompubio.com\/?page_id=17"},"modified":"2023-01-31T12:13:53","modified_gmt":"2023-01-31T12:13:53","slug":"food_transcriptomic_studies","status":"publish","type":"page","link":"https:\/\/imdeafoodcompubio.com\/index.php\/food_transcriptomic_studies\/","title":{"rendered":"Food Transcriptomic Studies"},"content":{"rendered":"\r\n\r\n\r\n\r\n\r\nPHP Live MySQL Database Search<\/title>\r\n <link rel=\"stylesheet\" href=\"\/\/code.jquery.com\/ui\/1.13.2\/themes\/base\/jquery-ui.css\">\r\n<script src=\"https:\/\/code.jquery.com\/jquery-3.6.0.min.js\"><\/script>\r\n<script src=\"https:\/\/code.jquery.com\/jquery-migrate-1.4.1.min.js\"><\/script>\r\n <script src=\"https:\/\/code.jquery.com\/ui\/1.13.2\/jquery-ui.js\"><\/script>\r\n\r\n\r\n<link rel=\"stylesheet\" href=\"https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@4.5.3\/dist\/css\/bootstrap.min.css\" integrity=\"sha384-TX8t27EcRE3e\/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2\" crossorigin=\"anonymous\">\r\n<script src=\"https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@4.5.3\/dist\/js\/bootstrap.bundle.min.js\" integrity=\"sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ\/JpcUGGOn+Y7RsweNrtN\/tE3MoK7ZeZDyx\" crossorigin=\"anonymous\"><\/script>\r\n\r\n<link rel=\"stylesheet\" type=\"text\/css\" href=\"https:\/\/cdn.datatables.net\/v\/dt\/dt-1.13.1\/datatables.min.css\"\/>\r\n \r\n<script type=\"text\/javascript\" src=\"https:\/\/cdn.datatables.net\/v\/dt\/dt-1.13.1\/datatables.min.js\"><\/script>\r\n\r\n\r\n<style>\r\n body{\r\n font-family: Arial, sans-serif;\r\n \r\n }\r\n .site-content{\r\n height: auto;\r\n font-size:16px; \r\n}\r\n#numerosearch{\r\n max-width: 200px;\r\n float:right;\r\n height: 32px;\r\n padding: 5px 10px;\r\n border: 1px solid #CCCCCC;\r\n font-size: 22px;\r\n max-height: 100px;\r\n}\r\n\r\n.search-box{\r\n margin:5%;\r\n margin-left:10%;\r\n width: 80%;\r\n \r\n position: relative;\r\n display:inline-block;\r\n font-size: 22px;\r\n padding-bottom: 0px;\r\n }\r\n \r\n #column{\r\n background-color:white;\r\n width: 100%;\r\n border-radius: 10px;\r\n \/*box-shadow: 5px 10px #f1f1f1;*\/\r\n \r\n } \r\n .search-box input[type=\"text\"]{\r\n height: 60px;\r\n padding: 5px 10px;\r\n border: 1px solid #CCCCCC;\r\n font-size: 22px;\r\n max-height: 100px;\r\n }\r\n .search-box input[type=\"number\"]{\r\n height: 60px;\r\n padding: 5px 10px;\r\n border: 1px solid #CCCCCC;\r\n font-size: 22px;\r\n max-height: 100px;\r\n }\r\n .result{\r\n z-index: 999;\r\n top: 100%;\r\n left: 0;\r\n overflow: auto;\r\n opacity: 1;\r\n }\r\n .search-box input[type=\"text\"], .result{\r\n width: 100%;\r\n box-sizing: border-box;\r\n max-height: 115px;\r\n opacity: 1;\r\n }\r\n .result p{\r\n margin: 0;\r\n padding: 7px 10px;\r\n border: 1px solid #CCCCCC;\r\n border-top: none;\r\n cursor: pointer;\r\n max-height: 100px;\r\n }\r\n .result p:hover{\r\n background: #f2f2f2;\r\n max-height: 100px;\r\n }\r\n#divtable , #divtable2{\r\n background-color:white; \r\n border-radius: 10px;\r\n font-size:20px; \r\nwidth:auto; \r\nmargin-top:2%;\r\n }\r\n\r\n#divtable h2 , #divtable2 h2{\r\n display:inline; \r\n }\r\n\r\n.cardt{\r\n width:85%;\r\n margin-left:7.5%;\r\n margin-bottom:7.5%;\r\n}\r\n.card-content {\r\n flex: 1 1 auto;\r\n}\r\ndt{\r\n font-size:22px;\r\n\r\n}\r\ndd {\r\n font-size:22px;\r\n}\r\ndl {\r\n display: flex;\r\n flex-wrap: wrap;\r\n margin-right: -15px;\r\n margin-left: -15px;\r\n background: #fff;\r\n padding: 0.7rem 1.5rem;\r\n margin: 0;\r\n position: relative;\r\n\r\n}\r\n.card-content dl dd, .card-content dl dt {\r\n border-bottom: 1px dotted #aab3c1;\r\n padding: 0.8rem 0;\r\n margin: 0;\r\n}\r\n.card-content dl dd:last-of-type , .card-content dl dt:last-of-type {\r\n border:none;\r\n}\r\n .card-content h1 {\r\n text-align:center;\r\n \r\n }\r\n .titlestudy{\r\nborder-top: 1px solid black;\r\nborder-bottom: 1px solid black;\r\n\r\n\r\n margin:auto;\r\n }\r\n@media (max-width: 575.98px) { \r\n .card-content dl dt {\r\n border-bottom: none;\r\n}\r\n\r\n}\r\n\r\n.form-control:focus {\r\n border-color: #0000FF;\r\n box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102,205,170, 0.6);\r\n}\r\ndiv.dataTables_wrapper {\r\n width: 80%;\r\n margin: 2%;\r\n margin-left: 10%;\r\n margin-right: 10%;\r\n\r\n font-size:22px;\r\n \r\n}\r\n.carousel-item.active,\r\n.carousel-control-next,\r\n.carousel-control-prev{\r\n display:flex;\r\n}\r\n\r\n.carousel-control-next,\r\n.carousel-control-prev , \r\n.carousel-indicators {\r\n filter: invert(100%);\r\n}\r\n@media (max-width: 575.98px) { \r\n .card-content dl dt {\r\n border-bottom: none;\r\n}\r\n\r\n}\r\n\r\n\r\n.form-control:focus {\r\n border-color: #0000FF;\r\n box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102,205,170, 0.6);\r\n}\r\n.sample{\r\n font-size:0.9vw;\r\n font-style:italic;\r\n}\r\n\r\n.carousel-control-next,\r\n.carousel-control-prev , \r\n.carousel-indicators {\r\n filter: invert(100%);\r\n}\r\n\r\n\r\n .helpresult{\r\n z-index: 999;\r\n top: 100%;\r\n left: 10%;\r\n overflow: auto;\r\n opacity: 1;\r\n }\r\n #divtable p , #divtable2 p {\r\n color: black !important ;\r\n }\r\n .helpresult p , .helpresult h2{\r\n font-size:0.9vw;\r\n margin: 0;\r\n margin-left:2%;\r\n font-style:italic;\r\n max-height: 100px;\r\n }\r\n \r\n .dataTables_length, .dataTables_length select\r\n { \r\n font-size: 1.5em;\r\n \r\n }\r\n .popover{\r\n font-size: 2em;\r\n\r\n }\r\n caption {\r\n text-align:center;\r\n font-style:italic;\r\n caption-side:top;\r\n }\r\n #modaldesc {\r\n position: absolute;\r\n left: 50%;\r\n top: 50%;\r\n transform: translate(-50%, -50%);\r\n}\r\n.btn-secondary{\r\n width:20%;\r\n font-size:16px;\r\n margin-left:10%;\r\n}\r\n .btn-primary {\r\n width:10%;\r\n font-size:16px;\r\n margin-left:50%;\r\n }\r\n\r\n<\/style>\r\n\r\n<\/script>\r\n<\/head>\r\n<body>\r\n\r\n\r\n\r\n<div id=\"column\">\r\n\r\n<div class=\"search-box\">\r\n\r\n Food or bioactive compound <img id=\"datahelp1\" class=\"help \"src=\"http:\/\/imdeafoodcompubio.com\/wp-content\/uploads\/2022\/06\/icon1.png\" width=\"15\" \/>\r\n <div class=\"helpresult\" id=\"help1\"><\/div>\r\n <input type=\"text\" id=\"key\" class=\"key form-control\" placeholder='Resveratrol'>\r\n <div class=\"result\" id=\"result\"><\/div>\r\n <br>\r\n Cell line\/Sample type <img id=\"datahelpsample\" class=\"help \"src=\"http:\/\/imdeafoodcompubio.com\/wp-content\/uploads\/2022\/06\/icon1.png\" width=\"15\" \/>\r\n <div class=\"helpresult\" id=\"helpsample\"><\/div>\r\n <input type=\"text\" id=\"origen\" class=\"key form-control\" placeholder=''>\r\n <div class=\"result\" id=\"result2\"><\/div>\r\n<\/div> \r\n <\/div>\r\n \r\n <div id='divtable'>\r\n \r\n\r\n<table id=\"table\" class=\"hover\" style=\"width:100%\">\r\n <caption> Click in the row of interest to get more information <\/caption>\r\n<\/table>\r\n<\/div>\r\n\r\n\r\n<div id=\"myCarousel\" class=\"carousel slide card\" data-interval=\"false\" data-ride=\"carousel\">\r\n\r\n\r\n<button type=\"button\" class=\"btn btn-primary\" data-toggle=\"modal\" data-target=\"#modaldesc\">\r\nDownload\r\n<\/button>\r\n\r\n<div class=\"modal fade\" id=\"modaldesc\" role=\"dialog\">\r\n <div class=\"modal-dialog\">\r\n <div class=\"modal-content\">\r\n <div class=\"modal-header\">\r\n <button type=\"button\" class=\"close\" data-dismiss=\"modal\" aria-label=\"Close\">\r\n <span aria-hidden=\"true\">×<\/span>\r\n <\/button>\r\n <\/div>\r\n <div class=\"modal-body\">\r\n <button type=\"button\" id='copy' class=\"btn btn-secondary\">copy\r\n <img id=\"datahelpcopy\" class=\"help \"src=\"http:\/\/imdeafoodcompubio.com\/wp-content\/uploads\/2022\/06\/icon1.png\" width=\"15\" \/> \r\n <\/button>\r\n <button type=\"button\" id='tsv' class=\"btn btn-secondary\">TSV<\/button>\r\n <button type=\"button\" id='csv' class=\"btn btn-secondary\">CSV<\/button>\r\n \r\n <div class=\"helpresult\" id=\"helpcopy\"><\/div>\r\n\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n<\/div>\r\n\r\n <ol class=\"carousel-indicators\">\r\n <\/ol>\r\n\r\n\r\n <div class=\"carousel-inner\">\r\n <\/div>\r\n\r\n <a class=\"carousel-control-prev\" href=\"#myCarousel\" role=\"button\" data-slide=\"prev\">\r\n <span class=\"carousel-control-prev-icon\" aria-hidden=\"true\"><\/span>\r\n <span class=\"sr-only\">Previous<\/span>\r\n <\/a>\r\n <a class=\"carousel-control-next\" href=\"#myCarousel\" role=\"button\" data-slide=\"next\">\r\n <span class=\"carousel-control-next-icon\" aria-hidden=\"true\"><\/span>\r\n <span class=\"sr-only\">Next<\/span>\r\n <\/a>\r\n\r\n<\/div>\r\n\r\n\r\n\r\n<div id='divtable2'>\r\n <button type=\"button\" class=\"btn btn-primary\" data-toggle=\"modal\" data-target=\"#modaldesc2\">\r\nDownload\r\n<\/button>\r\n <table id='table2' class=\"stripe \" style=\"witdh:100%\"><\/table>\r\n \r\n<\/div>\r\n\r\n<div class=\"modal fade\" id=\"modaldesc2\" role=\"dialog\">\r\n <div class=\"modal-dialog\">\r\n <div class=\"modal-content\">\r\n <div class=\"modal-header\">\r\n <button type=\"button\" class=\"close\" data-dismiss=\"modal\" aria-label=\"Close\">\r\n <span aria-hidden=\"true\">×<\/span>\r\n <\/button>\r\n <\/div>\r\n <div class=\"modal-body\">\r\n <button type=\"button\" id='copy' class=\"btn btn-secondary\">copy\r\n <img id=\"datahelpcopy2\" class=\"help \"src=\"http:\/\/imdeafoodcompubio.com\/wp-content\/uploads\/2022\/06\/icon1.png\" width=\"15\" \/> \r\n <\/button>\r\n <button type=\"button\" id='tsv' class=\"btn btn-secondary\">TSV<\/button>\r\n <button type=\"button\" id='csv' class=\"btn btn-secondary\">CSV<\/button>\r\n \r\n <div class=\"helpresult\" id=\"helpcopy2\"><\/div>\r\n\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n<\/body>\r\n<script>\r\n jQuery(document).ready(function($) {\r\n var datacharge=true;\r\n $(\"#divtable\").hide();\r\n $(\"#divtable2\").hide();\r\n\r\n $(\"#myCarousel\").hide();\r\n var table;\r\n var table2;\r\n var orden;\r\n var idmax;\r\n var datanew=[];\r\n var datadescargasample=[];\r\n var registrotrue=true;\r\n var datacharge=true;\r\n var datacharge2=true;\r\n var datoscarousel=[];\r\n var datos=[];\r\n var arraynom = [\"accession\" ,\"gpl\",\"title\",\"abstract\",\"study_type\"];\r\n var arraynom2= [\"treatment\",\"origin_type\",\"origin_name\",\"GSM\",\"time_point\",\"concentration\"]\r\n\r\n\r\n\r\n\r\n $(document).on('click', '.help', function() { \r\n var idhelp = $(this).attr(\"id\");\r\nif (idhelp==\"datahelp1\") {\r\n window.open('http:\/\/imdeafoodcompubio.com\/index.php\/help\/#food', '_blank');\r\n \r\n} \r\n\r\n });\r\n\r\n$(document).on(\"mouseenter\", \".help\", function(){\r\n$(\".helpresult\").empty();\r\nvar idhelp = $(this).attr(\"id\");\r\nif (idhelp==\"datahelp1\") {\r\n $(\"#help1\").append(\"<p>Type the term of interest. If FooDrugs database doesn't have experiments with the query term a \u201cNo Results Found\u201d message will appear.<\/p>\");\r\n \r\n} else if (idhelp==\"datahelpsample\") {\r\n $(\"#helpsample\").append(\"<p>Allow you to filter by cell line or sample type. If FooDrugs database doesn't have cell lines or sample types with the query term a \u201cNo Results Found\u201d message will appear.<\/p>\");\r\n\r\n}\r\nelse if (idhelp==\"datahelpentries\") {\r\n $(\"#helpentries\").append(\"<p>Allow you to filter the number of studies to display<\/p>\");\r\n \r\n} \r\nelse if (idhelp==\"datahelpfilter\") {\r\n $(\"#helpfilter\").append(\"<p>Allow you to filter with free text on the table by any field<\/p>\");\r\n \r\n} else if (idhelp==\"datahelpentries2\") {\r\n $(\"#helpentries2\").append(\"<p>Allow you to filter the number of studies to display<\/p>\");\r\n \r\n} \r\nelse if (idhelp==\"datahelpfilter2\") {\r\n $(\"#helpfilter2\").append(\"<p>Allow you to filter with free text on the table by any field<\/p>\");\r\n \r\n}\r\nelse if (idhelp==\"datahelpcopy\"){\r\n $(\"#helpcopy\").append(\"<p>Allow to copy the information on the clipboard<\/p>\");\r\n\r\n}\r\nelse if (idhelp==\"datahelpcopy2\"){\r\n $(\"#helpcopy2\").append(\"<p>Allow to copy the information on the clipboard<\/p>\");\r\n\r\n}\r\n});\r\n\r\n$(document).on(\"mouseleave\", \".help\", function(){\r\n$(\".helpresult\").empty();\r\n });\r\n\r\n\r\n\r\n\r\n\r\n\r\n \/\/Keyup event to fill the div which will show the autocomplete suggestions\r\n $('.key').on('keyup input', function() { \r\n \/\/We get the value and the id of the input.\r\n \r\nvar key = $(this).val();\r\n orden = $(this).attr(\"id\");\r\n \/\/We check that the value is not null or empty\r\nif(key != \"\"){\r\n jQuery.ajax({\r\n \/\/We make a request to ajax that redirects us to another script where the Mysql query will be executed and will return the first 5 records similar to what is being searched for\r\n url:'https:\/\/imdeafoodcompubio.com\/wp-content\/themes\/bento-child\/foodt\/ajaxsql.php',\r\n type: 'post',\r\n data: {search:key, type:1,orden:orden},\r\n dataType: 'json',\r\n success:function(response){\r\n \/\/Here in this if we check which of the two inputs is the one being written\r\n \/\/We get the length of the response and add one by one the response in the div\r\n if (orden==\"key\") {\r\n var len = response.length;\r\n $(\"#result\").empty();\r\n for( var i = 0; i<len; i++){\r\n var name = response[i]['name'];\r\n $(\"#result\").append(\"<p>\"+name+\"<\/p>\");\r\n } \r\n }else {\r\n var len = response.length;\r\n $(\"#result2\").empty();\r\n for( var i = 0; i<len; i++){\r\n var name = response[i]['name'];\r\n $(\"#result2\").append(\"<p>\"+name+\"<\/p>\");\r\n }\r\n }\r\n }, error: function(XMLHttpRequest, textStatus, errorThrown) { \r\n alert(\"Status: \" + textStatus); alert(\"Error: \" + errorThrown); \r\n } \r\n });\r\n \/\/If the answer is empty, the result is cleaned\r\n}else {\r\n $(\".result\").empty();\r\n}\r\n})\r\n\r\n\/\/CLICK event on any of the input options\r\n$(document).on(\"click\", \".result p\", function(){\r\n \/\/Check what input is clicked and call showtables function\r\n if (orden==\"key\") {\r\n $('#result').empty(); \r\n $('#'+orden).val($(this).text());\r\n mostrartablas();\r\n }else{\r\n $('#result2').empty(); \r\n $('#'+orden).val($(this).text());\r\n \/\/Check the value of the first input to call the function\r\n if ($('#key').val()!=null) {\r\n mostrartablas();\r\n }\r\n }\r\n });\r\n\r\n\/\/Function 'mostrartablas' sends a request to ajax so that it returns the corresponding values\r\nfunction mostrartablas(){\r\n var key = $('#key').val();\r\n\r\n $.ajax({\r\n \r\n url:'https:\/\/imdeafoodcompubio.com\/wp-content\/themes\/bento-child\/foodt\/ajaxsql.php',\r\n type: 'post',\r\n data: {search:key, type:2,search2:\"\"},\r\n dataType: 'json',\r\n success:function(response){\r\n datos=response;\r\n var datostable=[];\r\n console.log(response[0]);\r\n for (let index = 0; index < response.length; index++) {\r\n datostable[index]=[];\r\n datostable[index].push(response[index][arraynom[2]]);\r\n datostable[index].push(response[index][arraynom[4]]);\r\n datostable[index].push(response[index][arraynom[0]]);\r\n}\r\n\r\n\r\n if(datacharge==true){\r\n datacharge=false;\r\n}else {\r\n table.destroy();\r\n \r\n}\r\n\r\n table = $('#table').DataTable({\r\n data: datostable,\r\n columns: [\r\n { title: \"Title\", \"width\": \"60%\"},\r\n { title: \"Study Type\" },\r\n { title: \"<span id='tablepopover' tabindex='0' data-toggle='popover' data-content='GEO Series identifier click on the word to go to the original information source'> GSE <img src='http:\/\/imdeafoodcompubio.com\/wp-content\/uploads\/2022\/06\/icon1.png' width='15' \/> <\/span>\" ,\r\n \"render\": function (data, type, row) {\r\n return '<a href=\"https:\/\/www.ncbi.nlm.nih.gov\/geo\/query\/acc.cgi?acc=GSE' + data + '\" target=\"no_blank\">' + data + '<\/a>';\r\n }\r\n \r\n },\r\n ],\r\n language: {\r\n \"lengthMenu\": '<h2> Show entries <\/h2> <img decoding=\"async\" class=\"help\" id=\"datahelpentries\" src=\"http:\/\/imdeafoodcompubio.com\/wp-content\/uploads\/2022\/06\/icon1.png\" width=\"15\"><\/img> <div class=\"helpresult\" id=\"helpentries\"><\/div> _MENU_' ,\r\n \"search\": ' <h2> Filter Records<\/h2> <img decoding=\"async\" class=\"help\" id=\"datahelpfilter\" src=\"http:\/\/imdeafoodcompubio.com\/wp-content\/uploads\/2022\/06\/icon1.png\" width=\"15\"><\/img> <div class=\"helpresult\" id=\"helpfilter\"><\/div> _INPUT_' \r\n },\r\n });\r\n $('[data-toggle=\"popover\"]').popover({\r\n 'trigger': 'hover',\r\n});\r\n $(\"#divtable\").show();\r\n\r\n } ,error: function(XMLHttpRequest, textStatus, errorThrown) { \r\n alert(\"Status: \" + textStatus); alert(\"Error: \" + errorThrown); \r\n } \r\n });\r\n}\r\n\r\n\r\n\r\n\r\n\r\n\/\/table click event \r\n$(document).on('click', '.sample', function() { \r\n var id = $(this).attr(\"id\");\r\n var x = false;\r\n \/\/Change the color of the cell\r\n var identificador = id.substr(5,1);\r\n id = id.substr(6);\r\n \/\/we get the cell id\r\n id=parseInt(id);\r\n\/\/we make two requests and if both are correct we go to another page\r\n $.ajax({\r\n url:'https:\/\/imdeafoodcompubio.com\/wp-content\/themes\/bento-child\/foodt\/ajaxsql.php',\r\n type: 'post',\r\n data: {search:datos[id]['accession'],type:3},\r\n dataType: 'json',\r\n success:function(response){\r\n var datasamples=[];\r\n datadescargasample=response;\r\n for (let index = 0; index < response.length; index++) {\r\n datasamples[index]=[];\r\nfor (var value in response[index]){ \r\n datasamples[index].push(response[index][value]);\r\n}\r\n}\r\n if(datacharge2==true){\r\n datacharge2=false;\r\n}else {\r\n table2.destroy();\r\n}\r\n $(\"#divtable2\").show();\r\n\r\n table2 = $('#table2').DataTable({\r\n data: datasamples,\r\n columns: [\r\n { title: \"Treatment\"},\r\n { title: \"Cell\/Tissue Type\" },\r\n { title: \"Cell\/Tissue Name\"},\r\n { title: \"<span id='tablepopover' tabindex='0' data-toggle='popover' data-content='GEO Sample identifier click on the word to go to the original information source'> GSM <img src='http:\/\/imdeafoodcompubio.com\/wp-content\/uploads\/2022\/06\/icon1.png' width='15' \/> <\/span>\" ,\r\n \"render\": function (data, type, row) {\r\n return '<a href=\"https:\/\/www.ncbi.nlm.nih.gov\/geo\/query\/acc.cgi?acc=GSM' + data + '\" target=\"no_blank\">' + data + '<\/a>';\r\n }\r\n \r\n },\r\n { title: \"Time Point\"},\r\n { title: \"Concentration\"},\r\n ],\r\n language: {\r\n \"lengthMenu\": '<h2> Show entries <\/h2> <img decoding=\"async\" class=\"help\" id=\"datahelpentries2\" src=\"http:\/\/imdeafoodcompubio.com\/wp-content\/uploads\/2022\/06\/icon1.png\" width=\"15\"><\/img> <div class=\"helpresult\" id=\"helpentries2\"><\/div> _MENU_' ,\r\n \"search\": ' <h2> Filter Records<\/h2> <img decoding=\"async\" class=\"help\" id=\"datahelpfilter2\" src=\"http:\/\/imdeafoodcompubio.com\/wp-content\/uploads\/2022\/06\/icon1.png\" width=\"15\"><\/img> <div class=\"helpresult\" id=\"helpfilter2\"><\/div> _INPUT_' \r\n },\r\n });\r\n $('[data-toggle=\"popover\"]').popover({\r\n 'trigger': 'hover',\r\n});\r\n\r\n elemento = document.getElementById(\"table2\");\r\n elemento.scrollIntoView();\r\n }});\r\n\r\n});\r\n\r\n\r\n\r\n\/\/table click event \r\n $(document).on('click', '#table tr', function() { \r\n $(\"#myCarousel\").show();\r\n \/\/Change the color of the cell\r\n$(\".highlight\").css({'background-color': \"transparent\" });\r\n $( '.highlight' ).removeClass( \"highlight\" );\r\n $(this).css(\"background-color\",\"#CDCDCD\");\r\n var row = table.row( this ).data()\r\n $( this ).addClass( \"highlight\" );\r\n var title = row[0];\r\n datoscarousel.push(datos.filter(function(data){ return data.title == title }));\r\n \r\n if(datoscarousel.length==1){\r\n $(\".carousel-indicators\").append(\"<li id='licarou0' data-target='#myCarousel' data-slide-to='0' class='active'><\/li>\");\r\n $(\".carousel-inner\").append(\"<div class='carousel-item active' id='carou0'><\/div>\");\r\n }\r\n else {\r\n $(\".carousel-indicators\").append(\"<li id='licarou\"+(datoscarousel.length-1)+\"' data-target='#myCarousel' data-slide-to='\"+(datoscarousel.length-1)+\"' ><\/li>\");\r\n $(\".carousel-inner\").append(\"<div class='carousel-item' id='carou\"+(datoscarousel.length-1)+\"'><\/div>\"); \r\n \r\n }\r\n var lon = datoscarousel.length-1;\r\n \r\n $(\"#carou\"+lon).append(\"<div class='cardt'><div class='cardcontent d-block w-100' id='card\"+lon+\"'><\/div><\/div>\");\r\n $(\"#card\"+lon).append(\"<dl class='' id='conte\"+lon+\"'><\/dl>\");\r\n $(\"#conte\"+lon).append(\"<dt class = 'col-sm-3 col-md-6 col-lg-4 col-xl-2'> Title <\/dt>\");\r\n $(\"#conte\"+lon).append(\"<dd class='col-sm-9 col-md-6 col-lg-8 col-xl-10' > \" +datoscarousel[lon][0][arraynom[2]]+\"<\/dd>\");\r\n $(\"#conte\"+lon).append(\"<dt class = 'col-sm-3 col-md-6 col-lg-4 col-xl-2'> Abstract <\/dt>\");\r\n $(\"#conte\"+lon).append(\"<dd class='col-sm-9 col-md-6 col-lg-8 col-xl-10' > \"+datoscarousel[lon][0][arraynom[3]]+\"<\/dd>\");\r\n $(\"#conte\"+lon).append(\"<dt class = 'col-sm-3 col-md-6 col-lg-4 col-xl-2'> Study Type <\/dt>\");\r\n $(\"#conte\"+lon).append(\"<dd class='col-sm-9 col-md-6 col-lg-8 col-xl-10' > \" +datoscarousel[lon][0][arraynom[4]]+\"<\/dd>\");\r\n $(\"#conte\"+lon).append(\"<dt class = 'col-sm-3 col-md-6 col-lg-4 col-xl-2'> Accession <\/dt>\");\r\n $(\"#conte\"+lon).append(\"<dd class='col-sm-9 col-md-6 col-lg-8 col-xl-10' > <a href=https:\/\/www.ncbi.nlm.nih.gov\/geo\/query\/acc.cgi?acc=GSE\"+datoscarousel[lon][0][arraynom[0]]+\" target='_blank'>https:\/\/www.ncbi.nlm.nih.gov\/geo\/query\/acc.cgi?acc=GSE\"+datoscarousel[lon][0][arraynom[0]]+\"<\/a><\/dd>\");\r\n $(\"#conte\"+lon).append(\"<dt class = 'col-sm-3 col-md-6 col-lg-4 col-xl-2'> GLP <\/dt>\");\r\n $(\"#conte\"+lon).append(\"<dd class='col-sm-9 col-md-6 col-lg-8 col-xl-10' > <a href=https:\/\/www.ncbi.nlm.nih.gov\/geo\/query\/acc.cgi?acc=GPL\"+datoscarousel[lon][0][arraynom[1]]+\" target='_blank'> https:\/\/www.ncbi.nlm.nih.gov\/geo\/query\/acc.cgi?acc=GPL\"+datoscarousel[lon][0][arraynom[1]]+\"<\/a><\/dd>\");\r\n $(\"#conte\"+lon).append(\"<dt> Samples <a class='sample' style ='color:#00008b;'id='sample\"+lon+\"'>more info<a\/><\/dt>\");\r\n $('#licarou'+lon).click();\r\n\r\n \r\n \r\n }); \r\n\r\n\r\n\r\n $(document).on('click', '#modaldesc .btn-secondary', function() {\r\n \/\/Get the page where you are and what type of download it iss\r\n var subid= $(this).attr(\"id\");\r\n console.log(datoscarousel);\r\n\/\/Copy with the obtained data, with this it is added to an input and the copy command is executed later the input is deleted\r\n \/\/ With this is on the clipboard\r\n\/\/We remove the fields from the strati num text yendi array so that there is no information \/\/irrelevant for the user\r\n if (subid == \"copy\" ) {\r\n dataacopiar=[];\r\n copy=\"\";\r\n for (let i = 0; i < datoscarousel.length; i++) {\r\n dataacopiar[i]={};\r\n for (let j = 0; j < datoscarousel[i].length; j++) {\r\n for (var dato in datoscarousel[i][j]){\r\n dataacopiar[i][dato]=datoscarousel[i][j][dato];\r\n}\r\n}\r\n}\r\n $('<input id=\"textcopy\">').val(copy).appendTo('body').select(); \r\n document.execCommand('copy'); \r\n var el = document.getElementById('textcopy');\r\n el.remove();\r\n }\r\n \/\/TSV OR CSV the file is sent to descargararchivo.php and the associative array is sent\r\n else {\r\n dataacopiar=[];\r\n for (let i = 0; i < datoscarousel.length; i++) {\r\n dataacopiar[i]={};\r\n for (let j = 0; j < datoscarousel[i].length; j++) {\r\n for (var dato in datoscarousel[i][j]){\r\n dataacopiar[i][dato]=datoscarousel[i][j][dato];\r\n}\r\n}\r\n}\r\n $.ajax({\r\n url:'https:\/\/imdeafoodcompubio.com\/wp-content\/themes\/bento-child\/descargararchivo.php',\r\n type: 'post',\r\n data: {key:subid,data:dataacopiar,name:\"tablefoodstudies\"},\r\n dataType: 'json',\r\n success:function(response){\r\n \/\/Get the name of the file which is on the response and create an element <a> and add the attribute\r\n \/\/'download' and indicate where the file is located and order the element to be clicked\r\n \/\/and start the download\r\n fileName=response;\r\n fileUrl=\"http:\/\/imdeafoodcompubio.com\/wp-content\/uploads\/2022\/desc\/\"+fileName;\r\n var a = document.createElement(\"a\");\r\n a.href = fileUrl;\r\n a.setAttribute(\"download\", fileName);\r\n a.click();\r\n }\r\n });\r\n }\r\n });\r\n \r\n\r\n$(document).on('click', '#modaldesc2 .btn-secondary', function() {\r\n \r\n \/\/Get the page where you are and what type of download it iss\r\n var subid= $(this).attr(\"id\");\r\n\/\/Copy with the obtained data, with this it is added to an input and the copy command is executed later the input is deleted\r\n \/\/ With this is on the clipboard\r\n\/\/We remove the fields from the strati num text yendi array so that there is no information \/\/irrelevant for the user\r\nconsole.log(datadescargasample);\r\n if (subid == \"copy\" ) {\r\n dataacopiar=[];\r\n copy=\"\";\r\n for (let i = 0; i < datadescargasample.length || i < 10 ; i++) {\r\n dataacopiar[i]={};\r\n for (var dato in datadescargasample[i]){\r\n copy=copy+datadescargasample[i][dato];\r\n\r\n}\r\n}\r\n $('<input id=\"textcopy\">').val(copy).appendTo('body').select(); \r\n document.execCommand('copy'); \r\n var el = document.getElementById('textcopy');\r\n el.remove();\r\n }\r\n \/\/TSV OR CSV the file is sent to descargararchivo.php and the associative array is sent\r\n else {\r\n dataacopiar=[];\r\n \r\n for (let i = 0; i < datadescargasample.length; i++) {\r\n dataacopiar[i]={};\r\n for (var dato in datadescargasample[i]){\r\n dataacopiar[i][dato]=datadescargasample[i][dato];\r\n\r\n}\r\n}\r\n $.ajax({\r\n url:'https:\/\/imdeafoodcompubio.com\/wp-content\/themes\/bento-child\/descargararchivo.php',\r\n type: 'post',\r\n data: {key:subid,data:dataacopiar,name:\"tablesamples\"},\r\n dataType: 'json',\r\n success:function(response){\r\n \/\/Get the name of the file which is on the response and create an element <a> and add the attribute\r\n \/\/'download' and indicate where the file is located and order the element to be clicked\r\n \/\/and start the download\r\n fileName=response;\r\n fileUrl=\"http:\/\/imdeafoodcompubio.com\/wp-content\/uploads\/2022\/desc\/\"+fileName;\r\n var a = document.createElement(\"a\");\r\n a.href = fileUrl;\r\n a.setAttribute(\"download\", fileName);\r\n a.click();\r\n }\r\n });\r\n }\r\n });\r\n\r\n });\r\n<\/script>\r\n<\/html>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-17","page","type-page","status-publish","hentry","no-thumb"],"_links":{"self":[{"href":"https:\/\/imdeafoodcompubio.com\/index.php\/wp-json\/wp\/v2\/pages\/17","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/imdeafoodcompubio.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/imdeafoodcompubio.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/imdeafoodcompubio.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/imdeafoodcompubio.com\/index.php\/wp-json\/wp\/v2\/comments?post=17"}],"version-history":[{"count":5,"href":"https:\/\/imdeafoodcompubio.com\/index.php\/wp-json\/wp\/v2\/pages\/17\/revisions"}],"predecessor-version":[{"id":679,"href":"https:\/\/imdeafoodcompubio.com\/index.php\/wp-json\/wp\/v2\/pages\/17\/revisions\/679"}],"wp:attachment":[{"href":"https:\/\/imdeafoodcompubio.com\/index.php\/wp-json\/wp\/v2\/media?parent=17"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}