Help Center

Images not loading when AJAX browsing

Martin AndersenPosted 6 years agoEdited 6 years ago

Hi!
If i browse through FBP the images are not loaded, but if i refresh the page, or go directly to the question through permalink then the images do load.
For example, if you go:

http://ideaalab.com/es/soporte/preguntas-frecuentes
Blog
¿Cómo obtengo acceso al area secreta?

You will see that the images there are not shown.
But if you reload that page, or go through the permalink ( http://ideaalab.com/es/soporte/preguntas-frecuentes/blog/como-obtengo-acceso-al-area-secreta ) then the images are loaded.

This happens all over my FBP pages.

Image paths are stored without starting dash, like this:

<img src="/images/soporte/faq/CrearCuenta.png" width="244" height="294">

Although if i add the starting dash, the problem is solved. But i use JCE editor, and this is the way the images are added. I hope i dont have to manually change the code for every image i add.

Thanks for your help!

PS: by the way, attached you can find the translated frontend file of FBP in Spanish

#1849

24 answers

MinitekPosted 6 years agoModerator

Hi there,

Yes, that's true. Paths without a starting slash are seen as relative paths and currently will not work properly with AJAX browsing.

I will look into a solution for that in the next version.

Martin AndersenPosted 6 years ago

Grate!
JCE dont allow me to save with starting slash, if i add it, its removed when saved.
So i made the change in the DB directly, and now the images work fine. But the lightbox popup for the images dont work if page is loaded via AJAX.
You can check http://ideaalab.com/es/soporte/instrucciones-de-productos/mandos-a-distancia-y-receptores
If you load the page directly, the popup works for the images. But if you navigate then the popup dont work.
Hope you can check this also when you find a fix for the other problem.
Regards!

Martin AndersenPosted 6 years ago

Im checking that EVERY link in FBP is wrong if loaded via AJAX.
I can change all link in DB to start with "/" to avoid this, but i guess i will have to undo this once you find the fix.
Do you think you will solve this issue soon?
Regards!

MinitekPosted 6 years agoModerator

Relative urls can not be fixed. This is the way they are supposed to work.
This is why it's never a good idea to use relative urls. Especially when used in an AJAX interface.

Always use a forward slash (/) in relative urls. This way they will work fine with AJAX.

MinitekPosted 6 years agoModerator

I have an idea about a fix for urls too. I am not sure that it will work though in all cases.
I will add this in the next version.

In the meantime, you can add the forward slash to urls. It will not affect the fix.

Martin AndersenPosted 6 years ago

The forward slash at the beginning is a root-relative url, and the best way to do it. In my case it will not affect, as the relative paths were also relative to root.

The problem with AJAX browsing is that it changes URL each time you browse into the topics and sections. I will try to see if i can change config of JCE to use root-relative URLs.

Hope you can find a solution for this, otherwise its quite a big problem for the component :(

Regards!

Martin AndersenPosted 6 years ago

Ive talked with JCE developer to see if it was possible to make root relative urls, or add leading slash, and he told me that Joomla removes the trailing slash because of SEF plugin:

Joomla does this with URLs in article content via the Joomla SEF plugin, but this AJAX plugin you are using obviously does not do this.

You should speak to the developers of this extension how this can be enabled in their extension.

You can check the thread here: https://www.joomlacontenteditor.net/support/forum/93678-relative-urls-and-ajax-browsing#reply-93682

MinitekPosted 6 years agoModerator

I strongly disagree.

I am using JCE editor and all forward slashes in urls and image paths work fine for me.
If JCE is stripping the forward slash, then the problem is with JCE configuration.

I don't see any problem on my end. Maybe you have not configured the JCE configuration properly?

Martin AndersenPosted 6 years ago

Hi Yannis!
Thanks for your reply.
The AJAX problem only affect relative URL like "example/image.jpg", because it use the "new" URL (changed by AJAX) as the base for relative URLs.
If the URLs are stored as root relative URLs then this problem does not appear, because no matter the new URL changed by AJAX, the base URL is always my domain.
I explained my problem to JCE developer in the mentioned thread, and he told me i can manually add a leading slash to the URLs, but

it should be up to the extension processing and rendering the content, ie: this AJAX extension you are using, to resolve the URLs, not the content creator

I don't see any problem on my end. Maybe you have not configured the JCE configuration properly?

When you add a link, image, file, etc and browse through FBP the links are generated correctly for relative URLs?

Regards

MinitekPosted 6 years agoModerator

Yes, you are right about that.

Relative urls will not work. Only root relative urls will work.
I'm looking into it and I will definitely fix it in next version.

I will make it so all relative urls will be automatically interpreted as root-relative urls.

Martin AndersenPosted 6 years ago

Grate to hear that!
Hope the next version come out soon :)

Martin AndersenPosted 6 years ago

Also i realize that links in FBP pages are not converted to SEF urls.
For example, if i insert this link:

<a href="/index.php?option=com_content&view=article&id=5&Itemid=111" target="_blank" rel="noopener noreferrer">contact</a>

On FBP i see the following link when i press on it:
http://ideaalab.com/index.php?option=com_content&view=article&id=5&Itemid=111
But if i insert the same link on a Joomla article, on a Virtuemart product, on an Easyblog post, etc... the link is the following:
http://ideaalab.com/es/contactar

As i have SEF URLs activated, so i would like the URLs to be like the last one.
I think this may be part of the same problem we were talking previously, so maybe when you fix that you can also check this.

Regards!

MinitekPosted 6 years agoModerator

Hi there,

I have tried a similar link in Joomla articles and Virtuemart products and in my case it does not turn to a SEF url.

Are you sure about that?

Martin AndersenPosted 6 years ago

Just tried again.
If i insert this link for example:
index.php?option=com_virtuemart&view=productdetails&virtuemart_category_id=7&virtuemart_product_id=604
My website convert it to:
http://ideaalab.com/es/shop/fuentes-de-energia/cargadores/cargador-lipo-usb-detail
This is valid for Joomla articles, Virtuemart, Easyblog, etc... But not for FBP

Martin AndersenPosted 6 years ago

Any updates on this topic?
Specially about the broken links when ajax browsing... but also with the urls not converted to SEF.
Any help would be much appreciated!
Regards!

Martin AndersenPosted 6 years ago

Ive seen there was an update some weeks ago. But in the changelog nothing is mentioned about this problems :(
When can we expect to have this problem solved?
Regards!

MinitekPosted 6 years agoModerator

Hi Martin,

I have tested solutions for both issues.

Unfortunately it is not possible to implement any efficient solution.

Since the issue is with URLs that exist inside the questions content, any attempt to search and "fix" URLs while loading the content via AJAX would result in an inefficient process that would make the component very slow and resource intensive.
Imagine having to search inside the text of hundreds of questions for URLs and then "fixing" these URLs while waiting to load the questions in a topic. That would result in dramatic delays.

There is only one solution at the moment and this solution works well:
You must use root-relative URLs everywhere in the component + you must use sef urls (root-relative also) when linking to other components.

Martin AndersenPosted 6 years ago

Hmmm.... well, im my opinion i would prefer to have slower loading pages than broken links.
The approach could be the other way. Instead of fixing the URLs while loading the page on the FE, why dont you fix them while you create/edit/save the questions on the BE?

And can you tell me something about the non SEF URLs? Why are the links non SEF?

Regards!

MinitekPosted 6 years agoModerator

I am reluctant to edit the user's text in any way.
This could have some adverse effects that can't be foreseen.

I think the best solution is to add a new parameter in the configuration that will allow users to disable the ajax loading.

This way you can make sure that all links will always work if you don't use root-relative urls.

Martin AndersenPosted 6 years ago

I commented the problem to my website developer and he told me to add this to the template.

$doc->base = juri::root();

Once done, the problem was solved :)
Do you think this could be "injected" with the loading of your component? Or this can only be done by the template developer?
Regards