Skip navigation
AvaloDesign
AvaloDesign
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

421 Views   5 Replies   Latest reply: Liam Dilley, May 20, 2012 6:39 PM
 
Replies
  • Liam Dilley
    3,990 posts
    Feb 28, 2012
    Currently Being Moderated
    1. Liam Dilley,
    May 20, 2012 12:50 PM   in reply to AvaloDesign
    Report

    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:
  • AvaloDesign
    Currently Being Moderated
    2. AvaloDesign,
    May 20, 2012 1:33 PM   in reply to Liam Dilley
    Report

    Excellent, this is what I'll do. Thank you. 

     

    Do you know of a clever way to keep the selected item showing it's hover state at left when its detail view is showing at right?  I'm trying to figure out how to apply a class only when that item is selected/active, but am unsure how to do this in a web app.

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

    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:
  • AvaloDesign
    Currently Being Moderated
    4. AvaloDesign,
    May 20, 2012 6:04 PM   in reply to Liam Dilley
    Report

    Nice! One final question: Since the page isn't reloading, will site visitors be able to bookmark the different web app detail view pages available from the items in the left column?  For example, if a visitor clicks on an item halfway down the list and the details pull up on the right - can he/she copy the link at the top of the page and forward it to a friend or will the url look the same for all items?  That might make it worth reloading the page on each item click.

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

    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:
Actions

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