We Keep Coding

Search string contains some accented characters

I have a search feature requirement like this: with search term ava, the result should contain all of its variants like ávatar, àvatar, ávàhaha and so on. I need to search through a list.
Here are some of the accented chars that need to be matched: áÁàÀâÂäÄãÃåÅoOóÓ
With this requirement, which approach is best (regex, includes, etc.), and how to implement this feature?
So far I tried using regex with the regex below:
^.*f[o|Ó|ó|ò|Ò|ô|Ô|ö|Ö|õ|Õ][o|Ó|ó|ò|Ò|ô|Ô|ö|Ö|õ|Õ].*$ // match whole line contains foo (and its accented version)
Does it have any performance concern or is there a more elegant way to resolve my problem?

Follow #Phil's comments.
Replacing accented characters with plain ascii ones may help you write the customNormalise function.
Complete code:
function removeDiacritics (str) {
var defaultDiacriticsRemovalMap = [
{'base':'A', 'letters':/[\u0041\u24B6\uFF21\u00C0\u00C1\u00C2\u1EA6\u1EA4\u1EAA\u1EA8\u00C3\u0100\u0102\u1EB0\u1EAE\u1EB4\u1EB2\u0226\u01E0\u00C4\u01DE\u1EA2\u00C5\u01FA\u01CD\u0200\u0202\u1EA0\u1EAC\u1EB6\u1E00\u0104\u023A\u2C6F]/g},
{'base':'AA','letters':/[\uA732]/g},
{'base':'AE','letters':/[\u00C6\u01FC\u01E2]/g},
{'base':'AO','letters':/[\uA734]/g},
{'base':'AU','letters':/[\uA736]/g},
{'base':'AV','letters':/[\uA738\uA73A]/g},
{'base':'AY','letters':/[\uA73C]/g},
{'base':'B', 'letters':/[\u0042\u24B7\uFF22\u1E02\u1E04\u1E06\u0243\u0182\u0181]/g},
{'base':'C', 'letters':/[\u0043\u24B8\uFF23\u0106\u0108\u010A\u010C\u00C7\u1E08\u0187\u023B\uA73E]/g},
{'base':'D', 'letters':/[\u0044\u24B9\uFF24\u1E0A\u010E\u1E0C\u1E10\u1E12\u1E0E\u0110\u018B\u018A\u0189\uA779]/g},
{'base':'DZ','letters':/[\u01F1\u01C4]/g},
{'base':'Dz','letters':/[\u01F2\u01C5]/g},
{'base':'E', 'letters':/[\u0045\u24BA\uFF25\u00C8\u00C9\u00CA\u1EC0\u1EBE\u1EC4\u1EC2\u1EBC\u0112\u1E14\u1E16\u0114\u0116\u00CB\u1EBA\u011A\u0204\u0206\u1EB8\u1EC6\u0228\u1E1C\u0118\u1E18\u1E1A\u0190\u018E]/g},
{'base':'F', 'letters':/[\u0046\u24BB\uFF26\u1E1E\u0191\uA77B]/g},
{'base':'G', 'letters':/[\u0047\u24BC\uFF27\u01F4\u011C\u1E20\u011E\u0120\u01E6\u0122\u01E4\u0193\uA7A0\uA77D\uA77E]/g},
{'base':'H', 'letters':/[\u0048\u24BD\uFF28\u0124\u1E22\u1E26\u021E\u1E24\u1E28\u1E2A\u0126\u2C67\u2C75\uA78D]/g},
{'base':'I', 'letters':/[\u0049\u24BE\uFF29\u00CC\u00CD\u00CE\u0128\u012A\u012C\u0130\u00CF\u1E2E\u1EC8\u01CF\u0208\u020A\u1ECA\u012E\u1E2C\u0197]/g},
{'base':'J', 'letters':/[\u004A\u24BF\uFF2A\u0134\u0248]/g},
{'base':'K', 'letters':/[\u004B\u24C0\uFF2B\u1E30\u01E8\u1E32\u0136\u1E34\u0198\u2C69\uA740\uA742\uA744\uA7A2]/g},
{'base':'L', 'letters':/[\u004C\u24C1\uFF2C\u013F\u0139\u013D\u1E36\u1E38\u013B\u1E3C\u1E3A\u0141\u023D\u2C62\u2C60\uA748\uA746\uA780]/g},
{'base':'LJ','letters':/[\u01C7]/g},
{'base':'Lj','letters':/[\u01C8]/g},
{'base':'M', 'letters':/[\u004D\u24C2\uFF2D\u1E3E\u1E40\u1E42\u2C6E\u019C]/g},
{'base':'N', 'letters':/[\u004E\u24C3\uFF2E\u01F8\u0143\u00D1\u1E44\u0147\u1E46\u0145\u1E4A\u1E48\u0220\u019D\uA790\uA7A4]/g},
{'base':'NJ','letters':/[\u01CA]/g},
{'base':'Nj','letters':/[\u01CB]/g},
{'base':'O', 'letters':/[\u004F\u24C4\uFF2F\u00D2\u00D3\u00D4\u1ED2\u1ED0\u1ED6\u1ED4\u00D5\u1E4C\u022C\u1E4E\u014C\u1E50\u1E52\u014E\u022E\u0230\u00D6\u022A\u1ECE\u0150\u01D1\u020C\u020E\u01A0\u1EDC\u1EDA\u1EE0\u1EDE\u1EE2\u1ECC\u1ED8\u01EA\u01EC\u00D8\u01FE\u0186\u019F\uA74A\uA74C]/g},
{'base':'OI','letters':/[\u01A2]/g},
{'base':'OO','letters':/[\uA74E]/g},
{'base':'OU','letters':/[\u0222]/g},
{'base':'P', 'letters':/[\u0050\u24C5\uFF30\u1E54\u1E56\u01A4\u2C63\uA750\uA752\uA754]/g},
{'base':'Q', 'letters':/[\u0051\u24C6\uFF31\uA756\uA758\u024A]/g},
{'base':'R', 'letters':/[\u0052\u24C7\uFF32\u0154\u1E58\u0158\u0210\u0212\u1E5A\u1E5C\u0156\u1E5E\u024C\u2C64\uA75A\uA7A6\uA782]/g},
{'base':'S', 'letters':/[\u0053\u24C8\uFF33\u1E9E\u015A\u1E64\u015C\u1E60\u0160\u1E66\u1E62\u1E68\u0218\u015E\u2C7E\uA7A8\uA784]/g},
{'base':'T', 'letters':/[\u0054\u24C9\uFF34\u1E6A\u0164\u1E6C\u021A\u0162\u1E70\u1E6E\u0166\u01AC\u01AE\u023E\uA786]/g},
{'base':'TZ','letters':/[\uA728]/g},
{'base':'U', 'letters':/[\u0055\u24CA\uFF35\u00D9\u00DA\u00DB\u0168\u1E78\u016A\u1E7A\u016C\u00DC\u01DB\u01D7\u01D5\u01D9\u1EE6\u016E\u0170\u01D3\u0214\u0216\u01AF\u1EEA\u1EE8\u1EEE\u1EEC\u1EF0\u1EE4\u1E72\u0172\u1E76\u1E74\u0244]/g},
{'base':'V', 'letters':/[\u0056\u24CB\uFF36\u1E7C\u1E7E\u01B2\uA75E\u0245]/g},
{'base':'VY','letters':/[\uA760]/g},
{'base':'W', 'letters':/[\u0057\u24CC\uFF37\u1E80\u1E82\u0174\u1E86\u1E84\u1E88\u2C72]/g},
{'base':'X', 'letters':/[\u0058\u24CD\uFF38\u1E8A\u1E8C]/g},
{'base':'Y', 'letters':/[\u0059\u24CE\uFF39\u1EF2\u00DD\u0176\u1EF8\u0232\u1E8E\u0178\u1EF6\u1EF4\u01B3\u024E\u1EFE]/g},
{'base':'Z', 'letters':/[\u005A\u24CF\uFF3A\u0179\u1E90\u017B\u017D\u1E92\u1E94\u01B5\u0224\u2C7F\u2C6B\uA762]/g},
{'base':'a', 'letters':/[\u0061\u24D0\uFF41\u1E9A\u00E0\u00E1\u00E2\u1EA7\u1EA5\u1EAB\u1EA9\u00E3\u0101\u0103\u1EB1\u1EAF\u1EB5\u1EB3\u0227\u01E1\u00E4\u01DF\u1EA3\u00E5\u01FB\u01CE\u0201\u0203\u1EA1\u1EAD\u1EB7\u1E01\u0105\u2C65\u0250]/g},
{'base':'aa','letters':/[\uA733]/g},
{'base':'ae','letters':/[\u00E6\u01FD\u01E3]/g},
{'base':'ao','letters':/[\uA735]/g},
{'base':'au','letters':/[\uA737]/g},
{'base':'av','letters':/[\uA739\uA73B]/g},
{'base':'ay','letters':/[\uA73D]/g},
{'base':'b', 'letters':/[\u0062\u24D1\uFF42\u1E03\u1E05\u1E07\u0180\u0183\u0253]/g},
{'base':'c', 'letters':/[\u0063\u24D2\uFF43\u0107\u0109\u010B\u010D\u00E7\u1E09\u0188\u023C\uA73F\u2184]/g},
{'base':'d', 'letters':/[\u0064\u24D3\uFF44\u1E0B\u010F\u1E0D\u1E11\u1E13\u1E0F\u0111\u018C\u0256\u0257\uA77A]/g},
{'base':'dz','letters':/[\u01F3\u01C6]/g},
{'base':'e', 'letters':/[\u0065\u24D4\uFF45\u00E8\u00E9\u00EA\u1EC1\u1EBF\u1EC5\u1EC3\u1EBD\u0113\u1E15\u1E17\u0115\u0117\u00EB\u1EBB\u011B\u0205\u0207\u1EB9\u1EC7\u0229\u1E1D\u0119\u1E19\u1E1B\u0247\u025B\u01DD]/g},
{'base':'f', 'letters':/[\u0066\u24D5\uFF46\u1E1F\u0192\uA77C]/g},
{'base':'g', 'letters':/[\u0067\u24D6\uFF47\u01F5\u011D\u1E21\u011F\u0121\u01E7\u0123\u01E5\u0260\uA7A1\u1D79\uA77F]/g},
{'base':'h', 'letters':/[\u0068\u24D7\uFF48\u0125\u1E23\u1E27\u021F\u1E25\u1E29\u1E2B\u1E96\u0127\u2C68\u2C76\u0265]/g},
{'base':'hv','letters':/[\u0195]/g},
{'base':'i', 'letters':/[\u0069\u24D8\uFF49\u00EC\u00ED\u00EE\u0129\u012B\u012D\u00EF\u1E2F\u1EC9\u01D0\u0209\u020B\u1ECB\u012F\u1E2D\u0268\u0131]/g},
{'base':'j', 'letters':/[\u006A\u24D9\uFF4A\u0135\u01F0\u0249]/g},
{'base':'k', 'letters':/[\u006B\u24DA\uFF4B\u1E31\u01E9\u1E33\u0137\u1E35\u0199\u2C6A\uA741\uA743\uA745\uA7A3]/g},
{'base':'l', 'letters':/[\u006C\u24DB\uFF4C\u0140\u013A\u013E\u1E37\u1E39\u013C\u1E3D\u1E3B\u017F\u0142\u019A\u026B\u2C61\uA749\uA781\uA747]/g},
{'base':'lj','letters':/[\u01C9]/g},
{'base':'m', 'letters':/[\u006D\u24DC\uFF4D\u1E3F\u1E41\u1E43\u0271\u026F]/g},
{'base':'n', 'letters':/[\u006E\u24DD\uFF4E\u01F9\u0144\u00F1\u1E45\u0148\u1E47\u0146\u1E4B\u1E49\u019E\u0272\u0149\uA791\uA7A5]/g},
{'base':'nj','letters':/[\u01CC]/g},
{'base':'o', 'letters':/[\u006F\u24DE\uFF4F\u00F2\u00F3\u00F4\u1ED3\u1ED1\u1ED7\u1ED5\u00F5\u1E4D\u022D\u1E4F\u014D\u1E51\u1E53\u014F\u022F\u0231\u00F6\u022B\u1ECF\u0151\u01D2\u020D\u020F\u01A1\u1EDD\u1EDB\u1EE1\u1EDF\u1EE3\u1ECD\u1ED9\u01EB\u01ED\u00F8\u01FF\u0254\uA74B\uA74D\u0275]/g},
{'base':'oi','letters':/[\u01A3]/g},
{'base':'ou','letters':/[\u0223]/g},
{'base':'oo','letters':/[\uA74F]/g},
{'base':'p','letters':/[\u0070\u24DF\uFF50\u1E55\u1E57\u01A5\u1D7D\uA751\uA753\uA755]/g},
{'base':'q','letters':/[\u0071\u24E0\uFF51\u024B\uA757\uA759]/g},
{'base':'r','letters':/[\u0072\u24E1\uFF52\u0155\u1E59\u0159\u0211\u0213\u1E5B\u1E5D\u0157\u1E5F\u024D\u027D\uA75B\uA7A7\uA783]/g},
{'base':'s','letters':/[\u0073\u24E2\uFF53\u00DF\u015B\u1E65\u015D\u1E61\u0161\u1E67\u1E63\u1E69\u0219\u015F\u023F\uA7A9\uA785\u1E9B]/g},
{'base':'t','letters':/[\u0074\u24E3\uFF54\u1E6B\u1E97\u0165\u1E6D\u021B\u0163\u1E71\u1E6F\u0167\u01AD\u0288\u2C66\uA787]/g},
{'base':'tz','letters':/[\uA729]/g},
{'base':'u','letters':/[\u0075\u24E4\uFF55\u00F9\u00FA\u00FB\u0169\u1E79\u016B\u1E7B\u016D\u00FC\u01DC\u01D8\u01D6\u01DA\u1EE7\u016F\u0171\u01D4\u0215\u0217\u01B0\u1EEB\u1EE9\u1EEF\u1EED\u1EF1\u1EE5\u1E73\u0173\u1E77\u1E75\u0289]/g},
{'base':'v','letters':/[\u0076\u24E5\uFF56\u1E7D\u1E7F\u028B\uA75F\u028C]/g},
{'base':'vy','letters':/[\uA761]/g},
{'base':'w','letters':/[\u0077\u24E6\uFF57\u1E81\u1E83\u0175\u1E87\u1E85\u1E98\u1E89\u2C73]/g},
{'base':'x','letters':/[\u0078\u24E7\uFF58\u1E8B\u1E8D]/g},
{'base':'y','letters':/[\u0079\u24E8\uFF59\u1EF3\u00FD\u0177\u1EF9\u0233\u1E8F\u00FF\u1EF7\u1E99\u1EF5\u01B4\u024F\u1EFF]/g},
{'base':'z','letters':/[\u007A\u24E9\uFF5A\u017A\u1E91\u017C\u017E\u1E93\u1E95\u01B6\u0225\u0240\u2C6C\uA763]/g}
];
for(var i=0; i<defaultDiacriticsRemovalMap.length; i++) {
str = str.replace(defaultDiacriticsRemovalMap[i].letters, defaultDiacriticsRemovalMap[i].base);
}
return str;
}
["otherCan'tMatch",'ávatar', 'àvatar', 'ávàhaha'].filter(item=>/ava/.test(removeDiacritics(item)))

