I'm Creating an Edit button that will edit my data in my row. the problem is if I click multiple edit button it doesn't comply.
It only complies when I click 1 edit button.
HERE IS MY EXAMPLE : http://jsfiddle.net/te2wF/31/
HERES MY CODE
function editRow(t)
{
var i = t.parentNode.parentNode.rowIndex;
var table = document.getElementById('myTable');
if ( table.rows[i].cells[3].childNodes[0].value =="Edit")
{
var name = table.rows[i].cells[0].innerHTML;
var age = table.rows[i].cells[1].innerHTML;
var gender = table.rows[i].cells[2].innerHTML;
var tname = table.rows[i].cells[0];
var tage = table.rows[i].cells[1];
var tgender = table.rows[i].cells[2];
tname.innerHTML = "";
var textname = document.createElement("input");
textname.id = "textname";
tname.appendChild(textname);
tage.innerHTML = "";
var textage = document.createElement("input");
textage.id = "textage";
tage.appendChild(textage);
tgender.innerHTML = "";
var textgender = document.createElement("select");
textgender.id = "textgender";
tgender.appendChild(textgender);
document.getElementById('textname').focus();
document.getElementById("uid").innerHTML = i;
document.getElementById("textname").value = name;
document.getElementById("textage").value = age;
textgender.options.add(Option(gender));
if(gender == "Male") textgender.options.add(new Option("Female"));
else textgender.options.add(new Option("Male"));
table.rows[i].cells[3].childNodes[0].value="Save"
document.getElementById("name").disabled = true;
document.getElementById("age").disabled = true;
document.getElementById("gender").disabled = true;
document.getElementById("insert").disabled = true;
}
else
{
update(document.getElementById('uid').innerHTML);
table.rows[i].cells[3].childNodes[0].value="Edit"
document.getElementById("insert").disabled = false;
}
}
Thank you for helping.....
you should change:
textgender.options.add(Option(gender));
to
textgender.options.add(new Option(gender));
But more to the point on the edit button:
You're attempting to access the editable inputs on your table by id - but when you create a second set of textname and textage inputs, the id's are the same as the other row that you're editing. You either need to create unique id's on these elements (perhaps by appending the row number to the id), or you need to set it up so that you can only edit one row at a time (disable and grey the other rows when you're editing one)
Please, when using jsfiddle, please keep javascript on javascript tab and html on html tab to make it easier and faster to help you.
I believe you should adjust 2 places on your code:
First
document.getElementById('textname').focus();
document.getElementById("uid").innerHTML = i;
document.getElementById("textname").value = name;
document.getElementById("textage").value = age;
textgender.options.add(Option(gender));
should be
document.getElementById('textname').focus();
document.getElementById("uid").innerHTML = i;
document.getElementById("textname").value = name;
document.getElementById("textage").value = age;
textgender.options.add(new Option(gender));
Second:
else
{
update(document.getElementById('uid').innerHTML);
table.rows[i].cells[3].childNodes[0].value="Edit"
document.getElementById("insert").disabled = false;
}
should be:
else
{
update(document.getElementById('uid').innerHTML);
table.rows[i].cells[3].childNodes[0].value="Edit"
document.getElementById("name").disabled = false;
document.getElementById("age").disabled = false;
document.getElementById("gender").disabled = false;
document.getElementById("insert").disabled = false;
}
try here http://jsfiddle.net/te2wF/31/
Related
I have a script I am using in a html file my program accesses. it has been using IE as the browser, but the new version no longer uses IE, it uses Chromium. some of the script works, but it gets to a point that it does nothing. no errors just stops. I am guessing there is a difference in the way Chromium handles the script. The script is one I got online and modified. I will include the code below. I use the update option the most "AutomateExcel3" please ignore my code block outs and comments as I was trying to figure sometime else out.
thanks for the help
<script>
//*********************************************INTRODUCTION*****************************************
//When using Web.Link the first thing to do is initialize what's called a handle to Pro/Engineer
// Get Session, Model.
var mGlob = pfcCreate("MpfcCOMGlobal");
var oSession = mGlob.GetProESession();
var CurDwg = oSession.CurrentModel;
var CurWind = oSession.CurrentWindow;
var Base = "P:\ENGINEERING FILES\TPS PRE-PROD ENG\MV-22\excel_file.xls";
function UpdateControls(Opt)
{
bottom.innerHTML = "";
var Cntls="";
if (Opt==1)
{
Cntls = "<H2>To Export:</H2>"+
"<LI>Enter target Excel Files path</LI><LI>Pick \"Dwg Table\"</LI><LI>Pick Drawing Table</LI><P><INPUT id=FileName type=file size=80 value=\""+Base+"\"><BR>"+
"<INPUT id=button1 type=button value=\"Dwg Table\" onclick=\"AutomateExcel1()\">";
}
else if (Opt==2)
{
Cntls = "<H2>To Import:</H2>"+
"<LI>Enter the Excel Files path</LI><LI>Pick \"Next>>>\"</LI><LI>Pick Drawing To Place</LI><P><INPUT id=FileName type=file size=80 value=\""+Base+"\"><BR>"+
"<INPUT id=button1 type=button value=\"Next>>>\" onclick=\"AutomateExcel2()\">";
}
else if (Opt ==3)
{
Cntls = "<H2>To Update:</H2>"+
"<LI>Enter the Excel Files path</LI><LI>Pick \"Dwg Table\"</LI><LI>Pick Drawing Table</LI><P><INPUT id=FileName type=file size=80 value=\""+Base+"\"><BR>"+
"<INPUT id=button1 type=button value=\"Dwg Table\" onclick=\"AutomateExcel3()\">";
}
middle.innerHTML = Cntls;
}
function AutomateExcel1()
{
var MultipleLinesInCells = false;
//Have the user pick a table to export
var SelOptions = pfcCreate("pfcSelectionOptions").Create ("dwg_table");
SelOptions.MaxNumSels = 1;
var Selections = oSession.Select(SelOptions, null);
var Table = Selections.Item(0).SelItem;
//Build a matrix containing the values for the table
var nTableRows = Table.GetRowCount();
var nTableCols = Table.GetColumnCount();
//Start a new Excel Spreadsheet
var oXL;
oXL = new ActiveXObject("Excel.Application");
var oWB = oXL.Workbooks.Add();
var oSheet = oWB.ActiveSheet;
//Loop around the table and dump information to excel
for (i=0;i<nTableRows;i++)
{
for (j=0;j<nTableCols;j++)
{
var Cell = pfcCreate("pfcTableCell").Create(i+1, j+1);
var Mode = pfcCreate("pfcParamMode").DWGTABLE_NORMAL;
try
{
var Val = Table.GetText (Cell,Mode);
var Out="";
if (Val.Count>1)
MultipleLinesInCells = true;
for (k=0;k<Val.Count;k++)
{
if (k>0)
{
if (k<Val.Count)
{
Out = Out + " ";
}
}
Out = Out + Val.Item(k);
}
oSheet.Cells(i+1, j+1).Value = Out;
}
catch(er)
{
//Failure occurs when cells are merged, pro/e doesn't recognize cells that are now merged into another
}
}
}
//Bring up Excel for user to do with what they want.
//oXL.Visible = true;
oXL.UserControl = false;
if (FileName.value==null)
File = Base
else
File = FileName.value;
try
{
oWB.Close(true, File,null);
oXL.Workbooks.Close();
oXL.Quit();
Base = FileName.value;
var Out = "<H2>Success:</H2>Pick here for created document";
if (MultipleLinesInCells)
Out = Out + "<H2>Warning:</H2>The export resulted in some Multi-line cells being concatenated";
bottom.innerHTML = Out;
}
catch(er)
{
var Out = "<H2>Error:</H2>Could Not Write Specified File, please edit path and try again. If not Chuck Norris Might Get Angry!";
bottom.innerHTML = Out;
}
}
function AutomateExcel2()
{
//Have the user pick somewhere
var mousePick = oSession.UIGetNextMousePick ( pfcCreate("pfcMouseButton").MOUSE_BTN_LEFT);
var Orig = mousePick.Position;
//Start Excel
var oXL = new ActiveXObject("Excel.Application");
try
{
var oWB = oXL.Workbooks.Open(FileName.value);
var oSheet = oWB.ActiveSheet;
Base = FileName.value;
}
catch (er)
{
bottom.innerHTML = "<H2>Error:</H2>Could Not Open Specified File, \""+FileName.value+"\" for Import, please edit path and try again";
return;
}
//Start the table instructions
var TableInsts = pfcCreate("pfcTableCreateInstructions").Create (Orig);
var TableSizeType = pfcCreate("pfcTableSizeType").TABLESIZE_BY_NUM_CHARS;
TableInsts.SizeType = TableSizeType;
var columnInfo = pfcCreate ("pfcColumnCreateOptions");
//Look for headers in top row
var nCols=0;
var Val = oSheet.Cells(1,nCols+1).Value;
while (Val!=null)
{
nCols=nCols+1;
Val = oSheet.Cells(1,nCols+1).Value;
var column = pfcCreate ("pfcColumnCreateOption").Create (pfcCreate ("pfcColumnJustification").COL_JUSTIFY_LEFT,Math.round(oSheet.Cells(1,nCols).ColumnWidth+1));
columnInfo.Append (column);
}
//Push column information into Table Instructions
TableInsts.ColumnData = columnInfo;
//Push in the Header row
var rowInfo = pfcCreate ("realseq");
rowInfo.Append (2.0); //title line
TableInsts.RowHeights = rowInfo;
//Now create the table in proe
var CurTable = CurDwg.CreateTable(TableInsts);
//Populate the header information
for (var i=1;i<=nCols;i++)
{
var Val = oSheet.Cells(1,i).Value;
writeTextInCell (CurTable, 1, i, Val);
}
//Populate the rest of the table
var i=2;
var Row = oSheet.Cells(i,1).Value;
while (Row!=null)
{
CurTable.InsertRow (1.0, i-1, false);
for (var j=1;j<=nCols;j++)
{
var Val = oSheet.Cells(i,j).Value;
writeTextInCell (CurTable, i, j, Val);
}
i=i+1;
Row = oSheet.Cells(i,1).Value;
}
//Close down Excel.
oXL.UserControl = false;
oWB.Close(true);
oXL.Workbooks.Close();
oXL.Quit();
Excel.Application.Quit(); // added this to try to close excel
var Out = "<H2>Success:</H2>Excel sheet imported as Pro/E Drawing Table";
bottom.innerHTML = Out;
}
function AutomateExcel3()
{
//Have the user pick a table to update
var SelOptions = pfcCreate("pfcSelectionOptions").Create ("dwg_table");
SelOptions.MaxNumSels = 1;
var Selections = oSession.Select(SelOptions, null);
var Table = Selections.Item(0).SelItem;
//Start Excel
var oXL = new ActiveXObject("Excel.Application");
try
{
var oWB = oXL.Workbooks.Open(FileName.value);
var oSheet = oWB.ActiveSheet;
Base = FileName.value;
}
catch(er)
{
bottom.innerHTML = "<H2>Error:</H2>Could Not Open Specified File, \""+FileName.value+"\" for Update, please edit path and try again.";
return;
}
//Look for headers in top row and check them against the already existing headers
var nProCols = Table.GetColumnCount ();
var nCols=0;
var Val = oSheet.Cells(1,nCols+1).Value;
while (Val!=null)
{
nCols=nCols+2; // default was 1 changed to 2 now it doesn't delete the column if nothing in the first row.
//Check to see if we need to add another column
if (nCols>nProCols)
{
Table.InsertColumn (Math.round(oSheet.Cells(1,nCols).ColumnWidth+1), nCols-1, false);
nProCols=nProCols+1;
}
//Get current XL value
var ValXL = oSheet.Cells(1,nCols).Value;
//Get current ProE value
var cell = pfcCreate ("pfcTableCell").Create (1, nCols);
var mode = pfcCreate("pfcParamMode").DWGTABLE_NORMAL;
try
{
var ValProE = Table.GetText (cell, mode).Item(0);
}
catch(er)
{
var ValProE = "";
}
//Overwrite ProE value with XL value if they are not equal
if (ValProE!=ValXL)
{
ModifyCellText(Table, cell, ValXL);
}
Val = oSheet.Cells(1,nCols+1).Value;
}
//Check to see if any columns are left that need deleting off
//removed code and it appears to work without setting column to 15 above
while (nCols<nProCols)
{
Table.DeleteColumn (nProCols, false);
nProCols=nProCols-1; //default was -1 (changed to -0 and crashed creo)
}
//Populate the rest of the table
var nProRows = Table.GetRowCount();
var nRows = 0;
var Val = oSheet.Cells(nRows+1,1).Value;
while (Val!=null)
{
nRows = nRows + 1;
//Check to see if we need to add another row
if (nRows>nProRows)
{
Table.InsertRow (1, nRows-1, false);
nProRows=nProRows+1;
}
//Loop around all columns for each row
for (i=1;i<=nCols;i++)
{
//Get current XL value
var ValXL = oSheet.Cells(nRows,i).Value;
//Get current ProE value
var cell = pfcCreate ("pfcTableCell").Create (nRows, i);
var mode = pfcCreate("pfcParamMode").DWGTABLE_NORMAL;
try
{
var ValProE = Table.GetText (cell, mode).Item(0);
}
catch(er)
{
var ValProE = "";
}
//Overwrite ProE value with XL value if they are not equal
if (ValProE!=ValXL)
{
ModifyCellText(Table, cell, ValXL);
}
}
Val = oSheet.Cells(nRows+1,1).Value;
}
//Check to see if any rows are left that need deleting off
while (nRows<nProRows)
{
Table.DeleteRow (nProRows, false);
nProRows=nProRows-1;
}
CurDwg.Regenerate ();
//Close down Excel.
oXL.DisplayAlerts = false;
oXL.UserControl = false;
oWB.Close(true);
oXL.Workbooks.Close();
oXL.Quit();
// below code seams to stop excel instance created by from task manager while leaving other instances of excel alone
excel = null;
excelfile = null;
excelsheet = null;
CollectGarbage();
setTimeout("CollectGarbage()",1);
oSheet = null;
oWB = null;
oXL = null;
// below code kills excel from taskmanager but all excel is closed.
var WshShell = new ActiveXObject("WScript.Shell");
var oExec = WshShell.Exec("taskkill /F /IM EXCEL.exe");
CurDwg.UpdateTables ();
var Out = "<H2>Success:</H2>Excel sheet used as basis to update a Pro/E Drawing Table"+
"<p>Note:"+
"<LI>Cell Font and Alignment is Maintained for existing cells</LI>"+
"<LI>Rows can be added and removed - this is likely to require extra formatting</LI>"+
"<LI>There may be problems involving updating tables with merged cells</LI>"+
"<LI>Ensure you check the table for correct format after an update</LI>"+
"<LI>Congratulations Chuck Norris Approves!</LI>"+
"</p>";
bottom.innerHTML = Out;
}
function ModifyCellText(Table, cell, ValXL)
{
try
{
var CellNote = Table.GetCellNote (cell);
var CellNoteInsts = CellNote.GetInstructions (true);
var CellNoteTextLines = CellNoteInsts.TextLines;
var CellNoteTextLine1 = CellNoteInsts.TextLines.Item(0);
var CellNoteTextLine1Texts = CellNoteTextLine1.Texts;
var CellNoteTextLine1Text1 = CellNoteTextLine1Texts.Item(0);
var FontName = CellNoteTextLine1Text1.FontName;
}
catch(er)
{
var FontName = "ariallight.TTF";
}
var lines = pfcCreate("stringseq");
lines.Append (ValXL);
Table.SetText(cell, lines);
var CellNote = Table.GetCellNote (cell);
var CellNoteInsts = CellNote.GetInstructions (true);
var CellNoteTextLines = CellNoteInsts.TextLines;
var CellNoteTextLine1 = CellNoteInsts.TextLines.Item(0);
var CellNoteTextLine1Texts = CellNoteTextLine1.Texts;
var CellNoteTextLine1Text1 = CellNoteTextLine1Texts.Item(0);
//Switch Font
CellNoteTextLine1Text1.FontName = FontName;
CellNote.Modify (CellNoteInsts);
}
function writeTextInCell(table /* pfcTable */, row /* integer */,
col /* integer */, text /* string */)
{
var cell = pfcCreate ("pfcTableCell").Create (row, col);
var lines = pfcCreate ("stringseq");
lines.Append (text);
try{
table.SetText (cell, lines);
}
catch(er)
{
alert (row+" "+col);
}
}
// Function to create the activeX objects that are the interface to Web.Link.
function pfcCreate (className)
{
if (!pfcIsWindows())
netscape.security.PrivilegeManager.enablePrivilege("UniversalXPConnect");
if (pfcIsWindows())
return new ActiveXObject ("pfc."+className);
else
{
ret = Components.classes ["#ptc.com/pfc/" + className + ";1"].createInstance();
return ret;
}
}
//Checks what OS is being operated
//IE11 requires more indepth browser testing...
function get_browser_info(){
var ua=navigator.userAgent,tem,M=ua.match(/(opera|chrome|safari|firefox|msie|trident(?=\/))\/?\s*(\d+)/i) || [];
if(/trident/i.test(M[1])){
tem=/\brv[ :]+(\d+)/g.exec(ua) || [];
return {name:'IE',version:(tem[1]||'')};
}
if(M[1]==='Chrome'){
tem=ua.match(/\bOPR\/(\d+)/)
if(tem!=null) {return {name:'Opera', version:tem[1]};}
}
M=M[2]? [M[1], M[2]]: [navigator.appName, navigator.appVersion, '-?'];
if((tem=ua.match(/version\/(\d+)/i))!=null) {M.splice(1,1,tem[1]);}
return {
name: M[0],
version: M[1]
};
}
function pfcIsWindows ()
{
var browser = get_browser_info();
if (browser.name.indexOf ("IE") != -1)
return true;
else
return false;
}
</script>
code worked perfectly in IE but not in the new browser I am forced to use
I have a function that adds badges to a div by selecting items from a dropdown list.
I'm adding badges using this function added to the dropdown list onclick event:
function addBadge(parent, badgeId, value){
var elem = document.getElementById(parent);
var currentTaxiways = elem.children;
var alreadyExists = false;
for(var i = 0; i < currentTaxiways.length; i++){
if(badgeId === currentTaxiways[i].id){
alreadyExists = true;
}
}
if(!alreadyExists) {
var newBadge = document.createElement("span");
newBadge.classList.add("badge");
newBadge.classList.add("badge-primary");
newBadge.classList.add("bg-secondary");
newBadge.id = badgeId;
var node = document.createTextNode(value);
newBadge.appendChild(node);
newBadge.innerHTML += " ";
var deleteButton = document.createElement("a");
deleteButton.href = "#";
deleteButton.classList.add("x-btn");
deleteButton.onclick = function delBadge() {
deleteBadge(newBadge.id);
};
var node2 = document.createTextNode("X");
deleteButton.appendChild(node2);
newBadge.appendChild(deleteButton);
elem.appendChild(newBadge);
}
}
And the function for deleting the badges is this one:
function deleteBadge(badge){
var elem = document.getElementById(badge);
elem.parentNode.removeChild(elem);
}
How do I send the list of ids of all the badges added to the div to my controller using thymeleaf when the form is submitted?
I have some JavaScript that creates a row in a table and adds cells to it. I need to put an colspan=2 on the second cell added (A.K.A the select cell), but I can't figure out the best way to do this with the least change in the code because this affects a entire page of more code. Suggestions? (table id=table5 class=mytable)
if(fltgrid)
{
var fltrow = t.insertRow(0); //adds filter row
fltrow.className = "fltrow";
for(var i=0; i<n; i++)// this loop adds filters
{
var fltcell = fltrow.insertCell(i);
//fltcell.noWrap = true;
i==n-1 && displayBtn==true ? inpclass = "flt_s" : inpclass = "flt";
if(f==undefined || f["col_"+i]==undefined || f["col_"+i]=="none")
{
var inptype;
(f==undefined || f["col_"+i]==undefined) ? inptype="text" : inptype="hidden";//show/hide input
var inp = createElm( "input",["id","flt"+i+"_"+id],["type",inptype],["class",inpclass] );
inp.className = inpclass;// for ie<=6
fltcell.appendChild(inp);
if(enterkey) inp.onkeypress = DetectKey;
}
else if(f["col_"+i]=="select")
{
var slc = createElm( "select",["id","flt"+i+"_"+id],["class",inpclass] );
slc.className = inpclass;// for ie<=6
fltcell.appendChild(slc);
PopulateOptions(id,i);
if(displayPaging)//stores arguments for GroupByPage() fn
{
var args = new Array();
args.push(id); args.push(i); args.push(n);
args.push(display_allText); args.push(sort_slc); args.push(displayPaging);
SlcArgs.push(args);
}
if(enterkey) slc.onkeypress = DetectKey;
if(on_slcChange)
{
(!modfilter_fn) ? slc.onchange = function(){ Filter(id); } : slc.onchange = f["mod_filter_fn"];
}
}
if(i==n-1 && displayBtn==true)// this adds button
{
var btn = createElm(
"input",
["id","btn"+i+"_"+id],["type","button"],
["value",btntext],["class","btnflt"]
);
btn.className = "btnflt";
fltcell.appendChild(btn);
(!modfilter_fn) ? btn.onclick = function(){ Filter(id); } : btn.onclick = f["mod_filter_fn"];
}//if
}// for i
}//if fltgrid
If I understand you correctly, you can change the code block in the else if to the following:
var slc = createElm( "select",["id","flt"+i+"_"+id],["class",inpclass] );
slc.className = inpclass;// for ie<=6
fltcell.appendChild(slc);
fltcell.setAttribute("colspan",2);
PopulateOptions(id,i);
I am writing a Javascript dialog script which is seen in a lot of typical Role Playing Games.alt text http://www.dailynintendo.com/wp-content/uploads/2008/12/luminous-arc-2-dialogue.jpg
At the moment I got an array with text strings which you can skip trough. I got at the point where you can make a decision and based on the input a different string will show.
However I don't think this is the right way to do it. These are the requirements for the script:
Support for multiple dialog scripts
multiple characters
user decision input ("Do you like me?" -yes -no)
This is my code at the moment:
// Intro script
var script_intro = [];
script_intro[0] = 'Hello how are you?';
script_intro[1] = 'So I heard..';
script_intro[2] = 'This is a cool game!';
script_intro[3] = [];
script_intro[3][0] = 'Do you like me?';
script_intro[3][1] = [];
script_intro[3][1][0] = 'Jah';
script_intro[3][1][1] = 4;
script_intro[3][2] = [];
script_intro[3][2][0] = 'Nah';
script_intro[3][2][1] = 5;
// Intro script: variation I
var script_intro_1 = [];
script_intro_1[0] = 'I love you too!';
// Intro script: variation II
var script_intro_2 = [];
script_intro_2[0] = 'Damn you...';
function initDialog()
{
// This is where the text will be shown
var dialog = document.getElementById('dialog');
var content = document.getElementById('content');
var nextButton = document.getElementById('nextButton');
var optionButton_1 = document.getElementById('optionButton_1');
var optionButton_2 = document.getElementById('optionButton_2');
// How fast the characters will appear after each other (milliseconds)
var scrollSpeed = 50;
}
// Scroll text per line, character
function scrollText(script, line)
{
var char = 0;
// If this line contains a question that requires user input
if(typeof(script[line]) == 'object')
{
var textScroller = setInterval(
function()
{
// Add the string char for char
content.innerHTML += script[line][0][char];
char ++;
if(char >= script[line][0].length)
{
clearInterval(textScroller);
// Show options
options(script, line);
}
}, scrollSpeed);
}
else
{
var textScroller = setInterval(
function()
{
content.innerHTML += script[line][char];
char++;
if(char >= script[line].length)
{
clearInterval(textScroller);
// Show next line
next(script, line);
};
}, scrollSpeed);
}
}
function next(script, line)
{
line = line + 1;
// Last line has been shown
if(script[line] == undefined)
{
//alert('End of dialog');
}
else
{
nextButton.style.visibility = 'visible';
nextButton.onclick = function()
{
nextButton.style.visibility = 'hidden';
content.innerHTML = '';
scrollText(script, line);
}
}
}
function options(script, line)
{
optionButton_1.innerHTML = script[line][1][0];
optionButton_2.innerHTML = script[line][2][0];
optionButton_1.style.visibility = 'visible';
optionButton_2.style.visibility = 'visible';
optionButton_1.onclick = function()
{
optionButton_1.style.visibility = 'hidden';
optionButton_2.style.visibility = 'hidden';
content.innerHTML = '';
scrollText('script_intro_1', 0);
}
optionButton_2.onclick = function()
{
optionButton_1.style.visibility = 'hidden';
optionButton_2.style.visibility = 'hidden';
content.innerHTML = '';
scrollText('script_intro_2', 0);
}
}
html
<body onload="scrollText(script_intro, 0)">
<h1>rpg</h1>
<a id="reset" href="#">Reset</a>
<div id="device">
<div id="dialog">
<strong>NPC:</strong>
<div id="content"></div>
<a id="nextButton" href="#">Next</a>
<a id="optionButton_1" href="#"></a>
<a id="optionButton_2" href="#"></a>
</div>
</div>
</body>
I could really use some feedback. What is the best way to write such script with the requirements above? Is using JSON or XML a better option than an Array for the dialog scripts?
I especially need some hints on how to implement multiple choices in the script.
Thank you!
If this is a script that has a scripted flow to it, I would use the state machine pattern.
http://www.eventhelix.com/RealtimeMantra/HierarchicalStateMachine.htm
There are tons of links, I just grabbed the first I searched from google. What I would do is have a state for each situation the user will presented with options. Each option would be a transition to another state. So for instance
function State(questionText){
this.transitionsOut = [];
this.questionText = questionText;
}
State.prototype = {
transitionsOut:null,
questionText:null,
}
function Transition(startState, endState, optionText){
startState.transitionsOut[startState.transitionsOut.length] = this;
this.start = startState;
this.end = endState;
}
Transition.prototype = {
start:null,
end:null,
optionText:null
}
Then what you can do, is make your state machine, and then for the current state, print out your State Message, then underneath list each option for that state.
var startState = new State('Where do you want to go');
var north = new State('North');
var south = new State('South');
var transition1 = new Transition(startState,north,'Lets go north');
var transition2 = new Transition(startState,south,'Lets go south');
The code to then display what is in the current state, and the options is trivial, as is the transition from one state to another based on what the user picks.
I am building a UI in JavaScript that involves adding a column of checkBoxes:
for (var key in ProcessAndPortList.list)
{
if (ProcessAndPortList.list.hasOwnProperty(key))
{
var dataRow = myTable.insertRow(-1);
var dataCell = dataRow.insertCell(-1);
dataCell.textContent = key;
dataCell = dataRow.insertCell(-1);
dataCell.textContent = ProcessAndPortList.list[key].port;
var terminationCheckbox = document.createElement('input');
terminationCheckbox.type = "checkbox";
terminationCheckbox.id = key;
terminationCheckbox.checked = ProcessAndPortList.list[key].markedForTermination;
terminationCheckbox.onchange = function() {
var isChecked = terminationCheckbox.checked;
markForTermination(key, isChecked);
};
var terminateCell = dataRow.insertCell(-1);
terminateCell.appendChild(terminationCheckbox);
}
}
The problem comes in associating the correct ID to the callback for when the checkbox for each entry is checked. I can't seem to get that checkbox's ID to the function. I only ever get the last checkBox's ID. How can I get the correct ID?
Changing this should work:
terminationCheckbox.onchange = function() {
markForTermination(this.id, this.checked);
};
It seems that you capture the variable key with that closure. But key changes on each iteration of the for loop. Capture some variable that is declared inside the loop instead.
for (var key in ProcessAndPortList.list)
{
if (ProcessAndPortList.list.hasOwnProperty(key))
{
var local_scope_key = key
var dataRow = myTable.insertRow(-1);
var dataCell = dataRow.insertCell(-1);
dataCell.textContent = key;
dataCell = dataRow.insertCell(-1);
dataCell.textContent = ProcessAndPortList.list[key].port;
var terminationCheckbox = document.createElement('input');
terminationCheckbox.type = "checkbox";
terminationCheckbox.id = key;
terminationCheckbox.checked = ProcessAndPortList.list[key].markedForTermination;
terminationCheckbox.onchange = function() {
var isChecked = terminationCheckbox.checked;
markForTermination(local_scope_key, isChecked);
};
var terminateCell = dataRow.insertCell(-1);
terminateCell.appendChild(terminationCheckbox);
}
}