jQuery .load duplicating div

Question

I'm attempting to refresh a div and am ending up with a duplication of the div ie; one inside of the other. I'm currently using jQuery, Struts2, and the Struts2 jQuery plugin for my view.

what it is currently doing:

<div id="nameVolumeWrapper....>
    <div id="nameVolumeWrapper....>
    </div>
</div>

refresh script

<script>
    function reloadContent() {
        $('#nameVolumeWrapper').load('${jsonAction} #nameVolumeWrapper');
    }
</script>

Element that calls the refresh script

<sj:select href="%{jsonURL}" 
                 id="utility" 
               name="selectedUtility" 
               list="utilityList" 
          headerKey="-1" 
        headerValue="Please Select A Utility"
           onchange="reloadContent()"
     onChangeTopics="reloadSecondList"/>

div that I'm attempting to reload

<sj:div id="nameVolumeWrapper" listenTopics="reloadSecondList" 
        effect="pulsate" effectDuration="1000"
        cssStyle="height:250px; overflow-y: scroll; width:910px; 
        margin-left:auto; margin-right:auto;">
<table id="pricingInput" class="footable" style="width: 800px; 
        table-layout: fixed; margin-left: auto; margin-right: auto; 
        margin-bottom:50px;">
    <thead>
        <tr>
            <th style="text-align: center;">Account Name</th>
            <th style="text-align: center;">Annual kWh Volume</th>
            <th style="text-align: center">Rate Class</th>
            <th style="text-align: center;">Add Another?</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td><s:textfield name="nameHolder" /></td>
            <td><s:textfield name="volumeHolder" /></td>
            <s:url id="jsonURL" action="jsonAction" namespace="/"/>
                <td>
                    <sj:select href="%{jsonURL}" 
                                 id="rate_class" name="rateHolder" 
                               list="rateClassList" 
                          headerKey="-1" 
                        headerValue="Please Select a RateClass"
                       reloadTopics="reloadSecondList"/>
                </td>
            <td>
                <input type="button" class="addButton" value="Add" />
                <input type="button" value="Delete" onclick="deleteRow(this)">
            </td>
        </tr>
    </tbody>                                    
</table>

long story short, how do I modify my javascript or div definition to make it so that the div doesn't duplicate when the javascript is called?

Answer 1

you could do something like this:

$.get("${jsonAction} #nameVolumeWrapper", function(data) {
    $('#nameVolumeWrapper').html($(data).html());
});

Or if that doesn't work you could do:

var wrapper = $('#nameVolumeWrapper');
wrapper.load('${jsonAction} #nameVolumeWrapper', function() {
   wrapper.children('#nameVolumeWrapper').unwrap();
});