Question

I need to insert multiple hidden fields(data) into the XML. Currently, I can only insert one data at one time. Let’s say that I have a few ’tiles'(which contains multiple coordinates) to insert into the XML. So, far, I can only insert one ’tile'(data) into the XML at one time.

<<==Javascript code==>>    

function moveIt(){ 

if (!moveEnabled||!MovableItem) return;

// display info during testing

X = MovableItem.offsetLeft;

Y = MovableItem.offsetTop;

W = MovableItem.offsetWidth;

H = MovableItem.offsetHeight;

document.getElementById('X').value = X;     
    document.getElementById('Y').value = Y;
    document.getElementById('W').value = W;
    document.getElementById('H').value = H;  

    document.form1.elements['X'].value;
    document.form1.elements['Y'].value;
    document.form1.elements['W'].value;
    document.form1.elements['H'].value;

    }

 <<==JSP codes==>>

 <form name='form1' action='UpdateXML.jsp' method='post'>

 <input type='hidden' name=source value="<%=src%>" />
 <input type='hidden' id="X" name="X" value="<%=X%>"/>
 <input type='hidden' id="Y" name="Y" value="<%=Y%>"/>
 <input type='hidden' id="W" name="W" value="<%=W%>"/>
 <input type='hidden' id="H" name="H" value="<%=H%>"/> 

 <button type="button" onclick="window.location.href='editcompany.jsp'">Back!</button>
 <button type="submit">Insert Into XML!</button>
 </form>

 <<==XML==>>

<%
try {

String X        = request.getParameter("X");
    String Y        = request.getParameter("Y");
    String W        = request.getParameter("W");
    String H        = request.getParameter("H");

    pw.println ( "<?xml version=\"1.0\" encoding=\"ISO-8859-1\"?>"  );
    pw.println ( "<TemplateEditor>");
    pw.println ( "\t<Logo>");
    pw.print ( "\t\t<X_Coord>"); pw.print (X); pw.println ( "</X_Coord>");
    pw.print ( "\t\t<Y_Coord>"); pw.print (Y); pw.println ( "</Y_Coord>");
    pw.print ( "\t\t<Width>");   pw.print (W); pw.println ( "</Width>");
    pw.print ( "\t\t<Height>");  pw.print (H); pw.println ( "</Height>");
    pw.println ( "\t</Logo>");
    pw.println ( "</TemplateEditor>");

    pw.flush(); 
    pw.close();
    br.close();
    fw.close();
  } catch (Exception e) {}
%>

Hope there’s some kind soul out there who can help me out! I really really need help. Thanks a lot

Edit:

function $(v){return document.getElementById(v)}

function startMove(e){

if (!MovableItem){return;}

canvas=isIE ? "BODY" : "HTML";

    activeItem=isIE ? event.srcElement : e.target;  

    offsetx=isIE ? event.clientX : e.clientX;

    offsety=isIE ? event.clientY : e.clientY;

    lastX=parseInt(MovableItem.style.left);

    lastY=parseInt(MovableItem.style.top);

    lastW=parseInt(MovableItem.style.width);

    lastH=parseInt(MovableItem.style.height);

if (offsetx+scrollAmt[0]>=(MovableItem.parentNode.offsetLeft+parseInt(MovableItem.style.left)+(MovableItem.offsetWidth*.98))|| offsety+scrollAmt[1]>=(MovableItem.parentNode.offsetTop+parseInt(MovableItem.style.top)+(MovableItem.offsetHeight*.98)) ){edge=true; MovableItem.style.cursor="se-resize"} else{edge=false;MovableItem.style.cursor="move"}

moveEnabled=true;

document.onmousemove=moveIt;

}

Does this help? Thanks

Answer 1

Here are some hints and suggestions for handling N MovableItems (code is based on your current logic.

NOTE: it doesn’t follow all JavaScript/JSP best practices (that I know of), it’s for demo purpose only.

1.You can use just one hidden input field to save all MovableItems information (instead of creating 4xN hidden fields), because it’s easier to handle this way

<input type='hidden' id="movableItems" name="movableItems" value="<%=value%>"/> 

2.update moveIt() function to support N items.
(Assume you have an array called MovableItems, which contains information of all items)

function moveIt() {
    if (!moveEnabled || !MovableItems || MovableItems.length === 0) return;
    var value = '';
    for (var i = 0; i < MovableItems.length; i += 1) {
        if (i > 0) {
            value += '|';
        }
        value = [value, MovableItems[i].offsetLeft, ',',
                MovableItems[i].offsetTop, ',',
                MovableItems[i].offsetWidth, ',',
                MovableItems[i].offsetHeight].join('');
    }

    //the hidden field's value would be something like 10,20,50,50|5,5,30,20|1,2,60,20
    document.getElementById('movableItems').value = value;
}

---

In UpdateXML.jsp

try {
    pw.println ( "<?xml version=\"1.0\" encoding=\"ISO-8859-1\"?>"  );
    pw.println ( "<TemplateEditor>");

    String value = request.getParameter("movableItems");
    String[] items = value.split("\\|");
    int size = items.length;
    for (int i=0; i<size; i++) {
        String[] coords = items[i].split(",");
        pw.println ( "\t<Logo>");
        pw.print ( "\t\t<X_Coord>"); pw.print(coords[0]); pw.println ( "</X_Coord>");
        pw.print ( "\t\t<Y_Coord>"); pw.print(coords[1]); pw.println ( "</Y_Coord>");
        pw.print ( "\t\t<Width>");   pw.print(coords[2]); pw.println ( "</Width>");
        pw.print ( "\t\t<Height>");  pw.print(coords[3]); pw.println ( "</Height>");
        pw.println ( "\t</Logo>");
    }
    ...
} catch (Exception e) {}

I’m sure there can be many other ways to do this. I hope this would give you some ideas.

---

Edit:

Here’s a possible way to create/update/delete MovableItems array:

var MovableItems = []; //create an empty array

A possible implementation for handling create/update/delete a MovableItem

Note: it assume you assign each MovableItem a unique id when it’s generated in the UI

function getItem(items, id) { //helper function for getting item from array by id
    for (var i = items.length; i >= 0; i -= 1) {
        if (items[i].id === id) {
            return i;
        }
    }
    return -1;
}

function updateMovable(MovableItem) {
    var index = getItem(MovableItems, MovableItem.id);
    if (item < 0) { //it's a new item
        MovableItems.push(MovableItem);
    } else { //it's an existing item
        MovableItems[index] = MovableItem;
    }
}

function deleteMovableItem(MovableItem) {
    var index = getItem(MovableItems, MovableItem.id);
    if (index) {
        MovableItems.splice(index, 1);
    }
}