Angularjs Array Single dimension to array with childs

Hello everyone and thanks for your help.
I have the following arrangement in Angularjs
$scope.arr = [
{
"id":284,
"name":"Ferreterias",
"geometry_type":"POINT",
"isocrona":null,
"published":null,
"created_at":"2017-03-02T00:26:00.710Z",
"updated_at":"2017-05-16T22:24:33.715Z",
"cant_features":0,
"country":null,
"totalfeatures":500,
"nygfeatures":500,
"is_wms":false,
"folder_id":301,
"is_folder":false,
"filters":null,
"processing_status":"active",
"wms_legend":null,
"origin_id":null,
"origin_label":"",
"url":"http://192.168.20.136:3000/layers/284.json",
"items":{}
},
{
"id":285,
"name":"Ferre clon 1",
"geometry_type":"POINT",
"isocrona":null,
"published":null,
"created_at":"2017-03-02T00:27:06.699Z",
"updated_at":"2017-03-02T00:27:06.699Z",
"cant_features":0,
"country":null,
"totalfeatures":500,
"nygfeatures":500,
"is_wms":false,
"folder_id":null,
"is_folder":false,
"filters":null,
"processing_status":"active",
"wms_legend":null,
"origin_id":284,
"origin_label":"Origen: Ferreterias",
"url":"http://192.168.20.136:3000/layers/285.json",
"items":{}
},
{
"id":301,
"name":"Folder 1",
"geometry_type":null,
"isocrona":null,
"published":null,
"created_at":"2017-03-14T20:17:53.170Z",
"updated_at":"2017-05-16T23:21:49.803Z",
"cant_features":0,
"country":null,
"totalfeatures":0,
"nygfeatures":0,
"is_wms":false,
"folder_id":303,
"is_folder":true,
"filters":null,
"processing_status":"active",
"wms_legend":null,
"origin_id":null,
"origin_label":"",
"url":"http://192.168.20.136:3000/layers/301.json",
"items":{}
},
{
"id":302,
"name":"No se porque",
"geometry_type":null,
"isocrona":false,
"published":null,
"created_at":"2017-03-21T23:01:21.399Z",
"updated_at":"2017-05-10T17:11:03.255Z",
"cant_features":0,
"country":null,
"totalfeatures":0,
"nygfeatures":0,
"is_wms":false,
"folder_id":301,
"is_folder":false,
"filters":null,
"processing_status":"active",
"wms_legend":null,
"origin_id":null,
"origin_label":"",
"url":"http://192.168.20.136:3000/layers/302.json",
"items":{}
},
{
"id":303,
"name":"Folder 2",
"geometry_type":null,
"isocrona":null,
"published":null,
"created_at":"2017-03-21T23:30:59.258Z",
"updated_at":"2017-05-16T23:26:16.367Z",
"cant_features":0,
"country":null,
"totalfeatures":0,
"nygfeatures":0,
"is_wms":false,
"folder_id":301,
"is_folder":true,
"filters":null,
"processing_status":"active",
"wms_legend":null,
"origin_id":null,
"origin_label":"",
"url":"http://192.168.20.136:3000/layers/303.json",
"items":{}
},
{
"id":308,
"name":"Capa xxx",
"geometry_type":null,
"isocrona":false,
"published":null,
"created_at":"2017-05-10T17:13:52.971Z",
"updated_at":"2017-05-16T23:46:54.235Z",
"cant_features":0,
"country":null,
"totalfeatures":0,
"nygfeatures":0,
"is_wms":false,
"folder_id":335,
"is_folder":false,
"filters":null,
"processing_status":"active",
"wms_legend":null,
"origin_id":null,
"origin_label":"",
"url":"http://192.168.20.136:3000/layers/308.json",
"items":{}
},
{
"id":309,
"name":"qqqqqqqqqqqqq",
"geometry_type":null,
"isocrona":false,
"published":null,
"created_at":"2017-05-10T17:14:28.789Z",
"updated_at":"2017-05-17T16:45:55.932Z",
"cant_features":0,
"country":null,
"totalfeatures":0,
"nygfeatures":0,
"is_wms":false,
"folder_id":301,
"is_folder":false,
"filters":null,
"processing_status":"active",
"wms_legend":null,
"origin_id":null,
"origin_label":"",
"url":"http://192.168.20.136:3000/layers/309.json",
"items":{}
},
{
"id":310,
"name":"dede",
"geometry_type":null,
"isocrona":false,
"published":null,
"created_at":"2017-05-10T17:16:00.119Z",
"updated_at":"2017-05-16T23:47:13.593Z",
"cant_features":0,
"country":null,
"totalfeatures":0,
"nygfeatures":0,
"is_wms":false,
"folder_id":308,
"is_folder":false,
"filters":null,
"processing_status":"active",
"wms_legend":null,
"origin_id":null,
"origin_label":"",
"url":"http://192.168.20.136:3000/layers/310.json",
"items":{}
},
{
"id":311,
"name":"dedede",
"geometry_type":null,
"isocrona":false,
"published":null,
"created_at":"2017-05-10T17:21:56.661Z",
"updated_at":"2017-05-16T21:44:27.179Z",
"cant_features":0,
"country":null,
"totalfeatures":0,
"nygfeatures":0,
"is_wms":false,
"folder_id":301,
"is_folder":false,
"filters":null,
"processing_status":"active",
"wms_legend":null,
"origin_id":null,
"origin_label":"",
"url":"http://192.168.20.136:3000/layers/311.json",
"items":{}
},
{
"id":312,
"name":"ferres",
"geometry_type":"POINT",
"isocrona":null,
"published":null,
"created_at":"2017-05-10T17:33:21.328Z",
"updated_at":"2017-05-16T20:46:04.872Z",
"cant_features":0,
"country":null,
"totalfeatures":4770,
"nygfeatures":4770,
"is_wms":false,
"folder_id":301,
"is_folder":false,
"filters":null,
"processing_status":"active",
"wms_legend":null,
"origin_id":null,
"origin_label":"",
"url":"http://192.168.20.136:3000/layers/312.json",
"items":{}
},
{
"id":330,
"name":"2222222",
"geometry_type":null,
"isocrona":false,
"published":null,
"created_at":"2017-05-16T19:50:40.220Z",
"updated_at":"2017-05-16T23:46:56.712Z",
"cant_features":0,
"country":null,
"totalfeatures":0,
"nygfeatures":0,
"is_wms":false,
"folder_id":308,
"is_folder":false,
"filters":null,
"processing_status":"active",
"wms_legend":null,
"origin_id":308,
"origin_label":"Origen: Capa xxx",
"url":"http://192.168.20.136:3000/layers/330.json",
"items":{}
},
{
"id":333,
"name":"ferres 2",
"geometry_type":"POINT",
"isocrona":null,
"published":null,
"created_at":"2017-05-16T19:59:04.588Z",
"updated_at":"2017-05-16T22:23:54.274Z",
"cant_features":0,
"country":null,
"totalfeatures":500,
"nygfeatures":500,
"is_wms":false,
"folder_id":301,
"is_folder":false,
"filters":null,
"processing_status":"active",
"wms_legend":null,
"origin_id":284,
"origin_label":"Origen: Ferreterias",
"url":"http://192.168.20.136:3000/layers/333.json",
"items":{}
},
{
"id":334,
"name":"Folder 3",
"geometry_type":null,
"isocrona":null,
"published":null,
"created_at":"2017-05-16T23:22:51.271Z",
"updated_at":"2017-05-16T23:26:21.513Z",
"cant_features":0,
"country":null,
"totalfeatures":0,
"nygfeatures":0,
"is_wms":false,
"folder_id":301,
"is_folder":true,
"filters":null,
"processing_status":"active",
"wms_legend":null,
"origin_id":null,
"origin_label":"",
"url":"http://192.168.20.136:3000/layers/334.json",
"items":{}
},
{
"id":335,
"name":"Folder 4",
"geometry_type":null,
"isocrona":null,
"published":null,
"created_at":"2017-05-16T23:22:58.654Z",
"updated_at":"2017-05-16T23:23:02.153Z",
"cant_features":0,
"country":null,
"totalfeatures":0,
"nygfeatures":0,
"is_wms":false,
"folder_id":334,
"is_folder":true,
"filters":null,
"processing_status":"active",
"wms_legend":null,
"origin_id":null,
"origin_label":"",
"url":"http://192.168.20.136:3000/layers/335.json",
"items":{}
}
]
And I need to nest it where they "id" are equal by "folder_id" and "origin_id"
I try to use:
$scope.arr.map(function(el){
el.items = $scope.arr.filter(function(item){
return item.folder_id === el.id
});
return el;
}).filter(function(item){
return item.folder_id === null;
})
But console gives me the following error and stops working.
TypeError: Converting circular structure to JSON
Please.. Help!!

