Question

I have inherited some code that isn’t quite working …

I have jsp which lays out a dialog box:

<div class="ShippingPoints">
    <div id="dialog-form" title="Shipping Points">
        <p class="validateTips">
            Please include all vendor ship points by product group. If vendor
            ships all products from one location input City, State, Zip Code
            then select "All" for product group.
        </p>

        <fieldset>
            <label font-family="Courier New" align="left" for="city">City</label>
            <input maxlength=50 align="right" type="text" name="city" id="city"
                class="text ui-corner-all" />
            <br />
            <label font-family="Courier New" align="left" for="state">State</label>
            <select maxlength=6 align="right" name="state" id="state"
                class="text ui-corner-all">
                <c:forEach items="${states}" var="state">
                    <option value="${state.fieldValue}">
                        ${state.fieldDescription}
                    </option>
                </c:forEach>
            </select>
            <br />
            <label font-family="Courier New" align="left" for="stateOther">State (Other):</label>
            <input maxlength=6 align="right" type="text" name="stateOther" id="stateOther" value=""
                class="text ui-corner-all" />
            <br />
            <label font-family="Courier New" align="left" for="zip">Zip</label>
            <input align="right" maxlength=10 align="right" type="text" name="zip" id="zip" value=""
                class="text ui-corner-all" />
            <br />
            <label font-family="Courier New" align="left" align="left" for="product">Product</label>
            <input align="right" maxlength=50 type="text" name="product" id="product" value=""
                class="text ui-corner-all" />
            <br />
        </fieldset>
    </div>

On the page I have a link which opens the dialog … and a link that invokes the delete …

<table id="shipPoints" class="ui-widget" width="697">
    <tr width="695">
    <td width="395"><a href="#" id="add-shipping-point"> Add Shipping Point </a></td>
    <td width="300">Click <img src="<%= request.getContextPath() %>/images/delete.gif"       onclick="deleteShippingPoints('shipPoints')" /> to remove checked shipping points</td>
</tr>           
</table>

That calls this jquery function

$j("#add-shipping-point").click(function() {
    $j("#dialog-form").dialog("open");
    return false;
});

Here is the full code for the dialog

