CODEWITHSUNDEEP
javascripthtmld3.js
redGREENblue
redGREENblue

Reputation: 3126

Appending element with space in string

I am appending an html element using foreigobject in d3js. Here's the html

.html(function(d) {return "<span onclick=processParams('"+str+"')><i class='fa fa-plus-circle'></i></span>";})

The problem is if the str value contains a space, it breaks. So for a str value of 'xyz' I get the element,

<span onclick="processParams('xyz')"><i class="fa fa-plus-circle"></i></span>

But for an str value of 'xyz abc'. it somehow becomes,

<span onclick="processParams('xyz" abc')=""><i class="fa fa-plus-circle"></i></span>

What am I doing wrong?

Upvotes: 2

Views: 85

Answers (2)

Monarch Wadia
Monarch Wadia

Reputation: 4956

Why not do it the d3.js way?

.append("span")
    .on("click", function(){
        processParams(str)
    })
    .append("i")
        .attr("class", "fa fa-plus-circle")

Upvotes: 3

Paul Roub
Paul Roub

Reputation: 36438

You need to quote your attributes.

Your second example is returning the HTML:

<span onclick=processParams('xyz abc')><i class='fa fa-plus-circle'></i></span>

Since you're not quoting, the value of 'onclick' ends when it hits a space. The remainder (abc')) is seen as another param name, with no value.

Try:

.html(
  function(d) 
  {
    return "<span onclick=\"processParams('"+str+"')\"><i class='fa fa-plus-circle'></i></span>";
  }
 );

Upvotes: 6

Related Questions