Hyperlink in text component | Community
Skip to main content
V
Vani1012
Level 6
February 14, 2024
Solved

Hyperlink in text component

  • February 14, 2024
  • 4 replies
  • 1108 views

Hi,

I have a text component on this page("/content/abc")  wherein I add link "contactus"(/content/abc/contact) using link option.

I opened the page(/content/abc) and clicked on contactus link then the page url changing from "content/abc" to configured page path that is /content/abc/contact.

Is this the expected behaviour.

 

I want the contactus form should open in the same path content/abc without changing path url

Can anyone help me

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
Best answer by JagarlamudiVe

Hi @vani1012 

 

If you want the contact us form to open on the same page without changing the URL, you may utilize some techniques such as modal pop-up windows or utilizing AJAX to load the form dynamically in-page.

HTML: <a href="#" id="contactLink">Contact Us</a>
<div id="contactForm" style="display:none;"> <!-- Your form goes here --> </div>

 

JS:

document.getElementById("contactLink").addEventListener("click", function(){
document.getElementById("contactForm").style.display="block";
});

 

AJAX:

$('#contactLink').on('click', function(e){
e.preventDefault();
$.ajax({
url: '/path-to-your-contact-form',
type: 'get',
success: function(data) {
$('#formContainer').html(data);
}
});
});

4 replies

Raja_Reddy
Community Advisor
Raja_ReddyCommunity Advisor
Community Advisor
February 14, 2024

Hi @vani1012 

achieve the desired behavior of keeping the user on the same page while displaying the contact form, you can implement a method called "in-page navigation" or "modal window" approach.

 

JavaScript Modal Popup: You can use JavaScript to create a modal popup window that displays the contact form when the user clicks on the "contactus" link. This way, the user stays on the same page ("/content/abc"), and the contact form appears as an overlay on top of the existing content.

 

AJAX: You can use AJAX to dynamically load the contact form content into the existing page without reloading the entire page. When the user clicks on the "contactus" link, the contact form content is fetched from the server and injected into the current page, again without changing the URL.

 

Single Page Application (SPA): If your website is built as a single-page application, you can use client-side routing to handle navigation within the application without changing the URL. When the user clicks on the "contactus" link, the SPA framework (such as React Router for React.js applications) can render the contact form component within the same page without triggering a full page reload.

    Imran Khan
    Community Advisor
    Imran KhanCommunity Advisor
    Community Advisor
    February 14, 2024

    Yes this is expected as we provided the redirected link.

    For SPA it will require changes for not to update the Url.

      J
      JagarlamudiVeAccepted solution
      Level 4
      February 14, 2024

      Hi @vani1012 

       

      If you want the contact us form to open on the same page without changing the URL, you may utilize some techniques such as modal pop-up windows or utilizing AJAX to load the form dynamically in-page.

      HTML: <a href="#" id="contactLink">Contact Us</a>
      <div id="contactForm" style="display:none;"> <!-- Your form goes here --> </div>

       

      JS:

      document.getElementById("contactLink").addEventListener("click", function(){
      document.getElementById("contactForm").style.display="block";
      });

       

      AJAX:

      $('#contactLink').on('click', function(e){
      e.preventDefault();
      $.ajax({
      url: '/path-to-your-contact-form',
      type: 'get',
      success: function(data) {
      $('#formContainer').html(data);
      }
      });
      });

        kautuk_sahni
        Community Manager
        kautuk_sahniCommunity Manager
        Community Manager
        February 16, 2024

        @vani1012 Did you find the suggestions from users helpful? Please let us know if more information is required. Otherwise, please mark the answer as correct for posterity. If you have found out solution yourself, please share it with the community.

        Kautuk Sahni
        Terms & ConditionsAccessibility statement

        Loading footer...