Assign to some new array
$scope.nestArray = $scope.arr.map(function(el){
el.items = $scope.arr.filter(function(item){
return item.folder_id === el.id
});
return el;
}).filter(function(item){
return item.folder_id === null;
})
console.log($scope.nestArray);
var myApp = angular.module('myApp',[]);
function LoginController($scope) {
$scope.name = 'Superhero';
$scope.arr = [
{
"id":284,
"name":"Ferreterias",
"geometry_type":"POINT",
"isocrona":null,
"published":null,
"created_at":"2017-03-02T00:26:00.710Z",
"updated_at":"2017-05-16T22:24:33.715Z",
"cant_features":0,
"country":null,
"totalfeatures":500,
"nygfeatures":500,
"is_wms":false,
"folder_id":301,
"is_folder":false,
"filters":null,
"processing_status":"active",
"wms_legend":null,
"origin_id":null,
"origin_label":"",
"url":"http://192.168.20.136:3000/layers/284.json",
"items":{}
},
{
"id":285,
"name":"Ferre clon 1",
"geometry_type":"POINT",
"isocrona":null,
"published":null,
"created_at":"2017-03-02T00:27:06.699Z",
"updated_at":"2017-03-02T00:27:06.699Z",
"cant_features":0,
"country":null,
"totalfeatures":500,
"nygfeatures":500,
"is_wms":false,
"folder_id":null,
"is_folder":false,
"filters":null,
"processing_status":"active",
"wms_legend":null,
"origin_id":284,
"origin_label":"Origen: Ferreterias",
"url":"http://192.168.20.136:3000/layers/285.json",
"items":{}
},
{
"id":301,
"name":"Folder 1",
"geometry_type":null,
"isocrona":null,
"published":null,
"created_at":"2017-03-14T20:17:53.170Z",
"updated_at":"2017-05-16T23:21:49.803Z",
"cant_features":0,
"country":null,
"totalfeatures":0,
"nygfeatures":0,
"is_wms":false,
"folder_id":303,
"is_folder":true,
"filters":null,
"processing_status":"active",
"wms_legend":null,
"origin_id":null,
"origin_label":"",
"url":"http://192.168.20.136:3000/layers/301.json",
"items":{}
},
{
"id":302,
"name":"No se porque",
"geometry_type":null,
"isocrona":false,
"published":null,
"created_at":"2017-03-21T23:01:21.399Z",
"updated_at":"2017-05-10T17:11:03.255Z",
"cant_features":0,
"country":null,
"totalfeatures":0,
"nygfeatures":0,
"is_wms":false,
"folder_id":301,
"is_folder":false,
"filters":null,
"processing_status":"active",
"wms_legend":null,
"origin_id":null,
"origin_label":"",
"url":"http://192.168.20.136:3000/layers/302.json",
"items":{}
},
{
"id":303,
"name":"Folder 2",
"geometry_type":null,
"isocrona":null,
"published":null,
"created_at":"2017-03-21T23:30:59.258Z",
"updated_at":"2017-05-16T23:26:16.367Z",
"cant_features":0,
"country":null,
"totalfeatures":0,
"nygfeatures":0,
"is_wms":false,
"folder_id":301,
"is_folder":true,
"filters":null,
"processing_status":"active",
"wms_legend":null,
"origin_id":null,
"origin_label":"",
"url":"http://192.168.20.136:3000/layers/303.json",
"items":{}
},
{
"id":308,
"name":"Capa xxx",
"geometry_type":null,
"isocrona":false,
"published":null,
"created_at":"2017-05-10T17:13:52.971Z",
"updated_at":"2017-05-16T23:46:54.235Z",
"cant_features":0,
"country":null,
"totalfeatures":0,
"nygfeatures":0,
"is_wms":false,
"folder_id":335,
"is_folder":false,
"filters":null,
"processing_status":"active",
"wms_legend":null,
"origin_id":null,
"origin_label":"",
"url":"http://192.168.20.136:3000/layers/308.json",
"items":{}
},
{
"id":309,
"name":"qqqqqqqqqqqqq",
"geometry_type":null,
"isocrona":false,
"published":null,
"created_at":"2017-05-10T17:14:28.789Z",
"updated_at":"2017-05-17T16:45:55.932Z",
"cant_features":0,
"country":null,
"totalfeatures":0,
"nygfeatures":0,
"is_wms":false,
"folder_id":301,
"is_folder":false,
"filters":null,
"processing_status":"active",
"wms_legend":null,
"origin_id":null,
"origin_label":"",
"url":"http://192.168.20.136:3000/layers/309.json",
"items":{}
},
{
"id":310,
"name":"dede",
"geometry_type":null,
"isocrona":false,
"published":null,
"created_at":"2017-05-10T17:16:00.119Z",
"updated_at":"2017-05-16T23:47:13.593Z",
"cant_features":0,
"country":null,
"totalfeatures":0,
"nygfeatures":0,
"is_wms":false,
"folder_id":308,
"is_folder":false,
"filters":null,
"processing_status":"active",
"wms_legend":null,
"origin_id":null,
"origin_label":"",
"url":"http://192.168.20.136:3000/layers/310.json",
"items":{}
},
{
"id":311,
"name":"dedede",
"geometry_type":null,
"isocrona":false,
"published":null,
"created_at":"2017-05-10T17:21:56.661Z",
"updated_at":"2017-05-16T21:44:27.179Z",
"cant_features":0,
"country":null,
"totalfeatures":0,
"nygfeatures":0,
"is_wms":false,
"folder_id":301,
"is_folder":false,
"filters":null,
"processing_status":"active",
"wms_legend":null,
"origin_id":null,
"origin_label":"",
"url":"http://192.168.20.136:3000/layers/311.json",
"items":{}
},
{
"id":312,
"name":"ferres",
"geometry_type":"POINT",
"isocrona":null,
"published":null,
"created_at":"2017-05-10T17:33:21.328Z",
"updated_at":"2017-05-16T20:46:04.872Z",
"cant_features":0,
"country":null,
"totalfeatures":4770,
"nygfeatures":4770,
"is_wms":false,
"folder_id":301,
"is_folder":false,
"filters":null,
"processing_status":"active",
"wms_legend":null,
"origin_id":null,
"origin_label":"",
"url":"http://192.168.20.136:3000/layers/312.json",
"items":{}
},
{
"id":330,
"name":"2222222",
"geometry_type":null,
"isocrona":false,
"published":null,
"created_at":"2017-05-16T19:50:40.220Z",
"updated_at":"2017-05-16T23:46:56.712Z",
"cant_features":0,
"country":null,
"totalfeatures":0,
"nygfeatures":0,
"is_wms":false,
"folder_id":308,
"is_folder":false,
"filters":null,
"processing_status":"active",
"wms_legend":null,
"origin_id":308,
"origin_label":"Origen: Capa xxx",
"url":"http://192.168.20.136:3000/layers/330.json",
"items":{}
},
{
"id":333,
"name":"ferres 2",
"geometry_type":"POINT",
"isocrona":null,
"published":null,
"created_at":"2017-05-16T19:59:04.588Z",
"updated_at":"2017-05-16T22:23:54.274Z",
"cant_features":0,
"country":null,
"totalfeatures":500,
"nygfeatures":500,
"is_wms":false,
"folder_id":301,
"is_folder":false,
"filters":null,
"processing_status":"active",
"wms_legend":null,
"origin_id":284,
"origin_label":"Origen: Ferreterias",
"url":"http://192.168.20.136:3000/layers/333.json",
"items":{}
},
{
"id":334,
"name":"Folder 3",
"geometry_type":null,
"isocrona":null,
"published":null,
"created_at":"2017-05-16T23:22:51.271Z",
"updated_at":"2017-05-16T23:26:21.513Z",
"cant_features":0,
"country":null,
"totalfeatures":0,
"nygfeatures":0,
"is_wms":false,
"folder_id":301,
"is_folder":true,
"filters":null,
"processing_status":"active",
"wms_legend":null,
"origin_id":null,
"origin_label":"",
"url":"http://192.168.20.136:3000/layers/334.json",
"items":{}
},
{
"id":335,
"name":"Folder 4",
"geometry_type":null,
"isocrona":null,
"published":null,
"created_at":"2017-05-16T23:22:58.654Z",
"updated_at":"2017-05-16T23:23:02.153Z",
"cant_features":0,
"country":null,
"totalfeatures":0,
"nygfeatures":0,
"is_wms":false,
"folder_id":334,
"is_folder":true,
"filters":null,
"processing_status":"active",
"wms_legend":null,
"origin_id":null,
"origin_label":"",
"url":"http://192.168.20.136:3000/layers/335.json",
"items":{}
}
]
$scope.nestArray = $scope.arr.map(function(el){
el.items = $scope.arr.filter(function(item){
return item.folder_id === el.id
});
return el;
}).filter(function(item){
return item.folder_id === null;
})
console.log($scope.nestArray);
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.1/angular.min.js"></script>
<div ng-app ng-controller="LoginController">
<div>{{nestArray}}</div>
</div>

Solved!!
arr_f = $scope.arr.map(function(el){
el.items = [];
var items = [];
$scope.arr.filter(function(item){
if(item.folder_id == el.id){
items.push(item);
}else if(item.origin_id == el.id){
items.push(item);
}
});
el.items = items;
return el;
});
var cant = arr_f.length;
while(cant--){
if(arr_f[cant].origin_id != null){
arr_f.splice(cant,1);
}else if(arr_f[cant].folder_id != null){
arr_f.splice(cant,1);
}
}
console.log(arr_f);

javascript quiz not working as intended

I've been trying to have this javascript quiz with 5 questions that can display both an image or an onclick button for sound.
The point of the quiz is to guess which artist belong to which picture or sound.
But the problems are when I try to add a picture or button in the box where is says "hvilket band er dette?" it crashes the quiz. Also it doesnt seem to count the amount of points for correct and incorrect answears.
Would be greatful if anyone knew how to fix it.
EDIT: also need help with centering the quiz underneath the "banner".
The code:
<html>
<head>
<meta charset="UTF-8">
<title>fagdag 26.04.2016 helårs</title>
<style>
#banner {
text-align: center;
width: 50%;
}
.pulsate {
-webkit-animation: pulsate 3s ease-out;
-webkit-animation-iteration-count: infinite;
opacity: 0.5;
}
#-webkit-keyframes pulsate {
0% {
opacity: 0.5;
}
50% {
opacity: 1.0;
}
100% {
opacity: 0.5;
}
div#test{
border:#000 1px solid;
padding:10px 40px 40px 40px;
}
}
</style>
</head>
<body>
<div onmouseover="PlaySound('mySound')" onmouseout="StopSound('mySound')" id="banner">
<img src="http://i.imgur.com/SrnpgpD.jpg" style="z-index: 0; position: absolute; text-align; center">
<img class="pulsate" src="http://i.imgur.com/t2Pil1a.png" style="z-index: 1; position: absolute; text-align;center">
</div>
<br>
<br>
<h2 id="test_status"></h2>
<h2> Hvilket band er dette? </h2>
<div id="test"></div>
<audio id='mySound' src='vivalavida.mp3' />
<script type="text/javascript">
function PlaySound(soundobj) {
console.log("hi")
var thissound = document.getElementById(soundobj);
thissound.play();
}
function StopSound(soundobj) {
var thissound = document.getElementById(soundobj);
thissound.pause();
thissound.currentTime = 0;
}
</script>
<script>
var pos = 0, test, test_status, question, choice, choices, chA, chB, chC, chD, chE, correct = 0;
var questions = [
[ "Hvilket band er dette?", "Linkin Park", "Green Day", "Coldplay", "Billy Talent", "Hollywoodundead" ,"B" ],
[ "Hvilket band er dette?", "Linkin Park", "Green Day", "Coldplay", "Billy Talent", "Hollywoodundead" ,"A" ],
[ "Hvilket band er dette?", "Linkin Park", "Green Day", "Coldplay", "Billy Talent", "Hollywoodundead" ,"B" ],
[ "Hvilket band er dette?", "Linkin Park", "Green Day", "Coldplay", "Billy Talent", "Hollywoodundead" ,"D" ],
[ "Hvilket band er dette?", "Linkin Park", "Green Day", "Coldplay", "Billy Talent", "Hollywoodundead" ,"E" ],
];
function _(x){
return document.getElementById(x);
}
function renderQuestion(){
test = _("test");
if(pos >= questions.length){
test.innerHTML = "<h2>Du fikk "+correct+" av "+questions.length+" spørsmål riktige</h2>";
_("test_status").innerHTML = "Quiz fullført";
pos = 0;
correct = 0;
return false;
}
_("test_status").innerHTML = "Spørsmål "+(pos+1)+" av "+questions.length;
question = questions[pos][0];
chA = questions[pos][1];
chB = questions[pos][2];
chC = questions[pos][3];
chD = questions[pos][4];
chE = questions[pos][5];
test.innerHTML = "<h3>"+question+"</h3>";
test.innerHTML += "<input type='radio' name='choices' value='A'> "+chA+"<br>";
test.innerHTML += "<input type='radio' name='choices' value='B'> "+chB+"<br>";
test.innerHTML += "<input type='radio' name='choices' value='C'> "+chC+"<br>";
test.innerHTML += "<input type='radio' name='choices' value='D'> "+chD+"<br>";
test.innerHTML += "<input type='radio' name='choices' value='E'> "+chE+"<br><br>";
test.innerHTML += "<button onclick='checkAnswer()'>Neste</button>";
}
function checkAnswer(){
choices = document.getElementsByName("choices");
for(var i=0; i<choices.length; i++){
if(choices[i].checked){
choice = choices[i].value;
}
}
if(choice == questions[pos][5]){
correct++;
}
pos++;
renderQuestion();
}
window.addEventListener("load", renderQuestion, false);
</script>
</body>
</html>

