Question

I asked a precursor to this question here:
Click link in DIV and show PHP/HTML in separate DIV

Then, after I removed the first script shown below, I was able to get the second script to work. I revised my question, but it appears to have gone silent. So I have a slightly modified question.

What is the conflict between the 2 scripts below and how can I modify them to work in tandem? Basically I want to be able to click anywhere in the DIV (“.side_items”) and have the child anchor links open in a separate DIV (“#main_content”)

Javascript:

<script type="text/javascript">
  $(document).ready(function(){ 
   $(".side_items").click(function(){
     window.location=$(this).find("a").attr("href");
     return false;
  })
 });
</script>

<script type="text/javascript">
  $(document).ready(function(){
   $(".side_items a").click(function(e){
    e.preventDefault(); 
       $("#main_content").load($(this).attr("href"));
    });
});

</script>

HTML: (slightly simplified)

<div id="main_content">
</div>

<div id="right_side">
  <div class="side_items">
  <a href="content.html">
  <img src="images/examplethumb.png" /><br />
  Content</a>
  </div>
</div>

Both scripts work independently to achieve their individual desired result.

Answer 1

This will do it:

$(document).ready(function(){  
    $(".side_items").click(function(){ 
        $("#main_content").load($(this).find("a").attr("href"));
        return false; 
    }) 
});

Breaking it down:

$(".side_items").click(fn);

Find all the elements with a class of side_items and assign a click event handler (fn) to them. Each time one of these elements is clicked, fn is executed with the context of the element. In the discarded code you were using the selector .side_items a, which meant the click handler was only bound to the links inside the div, not the div itself.

$(this).find("a").attr("href")

Find all the links that are contained within the current element (this), and get the value of the href attribute from the first element found. In the discarded code the context (this) was a link. Since our handler is now bound to the containing div, the context is also the div. To get the link you have to find it.

$("#main_content").load(href);

Find the element with an id of main_content and load the content found at href into it. In the discarded code you were setting location.href, which causes the page to navigate away.