JavaScript Not Working

I have a couple of pages with a java script from another company placed on my page.
https://www.coloradopuppy.org/test-toolkit
It looks great on the page, but when you click on any of the photos and try to change to a different photo it falls apart.

The toolkit when previewed outside of Wix works fine.

I can display the additional photos either inline or bpopup. When it is placed on a Wix page, the screen just turns black (inline) or doesn’t change (bpopup).


You can see the image at the bottom of the page, but you scroll and scroll and it never displays.

How can I get this script to work on a wix page?
Thanks for any guidance,
Christy Hess
Colorado Puppy Rescue

When you talk about getting javascript from another company to put on that page, do you in fact actually mean that you have received html code that needs to be placed on your page in a html iframe?

Note that Wix have a good many pages already through Wix Support about html in the editor that might be a good place for you to have a read of.
https://support.wix.com/en/article/adding-html-code
https://support.wix.com/en/article/corvid-working-with-the-html-element
https://support.wix.com/en/article/embedding-custom-code-to-your-site

You can read about using a javascript library on this page here, however this will involve a good deal of work as you will probably need to connect your html so that it receives data from the page via on and post message etc.
https://support.wix.com/en/article/guidelines-and-limitations-of-the-html-code-and-embed-a-site-elements

Also, if possible, please add the code that you have been given into a post here so that we can have a look at the code and see if it needs altering or if you need to put some code into the header via tracking and analytics and then have the reset of it in a html iframe on your page.

Or better still, please could we have the page where you got the code from, like an instruction page from the company that tells you how to install it onto your website etc.

It might just be a small issue somewhere that is making the enlarged pic always appear at the bottom of the screen, however, note that Wix doesn’t provide support for any html that you bring in from external sources as Wix have not tested the code themselves.

Hi,

This is the html that I received from rescuegroups.org

Here is information about the toolkit that was used to create this script.

https://rescuegroups.org/services/pet-adoption-toolkit/

I have a ticket in with them as well, but when I preview it from their site (outside of Wix) it works fine.

Thank you so much,
Christy Hess

Going through them will probably be your best bet…clicking on that src link it looks like it’s scriptception. External scripts referring to more external scripts…might be tidy to look at, but a nightmare to adjust.

You can’t embed HTML in a Wix Code page. You might want to consider using an HtmlComponent . For more information, see the article Working with the HTML Component in Wix Code .
A more secure way to handle web service requests is by using backend (server-side) code. Using backend code you can secure your passwords, API keys, and other secret information. The article Accessing 3rd Party Services explains how this is done. I recommend checking with the service provider to see if they provide a REST interface.

I would defo go with Yisrael’s option, especially as they do their own rest api.
https://userguide.rescuegroups.org/display/APIDG/API+Developers+Guide+Home

For more information, click one of the APIs below:

HTTP/JSON API - the most powerful API available, uses POST/JSON and is designed for live queries from your web site or service. You can search for animals and organizations using any combination of the fields, like postal code, distance, size, age, breed, etc. This API can access both public and private data, and can update private data as well.

REST API - a very simple GET/XML based web service that uses URL parameters for animal and organization searches. The REST API is designed to provide a large amount of pet data that you would store in a database on your servers. The REST API then provides a method for retrieving changes since your last update so that you can add, remove and update animals on a regular (typically hourly) basis.

You will need to contact them to get your own api key, however this would be the best option for you.

It will be more a harder route for you to do as it will involve code and not just a simple copy and paste of supplied html, although you can always post more questions on this forum if you find yourself getting stuck anywhere with the code for it.

Here is the api reference for Fetch.
https://www.wix.com/corvid/reference/wix-fetch.html

Sorry if this is a super basic question, but I was told that I needed to not have this code in an IFrame. However, when I go to the add menu, I have the option of IFrame, Embed a Site, and Flash, but I don’t have an option for embed HTML component. Am I missing something obvious? I am not a programmer, so I may be totally missing something that is obvious.

Thank you so much for the help!!!
Christy Hess

You want to choose HTML iFrame , which is an HtmlComponent that can have embedded code:


(The Embed a Site option is an HtmlComponent that has a site URL.)

@yisrael-wix So is there any way to put HTML code on a wix page outside of using an IFrame. The rescue site said that running their code in an IFrame was the issue.

Thank you so much,
Christy

@info37804

There is no option other than using the html iframe if you want to use html code on your page.

The only other options you have are:

To use the rest api as described in Yisrael and my previous replies to you, which would be the best option for you if the code you have got can’t be used in a html iframe.

The other option if Rescue Dogs allow it and Wix has it already, is that you can see if Wix has the ‘toolkit.js’ npm in their package manager in the backend section of your site structure and use that instead of having to write a lot of the code yourself.
https://support.wix.com/en/article/corvid-managing-external-code-libraries-with-the-package-manager
https://www.wix.com/corvid/reference/npm-modules.html

@info37804

As Whiskey and I have pointed out, the only way you can embed HTML code on a page is by using the HtmlComponent.

I took a look at the script provider and they have an API that you can use on your site .

Hi Christy!

Did you ever figure out how to fix this issue? I work for Secondhand Hounds in MN, a fellow dog rescue, and we are having a similar issue in WIX with Rescue Groups. If you were able to figure this out and are open to sharing we would appreciate MORE than you know!

Jordan