Question

I have this page, with a Default.aspx working as a “master” would work, and loading child pages with jQuery’s load() function. Something Like this:

    <ul id="navigation>
        <li><a href="Item1.aspx"> Item 1</a></li>
         <li><a href="Item2.aspx"> Item 2</a></li>
    </ul>
    <div id="contend">
         <!-- Ajax loaded pages goes here -->
    </div>
    <div id="footer">
    </div>

The problem is: when the user clicks on some item and, let’s say, chooses to open on a new window (tab), He will obviously see just the items from that page, not the navigation, footer and anything else from the default page…

I’m searching for a workaround..

maybe with anchor control via url? like #item1

Answer 1

Send an additional parameter with ajax. So you can determine if the request was made by ajax and choose how to build the response.

Example as requested:

<script  type="text/javascript">
$(
   function()
   {
    $('#navigation a')
      .click(
              function(e)
              {
                e.preventDefault();
                $('#contend').load(this.href,{'isAjaxRequest':true});
              }
            );
   }
 );
</script>

If a user clicks the link the usual way, there will also be send a POST-parameter named “isAjaxRequest” , you can check for this parameter, and if it exists, output only the fragment for #contend, otherwise the whole page including header, footer and so on.