CODEWITHSUNDEEP
javascripthtmldojo
Igor
Igor

Reputation: 566

DOJO: how to change a dropped node and following nodes

I have following HTML:

   <form action="/Config.aspx/SDKHome/SaveSections" id="SaveSections" method="post">
                <input name="[0].SchemaName" type="hidden" value="contactSection" />

            <ul creator="attrCreator" data-dojo-type="dojo.dnd.Source" class="section container dojoDndSource"
                style="list-style-type: none;">

                <li class="dojoDndItem">
                            <input name="[0].DefinedAttributes[0].SchemaName" type="hidden" value="firstname" />
                </li>

                <li class="dojoDndItem">
                            <input name="[0].DefinedAttributes[1].SchemaName" type="hidden" value="jobtitle" />
                </li>
            </ul>
   </form>

I want to add this item to the list:

            <li class="dojoDndItem">
                        <input name="[X].DefinedAttributes[Y].SchemaName" type="hidden" value="itemToAdd" />
            </li>

How can I replace X and Y (and increment this values by all following items), to have following html as result: 

   <form action="/Config.aspx/SDKHome/SaveSections" id="SaveSections" method="post">
                <input name="[0].SchemaName" type="hidden" value="contactSection" />

            <ul creator="attrCreator" data-dojo-type="dojo.dnd.Source" class="section container dojoDndSource"
                style="list-style-type: none;">

                <li class="dojoDndItem">
                            <input name="[0].DefinedAttributes[0].SchemaName" type="hidden" value="firstname" />
                </li>

            <li class="dojoDndItem">
                        <input name="[0].DefinedAttributes[1].SchemaName" type="hidden" value="itemToAdd" />
            </li>


                <li class="dojoDndItem">
                            <input name="[0].DefinedAttributes[2].SchemaName" type="hidden" value="jobtitle" />
                </li>
            </ul>
   </form>

Upvotes: 0

Views: 488

Answers (1)

Philippe
Philippe

Reputation: 6828

Try this :

dojo.require("dojo.dnd.Source");   
dojo.ready(function(){
    var ul = dojo.query("ul.section").pop();
    var lastLiInput = dojo.query("ul li:last-child>input").pop();
    var lastLiInputName = dojo.attr(lastLiInput, "name");   
    var X = 1 + parseInt(lastLiInputName.replace(/.*DefinedAttributes\[(\d+)\].*/, '$1'));
    var newLi = dojo.create("li", { class : "dojoDndItem" }, ul);
    dojo.create("input", {
        name : "[0].DefinedAttributes[" + X + "].SchemaName",
        type : "hidden",
        value : "otherValue"
    }, newLi); 
});

Not sure the selectors I used will work in all browsers, but you get the idea... regex to get each X and Y, increment, and place at the right position using dom selectors. Just adapt that to your dnd logic...

See demo here, with visible inputs rather than hidden : http://jsfiddle.net/psoares/FSCdW

Upvotes: 1

Related Questions