Question

Im having a problem replacing content of a div when a link is clicked. Im able to replace the content once but not able to do it a second time. I think Im not able to get a handle of the id of the new div.

Take a look at my example

Click on Show Group 1 and then show group 2. I can replace them both but not able to replace Group 1 again. Refresh the page to see the process again.

Any help is appreciated.

Answer 1

Your problem is with replaceWith() you are replacing the code you are using as a handle …

$j(".monitoringDesc").click(function(e) {
    e.preventDefault();
    $j(".widgetGroup").html($j("#newGroup").html());
    $j(".widgetGroup").show("slide", {
        direction: "right"
    }, 200);
});

this keeps the container widgetGroup in tact – just replacing the contents using .html()

Here is an example of both working using this method

Update

You could make you code and function a little more generic … first add some data to the HTML :

<li><a href="#" class="monitoringDesc" data-target="newGroup">Show group 1</a></li>
<li><a href="#" class="monitoringDesc" data-target="newGroup2">Show group 2</a></li>

all I have added is the 2 data-target attributes – then the following jQuery will pull in the content you require based on the above data

$j(".monitoringDesc").click(function(e) {
    e.preventDefault();
    $j(".widgetGroup").html($j("#"+$j(this).data('target')).html());
    $j(".widgetGroup").show("slide", {
        direction: "right"
    }, 200);
});

this uses the .data() method to extract the data-target property from the HTML above. I also changed the class of the anchors to match – so we can listen to the click event on both.

Working example of this solution here