Skip navigation
Currently Being Moderated

Item List on Left, Detail View on Right

May 20, 2012 11:58 AM

Tags: #web_app #no_refresh #same_page

Does anyone know the best way to do the following:

 

I have my web app items in a list view down the left side of my page, I'd like site visitors to be able to click on the item of interest and see the detail view in the right column without a page refresh.  Is this possible? I'd also like the selected item to be highlighted in the list when it's detail view is the one showing.

 

Any tips are appreciated.

 

Thx,

Brian

 
Replies
  • Liam Dilley
    6,714 posts
    Feb 28, 2012
    Currently Being Moderated
    May 20, 2012 12:50 PM   in reply to AvaloDesign

    Hi Brain,

    Simple Ajax. If you use jquery you just need to use .load().

    Have the items as links linking to the detail view of the web app. Have an element on the page to load the content in, in the detail layout have the content you need wrapped in say a div. Both these with ID.

    .load the content into the div you want on the page.

     
    |
    Mark as:
  • Liam Dilley
    6,714 posts
    Feb 28, 2012
    Currently Being Moderated
    May 20, 2012 3:14 PM   in reply to AvaloDesign

    well you will be running a .click event in jquery - http://api.jquery.com/click/

    And with that you can do .addClass() on that event as well as the .load element to add a selected state. On Page load you can find the first A and have that pre-load the content and also have a selected state on it. On every click first clear all classes on those elements and add the .addClass() to the element currently clicked through $(this).

     
    |
    Mark as:
  • Liam Dilley
    6,714 posts
    Feb 28, 2012
    Currently Being Moderated
    May 20, 2012 6:39 PM   in reply to AvaloDesign

    That heads into the realm of addressing and deeplinking.

    Simple method is to make sure the url udpates with the pagename#itemname which your script makes sure is loaded if the url has that and loaded.

    Or you go through the whole log..

     

    Since when I ajax pages incase someone comes across the detail view through Google I do full templates so that page looks good as it is not just a white space of nothing and when you ajax in the content you only load the content you need.

    You can use the whole think of deeplinking, updating the current url to be the actual page url of the ajax loaded content etc. This is quite a big implementation though. The first is the more simpler implementation.

     

    Here is an example of the hash method:

    http://blog.rootsmith.ca/jquery/how-to-make-jquery-ui-tabs-linkable-or -bookmarkable/

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points