Stop a page reload when selecting an A-Z listing?

(Jesstp) #1

Hi all,

 

I have a standard page that has a nested asset listing of a page list. The page list is of links in a folder that list and link to external sites.

 

This all works fine, except when you click on one of the Letters (A, B, C etc) it reloads the entire page and goes to the top. So you have to scroll back down to see the result.

 

How can I stop the page reloading and just show the results under the corresponding letter?

 

Thank you

(Tim Davison) #2

Are you doing an A-Z grouping in the listing?  If so the default is display each letter's contents in a different page (sounds like what you're describing).  There should be an option to do a same-page A-Z listing on the same page.

 

Failing that, or if you need more control, you can create several asset listings and hitch them together to do it - I've had to do this several times as I wanted more functionality than what's provided out of the box, but it's quite a bit more complex.

(Jesstp) #3

Thanks Tim. Yes I have an A-Z Listing using the Multiple Pages style (screenshot attached). The thing with making it a single page will be that the list will be long. I want it so that someone can just add a link in future and it will automatically appear under its corresponding letter.

 

The current layout is exactly what I want, I just want it to not refresh the entire page and go to the top when you click a letter.

 

Do you know if this is possible? I wasn't sure if it was in the settings, as it doesn't seem right to have this feature that reloads the page on every click. Currently-page.PNG (21.2 KB)

(Tim Davison) #4

Ah, I see what you mean.  What you'd be needing sounds like a supplementary ajax call, to bring the data into the same page.  

 

Alternatively, (and I'm assuming here) if that part of the page is down further then you could add an anchor to each of the A-Z links to the top of the A-Z section you've got pictured.  I think you can do that in one of the extras fields on the details fields.  That would mean even though a new page is loaded it would automatically jump to that location in the page.

(Jesstp) #5

Thanks Tim, I find it strange that the A-Z Listing manual page doesn't mention that if you have a multiple page listing it will reload the page and take straight to the top when you click the letter!

 

I tried the single page and it works fine. I'm still playing with the details screen and trying to figure out how to add an anchor in it.

 

It seems far more complicated than it should be!

(Jesstp) #6

Would be great is someone from Squiz support could respond. Is it normal for a page reload on an A-Z multiple page listing, but not on a single page? thanks.

(Peter McLeod) #7

Hi

 

As a work around you could embed to A-z listing in an iframe element - which would solve the issue. We sometime do do for custom forms.

 

Would just need to get the applied css, designs/layout set correctly so that it looks seemless within the page - eg you would want the listing to have the same typographic styles applied but not the whole site design/layout etc.

 

Also - if it's a list of links you might also want to set them to open in the main (parent) window rather than the iframe - by using target="_parent".

 

Alternatively - building on what Tim suggested - have the listing as a single page and then modiify the layouts to include html for a tab  panel layout which is kind of what you are after. It might just take a bit of setup depending what frontend frameworks/js pluggins are availble to you.

 

 

Thanks

Peter

(Bart Banda) #8

If an asset listing is set to multiple pages then yes, it needs to reload because each letter is considered a separate page. Otherwise you wouldn't use separate page setting and list all on the same page instead wouldn't you?

 

You could potentially add some JS to each link that adds a hash value at the end of the URL that scrolls you down to the right location of the page when you click on each link, so your links might look like:

 

<a href="?page=C#a-z-content">

(Jesstp) #9

I wanted to stay away from an iframe and making it too complicated.

 

The reason I chose the multiple page layout instead of the single page was I didn't want an extra long page. This needs to be set up so that users can simply add a link (name and URL) and it is added to the list. 

 

At the moment, I have moved to the top of the page, but it is clunky and unfortunately not as functional as I would like.

 

Thanks for your replies. Will definitely need to think about something more updater and user friendly.

(Nick Papadatos) #10

Hi, I agree with Tim using an ajax call, I did one with an asset listing with pagination: http://www.canberra.edu.au/about-uc/media/monitor