Problem with javascript onclick function string

Hey all, i have been trying for a few minutes on this problem and i can not seem to figure out how to correct it. I tend to have the hardest time doing stuff like this when it involves more than one varable within the function.

Here is the code:

  var tempString = "thePrompt('Are you sure you wish to delete this?', 'theDel('" + IDnum + "', '" + theTitle + "', \'" + temperDay + "\', \'" + temperMonth + "\', \'" + temperYear + "\', \'" + DDiff + "\')";

 html +=
"<div id='theTable" + IDnum + "' class='fc-event fc-event-hori fc-corner-left fc-corner-right' style='position:absolute; margin-top: 15px; z-index:8;left:"+left+"px'><div id='apDEL' style='position:relative;width:0px;height:0px;z-index:1000; top:-13px; left:2px; float:left;'><img src='img/xCal.png' width='15' height='15' alt='' border='0' onclick=\"" + tempString + "\" /></div>" + (ETC ETC...)

The error i keep getting is this:

 Error: missing ) after argument list
 Line: 1, Column: 68
 Source Code:
 thePrompt('Are you sure you wish to delete this posting?', 'theDel('105', '50 points for visiting us today!!!!', '13', '3', '2010', '2')

And its pointing to the '105'.

As always, any help would be w开发者_JS百科onderful! :o)

David

EDIT/UPDATE

Ok, so now i have moved some things around and i got it working (that is sending the values to the popup prompt box BUT for some reason it doesn't see my function after i hit the delete button! This is because the prompt is on the main page and the code i am working with is inside a iframe.

function theDel(theID, theTitle, day, month, year, DDiff)
{
    var tempString = "delClientE(" + theID + ", '" + theTitle + "', " + day + ", " + month + ", " + year + ", " + DDiff + ")";
    parent.thePrompt('Are you sure you wish to delete this event?', tempString);
}

The delete button values now look like this:

delClientE(110, 'sadfsadfsdf', 14, 3, 2010, 2); jQuery.prompt.close();

However, even putting parent.delClientE doesnt find the function either... How can i call it from within the iframe when the prompt box is outside of that?

David

Keeping track of escaping in nested contexts is really hard, and because when you get it wrong you've very often given yourself a script-injection security problem, it's much better to avoid creating HTML/JS by sticking strings together.

Instead, use DOM methods to assign your event handler from JavaScript and say goodbye to all that irritating backslash and quoting stuff:

var img= document.createElement('img');
img.src= 'img/xCal.png';
img.width=img.height= 15;
img.onclick= function() {
    if (confirm('Are you sure you wish to delete this?'))
        theDel(IDnum, theTitle, temperDay, temperMonth, temperYear, DDiff);
};
div.appendChild(img);

it's because of the quotes here 'theDel('" + you should escape the inner single quotes. Edit. that is of course, in addition of the missing right paren issue already on the table. :)

I think it's missing at the end of the statement .. your statement looks like this:

var tempString = "thePrompt('question', theDel(params)";

.. where it should have one more closing ')' at the end.

and one more thing you might want to look at is the fact that the arguments in theDel are wrapped in single quotes.

thePrompt('Are you sure you wish to delete this?', 'theDel('105', '50 points for visiting us today!!!!', '13', '3', '2010', '2')' )

And that might be a problem since the params in thePrompt are also wrapped in single quotes so I would make the thePrompt have double quotes arround it's params so it would look something like this:

var tempString = "thePrompt(\"Are you sure you wish to delete this?\", \"theDel(\'" + IDnum + "\', \'" + theTitle + "\', \'" + temperDay + "\', \'" + temperMonth + "\', \'" + temperYear + "\', \'" + DDiff + "\')\")";    

David, not sure if this has been answered to your satisfaction yet, but it might be easier to create a temporary variable for this:

  var theDel = "theDel('" + IDnum + "', '" + theTitle + "', '" + temperDay + "', '" + temperMonth + "', '" + temperYear + "', '" + DDiff + "')";
  var tempString = "thePrompt('Are you sure you wish to delete this?', \' + theDel + \')";

First of all, you'd be far better using event delegation with the js library of your choice.

Failing that, a string interpolation function makes these sorts of things easier:

String.prototype.format = function(values) {
  return this.replace(/\{(.+?)\}/g, function(s, key) {
    return values[key];
  });
}

So long things like this become:

var s = 'blah blah blah "{IDnum}" blah blah blah \'{foosball}\''.format({ IDnum: '1', foosball: 'xyz'});

(If you don't like manipulating String's prototype, you can put the function somewhere else.)

Ok, how about this?

iFrame source

<html>
<head>
<script type="text/javascript">
    function localDel(params){
        if (window.parent && typeof window.parent.thePrompt==='function')
            window.parent.thePrompt('Are you sure you wish to delete this event?', params);
    }
</script>
</head>
<body>
    <p onclick="localDel([1,'some title', 14, 3, 2010, 2])">delete</p>
    <p onclick="localDel([2,'another title', 14, 3, 2010, 2])">delete</p>
</body>
</html>

Parent source

<html>
<head>
    <script type="text/javascript">

    function thePrompt(msg,params) {
        if(confirm(msg)) theDel.apply(this,params);
    }

    function theDel(id, title, tDay, tMonth, tYear, dDiff) {
      alert(id);
      // etc...
    }

    </script>
</head>
<body>
    <iframe src="iframe.html" />
</body>
</html>

I finally got it!! YAY! :o)

 function theDel(theID, theTitle, day, month, year, DDiff)
{
    var tempString = "window.frames.theCal.delClientE(" + theID + ", '" + theTitle + "', " + day + ", " + month + ", " + year + ", " + DDiff + ")";
    parent.thePrompt('Are you sure you wish to delete this event?', tempString);
}

I needed the window.frames.theCal in order to call my function. theCal is my iframe id.

David