$j(function() {
$j("#dialog:ui-dialog").dialog("destroy");

var city = $j("#city"), state = $j("#state"), zip = $j("#zip"), product = $j("#product"), allFields = $j(
        []).add(city).add(state).add(zip).add(product), tips = $j(".validateTips");

function updateTips(t) {
    tips.text(t).addClass("ui-state-highlight");
    setTimeout( function() {
        tips.removeClass("ui-state-highlight", 1500);
    }, 500);
}

function checkLength(o, n, min, max) {
    if (o.val().length > max || o.val().length < min) {
        o.addClass("ui-state-error");
        updateTips("Length of " + n + " must be between " + min + " and "
                + max + ".");
        return false;
    } else {
        return true;
    }
}

function checkRequired(o, n) {
    if (o.val().length == 0) {
        o.addClass("ui-state-error");
        updateTips(n + " is a required field.");
        return false;
    } else {
        return true;
    }
}

function checkRegexp(o, regexp, n) {
    if (!(regexp.test(o.val()))) {
        o.addClass("ui-state-error");
        updateTips("Zip Code is not in proper format.");
        return false;
    } else {
        return true;
    }
}

$j("#dialog-form")
    .dialog(
    {
    autoOpen : false,
    height : 500,
    width : 500,
    modal : true,
    buttons : {
            "Add Shipping Point" : function() {
            var bValid     = true;
            var cityValid  = true;
            var stateValid = true;
            var zipPresent = true;
            var zipValid   = true;

            updateTips("");
            allFields.removeClass("ui-state-error");

            cityValid  = checkRequired(city, "City");
            stateValid = checkRequired(state, "State");
            zipPresent = checkRequired(zip, "Zip");
            if(zipPresent) { zipValid   = checkRegexp(zip, /(^\d{5}$)|(^\d{5}-\d{4}$)/, "Zip Code"); }

            bValid     = cityValid && stateValid && zipPresent && zipValid;

    if (bValid) {
        // make Ajax call save the Shipping Point and add to the list
        var shipPointId = saveShippingPoint();

        // alert(shipPointId);

        if (shipPointId == "na") {
            alert("There was a problem adding the Shipping Point.  Please try again.  
            If the problem persists please contact support.");
        } else {
            $j("#shipPoints tr:last").after(                                                                                        
                "<tr>"
                + "<td>"
                + city.val()
                + ", "
                + state.val()
                + "</td>"
                + "<td>"
                + "<INPUT type='checkbox' NAME='chk' VALUE='"
                + shipPointId
                + "' />"
                + "</td>"
                + "</tr>");
        }
        $j(this).dialog("close");
    }
},
Cancel : function() {
$j(this).dialog("close");
    }
},
close : function() {
    allFields.val("").removeClass("ui-state-error");
}
});

$j("#add-shipping-point").click(function() {
    $j("#dialog-form").dialog("open");
    return false;
});
});

The problem is that you can dynamically add rows to the table, and if you then check the checkbox and delete a newly created row it does
not delete. Essentially because the call to the delete shipping point passes in a blank id.

I’ve read around it I realize I have to use delegate to bind the event to the newly created roles. However the syntax of what I have doesn’t seem
quite match up with what’s on the net, so I’m not sure where I would specify the delegate ?

Anybody have any ideas ?

Save and delete code is as follows

<script>
// Ajax call to add the Shipping Point to the Session
function saveShippingPoint() {

    var savedId = "";

    var xhr = new XMLHttpRequest();
    xhr.onreadystatechange = function() {
        if(xhr.readyState == 4) {
            savedId = xhr.responseText;
            // alert(savedId);
        }
    };      
    var url = '<portlet:resourceURL id="saveShippingPoint"/>';
    xhr.open("GET", url + 
       "?city=" + $j( "#city" ).val() +
       "&state=" + $j( "#state" ).val() +
       "&stateOther=" + $j( "#stateOther" ).val() +
       "&zip=" + $j( "#zip" ).val() +
       "&product=" + $j( "#product" ).val()
       , true);
    xhr.send();

    // alert(savedId);
    return savedId;
}

// A function to delete rows from the Shipping Points table

function deleteShippingPoints(tableID) {
var xhr = new XMLHttpRequest();

var table = document.getElementById(tableID);
var rowCount = table.rows.length;
var shippingPointsId = "";

for ( var i = 0; i < rowCount; i++) {
    var row = table.rows[i];
    var chkbox = row.cells[1].childNodes[0];

    if (null != chkbox && true == chkbox.checked) {
        shippingPointsId = shippingPointsId + chkbox.value + ",";
        table.deleteRow(i);
        rowCount--;
        i--;
    }
}

var url = '<portlet:resourceURL id="deleteShippingPoint"/>';
xhr.open("GET", url + "?shippingPointsId=" + shippingPointsId, true);
xhr.send();
}
</script>

Answer 1

Changed the jquery to this

$j(function() {
$j("#dialog:ui-dialog").dialog("destroy");

$j("#shipPoints2").delegate(".delete-shipping-points", "click", function () {
var xhr = new XMLHttpRequest();

var table = document.getElementById('shipPoints');
var rowCount = table.rows.length;
var shippingPointsId = "";

for ( var i = 0; i < rowCount; i++) {
    var row = table.rows[i];
    var chkbox = row.cells[1].childNodes[0];

    if (null != chkbox && true == chkbox.checked) {
        shippingPointsId = shippingPointsId + chkbox.value + ",";
        table.deleteRow(i);
        rowCount--;
        i--;
    }
}

var url = '<portlet:resourceURL id="deleteShippingPoint"/>';
xhr.open("GET", url + "?shippingPointsId=" + shippingPointsId, true);
xhr.send();
} );

(Rest is the same as before )

And JSP to this

<div id="shipping-points-contain">
<table id="shipPoints" class="ui-widget-content" width="697">
<thead>
<tr class="ui-widget-content"  width="696">
        <th class="ui-widget-header" width="395">
    Shipping Points
    </th>
        <th class="ui-widget-header" width="300">
    Remove
    </th>
</tr>
</thead>
<tbody>
<c:forEach items="${shippingPoints}" var="shippingPoint">
<tr width="695">
    <td with="395">
        ${shippingPoint.shippingPointsCity},
        ${shippingPoint.shippingPointsState}
    </td>
    <td width="300">
    <INPUT type="checkbox" NAME="chk" value="${shippingPoint.shippingPointsId}" />
    <INPUT type="hidden" NAME="shipPointId" VALUE="${shippingPoint.shippingPointsId}" />
    </td>                           
</tr>
</c:forEach>
</tbody>
</table>
<table id="shipPoints2" class="ui-widget" width="697">
<tr width="695">
<td width="395"><a href="#" id="add-shipping-point"> Add Shipping Point </a></td>
<td width="300">Click <a href="#" id="delete-shipping-points"> <img src="<%= request.getContextPath() %>/images/delete.gif"  /></a>  remove checked shipping points</td>
</tr>           
</table>
</div>

And at least I’m not getting any syntax errors, the page displays properly and add still works, but the delete is not triggerred when I click the image, so the event binding isnt taking yet ……