PHP Classes

File: setslists/setslists.js

Recommend this page to a friend!
  Classes of MarPlo   PHP AJAX Multiple Dropdown Select List Creator   setslists/setslists.js   Download  
File: setslists/setslists.js
Role: Auxiliary data
Content type: text/plain
Description: Javascript object to create drop-down select lists
Class: PHP AJAX Multiple Dropdown Select List Creator
Create multiple dropdown selects lists
Author: By
Last change: Fixed bugs related to special characters
Date: 10 years ago
Size: 16,975 bytes
 

Contents

Class file image Download
// Multiple Drop-Down Select Lists Creator Script - http://coursesweb.net/ // Class to create multiple Drop-Down <select> lists var MakeSLists = function() { // messages displayed var lang = { 'erraddnct': 'Add a value in text field for option', 'errjson': 'Incorrect JSON format', 'errchg0': 'Root cannot be changed.', 'errm_name': 'Add a name for resource, between 2 and 250 characters.\n Only Letters, Numbers, "-", and "_"', 'dchanged':'Data changed', 'delitem': 'The selected Option and its Sub-options succesfuly deleted' } var thisob = this; // stores the 'this' reference of the object with this class var geto = 'txt'; // if 'mysql' value, gets data from MySQL database var saveto = 'txt'; // to tell php where to save data var optHierarchy = {'0':[]}; // stores items with 'parent_id':[child_IDs] for each <option> in <select> (starts with 'root') var optData = {'0':{'value':'Root', 'content':'', 'parent':-1}}; var opt1 = 1; // to know when is selected `1st option in <select>, 1 (modified in addSubSelect(), used in addCategory()) var optID = 0; // for the ID of current <option> var slevel = 1; // level of current select lists var selID = 'sl1'; // id of current select list /** Functions to set <select> data **/ // empty option data var resetData = function() { document.getElementById('opval').value = ''; // option value document.getElementById('opcnt').value = ''; // option content document.getElementById('optioncnt').innerHTML = ''; // option-content under <select> } // registers new option and its content function newOption() { var opval = document.getElementById('opval').value.replace(/\</g, '&lt;').replace(/\>/g, '&gt;').replace(/"/g, '&quot;'); // option value var opcnt = document.getElementById('opcnt').value; // option content if(opval.length > 0) { // adds it in $optData. Gets the last-index, to set /add id of new category var idop = 0; for(var ix in optData) { if((ix * 1) > idop) idop = ix * 1; } idop++; // stores data of new option optData[idop] = {'value':opval, 'content':opcnt, 'parent':optID}; // if parent-category exists in $optHierarchy, adds it in array, else, create the parent-category array if(optHierarchy[optID]) optHierarchy[optID].push(idop); else optHierarchy[optID] = [idop]; // sets the level of <select> which is displayed with the new category ($opt1=1 indicates the selection is current <select>) slevel = (opt1 == 1) ? selID.match(/[0-9]+/) * 1 : slevel; // adds the <select> with <option>s and tag for next sub-<select> if(optHierarchy[optID].length > 0) document.getElementById('n_sl'+ slevel).innerHTML = getSelect(optHierarchy[optID]); // shows message 'data added' for 1 sec., then resets select data document.getElementById('optioncnt').innerHTML = ' <div style="margin-left:28%;font-weight:800;text-align:center;color:blue;">Option data Added</div>'; setTimeout(function() { resetData(); // empty <select> and setting data document.getElementById('curentitem').innerHTML = optData[optID].value; // display curent selected item }, 1110); } else { // focus text field, and message document.getElementById('opval').focus(); alert(lang.erraddnct); } } // modify the value and content of selected <option> function changeOptData() { var opval = document.getElementById('opval').value.replace(/\</g, '&lt;').replace(/\>/g, '&gt;').replace(/"/g, '&quot;'); // option value (replace <>" with their html-encodes) var opcnt = document.getElementById('opcnt').value; // option content // if not root if(optID != 0) { // change the name and link in optData, to the id of category optData[optID].value = opval; optData[optID].content = opcnt; var parentid = optData[optID].parent; optID = parentid; // sets current-id to parentid couse refreshes current <select> opt1 = 1; // to know it is on 1st option in <select> slevel--; // re-adds the <select> with <option>s, in the <span> with current <select> if(optHierarchy[parentid].length > 0) document.getElementById('n_sl'+slevel).innerHTML = getSelect(optHierarchy[parentid]); resetData(); // empty category-name, reset link url document.getElementById('curentitem').innerHTML = optData[optID].value; // display curent selected item alert(lang.dchanged); } else alert(lang.errchg0); } // delete the selected <option> (including all its child-options), delete also its id in array of its parent in $optHierarchy function deleteOpt() { // if not root if(optID > 0) { var parentid = optData[optID].parent; // gets parent-ID delete optData[optID]; delete optHierarchy[optID]; // traverses the items in parent to remove deleted item var remainctg = []; // stores the remaining items, to be added in parent for(var i in optHierarchy[parentid]) { if(optHierarchy[parentid][i] != optID) remainctg.push(optHierarchy[parentid][i]); } optHierarchy[parentid] = remainctg; addSelCtgs(); // resets data and adds 1st <select> list resetData(); // empty fields for option data document.getElementById('curentitem').innerHTML = optData[0].value; // display curent selected Option alert(lang.delitem); } else alert(lang.errchg0); } // resets data and adds 1st <select> with main categories function addSelCtgs() { // reset these properties couse after delete it is displayed 1st list optID = 0; slevel = 1; // if items in Root, shows 1st <select>, else, resets properties to initial value if(optHierarchy[0].length > 0) document.getElementById('n_sl'+slevel).innerHTML = getSelect(optHierarchy[0]); else { optHierarchy = {'0':[]}; optData = {'0':{'value':'Root', 'content':'', 'parent':-1}}; document.getElementById('n_sl'+slevel).innerHTML = ''; } } // return <select> list with options-IDs in $arsubop array in $optHierarchy, receives the array, and the ID for <select> var getSelect = function(arsubop) { var nrarsubctg = arsubop.length; // number of options // starts current list var slist = '<div><div><sub>Level '+ slevel +' / '+ nrarsubctg +' Op</sub><select onchange="obMSL.addSubSelect(this)" id="sl'+slevel+'" name="dslists[]"><option value="'+optID+'_'+'">---</option>'; // traverse the object and create <option> with value=idctg_level for(var i in arsubop) { if(optData[arsubop[i]]) slist += '<option value="'+arsubop[i]+'_'+optData[arsubop[i]].value+'">'+optData[arsubop[i]].value+'</option>'; } return slist+'</select></div><span id="n_sl'+(slevel+1)+'"></span></div>'; } // function to get the Drop-Down list, receives the selected list object this.addSubSelect = function(slist) { selID = slist.id; slevel = 1 + selID.match(/[0-9]+/) * 1; // sets the level of selected list in slevel property var opid_lvl = slist.value.split('_'); // separes id and parent-category of selected category /option optID = opid_lvl[0] * 1; // id of selected option // if selected option is 1st <option> (value ends with '_'), empty the tag for next-select if(slist.value.match(/^[0-9]+_$/)) opt1 = 1; // to know it was 1st <option> else opt1 = 0; // to know isn't 1st <option> // if exists iitem of the selected option in $optHierarchy adds the <select> with <option>s and tag for next sub-<select> // else, empty the tag in which is added the sub-<select> of this <select> if(opt1 == 0 && optHierarchy[optID] && optHierarchy[optID].length > 0) { document.getElementById('n_sl'+slevel).innerHTML = getSelect(optHierarchy[optID]); } else document.getElementById('n_sl'+slevel).innerHTML = ''; // if not 1st <option> and optData item, adds its Value and Content in form field, else, empty those fields if(opt1 == 0 && optData[optID]) { document.getElementById('opval').value = optData[optID].value.replace(/&lt;/ig, '<').replace(/&gt;/ig, '>').replace(/&quot;/ig, '"'); document.getElementById('opcnt').value = optData[optID].content; document.getElementById('optioncnt').innerHTML = optData[optID].content; } else resetData(); document.getElementById('curentitem').innerHTML = optData[optID].value; // display curent selected item } /** Get-Codes functions **/ // returns a string with JSON code of objects $optHierarchy and $optData var setJsonStr = function() { return '['+ JSON.stringify(optHierarchy) +', '+ JSON.stringify(optData) +']'; } // adds in #sqlcode textarea the SQL code that can be used to store $optData in SQL database var setSql = function() { var addcode = 'CREATE TABLE `table_name` (`id` INT UNSIGNED PRIMARY KEY, `value` CHAR(255) NOT NULL DEFAULT "", `content` VARCHAR(5000) NOT NULL DEFAULT "", `parent` INT NOT NULL DEFAULT 0) CHARACTER SET utf8 COLLATE utf8_general_ci;\nINSERT INTO `table_name` (`id`, `value`, `content`, `parent`) VALUES '; // sets to adds the items data from optData as rows in SQL for(var i in optData) { addcode += "("+ i +", '"+ optData[i].value +"', '"+ optData[i].content +"', "+ optData[i].parent +"),"; } return addcode.replace(/,$/, ''); // returns the code, deleting the last ',' } // to add codes in textareas this.addTxtarea = function() { document.getElementById('jsoncode').value = setJsonStr(); document.getElementById('dslinpage').value = document.getElementById('dslinpage').value.replace(/var sliststr = ([\w\W\d\s]*); \/\/op_data/ig, 'var sliststr = '+ setJsonStr() +'; \/\/op_data'); // document.getElementById('sqlcode').value = setSql(); } /** Get, Save, Ajax and Others **/ // gets Drop-Down lists saved in TXT file this.getData = function() { var resname = document.getElementById('getslists').value; // resource name resetData(); // empty <select> and setting data // if $geto is 'txt', get data directly via Ajax, else, if 'mysql', gets with Ajax via php if(geto == 'txt') Ajax(0, 'get', 'slists/'+ resname +'.txt'); else if(geto == 'mysql') Ajax('resname='+ resname +'&geto='+ geto, 'get', 'setslists/setslists.php'); thisob.tabShowHide('sets', 'gets', 'codes'); // switch to Set Data Tab document.getElementById('resname').value = resname; // add resource name in text-field for saving data } // gets and pass data to Ajax, to be saved on server this.saveData = function() { // if it is added name for resource to save var resname = document.getElementById('resname'); if(resname.value.match(/^[a-z0-9_-]{2,250}$/i)) { document.getElementById('btnsave').style.visibility = 'hidden'; // hides the Save button // sets data (pass categories structure in JSON) var datasend = 'resname='+ resname.value +'&sdata='+ encodeURIComponent(setJsonStr()) +'&saveto='+ saveto +'&admname='+ document.getElementById('admname').value +'&admpass='+ document.getElementById('admpass').value; Ajax(datasend, 'save', 'setslists/setslists.php'); } else { resname.focus(); alert(lang.errm_name); } } // create the XMLHttpRequest object, according to browser function getXmlHttp() { var xmlHttp = null; // will stere and return the XMLHttpRequest if(window.XMLHttpRequest) xmlHttp = new XMLHttpRequest(); // Forefox, Opera, Safari, ... else if(window.ActiveXObject) xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); // IE return xmlHttp; } // sends data to PHP and receives the response function Ajax(datasend, req, tofile) { var ajaxreq = getXmlHttp(); // get XMLHttpRequest object ajaxreq.open("POST", tofile, true); // create the request ajaxreq.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); // header for POST ajaxreq.send(datasend +'&ajx=1'); // make the ajax request, poassing the data // checks and receives the response ajaxreq.onreadystatechange = function() { if (ajaxreq.readyState == 4) { // if page not found, alert message, else, processes response-data if(ajaxreq.status == 404 || ajaxreq.responseText == 'Resource Not Found') alert('The resource: "'+ document.getElementById('getslists').value +'" not found'); else { // if $req is 'get', request to get data (JSON with two arrays, for $optHierarchy, and $optData) // else, request to save data, and alerts response if(req == 'get') { // gets the JSON, array with two objects, for $optHierarchy and $optData try { var jsonob = JSON.parse(ajaxreq.responseText); optHierarchy = jsonob[0]; optData = jsonob[1]; addSelCtgs(); // resets data and adds 1st <select> with main categories } catch(e) { alert(lang.errjson); } } else if(req == 'save') { document.getElementById('btnsave').style.visibility = 'visible'; // shows the Save button alert(ajaxreq.responseText); } } } } } // for tab effec, receives the ID of element to show and IDs of elements to hide this.tabShowHide = function(sid, hid1, hid2) { document.getElementById(sid).style.display = 'block'; document.getElementById(hid1).style.display = 'none'; document.getElementById(hid2).style.display = 'none'; // add class="tabvi" to tab that shows, and deletes it from the other tabs document.getElementById('tab'+sid).setAttribute('class', 'tabvi'); document.getElementById('tab'+hid1).removeAttribute('class'); document.getElementById('tab'+hid2).removeAttribute('class'); } // to register events this.regEvets = function() { // to not submit forms document.getElementById('fgets').onsubmit = function(){ return false;}; document.getElementById('fset').onsubmit = function(){ return false;}; document.getElementById('savedata').onsubmit = function(){ return false;}; // for tab efect document.getElementById('tabgets').onclick = function(){ thisob.tabShowHide('gets', 'sets', 'codes');}; document.getElementById('tabsets').onclick = function(){ thisob.tabShowHide('sets', 'gets', 'codes');}; document.getElementById('tabcodes').onclick = function(){ thisob.tabShowHide('codes', 'gets', 'sets'); thisob.addTxtarea(); }; // tabs-codes document.getElementById('tabchtml').onclick = function(){ thisob.tabShowHide('chtml', 'cjson', 'csql');}; document.getElementById('tabcjson').onclick = function(){ thisob.tabShowHide('cjson', 'chtml', 'csql');}; document.getElementById('tabcsql').onclick = function(){ thisob.tabShowHide('csql', 'chtml', 'cjson');}; // button to add/modify/delete option lists document.getElementById('newopt').onclick = newOption; document.getElementById('chgdata').onclick = changeOptData; document.getElementById('delopt').onclick = deleteOpt; // for radio buttons that set from which resource type to get data document.getElementById('getxt').onclick = function(){ geto = this.value;}; document.getElementById('getmysql').onclick = function(){ geto = this.value;}; document.getElementById('btnget').onclick = thisob.getData; // button to get data // for radio buttons that set where to save data document.getElementById('totxt').onclick = function(){ saveto = this.value;}; document.getElementById('tomysql').onclick = function(){ saveto = this.value;}; document.getElementById('totxtmysql').onclick = function(){ saveto = this.value;}; document.getElementById('btnsave').onclick = thisob.saveData; // button to save data // to auto select data in textarea document.getElementById('dslinpage').onfocus = function(){ this.select();}; document.getElementById('jsoncode').onfocus = function(){ this.select();}; document.getElementById('dslintxt').onfocus = function(){ this.select();}; document.getElementById('sqlcode').onfocus = function(){ this.select();}; document.getElementById('dslinmysql').onfocus = function(){ this.select();}; } this.regEvets(); } // create object to MakeSLists var obMSL = new MakeSLists();