Search code examples
d3.jsjeditable

Combining jquery's jedit with d3

I'm pretty new to d3 and trying to merge some jquery with d3 functionality. Basically I want a list of paragraphs that I can let my users edit.

There's a nice jquery plugin for this called jedit which works perfectly for my needs : http://www.appelsiini.net/projects/jeditable

I can get this to work without a problem but when I try to use d3 to generate my paragraphs, I seem to be out of luck.

I have the following function for my jquery plugin:

$(function() {
        $(".editable_comments").editable("save.php", { }); 
});

which works fine on the following element: 

<p class="editable_comments">test</p>

but not so much on the following d3 code:

<div id="comments" style="float:left; width:50px; padding-top:33px;">

</div>

<script  type="text/javascript" >

 d3.json("json_data.php?", function(data) {

 d3.select("#comments").selectAll("p")
    .data(data)
    .enter()
    .append("p")
    .text(function(d) {return d.NAME;})
    .attr("class", "editable_comments");

}); 
</script>
Solution

  • I was calling my .editable prior to the d3 code running which is why it wasn't "working" or more specifically why I couldn't edit the d3 generated paragraphs.

    Once I moved the .editable call to the end of my d3.json function