How to prevent user from loading "child" pages that should be loaded with ajax

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

Vitor, what happens if user has javascript turned off? Then, it's best if the link actually redraws the page with the new content in it. This is called progressive enhancement or graceful degradation, and it's good practice even if almost everyone has javascript enabled. — yitwail
– yitwail, Commented May 20, 2011 at 6:08
You mean, redraws the page even if my call was made by the ajax menu? Wouldn't this be off the whole purpose of it? — Vitor Reis
– Vitor Reis, Commented May 20, 2011 at 13:52
What I mean is that it should redraw the page if ajax doesn't work because there's no javascript — yitwail
– yitwail, Commented May 20, 2011 at 17:06

Dr.Molle · Accepted Answer · 2011-05-20 15:37:20Z

2

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.

edited May 20, 2011 at 15:37

answered May 20, 2011 at 6:00

Dr.Molle

117k16 gold badges200 silver badges206 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Vitor Reis Over a year ago

Could you provide a (really simple) example based on my structure? I'm not sure how I could rebuild the structure..

Collectives™ on Stack Overflow

How to prevent user from loading "child" pages that should be loaded with ajax

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related