Problem with javascript onclick function string

Question

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 wonderful! :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

bobince · Accepted Answer · 2010-04-13 22:08:28Z

4

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);

answered Apr 13, 2010 at 22:08

bobince

538k111 gold badges675 silver badges846 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Andy E Over a year ago

@StealthRT: you have to replace div with the element you want to append the newly created img to. For instance, to append to the body you would use document.body.appendChild(img);.

StealthRT Over a year ago

Problem being is that the xCal.png is the button that throws up the prompt with the delete or cancel button so i dont really know what (or how) to append to the delete button inside the prompt once it pops up.

Javier Parra · Accepted Answer · 2010-04-13 21:48:47Z

2

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. :)

edited Apr 13, 2010 at 21:48

answered Apr 13, 2010 at 21:42

Javier Parra

2,1002 gold badges18 silver badges32 bronze badges

Comments

drusnov · Accepted Answer · 2010-04-13 21:43:31Z

1

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 + "\')\")";

edited Apr 13, 2010 at 21:43

answered Apr 13, 2010 at 21:34

drusnov

3631 silver badge8 bronze badges

5 Comments

StealthRT Over a year ago

Just tried that as Jacob pointed out.. however i still get the same error. Error: missing ) after argument list Line: 1, Column: 68 Source Code: thePrompt('Are you sure you wish to delete this?', 'theDel('105', '50 points for visiting us today!!!!', '13', '3', '2010', '2')' )

StealthRT Over a year ago

Changing it to that last one that you suggested gave me another error: Error: syntax error Line: 1, Column: 9 Source Code: thePrompt(

drusnov Over a year ago

are your params in theDel function strings? all of them?

StealthRT Over a year ago

Drusnov: They work as a string right now without a prompt. but i want to make sure the user is sure they want to delete it so therefore i need to send that same code to delete it to the delete button and do the same as if the prompt was never there.

drusnov Over a year ago

I have tried to play arround with it, and I couldn't get it to work as a string .. one thing I would suggest doing is, implementing the prompt inside of the delete so it would look something like : if (confirm("Delete User?")){ //you can probably even do this as a prompt instead of confirm //do your delete functionality here } else{ //do nothing } I really hope this will help, as I couldn't get it to work otherwise, this one is really just a suggestion and something to try.

roryhewitt · Accepted Answer · 2010-04-13 22:17:27Z

0

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 + \')";

answered Apr 13, 2010 at 22:17

roryhewitt

4,5353 gold badges29 silver badges37 bronze badges

1 Comment

StealthRT Over a year ago

This way actually worked with popping up the prompt but the value for the delete button is not correct... it onclick="+ theDel + ; jQuery.prompt.close();" And of course the error is on the second "+" sign.

wombleton · Accepted Answer · 2010-04-13 22:22:53Z

0

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.)

answered Apr 13, 2010 at 22:22

wombleton

8,3761 gold badge31 silver badges30 bronze badges

Comments

Jonathan · Accepted Answer · 2010-04-14 04:18:12Z

0

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>

edited Apr 14, 2010 at 4:18

answered Apr 13, 2010 at 22:34

Jonathan

6,0031 gold badge30 silver badges35 bronze badges

6 Comments

StealthRT Over a year ago

Error on this as well... Error: syntax error Line: 1, Column: 50 Source Code: thePrompt('Are you sure you wish to delete this?',

Jonathan Over a year ago

I've removed the line feeds, should validate now.

StealthRT Over a year ago

Doesnt seem to work. It cuts off everything in the theDel. thePrompt('Are you sure you wish to delete this?',

Jonathan Over a year ago

Modified answer above to use a different approach

StealthRT Over a year ago

I did somewhat the way you were going, jonathan. Check out my edited post please.

|

StealthRT · Accepted Answer · 2010-04-14 05:52:23Z

0

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

answered Apr 14, 2010 at 5:52

StealthRT

10.6k41 gold badges195 silver badges371 bronze badges

Collectives™ on Stack Overflow

Problem with javascript onclick function string

7 Answers 7

2 Comments

Comments

5 Comments

1 Comment

Comments

6 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

2 Comments

Comments

5 Comments

1 Comment

Comments

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related