Link Back Out From Child Html Loaded In Div To Parent Html

I have an id'd part of a child HTML file loaded into the parent HTML's div. I have a button at the top to empty out the child content and return the div to the parent content that

Solution 1:

Change the path on "href" to "../" instead of "x"

<ahref="../"><imgsrc="images/coffee/return_btn.jpg"border="0"></a>

or remove it. Using # is not really recommended since your script looks for the content of href. So leaving it empty would cause the page to refresh? i'm not quite sure but it works.

<ahref=""><imgsrc="images/coffee/return_btn.jpg"border="0"></a>

Edit: Now that i think about it. The first one would not work on your page since you are in the same folder. ;-)

Solution 2:

You'll want to change your original script a bit:

<scripttype="text/javascript"charset="utf-8">
$(document).ready(function () {
$('#web').on('click', '.coffeenav li a', function () {
$('#web').load('coffee.html #' + $(this).attr('href'),
function() {
    $('#coffee_return').on('click', function () {
      $('#web').load('./ #web');
    returnfalse;
});
});
returnfalse;
});
});
</script>

This basically says: After loading a section of coffee.html, look for a coffee_return button and add onclick behavior to re-load the original page into your #web section.

Also, change that href on your coffee_return button to # or JavaScript:void(0); since it's trying to load a document called "x" currently:

<divid="coffee_return"><ahref="#"><imgsrc="images/coffee/return_btn.jpg"border="0"></a></div>

Solution 3:

You cannot use same id on multiple elements, as you said "

The button inside each referenced div id in the child HTML is this:

<divid="coffee_return"><ahref="x"><imgsrc="images/coffee/return_btn.jpg"border="0"></a></div>

". This would give erroneous results. Rather, assign them a class and bind event with their class.