Problems with nested strings

Pyth007

01-09-2007, 03:55 PM

I have a menu-driven assembly system that is supposed to create a "page" that includes a picture and instructions for the current step in the build-process as well as a mini-form where a person will enter in info. (eg the part's P/N) and the web-application will use AJAX to log the data in a MySQL DB.

Right now I have made two variants on this; the first has an 'OK' button in the mini-form which gets logged as the person completing the current step, and the second has a text-box that the user enters in the P/N for a part being installed.

The problem I am having is with the latter version. To make the page, I am using an innerHTML string, the onchange function in the mini-form's text-box also calls a string, and the function that onchange calls uses two strings as parameters; thus the whole line has three nested strings. The AJAX function has the server-script address as the first param. and the return function as the second. When calling the server-script address, one GET param. references the current menu being made while another references the text-box; thus I am trying to break out of the corresponding string to get the correct value (and thus two different meanings to 'this' reference). But when I try running the program, I keep getting an error of unterminating string right after "value=". Note that the code works fine for the 'OK' part, just not the 'PN' so if possible, I'd like to keep the innerHTML format, but if not I think I can do a work-around using pure DOM... Here's my code:

myMenu.prototype.makePage=function(imgSrc, instText, funct)
{
var htmlString="";
htmlString += "<img id='windowImg' src='"+imgSrc+"' />";
instText = instText.replace(/\n/g, "<br />");
htmlString += "<div id='windowTxt'>"+instText+"</div>";
htmlString+="<div id='windowForm'>";

switch(funct)
{
case "ok":
//htmlString += "<input type='button' value=' OK ' onclick='callToServer(\"/Functions/logBuild.php?step="+this.menuName+"&funct=OK\");' />";
//htmlString += "<input type='button' value=' OK ' onclick='showNext(\""+this.menuName+"\");' />";
htmlString += "<input type='button' value=' OK ' onclick='ajaxRequest(\"/Functions/logBuild.php?step="+this.menuName+"&funct=OK\", \"JSON\");' />";
break;
case "pn":
htmlString += "<label for='inputBox'>Enter in the Part Number: "+
"<input type='text' id='pnInputBox' name='pnInputBox' onchange='ajaxRequest(\"/Functions/logBuild.php?step="+this.menuName+"&funct=PN&value='+this.value+'\", \"JSON\");' /></label>";
break;
case "sn":
//Need to do...
htmlString += "";
break;
}
htmlString+="</div>";

this.pageHTML.innerHTML = htmlString;
}

david_kw

01-09-2007, 04:55 PM

Try this and see if it does any better.

htmlString += "<label for='inputBox'>Enter in the Part Number: " +
"<input type='text' id='pnInputBox' name='pnInputBox' " +
"onchange='ajaxRequest(\"/Functions/logBuild.php?step=\"+this.menuName+\"&funct=PN&value=\"+this.value, \"JSON\");'" +
" /></label>";

here was my test code

<html>
<head>
<title>Test</title>
<script type="text/javascript">
var htmlString = "";

function ajaxRequest(s1, s2) {
document.getElementById("adiv").innerHTML = s1;
document.getElementById("bdiv").innerHTML = s2;
}

function init() {
htmlString += "<label for='inputBox'>Enter in the Part Number: " +
"<input type='text' id='pnInputBox' name='pnInputBox' " +
"onchange='ajaxRequest(\"/Functions/logBuild.php?step=\"+this.menuName+\"&funct=PN&value=\"+this.value, \"JSON\");'" +
" /></label>";
document.getElementById("fdiv").innerHTML = htmlString;
}
window.onload = init;
</script>
</head>
<body>
<form name="f" action='#' onsubmit="window.focus(); return(false);">
<div id="fdiv"> </div>
</form>
<div id="adiv"> </div>
<br />
<div id="bdiv"> </div>
</body>
</html>

david_kw

Pyth007

01-09-2007, 05:26 PM

Yep that did it!
I should've realized... the single quotes surround the javascript, so "this.value" needed to remain inside the single quotes. What I needed to escape out of was the back-slashed quotes around the ajaxRequest()'s parameter strings. I think I had tried something similar with other errors:

"<input type='text' id='pnInputBox' name='pnInputBox' onchange='ajaxRequest(\"/Functions/logBuild.php?step="+this.menuName+"&funct=PN&value=\"+this.value+\", \"JSON\");' /></label>";

But in this case, I was escaping out of the string to get back into the JS for "this.value" but then errantly put the comma separating the parameters back inside a string and thereby breaking the string structure...

Thanks for the help... It's always good to have another set of eyes looking at your code!