How to create a .csv file from the results of an array?

I'm using a PHP class to Check the email validity in real-time,
The PHP Script works fine: Check the emails and print the results in the same page creating a <td> element for each validated email.
My problem is I'm trying to validate around 200,000 emails... the result of the script is a huge list causing my browser to stop working.
Is it possible to create a .csv file with the results instead of just print them on the page? If so, how can I do this?
Here is my source code:
index.php <-- this is the file that shows the results.
emailvalid.php <-- This is the PHP Class
<!DOCTYPE html>
<!--[if IE 8]> <html lang="en" class="ie8"> <![endif]-->
<!--[if IE 9]> <html lang="en" class="ie9"> <![endif]-->
<!--[if !IE]><!--> <html lang="en"> <!--<![endif]-->
<head>
<title>EmailValid</title>
<!-- Meta -->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<link rel="shortcut icon" href="favicon.ico">
<link href='http://fonts.googleapis.com/css?family=Lato:300,400,300italic,400italic' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Montserrat:400,700' rel='stylesheet' type='text/css'>
<!-- Global CSS -->
<link rel="stylesheet" href="assets/plugins/bootstrap/css/bootstrap.min.css">
<!-- Plugins CSS -->
<link rel="stylesheet" href="assets/plugins/font-awesome/css/font-awesome.css">
<link rel="stylesheet" href="assets/plugins/prism/prism.css">
<!-- Theme CSS -->
<link id="theme-style" rel="stylesheet" href="assets/css/styles.css">
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body data-spy="scroll">
<!---//Facebook button code-->
<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.0";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<!-- ******PROMO****** -->
<section id="promo" class="promo section offset-header">
<div class="container text-center">
<h2 class="title">Email<span class="highlight">Valid</span></h2>
<p class="intro">Check the email validity in real-time
<form method="post">
<textarea rows="10" cols="150" style="color:black" name="email" placeholder="Insert here your text. The robot will extract all the emails from the text"></textarea>
</p>
<div class="btns">
<input type="submit" value="Check" name="Check" class="btn btn-cta-secondary">
</div>
</form>
<?php include 'assets/emailvalid.php'; ?>
<ul class="meta list-inline">
</ul><!--//meta-->
</div><!--//container-->
</section><!--//promo-->
<!-- Javascript -->
<script type="text/javascript" src="assets/plugins/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="assets/plugins/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript" src="assets/plugins/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="assets/plugins/bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript" src="assets/plugins/jquery-scrollTo/jquery.scrollTo.min.js"></script>
<script type="text/javascript" src="assets/plugins/prism/prism.js"></script>
<script type="text/javascript" src="assets/js/main.js"></script>
</body>
</html>
<?php
$show_details ='yes'; // choice : 'yes' or 'no'
$disposable_email ='yes'; // choice : 'yes' or 'no'
$check_mx ='yes'; // choice : 'yes' or 'no'
if(!empty($_POST['Check'])){
if(!empty($_POST['email'])){
$emails = get_email($_POST['email']);
require_once('emailvalidclass.php'); //include emailvalidclass.php file
$emailChecker = new emailChecker; // Make a new instance
if($show_details=='yes'){ $emailChecker->supress_output = 0; }else{ $emailChecker->supress_output = 1; }
if($disposable_email=='yes'){ $emailChecker->filter_dea = 1; }else{ $emailChecker->filter_dea = 0; }
if($check_mx=='yes'){ $emailChecker->check_mx = 1; }else{ $emailChecker->check_mx = 0; }
$emailChecker->smtp_test = 0;
$emailsubmited=count($emails);
echo '<br><b>Emails : </b>'.$emailsubmited;
echo '<hr><table cellpadding="10" cellspacing="10" border="1" style="margin-top: 15px;">
<tr style="font-size:20px;background-color:black;color:white">
<td>Email</td>
<td>Passed</td>';
if($show_details=='yes'){
echo '<td style="text-align:left">Email valid ?</td>';
if($disposable_email=='yes'){
echo '<td>Disposable ?</td>';
}
if($check_mx=='yes'){
echo '<td>Domain MX Check ?</td>';
}
}
echo ' </tr>';
$array_good_emails=array();
$array_bad_emails=array();
$array_good_no_duplicate_emails=array();
foreach((array)$emails as $key=>$e){
if(empty($e)) continue;
$e = $emailChecker->check($e);
$e = $e['result'];
// echo '<pre>';
// print_r($e);
// echo '</pre>';
if($e['success']){
$array_good_emails[]=htmlspecialchars($e['query']);
}else{
$array_bad_emails[]=htmlspecialchars($e['query']);
}
?>
<tr>
<td><?php echo htmlspecialchars($e['query']); ?></td>
<?php if($e['success']){
echo '<td style="background-color:green">yes</td>';
}else{
echo '<td style="background-color:red">no</td>';
}
?>
<td>
<?php if(!empty($e['report']['validate_email'])){
echo 'yes';
}elseif(!empty($e['errors']['validate_email'])){
echo 'no';
}
?>
</td>
<?php if($show_details=='yes'){ ?>
<?php if($disposable_email=='yes'){ ?>
<td>
<?php if(!empty($e['report']['filter_dea'])){
echo 'no';
}elseif(!empty($e['errors']['filter_dea'])){
echo 'yes';
}else{
echo '-';
}
?>
</td>
<?php } ?>
<?php if($check_mx=='yes'){ ?>
<?php if(!empty($e['report']['check_mx'])){
echo '<td>yes</td>';
}elseif(!empty($e['errors']['check_mx'])){
echo '<td>no</td>';
}else{
echo '<td>-</td>';
}
?>
<?php } ?>
<?php } ?>
</tr>
<?php
}
echo '</table><br><br>';
?>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">Show Passed/Good Emails</a>
</h4>
</div>
<div id="collapseTwo" class="panel-collapse in" style="height: auto;">
<div class="panel-body" style="color:black">
<?php echo implode("<br>",$array_good_emails); ?>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h6 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseOne" class="collapsed">Show Bad Emails</a>
</h6>
</div>
<div id="collapseOne" class="panel-collapse collapse" style="height: 0px;">
<div class="panel-body" style="color:black">
<?php echo implode("<br>",$array_bad_emails); ?>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseFour" class="collapsed">Show Passed/Good Emails (without duplicate emails) </a>
</h4>
</div>
<div id="collapseFour" class="panel-collapse collapse">
<div class="panel-body" style="color:black">
<?php $array_good_no_duplicate_emails=array_unique($array_good_emails);
echo implode("<br>",$array_good_no_duplicate_emails); ?>
</div>
</div>
</div>
<?php
}else{
echo 'Email field empty. Please, try again';
}
}
function get_email($text) {
## Regex taken from http://bit.ly/Tq2PYP PHP's FILTER_VALIDATE_EMAIL function.
$email_pattern = "/(?!(?:(?:\\x22?\\x5C[\\x00-\\x7E]\\x22?)|(?:\\x22?[^\\x5C\\x22]\\x22?)){255,})(?!(?:(?:\\x22?\\x5C[\\x00-\\x7E]\\x22?)|(?:\\x22?[^\\x5C\\x22]\\x22?)){65,}#)(?:(?:[\\x21\\x23-\\x27\\x2A\\x2B\\x2D\\x2F-\\x39\\x3D\\x3F\\x5E-\\x7E]+)|(?:\\x22(?:[\\x01-\\x08\\x0B\\x0C\\x0E-\\x1F\\x21\\x23-\\x5B\\x5D-\\x7F]|(?:\\x5C[\\x00-\\x7F]))*\\x22))(?:\\.(?:(?:[\\x21\\x23-\\x27\\x2A\\x2B\\x2D\\x2F-\\x39\\x3D\\x3F\\x5E-\\x7E]+)|(?:\\x22(?:[\\x01-\\x08\\x0B\\x0C\\x0E-\\x1F\\x21\\x23-\\x5B\\x5D-\\x7F]|(?:\\x5C[\\x00-\\x7F]))*\\x22)))*#(?:(?:(?!.*[^.]{64,})(?:(?:(?:xn--)?[a-z0-9]+(?:-[a-z0-9]+)*\\.){1,126}){1,}(?:(?:[a-z][a-z0-9]*)|(?:(?:xn--)[a-z0-9]+))(?:-[a-z0-9]+)*)|(?:\\[(?:(?:IPv6:(?:(?:[a-f0-9]{1,4}(?::[a-f0-9]{1,4}){7})|(?:(?!(?:.*[a-f0-9][:\\]]){7,})(?:[a-f0-9]{1,4}(?::[a-f0-9]{1,4}){0,5})?::(?:[a-f0-9]{1,4}(?::[a-f0-9]{1,4}){0,5})?)))|(?:(?:IPv6:(?:(?:[a-f0-9]{1,4}(?::[a-f0-9]{1,4}){5}:)|(?:(?!(?:.*[a-f0-9]:){5,})(?:[a-f0-9]{1,4}(?::[a-f0-9]{1,4}){0,3})?::(?:[a-f0-9]{1,4}(?::[a-f0-9]{1,4}){0,3}:)?)))?(?:(?:25[0-5])|(?:2[0-4][0-9])|(?:1[0-9]{2})|(?:[1-9]?[0-9]))(?:\\.(?:(?:25[0-5])|(?:2[0-4][0-9])|(?:1[0-9]{2})|(?:[1-9]?[0-9]))){3}))\\]))/i";
$raw = $text;
$newlines = array("\t","\n","\r","\x20\x20","\0","\x0B");
$content = str_replace($newlines, "----", html_entity_decode($raw));
$content2 = preg_replace("/\s/", "-", $content);
$content2 = preg_replace("/\-+/", "|", $content2);
$content2 = explode("|", $content2);
$emails = array();
foreach( $content2 as $line) {
preg_match("/#/", $line, $match);
if( count($match) > 0 ) {
preg_match_all($email_pattern, $line, $email_match);
if( count($email_match) > 0 ) {
foreach($email_match[0] as $key=>$email) {
$emails[] = $email;
}
}
}
}
return $emails;
}
?>
I try to follow the instructions given on the answers from #jason and it works now the resulting emails are saved on a CSV file... but the csv file has repeated information and the headers from my index.php are printed as a columns.
Here is my code:
<?php
$show_details ='no'; // choice : 'yes' or 'no'
$disposable_email ='no'; // choice : 'yes' or 'no'
$check_mx ='no'; // choice : 'yes' or 'no'
if(!empty($_POST['Check'])){
if(!empty($_POST['email'])){
$emails = get_email($_POST['email']);
require_once('emailvalidclass.php'); //include emailvalidclass.php file
$emailChecker = new emailChecker; // Make a new instance
if($show_details=='yes'){ $emailChecker->supress_output = 0; }else{ $emailChecker->supress_output = 1; }
if($disposable_email=='yes'){ $emailChecker->filter_dea = 1; }else{ $emailChecker->filter_dea = 0; }
if($check_mx=='yes'){ $emailChecker->check_mx = 1; }else{ $emailChecker->check_mx = 0; }
$emailChecker->smtp_test = 0;
$emailsubmited=count($emails);
$fileName = 'emails.csv';
header("Cache-Control: must-revalidate, post-check=0, pre-check=0");
header('Content-Description: File Transfer');
header("Content-type: text/csv");
header("Content-Disposition: attachment; filename={$fileName}");
header("Expires: 0");
header("Pragma: public");
$fh = #fopen( 'php://output', 'w' );
$headerDisplayed = false;
$array_good_emails=array();
$array_bad_emails=array();
foreach((array)$emails as $key=>$e){
// Add a header row if it hasn't been added yet
if(empty($e)) continue;
$e = $emailChecker->check($e);
$e = $e['result'];
if($e['success']){
$array_good_emails[]=htmlspecialchars($e['query']);
}else{
$array_bad_emails[]=htmlspecialchars($e['query']);
}
// Put the data into the stream
fputcsv($fh, $array_good_emails);
}
// Close the file
fclose($fh);
// Make sure nothing else is sent, our file is done
exit;
}
}else{
}
function get_email($text) {
## Regex taken from http://bit.ly/Tq2PYP PHP's FILTER_VALIDATE_EMAIL function.
$email_pattern = "/(?!(?:(?:\\x22?\\x5C[\\x00-\\x7E]\\x22?)|(?:\\x22?[^\\x5C\\x22]\\x22?)){255,})(?!(?:(?:\\x22?\\x5C[\\x00-\\x7E]\\x22?)|(?:\\x22?[^\\x5C\\x22]\\x22?)){65,}#)(?:(?:[\\x21\\x23-\\x27\\x2A\\x2B\\x2D\\x2F-\\x39\\x3D\\x3F\\x5E-\\x7E]+)|(?:\\x22(?:[\\x01-\\x08\\x0B\\x0C\\x0E-\\x1F\\x21\\x23-\\x5B\\x5D-\\x7F]|(?:\\x5C[\\x00-\\x7F]))*\\x22))(?:\\.(?:(?:[\\x21\\x23-\\x27\\x2A\\x2B\\x2D\\x2F-\\x39\\x3D\\x3F\\x5E-\\x7E]+)|(?:\\x22(?:[\\x01-\\x08\\x0B\\x0C\\x0E-\\x1F\\x21\\x23-\\x5B\\x5D-\\x7F]|(?:\\x5C[\\x00-\\x7F]))*\\x22)))*#(?:(?:(?!.*[^.]{64,})(?:(?:(?:xn--)?[a-z0-9]+(?:-[a-z0-9]+)*\\.){1,126}){1,}(?:(?:[a-z][a-z0-9]*)|(?:(?:xn--)[a-z0-9]+))(?:-[a-z0-9]+)*)|(?:\\[(?:(?:IPv6:(?:(?:[a-f0-9]{1,4}(?::[a-f0-9]{1,4}){7})|(?:(?!(?:.*[a-f0-9][:\\]]){7,})(?:[a-f0-9]{1,4}(?::[a-f0-9]{1,4}){0,5})?::(?:[a-f0-9]{1,4}(?::[a-f0-9]{1,4}){0,5})?)))|(?:(?:IPv6:(?:(?:[a-f0-9]{1,4}(?::[a-f0-9]{1,4}){5}:)|(?:(?!(?:.*[a-f0-9]:){5,})(?:[a-f0-9]{1,4}(?::[a-f0-9]{1,4}){0,3})?::(?:[a-f0-9]{1,4}(?::[a-f0-9]{1,4}){0,3}:)?)))?(?:(?:25[0-5])|(?:2[0-4][0-9])|(?:1[0-9]{2})|(?:[1-9]?[0-9]))(?:\\.(?:(?:25[0-5])|(?:2[0-4][0-9])|(?:1[0-9]{2})|(?:[1-9]?[0-9]))){3}))\\]))/i";
$raw = $text;
$newlines = array("\t","\n","\r","\x20\x20","\0","\x0B");
$content = str_replace($newlines, "----", html_entity_decode($raw));
$content2 = preg_replace("/\s/", "-", $content);
$content2 = preg_replace("/\-+/", "|", $content2);
$content2 = explode("|", $content2);
$emails = array();
foreach( $content2 as $line) {
preg_match("/#/", $line, $match);
if( count($match) > 0 ) {
preg_match_all($email_pattern, $line, $email_match);
if( count($email_match) > 0 ) {
foreach($email_match[0] as $key=>$email) {
$emails[] = $email;
}
}
}
}
return $emails;
}
?>
And this is produced csv file:
<!DOCTYPE html>
<!--[if IE 8]> <html lang="en" class="ie8"> <![endif]-->
<!--[if IE 9]> <html lang="en" class="ie9"> <![endif]-->
<!--[if !IE]><!--> <html lang="en"> <!--<![endif]-->
<head>
<title>EmailValid</title>
<!-- Meta -->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<link rel="shortcut icon" href="favicon.ico">
<link href='http://fonts.googleapis.com/css?family=Lato:300 400 300italic 400italic' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Montserrat:400 700' rel='stylesheet' type='text/css'>
<!-- Global CSS -->
<link rel="stylesheet" href="assets/plugins/bootstrap/css/bootstrap.min.css">
<!-- Plugins CSS -->
<link rel="stylesheet" href="assets/plugins/font-awesome/css/font-awesome.css">
<link rel="stylesheet" href="assets/plugins/prism/prism.css">
<!-- Theme CSS -->
<link id="theme-style" rel="stylesheet" href="assets/css/styles.css">
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body data-spy="scroll">
0
<!-- ******PROMO****** -->
<section id="promo" class="promo section offset-header">
<div class="container text-center">
<h2 class="title">Email<span class="highlight">Valid</span></h2>
<p class="intro">Check ZSBox email list validity in real-time
<form method="post">
<textarea rows="10" cols="150" style="color:black" name="email" placeholder="Insert here your text. The robot will extract all the emails from the text"></textarea>
</p>
<div class="btns">
<input type="submit" value="Check" name="Check" class="btn btn-cta-secondary">
</div>
</form>
aksboneyard#sbcglobal.net
aksboneyard#sbcglobal.net al__franco#sbcglobal.net
aksboneyard#sbcglobal.net al__franco#sbcglobal.net aladydot#aol.com
aksboneyard#sbcglobal.net al__franco#sbcglobal.net aladydot#aol.com alabama_annie#yahoo.com
aksboneyard#sbcglobal.net al__franco#sbcglobal.net aladydot#aol.com alabama_annie#yahoo.com alac471#yahoo.com
aksboneyard#sbcglobal.net al__franco#sbcglobal.net aladydot#aol.com alabama_annie#yahoo.com alac471#yahoo.com akulovvpshark#yahoo.com
aksboneyard#sbcglobal.net al__franco#sbcglobal.net aladydot#aol.com alabama_annie#yahoo.com alac471#yahoo.com akulovvpshark#yahoo.com akw408#yahoo.com
aksboneyard#sbcglobal.net al__franco#sbcglobal.net aladydot#aol.com alabama_annie#yahoo.com alac471#yahoo.com akulovvpshark#yahoo.com akw408#yahoo.com aksingh#bnr.ca
aksboneyard#sbcglobal.net al__franco#sbcglobal.net aladydot#aol.com alabama_annie#yahoo.com alac471#yahoo.com akulovvpshark#yahoo.com akw408#yahoo.com aksingh#bnr.ca aksnownow#mytalk.com
aksboneyard#sbcglobal.net al__franco#sbcglobal.net aladydot#aol.com alabama_annie#yahoo.com alac471#yahoo.com akulovvpshark#yahoo.com akw408#yahoo.com aksingh#bnr.ca aksnownow#mytalk.com aktiva#c2i.net
aksboneyard#sbcglobal.net al__franco#sbcglobal.net aladydot#aol.com alabama_annie#yahoo.com alac471#yahoo.com akulovvpshark#yahoo.com akw408#yahoo.com aksingh#bnr.ca aksnownow#mytalk.com aktiva#c2i.net alaa_al_saeed#yahoo.com
aksboneyard#sbcglobal.net al__franco#sbcglobal.net aladydot#aol.com alabama_annie#yahoo.com alac471#yahoo.com akulovvpshark#yahoo.com akw408#yahoo.com aksingh#bnr.ca aksnownow#mytalk.com aktiva#c2i.net alaa_al_saeed#yahoo.com aks0355#aol.com
aksboneyard#sbcglobal.net al__franco#sbcglobal.net aladydot#aol.com alabama_annie#yahoo.com alac471#yahoo.com akulovvpshark#yahoo.com akw408#yahoo.com aksingh#bnr.ca aksnownow#mytalk.com aktiva#c2i.net alaa_al_saeed#yahoo.com aks0355#aol.com alabamaalex#yahoo.com
aksboneyard#sbcglobal.net al__franco#sbcglobal.net aladydot#aol.com alabama_annie#yahoo.com alac471#yahoo.com akulovvpshark#yahoo.com akw408#yahoo.com aksingh#bnr.ca aksnownow#mytalk.com aktiva#c2i.net alaa_al_saeed#yahoo.com aks0355#aol.com alabamaalex#yahoo.com al77blackwolf7#email.com
aksboneyard#sbcglobal.net al__franco#sbcglobal.net aladydot#aol.com alabama_annie#yahoo.com alac471#yahoo.com akulovvpshark#yahoo.com akw408#yahoo.com aksingh#bnr.ca aksnownow#mytalk.com aktiva#c2i.net alaa_al_saeed#yahoo.com aks0355#aol.com alabamaalex#yahoo.com al77blackwolf7#email.com akula_6#yahoo.com
aksboneyard#sbcglobal.net al__franco#sbcglobal.net aladydot#aol.com alabama_annie#yahoo.com alac471#yahoo.com akulovvpshark#yahoo.com akw408#yahoo.com aksingh#bnr.ca aksnownow#mytalk.com aktiva#c2i.net alaa_al_saeed#yahoo.com aks0355#aol.com alabamaalex#yahoo.com al77blackwolf7#email.com akula_6#yahoo.com akurt79#yahoo.com
aksboneyard#sbcglobal.net al__franco#sbcglobal.net aladydot#aol.com alabama_annie#yahoo.com alac471#yahoo.com akulovvpshark#yahoo.com akw408#yahoo.com aksingh#bnr.ca aksnownow#mytalk.com aktiva#c2i.net alaa_al_saeed#yahoo.com aks0355#aol.com alabamaalex#yahoo.com al77blackwolf7#email.com akula_6#yahoo.com akurt79#yahoo.com al81g#hotmail.com
aksboneyard#sbcglobal.net al__franco#sbcglobal.net aladydot#aol.com alabama_annie#yahoo.com alac471#yahoo.com akulovvpshark#yahoo.com akw408#yahoo.com aksingh#bnr.ca aksnownow#mytalk.com aktiva#c2i.net alaa_al_saeed#yahoo.com aks0355#aol.com alabamaalex#yahoo.com al77blackwolf7#email.com akula_6#yahoo.com akurt79#yahoo.com al81g#hotmail.com alaguvenkat#yahoo.com
aksboneyard#sbcglobal.net al__franco#sbcglobal.net aladydot#aol.com alabama_annie#yahoo.com alac471#yahoo.com akulovvpshark#yahoo.com akw408#yahoo.com aksingh#bnr.ca aksnownow#mytalk.com aktiva#c2i.net alaa_al_saeed#yahoo.com aks0355#aol.com alabamaalex#yahoo.com al77blackwolf7#email.com akula_6#yahoo.com akurt79#yahoo.com al81g#hotmail.com alaguvenkat#yahoo.com al.jones#aig.com
aksboneyard#sbcglobal.net al__franco#sbcglobal.net aladydot#aol.com alabama_annie#yahoo.com alac471#yahoo.com akulovvpshark#yahoo.com akw408#yahoo.com aksingh#bnr.ca aksnownow#mytalk.com aktiva#c2i.net alaa_al_saeed#yahoo.com aks0355#aol.com alabamaalex#yahoo.com al77blackwolf7#email.com akula_6#yahoo.com akurt79#yahoo.com al81g#hotmail.com alaguvenkat#yahoo.com al.jones#aig.com alagu6#hotmail.com
aksboneyard#sbcglobal.net al__franco#sbcglobal.net aladydot#aol.com alabama_annie#yahoo.com alac471#yahoo.com akulovvpshark#yahoo.com akw408#yahoo.com aksingh#bnr.ca aksnownow#mytalk.com aktiva#c2i.net alaa_al_saeed#yahoo.com aks0355#aol.com alabamaalex#yahoo.com al77blackwolf7#email.com akula_6#yahoo.com akurt79#yahoo.com al81g#hotmail.com alaguvenkat#yahoo.com al.jones#aig.com alagu6#hotmail.com
Any help on this matter will be much appreciated.
Thank you.

