So the basic rundown is that I'm trying to create a rudimentary means of flagging inappropriate content on our web mapping application. Within a function that dynamically creates content for the sidebar of the webmap when the user clicks on a point I have this piece of code that should generate an image of a flag.

When the user clicks the flag, I want to run the function flagContent which should pass a url string into the function. From within this function I would then be able to write it to a database later on (though I haven't made it this far yet).

Here are some code snippets I have been working with.:

1.This is where the flag image is generated

content += "<p class='info'><img id='flag' onclick='flagContent(" + attachmentInfo.url + ")
'src='assets/flag.png' style='height:15px'>Flag as inappropriate...</p>";

1. This is the connected function

   function flagContent(imageUrl){ console.log(imageUrl)}

So basically the url is a string and I'd like to be able to manipulate it within the flagContent function. Unfortunately I can't get it to work. When I pass a numerical parameter such as attachmentInfo.objectID I do not run into the same problem.

For what it's worth I also get this error:

Uncaught SyntaxError: Unexpected token :

Any help would be greatly appreciated. Let me know if there is additional information that could help to solve this. Thanks!

So the basic rundown is that I'm trying to create a rudimentary means of flagging inappropriate content on our web mapping application. Within a function that dynamically creates content for the sidebar of the webmap when the user clicks on a point I have this piece of code that should generate an image of a flag.

When the user clicks the flag, I want to run the function flagContent which should pass a url string into the function. From within this function I would then be able to write it to a database later on (though I haven't made it this far yet).

Here are some code snippets I have been working with.:

1.This is where the flag image is generated

content += "<p class='info'><img id='flag' onclick='flagContent(" + attachmentInfo.url + ")
'src='assets/flag.png' style='height:15px'>Flag as inappropriate...</p>";

1. This is the connected function

   function flagContent(imageUrl){ console.log(imageUrl)}

So basically the url is a string and I'd like to be able to manipulate it within the flagContent function. Unfortunately I can't get it to work. When I pass a numerical parameter such as attachmentInfo.objectID I do not run into the same problem.

For what it's worth I also get this error:

Uncaught SyntaxError: Unexpected token :

Any help would be greatly appreciated. Let me know if there is additional information that could help to solve this. Thanks!

• javascript
• html
• web-applications

• 1 What does attachmentInfo.url evaluate to? – Floris Commented Feb 4, 2013 at 20:38
• Is height:15px causing the issue? And flagContent('" + attachmentInfo.url + "') – hunter Commented Feb 4, 2013 at 20:39
• Verify the HTML being generated. The string parameter of flagContent() must be quoted in Javascript, too. – devio Commented Feb 4, 2013 at 20:39

1 Answer 1

I'm assuming that attachmentInfo.url would return a URL, which should be a string and it just needs to be surrounded by quotes. Since you've already used both types of quotes, you will have to escape some quotes.

content += "<p class='info'>";
content += "<img id='flag' onclick=\"flagContent('" + attachmentInfo.url + "')\" src='file.png'/>";
content += "Flag as inappropriate...";
content += "</p>";

Doing this makes the final out put look like this:

<p class='info'>
  <img id="flag" onclick="flagContent('http://example.')" src='file.png'/>
  Flag as inappropriate...
</p>

The problem you had was that the URL was not surrounded by quotes, and it saw flagContent(http://example.) and didn't know what to do with those bare words not in a string.