Jump to the section collapsible using Javascript (embedded webpart)

[Deleted]

Hi all,

I tried something, and it almost works, but there is a minor problem. I've used the embedded webpart where I placed my javascript code, and I know that when I add the URL of the collapsible area, it opens in the embedded window rather than going directly to the collapsible section that is indicated. How can I get it to open in the collapsible window rather than the embedded window? perhaps start a new tab? or is it feasible to include the link as a href straight in the description? I've already tried using href in the description, but it's ineffective. Why?

var items = [
  {
    type: "text",
    title: "Text title",
    description: "<b> uint8Array Text item</b> with description.",
    link: {
      url: "https://support.google.com/webmasters/answer/9012289?hl=en",
      label: "Visit",
      target: "_blank",
    },
    position: {
      left: 100,
      top: 50
    }
  },

[#2 · Accepted solution]

@Deleted 

From the code you provided, it looks like you’re using an object with a link property that has a url, label, and target property. The target property is set to "_blank", which means that the link will open in a new tab.

If you want the link to open in the same tab instead of a new tab, you can try changing the value of the target property from "_blank" to "_self". This should cause the link to open in the same tab instead of a new tab.

As for including the link as an href directly in the description, it’s possible that it’s not working because the description is being rendered as text instead of HTML.

You could try using an HTML element such as a <a> tag with an href attribute to create a clickable link within the description.

Here’s an example of how you could modify your code to open the link in the same tab and include a clickable link within the description:

ar items = [
  {
    type: "text",
    title: "Text title",
    description: '<b> uint8Array Text item</b> with description. <a href="https://support.google.com/webmasters/answer/9012289?hl=en" target="_self">Visit</a>',
    link: {
      url: "https://support.google.com/webmasters/answer/9012289?hl=en",
      label: "Visit",
      target: "_self",
    },
    position: {
      left: 100,
      top: 50
    }
  },
];

In this example, I changed the value of the target property from "_blank" to "_self" so that the link will open in the same tab. I also added an <a> tag with an href attribute and a target attribute to the description property. This creates a clickable link within the description that will open in the same tab when clicked.

I hope this helps!

[#3]

Many thanks for your reply. I tried using link properties, but it doesn't work; either it doesn't open a new tab or it opens in the same embedded webpart rather than the collapsible text block. Thank you, the description appears in the new tab. Can you jump to the collapsed text block as well?

[#4]

@NikolinoDEDo you know what it does in the embedded web part when I try to open other links in the same iframe? It doesn't work. I used the given code as above. It works the first time, but not the second time, it hangs.

[#5]

It sounds like you have tried changing the value of the target property from "_blank" to "_self" to open the link in the same tab, but it’s not working as expected. You also mentioned that you have tried including a clickable link within the description using an <a> tag with an href attribute and a target attribute, but it’s not working either.
One possible reason why the link is not opening in the same tab or jumping to the collapsed text block could be that the code is not being executed correctly. You could try checking your browser’s developer console for any error messages that might provide more information about what’s going wrong.
Another possibility is that there is a conflict with other code on your page that is preventing the link from working as expected. You could try isolating the code that creates the link and testing it on a blank page to see if it works correctly.
I hope this helps!

[#6]

@NikolinoDE thanks for your answer. There are no other webparts used or other codes. I checked in the console and the following messages were shown: 

GET www.example.com net::ERR_ABORTED

Refused to apply style from www.example.com because its MIME type ('') is not a supported stylesheet MIM type, and strict MIME checking is enabled. 

DevTools failed to load source map: Could not load content for www.example.com System error: net::ERR_FILE_NOT_FOUND

DevTools failed to load source map: Could not load content for www.example.com :HTTP error: status code 404, net::ERR_HTTP_RESPNSE_CODE_FAILURE

Uncaught SyntaxError: "[object Object]" is not valid JSON 

    at JSON.pare (<anonymous>)

    at i 

    at parse

    at t.handle

    at

Some icons were reregistered. Applications should only call registerIcons for any given icon once. Redfining what an icon is may have unintended consequences. Duplicates include: GlobalNavButton, ChevronDown, ChevronUp, Edit, Add, Cancel, More, Settings, Mail, Filter

[#7]

@NikolinoDE I tried to check but as you can see there warnings and error with the code. Do you may have an idea?

[#8]

@Deleted 

The errors you mentioned in your previous message are related to different aspects of your website, so it's difficult to provide a single solution that would address all of them.

However, here are some general suggestions that might help:

• Check the URLs of the resources that are failing to load, such as stylesheets, source maps, and JSON data, to make sure they are correct and accessible. You can use the network tab in your browser's developer tools to inspect the HTTP requests and responses and see if there are any errors or warnings.
• Make sure that the server is properly configured to serve the resources with the correct MIME types and encoding. For example, if you are serving a stylesheet, the server should set the Content-Type header to "text/css". If you are serving JSON data, the server should set the Content-Type header to "application/json".
• If you are using third-party scripts or libraries, check if they are causing any conflicts or errors. You can try disabling them one by one to see if the errors go away.
• For the warning message about duplicate icons, make sure that you are only registering each icon once in your code. If you have multiple scripts that register the same icons, you can try removing the duplicates or consolidating them into a single script.

In general, it's important to understand the root cause of each error and address them one by one. If you are unsure how to solve a particular error, you can try searching online for solutions or consulting with a web developer who can help you troubleshoot the issue.

In addition, here is a modified version of the previous code

The changes are in this code:

var items = [

  {

    type: "text",

    title: "Text title",

    description: "<b>uint8Array Text item</b> with description. <a href='https://support.google.com/webmasters/answer/9012289?hl=en' target='_blank'>Visit</a>",

    position: {

      left: 100,

      top: 50

    }

  },

  // other items...

];

Removed the link object from the item and instead included an anchor tag inside the description property with the URL and target attributes set.

Removed the target attribute from the anchor tag and set its value to "_blank", which will open the URL in a new browser tab.

Based on these changes, it's likely that the error related to opening the collapsible section in the embedded window will not occur, as the link will now open in a new tab. However, the other errors you mentioned earlier may still persist if they are caused by other factors such as server configuration, conflicting scripts, or duplicate icons.

It's always a good idea to thoroughly test any changes you make to your code and monitor the browser console for any error messages. If you encounter any new errors or issues, you can troubleshoot them individually to identify their root causes and find solutions.

I hope this helps!

[#9]

@NikolinoDE Thanks a lot. Now it works!

[#10]

I am glad that I could help.

I wish you continued success with MS SharePoint.