5 Replies Latest reply: May 20, 2012 6:39 PM by Liam Dilley RSS

    Item List on Left, Detail View on Right

    AvaloDesign Community Member

      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

        • 1. Re: Item List on Left, Detail View on Right
          Liam Dilley CommunityMVP

          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.

          • 2. Re: Item List on Left, Detail View on Right
            AvaloDesign Community Member

            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.

            • 3. Re: Item List on Left, Detail View on Right
              Liam Dilley CommunityMVP

              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).

              • 4. Re: Item List on Left, Detail View on Right
                AvaloDesign Community Member

                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.

                • 5. Re: Item List on Left, Detail View on Right
                  Liam Dilley CommunityMVP

                  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/