To create a CSV line from an array, use $csv_line = implode(',',$array_line);
Spit that out to a file with CSV extension and viola!
Also, could give a more in depth answer if I saw a print_r() example of the arrays you are working with(ie if any loops are needed, etc).

You will probably have up the max execution to stop it from timing out.
ini_set('max_execution_time', 300); //300 seconds = 5 minutes
This code will generate the csv you'll have to modify it for your needs:
<?php
function query_to_csv($db_conn, $query, $filename, $attachment = false, $headers = true) {
if($attachment) {
// send response headers to the browser
header( 'Content-Type: text/csv' );
header( 'Content-Disposition: attachment;filename='.$filename);
$fp = fopen('php://output', 'w');
} else {
$fp = fopen($filename, 'w');
}
$result = mysql_query($query, $db_conn) or die( mysql_error( $db_conn ) );
if($headers) {
// output header row (if at least one row exists)
$row = mysql_fetch_assoc($result);
if($row) {
fputcsv($fp, array_keys($row));
// reset pointer back to beginning
mysql_data_seek($result, 0);
}
}
while($row = mysql_fetch_assoc($result)) {
fputcsv($fp, $row);
}
fclose($fp);
}
// Using the function
$sql = "SELECT * FROM table";
// $db_conn should be a valid db handle
// output as an attachment
query_to_csv($db_conn, $sql, "test.csv", true);
// output to file system
query_to_csv($db_conn, $sql, "test.csv", false);
?>

