刷新每个提交的div而不使用ajax

Question

I am working in D3.on every click on submit button i want to refresh a div and to get the new design in the div page based on the input text.i tried the below code

html form

    <form name="editorForm"> 
    <input type="text"name="editor"  id="editor"/>
    <input type="submit"value="butn"id="subm"
      onclick="  $('#div1').load('new.html');">
    </form>

javacsript

  <script type="text/javascript">
    $(document).ready(function(){
             $('form').find(':submit').on('click', function(e) {
                e.preventDefault();
                funn();
              });
            });
       </script>
    <div id="div1">
    <script>
    function funn(){
        var t=$('form').serialize();
        var u='http://192.168.1.203:8888/saff/indexi.php?'+t;   
        var selectedNode = null;
        var draggingNode = null;

        var panSpeed = 200;
        var panBoundary = 0; 

        var i = 0;
        var duration = 750;
        var root;

        var width = 3000;
        var height =3000;

        var diameter = 750;

        var tree = d3.layout.tree().size([360, diameter / 2 - 120])

            .separation(function (a, b) {
            return (a.parent == b.parent ? 1 : 5) / a.depth;
        });

        var diagonal = d3.svg.diagonal.radial()

            .projection(function (d) {
            return [d.y, d.x / 180 * Math.PI];
        });

        d3.json(u, function(treeData) {
         if(!treeData){
        var x = document.createElement("TABLE");
            x.setAttribute("id", "myTable");
            document.body.appendChild(x);

            var y = document.createElement("TR");
            y.setAttribute("id", "myTr");
            y.setAttribute("color","red");
            document.getElementById("myTable").appendChild(y);

          document.getElementById("myTr").style.fontSize="x-large";
            var z = document.createElement("TD");
             z.setAttribute("id", "ttd");
               var Bz = document.createElement("BUTTON");
                 Bz.setAttribute("id", "bb");
          Bz.addEventListener('click',function(){
          x.style.display="none";
          },false);
        var t = document.createTextNode("தேடும் சொல் இல்லை....");
               var Bt = document.createTextNode("click");
            z.appendChild(t);

            document.getElementById("myTable").appendChild(Bz);
            document.getElementById("myTr").appendChild(z);
             document.getElementById("bb").appendChild(Bt);
        }
        root = treeData;
        root.x0 = height / 2;
        root.y0 = 0;

        function sortTree() {
            tree.sort(function (a, b) {
            return b.name.toLowerCase() < a.name.toLowerCase() ? 1 : -1;
            });
        }
        sortTree();
        var baseSvg = d3.select("#tree-container").append("svg")
            .attr("width", width)
            .attr("height", height)
            .attr("class", "overlay")

         .attr("transform", "translate(" + 1000 + "," + 1000 + ")");
        function collapse(d) {

            if (d.children) {
                d._children = d.children;
                d._children.forEach(collapse);
                d.children = null;
            }

        update(d);
        }

        function expand(d) {

            if (d._children) {
                d.children = d._children;
                d.children.forEach(expand);
                d._children = null;
            }
        }
        function toggleChildren(d) {

            if (d.children) {
                d._children = d.children;
                d.children = null;
            } else if (d._children) {
                d.children = d._children;
                d._children = null;
            }
            return d;
        }

        function click(d) {
        if(!d.parent){
        return;
        }

        if (!d.children) 
             treeData.children.forEach(collapse);

            if (d3.event.defaultPrevented) return; 

            d = toggleChildren(d);

            update(d);
             }

        function update(source) {

            var levelWidth = [1];
            var childCount = function (level, n) {
                if (n.children && n.children.length > 0) {
                if (levelWidth.length <= level + 1) levelWidth.push(0);

                    levelWidth[level + 1] += n.children.length;
                    n.children.forEach(function (d) {
                        childCount(level + 1, d);
                    });
                }
            };
            childCount(0, root);
             var nodes = tree.nodes(root); 
            links = tree.links(nodes);
            node = svgGroup.selectAll("g.node")
                .data(nodes, function (d) {
                return d.id || (d.id = ++i);
            });
            var nodeEnter = node.enter().append("g")

                .attr("class", "node")

            .on('click', click)

              nodeEnter.append("circle")
                .attr("class", "smallcircle")
                    .style("stroke", function(d) {
              return d.color;
            })
            nodeEnter.append("text")

            .text(function (d) {
                return d.name;
            })
             //   .style("font", "12px serif")
                .style("opacity", 1)
                .style("fill-opacity", 0)
            node.select("circle.nodeCircle")
                .attr("r", 4.5)
                .style("fill", function (d) {
                return d._children ? "red" : "#fff";
            });


                                    //     });
             var nodeUpdate = node.transition()
                .duration(duration)
                .attr("transform", function (d) {
            return "rotate(" + (d.x - 90) + ")translate
            (" + d.y + ")rotate(" + (-d.x + 90) + ")";
            });

            nodeUpdate.select("circle")
                .attr("r", 4.5)

                .style("fill", function (d) {
                return d._children ? "red" : "#fff";
            });

            nodeUpdate.select("text")
          .style("fill-opacity", 9)
           .attr("fill",function(d){return (d.children?"red":"black");})
          .attr("font-size",function(d)
            {return (d.children?"20px":"12px");})
          .attr("dy", ".35em")

                .attr("text-anchor", function (d) {
                return d.x < 180 ? "start" : "end";
            })


                .attr("transform", function (d) {
        return d.x < 180 ? "translate(8)" : "rotate(360)translate(-8)";
            });

           var nodeExit = node.exit()
                     .transition()
                .duration(duration)
                .attr("transform", function (d) {
                return "translate(" + source.x + "," + source.y + ")";
            })
                .remove();

            nodeExit.select("circle")
                .attr("r", 0);

            nodeExit.select("text")
                .style("fill-opacity", 0);


            var link = svgGroup.selectAll("path.link")
                .data(links, function (d) {
                return d.target.id;
            })
        link.style("stroke", function(d) {
              return d.color;
            })

            link.enter().insert("path", "g")
                .attr("class", "link")
                 link.style("stroke", function(d) {
              return d.target.color;
            })
           .attr("d", function (d) {
             var o = {x: source.x, y: source.y};
                return diagonal({source: o, target: o});
              });


            link.transition()
                .duration(duration)
                .attr("d", diagonal);


            link.exit().transition()
                .duration(duration)

                .attr("d", function (d) {
             var o = {x: source.x, y: source.y};
                return diagonal({source: o, target: o});
              })
                .remove();


            nodes.forEach(function (d) {
                d.x0 = d.x;
                d.y0 = d.y;
            });
        }


        var svgGroup = baseSvg.append("g")
        .attr("transform", "translate(" + 500 + "," + 300 + ")")


          d3.selectAll("text").style("fill", function (d)
         { return d3.select(this).classed(d.cond, true); })


        root.children.forEach(function (child) {
            collapse(child);
        });

        update(root);
        d3.select(self.frameElement).style("height", 10);
        });
        }

        </script>
        </div>

i tried to refresh "div1" on every click (to clear the existing design and to show the new design based on output.. my first word is அகல் and second word is அகடம் the problem is on each submit new design appears above the existing design..it will be helpfull if some one guide me here....

my second try is html

            <form name="editorForm"> 
            <input type="text" name="editor" id="editor">
        <input type="submit" value="butn" id="subm" onclick="subm();">
      </form>

javascript

     function subm(){
        $('form').find(':submit').on('click', function(e) {
        $('#div1').load();
        subm1();
        });
        }
        function subm1(){
    $(document).ready(function(){
            $('form').find(':submit').on('click', function(e) {
             e.preventDefault();

            funn();

        });
        });
        }
        </script>
        <div id="div1">
        <script>
       function funn(){  
         //d3 code
            }
          </script>
            </div>   

output is only url change from http://192.168.1.203:8888/mar1/new.html to http://192.168.1.203:8888/mar1/new.html?editor=அகல்

THANKS

Answer 1

First, check the space between type and name in the first input and also the space between type and value in the second input.

Now, to change the content of the div1, use jQuery's html() method. Something like this:

$("#div1").html("new content");