Here's what you need:
$fileName = 'emails.csv';
header("Cache-Control: must-revalidate, post-check=0, pre-check=0");
header('Content-Description: File Transfer');
header("Content-type: text/csv");
header("Content-Disposition: attachment; filename={$fileName}");
header("Expires: 0");
header("Pragma: public");
$fh = #fopen( 'php://output', 'w' );
$headerDisplayed = false;
foreach ( $your_emails_array as $data ) {
// Add a header row if it hasn't been added yet
if ( !$headerDisplayed ) {
// Use the keys from $data as the titles
fputcsv($fh, array_keys($data));
$headerDisplayed = true;
}
// Put the data into the stream
fputcsv($fh, $data);
}
// Close the file
fclose($fh);
// Make sure nothing else is sent, our file is done
exit;

jquery widget tab refresh div to when update table finish

I have a jquery tab that display divs that have table with edit function that uses a lytebox to popup my update form.
Problem is I need to refresh the page to update the content and I'm kinda lost on the url and the process of the update thing. I am used to a single page update ever since. Here is my code so far:
<?php
session_start();
if (!isset($_SESSION['username'])) {
header("Location: login.php");
exit;
}else if($_SESSION['role']!=='ADMIN'){
header("Location: login.php");
exit;
}
$username=$_SESSION['username'];
?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="./js/sample.js"></script>
<script src="./js/quicksearch.js"></script>
<script src="./js/lytebox.js"></script>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" type="text/css" href="./css/sample.css">
<link rel="stylesheet" type="text/css" href="./css/table_blue.css">
<link rel="stylesheet" type="text/css" href="./css/lytebox.css">
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script>
$(document).ready(function () {
$("#datepicker").hide();
$("#datepicker2").hide();
$("#datepicker").datepicker({
dateFormat: 'yy/mm/dd'
});
$("#datepicker2").datepicker({
dateFormat: 'yy/mm/dd'
});
$("#category").on('change', function () {
if ($("#category").val() == 'ORIGINAL_DEADLINE') {
$("#datepicker").show();
$("#datepicker2").show();
$("#datepicker2").show();
} else {
$("#datepicker").hide();
$("#datepicker2").hide();
}
});
});
</script>
</head>
<body>
<div class="tabs">
<ul class="tab-links">
<li>Overdue</li>
<li>Next 60 days</li>
<li>Others</li>
<li>No Deadline</li>
<li>Finished Documents</li>
<li>Manage Users</li>
<li>Generate Report</li>
<li>Logout</li>
</ul>
<form method="post" action="table.php" >
Category<select name="category" id="category">
<option value='APP_NUMBER' >APP_NUMBER</option>
<option value='SPOC_ASSIGNED' >SPOC_ASSIGNED</option>
<option value='BORROWER_NAME' >BORROWER_NAME</option>
<option value='DEFERRED_TYPE' >DEFERRED_TYPE</option>
<option value='ORIGINAL_DEADLINE' >ORIGINAL_DEADLINE</option>
</select>
Search Text<input type="text" name="txtsearch" placeholder="Type to Search" />
<input type="text" id="datepicker" name="date1" placeholder="Input Start Date">
<input type="text" id="datepicker2" name="date2" placeholder="Input End Date">
<input type="submit" name="cmdsearch" id="cmdsearch" value="Search"/>
</form>
<div class="tab-content">
<div id="tab1" class="tab">
<?php
//conection:
include "conn.php";
//consultation:
$query = "SELECT * FROM export_workflow.COLLATERAL_MANAGEMENT where DATEDIFF(CURDATE(),ORIGINAL_DEADLINE)>1 and SUBMITTED_PENDING='PENDING'";
//execute the query.
if($result = $link->query($query)){
echo "<table class='data' id='table_example'>".
"<thead>".
"<tr>".
"<td>App Number</td>".
"<td>Spoc Assigned</td>".
"<td>Borrower Name</td>".
"<td>App Finish Date</td>".
"<td>Developer & Project</td>".
"<td>Collateral Address Details</td>".
"<td>Deferred Document</td>".
"<td>Deferred Type</td>".
"<td>Original Deadline</td>".
"<td>Date Completed</td>".
"<td>SPOC Remarks</td>".
"<td>File Location</td>".
"<td>JUW MA Remarks</td>".
"<td>COSU Remarks</td>".
"<td>SMU Notes</td>".
"<td>SUBMITTED/PENDING</td>".
"<td> EDIT </td>".
"<td> EDIT </td>".
"</tr></thead>";
while($row = $result->fetch_assoc()){
echo "<tr><td>".$row['APP_NUMBER']."</td>".
"<td>".$row['SPOC_ASSIGNED']."</td>".
"<td>".$row['BORROWER_NAME']."</td>".
"<td>".$row['APP_FINISH_DATE']."</td>".
"<td>".$row['DEVELOPER_PROJECT']."</td>".
"<td>".$row['COLLATERAL_ADDRESS_DETAILS']."</td>".
"<td>".$row['DEFERRED_DOCUMENT']."</td>".
"<td>".$row['DEFERRED_TYPE']."</td>".
"<td>".$row['ORIGINAL_DEADLINE']."</td>".
"<td>".$row['DATE_COMPLETED']."</td>".
"<td>".$row['SPOC_REMARKS']."</td>".
"<td>".$row['FILED_LOCATION']."</td>".
"<td>".$row['JUW_MA_REMARKS']."</td>".
"<td>".$row['COSU_REMARKS']."</td>".
"<td>".$row['SMU_NOTES']."</td>".
"<td>".$row['SUBMITTED_PENDING']."</td>".
"<td><a href='spoc_remarks.php?id=".$row['ID']."' class='lytebox'><image src='./images/pen.png' height=30 width=30></a></td>".
"</tr>";
}
$result->close();
echo "</table>\r\n";
} else {
printf("<p>Error: %s</p>\r\n", $mysqli->error);
}
?>
</div>
<div id="tab2" class="tab">
<?php
// Perform next SQL Query
if($result = $link->query("SELECT * FROM export_workflow.COLLATERAL_MANAGEMENT where DATEDIFF(CURDATE(),ORIGINAL_DEADLINE)<60 and SUBMITTED_PENDING='PENDING'")){
echo "<table class='data' id='table_example'>".
"<thead>".
"<tr>".
"<td>App Number</td>".
"<td>Spoc Assigned</td>".
"<td>Borrower Name</td>".
"<td>App Finish Date</td>".
"<td>Developer & Project</td>".
"<td>Collateral Address Details</td>".
"<td>Deferred Document</td>".
"<td>Deferred Type</td>".
"<td>Original Deadline</td>".
"<td>Date Completed</td>".
"<td>SPOC Remarks</td>".
"<td>File Location</td>".
"<td>JUW MA Remarks</td>".
"<td>COSU Remarks</td>".
"<td>SMU Notes</td>".
"<td>SUBMITTED/PENDING</td>".
"<td> EDIT </td>".
"</tr></thead>";
while($row = $result->fetch_assoc()){
echo "<tr><td>".$row['APP_NUMBER']."</td>".
"<td>".$row['SPOC_ASSIGNED']."</td>".
"<td>".$row['BORROWER_NAME']."</td>".
"<td>".$row['APP_FINISH_DATE']."</td>".
"<td>".$row['DEVELOPER_PROJECT']."</td>".
"<td>".$row['COLLATERAL_ADDRESS_DETAILS']."</td>".
"<td>".$row['DEFERRED_DOCUMENT']."</td>".
"<td>".$row['DEFERRED_TYPE']."</td>".
"<td>".$row['ORIGINAL_DEADLINE']."</td>".
"<td>".$row['DATE_COMPLETED']."</td>".
"<td>".$row['SPOC_REMARKS']."</td>".
"<td>".$row['FILED_LOCATION']."</td>".
"<td>".$row['JUW_MA_REMARKS']."</td>".
"<td>".$row['COSU_REMARKS']."</td>".
"<td>".$row['SMU_NOTES']."</td>".
"<td>".$row['SUBMITTED_PENDING']."</td>".
"<td><a href='spoc_remarks.php?id=".$row['ID']."' class='lytebox'><image src='./images/pen.png' height=30 width=30></a></td>".
"</tr>";
}
echo "</table>\r\n";
$result->close();
} else {
printf("<p>Error: %s</p>\r\n", $mysqli->error);
}
?>
</div>
<div id="tab3" class="tab">
<?php
// Perform next SQL Query
if($result = $link->query("SELECT * FROM export_workflow.COLLATERAL_MANAGEMENT where ORIGINAL_DEADLINE < current_date and SUBMITTED_PENDING='PENDING'")){
echo "<table class='data' id='table_example'>".
"<thead>".
"<tr>".
"<td>App Number</td>".
"<td>Spoc Assigned</td>".
"<td>Borrower Name</td>".
"<td>App Finish Date</td>".
"<td>Developer & Project</td>".
"<td>Collateral Address Details</td>".
"<td>Deferred Document</td>".
"<td>Deferred Type</td>".
"<td>Original Deadline</td>".
"<td>Date Completed</td>".
"<td>SPOC Remarks</td>".
"<td>File Location</td>".
"<td>JUW MA Remarks</td>".
"<td>COSU Remarks</td>".
"<td>SMU Notes</td>".
"<td>SUBMITTED/PENDING</td>".
"<td> EDIT </td>".
"</tr></thead>";
while($row = $result->fetch_assoc()){
echo "<tr><td>".$row['APP_NUMBER']."</td>".
"<td>".$row['SPOC_ASSIGNED']."</td>".
"<td>".$row['BORROWER_NAME']."</td>".
"<td>".$row['APP_FINISH_DATE']."</td>".
"<td>".$row['DEVELOPER_PROJECT']."</td>".
"<td>".$row['COLLATERAL_ADDRESS_DETAILS']."</td>".
"<td>".$row['DEFERRED_DOCUMENT']."</td>".
"<td>".$row['DEFERRED_TYPE']."</td>".
"<td>".$row['ORIGINAL_DEADLINE']."</td>".
"<td>".$row['DATE_COMPLETED']."</td>".
"<td>".$row['SPOC_REMARKS']."</td>".
"<td>".$row['FILED_LOCATION']."</td>".
"<td>".$row['JUW_MA_REMARKS']."</td>".
"<td>".$row['COSU_REMARKS']."</td>".
"<td>".$row['SMU_NOTES']."</td>".
"<td>".$row['SUBMITTED_PENDING']."</td>".
"<td><a href='spoc_remarks.php?id=".$row['ID']."' class='lytebox'><image src='./images/pen.png' height=30 width=30></a></td>".
"</tr>";
}
echo "</table>\r\n";
$result->close();
} else {
printf("<p>Error: %s</p>\r\n", $mysqli->error);
}
?>
</div>
<div id="tab4" class="tab">
<?php
if($result = $link->query("SELECT * FROM export_workflow.COLLATERAL_MANAGEMENT where ORIGINAL_DEADLINE='' and SUBMITTED_PENDING='PENDING'")){
echo "<table class='data' id='table_example'>".
"<thead>".
"<tr>".
"<td>App Number</td>".
"<td>Spoc Assigned</td>".
"<td>Borrower Name</td>".
"<td>App Finish Date</td>".
"<td>Developer & Project</td>".
"<td>Collateral Address Details</td>".
"<td>Deferred Document</td>".
"<td>Deferred Type</td>".
"<td>Original Deadline</td>".
"<td>Date Completed</td>".
"<td>SPOC Remarks</td>".
"<td>File Location</td>".
"<td>JUW MA Remarks</td>".
"<td>COSU Remarks</td>".
"<td>SMU Notes</td>".
"<td>SUBMITTED/PENDING</td>".
"<td> EDIT </td>".
"</tr></thead>";
while($row = $result->fetch_assoc()){
echo "<tr><td>".$row['APP_NUMBER']."</td>".
"<td>".$row['SPOC_ASSIGNED']."</td>".
"<td>".$row['BORROWER_NAME']."</td>".
"<td>".$row['APP_FINISH_DATE']."</td>".
"<td>".$row['DEVELOPER_PROJECT']."</td>".
"<td>".$row['COLLATERAL_ADDRESS_DETAILS']."</td>".
"<td>".$row['DEFERRED_DOCUMENT']."</td>".
"<td>".$row['DEFERRED_TYPE']."</td>".
"<td>".$row['ORIGINAL_DEADLINE']."</td>".
"<td>".$row['DATE_COMPLETED']."</td>".
"<td>".$row['SPOC_REMARKS']."</td>".
"<td>".$row['FILED_LOCATION']."</td>".
"<td>".$row['JUW_MA_REMARKS']."</td>".
"<td>".$row['COSU_REMARKS']."</td>".
"<td>".$row['SMU_NOTES']."</td>".
"<td>".$row['SUBMITTED_PENDING']."</td>".
"<td><a href='spoc_remarks.php?id=".$row['ID']."' class='lytebox'><image src='./images/pen.png' height=30 width=30></a></td>".
"</tr>";
}
echo "</table>\r\n";
$result->close();
} else {
printf("<p>Error: %s</p>\r\n", $mysqli->error);
}
?>
</div>
<div id="tab5" class="tab">
<?php
if($result = $link->query("SELECT * FROM export_workflow.COLLATERAL_MANAGEMENT where SUBMITTED_PENDING='SUBMITTED'")){
echo "<table class='data' id='table_example'>".
"<thead>".
"<tr>".
"<td>App Number</td>".
"<td>Spoc Assigned</td>".
"<td>Borrower Name</td>".
"<td>App Finish Date</td>".
"<td>Developer & Project</td>".
"<td>Collateral Address Details</td>".
"<td>Deferred Document</td>".
"<td>Deferred Type</td>".
"<td>Original Deadline</td>".
"<td>Date Completed</td>".
"<td>SPOC Remarks</td>".
"<td>File Location</td>".
"<td>JUW MA Remarks</td>".
"<td>COSU Remarks</td>".
"<td>SMU Notes</td>".
"<td>SUBMITTED/PENDING</td>".
"<td>EDIT</td>".
"</tr></thead>";
while($row = $result->fetch_assoc()){
echo "<tr><td>".$row['APP_NUMBER']."</td>".
"<td>".$row['SPOC_ASSIGNED']."</td>".
"<td>".$row['BORROWER_NAME']."</td>".
"<td>".$row['APP_FINISH_DATE']."</td>".
"<td>".$row['DEVELOPER_PROJECT']."</td>".
"<td>".$row['COLLATERAL_ADDRESS_DETAILS']."</td>".
"<td>".$row['DEFERRED_DOCUMENT']."</td>".
"<td>".$row['DEFERRED_TYPE']."</td>".
"<td>".$row['ORIGINAL_DEADLINE']."</td>".
"<td>".$row['DATE_COMPLETED']."</td>".
"<td>".$row['SPOC_REMARKS']."</td>".
"<td>".$row['FILED_LOCATION']."</td>".
"<td>".$row['JUW_MA_REMARKS']."</td>".
"<td>".$row['COSU_REMARKS']."</td>".
"<td>".$row['SMU_NOTES']."</td>".
"<td>".$row['SUBMITTED_PENDING']."</td>".
"<td><a href='spoc_remarks.php?id=".$row['ID']."' class='lytebox'><image src='./images/pen.png' height=30 width=30></a></td>".
"</tr>";
}
echo "</table>\r\n";
$result->close();
} else {
printf("<p>Error: %s</p>\r\n", $mysqli->error);
}
?>
</div>
<div id="tab_search">
<?php
if(isset($_POST['cmdsearch'])){
$category=$_POST['category'];
$text=$_POST['txtsearch'];
$date1=$_POST['date1'];
$date2=$_POST['date2'];
//connect to db
$link = mysqli_connect("xxxxxx","xxxxx","qwerty123","xxxxx") or die("Error " . mysqli_error($link));
if($link->connect_error){
printf("Connect failed: %s\n", $mysqli->connect_error);
exit();
}
if($category==='ORIGINAL_DEADLINE'){
$sql="SELECT * FROM COLLATERAL_MANAGEMENT where ($category BETWEEN '$date1' AND '$date2')";
}else{
$sql="SELECT * FROM COLLATERAL_MANAGEMENT where $category LIKE '%$text%'";
}
if (mysqli_query($link, $sql)) {
} else {
echo "Error: " . $sql . "<br>" . mysqli_error($link);
}
$result = $link->query($sql);
echo "<table class='data' id='table_example'>".
"<thead>".
"<tr>".
"<td>App Number</td>".
"<td>Spoc Assigned</td>".
"<td>Borrower Name</td>".
"<td>App Finish Date</td>".
"<td>Developer & Project</td>".
"<td>Collateral Address Details</td>".
"<td>Deferred Document</td>".
"<td>Deferred Type</td>".
"<td>Original Deadline</td>".
"<td>Date Completed</td>".
"<td>SPOC Remarks</td>".
"<td>File Location</td>".
"<td>JUW MA Remarks</td>".
"<td>COSU Remarks</td>".
"<td>SMU Notes</td>".
"<td>SUBMITTED/PENDING</td>".
"<td> EDIT </td>".
"</tr></thead>";
while($row = $result->fetch_assoc()){
echo "<tr><td>".$row['APP_NUMBER']."</td>".
"<td>".$row['SPOC_ASSIGNED']."</td>".
"<td>".$row['BORROWER_NAME']."</td>".
"<td>".$row['APP_FINISH_DATE']."</td>".
"<td>".$row['DEVELOPER_PROJECT']."</td>".
"<td>".$row['COLLATERAL_ADDRESS_DETAILS']."</td>".
"<td>".$row['DEFERRED_DOCUMENT']."</td>".
"<td>".$row['DEFERRED_TYPE']."</td>".
"<td>".$row['ORIGINAL_DEADLINE']."</td>".
"<td>".$row['DATE_COMPLETED']."</td>".
"<td>".$row['SPOC_REMARKS']."</td>".
"<td>".$row['FILED_LOCATION']."</td>".
"<td>".$row['JUW_MA_REMARKS']."</td>".
"<td>".$row['COSU_REMARKS']."</td>".
"<td>".$row['SMU_NOTES']."</td>".
"<td>".$row['SUBMITTED_PENDING']."</td>".
"<td><a href='spoc_remarks.php?id=".$row['ID']."' class='lytebox'><image src='./images/pen.png' height=30 width=30></a></td>".
"</tr>";
}
}
?>
</div>
</div>
<?php
$link->close();
?>
</body>
</html>
here is my updated script when the user click my table:
<?php
$link = mysqli_connect("10.20.8.70","stcutie","qwerty123","export_workflow") or die("Error " . mysqli_error($link));
session_start();
if (!isset($_SESSION['username'])) {
header("Location: login.php");
exit;
}
$username=$_SESSION['username'];
$role=$_SESSION['role'];
$id=$_GET['id'];
$ip=$_SERVER['REMOTE_ADDR'];
//filter database for update
$query = "SELECT * from COLLATERAL_MANAGEMENT where ID='$id'; " or die("Error in the consult.." . mysqli_error($link));
//execute the query.
$result = $link->query($query);
$row = mysqli_fetch_array($result);
$app_uid=$row['APP_NUMBER'];
$spoc_remarks=$row['SPOC_REMARKS'];
$file_location=$row['FILED_LOCATION'];
$juw_remarks=$row['JUW_MA_REMARKS'];
$cosu_remarks=$row['COSU_REMARKS'];
$smu_notes=$row['SMU_NOTES'];
$pending_complete=$row['SUBMITTED_PENDING'];
?>
<html>
<head>
<link rel="stylesheet" type="text/css" href="./css/form_style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
</head>
<body>
<form method="POST" action="">
<div class="form-style-10" id="dynamicField">
<h1>Edit Form</h1>
<br>
<input type="hidden" name="ID" value="<?php $id;?>" >
<p id="spoke_remarks">Spoc Remarks<input type="text" name="spoke_remarks" value="<?php echo $spoc_remarks; ?>"></p>
<br>
<p id="file_location"> File Location<input type="text" name="file_location" value="<?php echo $file_location;?>" > </p>
<br>
<p id="smu_notes">SMU NOTES<input type="text" name="smu_notes" value="<?php echo $smu_notes;?>" ></p>
<br>
<p id="pending_complete">Pending/SUBMITTED<select name="pending_complete" >
<option value='' >--SELECT--</option>
<option value='PENDING' >PENDING</option>
<option value='SUBMITTED' >SUBMITTED</option>
</select> </p>
<input type="submit" value="Edit" name="update" id="update"/>
</div>
</form>
<?php
if(isset($_POST['update'])){
if($role=='SPOC'){
$spoc_remarks2=mysqli_real_escape_string($link,$_POST['spoke_remarks']);
$sql="UPDATE COLLATERAL_MANAGEMENT set SPOC_REMARKS = '$spoc_remarks2' WHERE ID='$id'";
if (mysqli_query($link, $sql)) {
} else {
echo "Error: " . $sql . "<br>" . mysqli_error($link);
}
$sql2="INSERT INTO collateral_management.CHANGE_LOG (DATE, USERS_LOGGED, DESCRIPTION, OLD_VALUE,NEW_VALUE, APP_ID,IP_ADDRESS)
VALUES
(now(),'$username','Spoc $username edit remarks','$spoc_remarks','$spoc_remarks2','$app_uid','$ip');";
mysqli_query($link, $sql2);
}

I didn't solve it so, I made the tabs like a menu bar and just put a js window.load for refresh ^_^