How Can I Add Specific Text in new_request_page.hbs template based on Ticket Form ID?

Answered

6 Comments

  • Ifra Saqlain
    Community Moderator
    Most Engaged Community Member of The Year - 2021

    Hi Lila Kingsley,

    Try the given code on new request page:

    <h1 class="ticket_A">
    <p>Text A</p>
    </h1>

    <h1 class="ticket_B">
    <p>Text B</p>
    </h1>

    <h1 class="ticket_C">
    <p>Text C</p>
    </h1>

    <br>
    <div class="new-request-form">
    {{request_form}}
    </div>

     

     The given code for script file:

      function ticketFormTitle(){
    document.querySelector('.ticket_A').style.display = 'none';
    document.querySelector('.ticket_B').style.display = 'none';
    document.querySelector('.ticket_C').style.display = 'none';

    if(window.location.href.indexOf('Form_ID_A') > 0){
    document.querySelector('.ticket_one').style.display = 'block';
    } else if(window.location.href.indexOf('Form_ID_B') > 0){
    document.querySelector('.ticket_two').style.display = "block";
    }else if(window.location.href.indexOf('Form_ID_C') > 0){
    document.querySelector('.ticket_three').style.display = "block";
    }
    }




    ticketFormTitle();


     

    If any confusion let me know :)

     

    Thanks

    Team Diziana

    0
  • Lila Kingsley

    Awesome, thanks yet again Ifra!   :)

    I am a bit leery of using JavaScript though...a script we had on the new_request_page.hbs template for YEARS recently broke (despite not being changed!!) which caused tickets to not be created :( . 

    Do you or anyone know if what I am trying to do is possible with just curlybars?

    -Lila

    0
  • Lila Kingsley

    Hi Ifra,

    Thanks again for all your help.  I got the code to work but did get an error at first.  Wanted to share the solution here in case there are other JavaScript newbies like me searching this post in the future.  Also, would love to know if you think there's a better/different solution.

    FYI I updated the original JS snippet:  basically I changed the function name and updated it to look for 2 classes/forms (instead of 3)...and added a console.log statement for testing purposes. 

    When it initially ran I saw the error Uncaught TypeError: Cannot read property 'style' of null at the first document.querySelector  line in the browser inspect console.  Searching online pointed to the code needing to wrapped in a "document ready handler", such as this one I found in stackoverflow.  

    document.addEventListener("DOMContentLoaded", function(event) {
        // Your code to run since DOM is loaded and ready
    });

    Wrapping the code in that fixed it.  I now see the text I want on each form, and the console.log is logging as I expect.  Here's the code that worked:

    document.addEventListener("DOMContentLoaded", function(event) {
    
    function ticketFormText(){
    document.querySelector('.form-a-text').style.display = 'none';
    document.querySelector('.form-b-text').style.display = 'none';

    if(window.location.href.indexOf('Form_ID_A') > 0){
    document.querySelector('.form-a-text').style.display = 'block';
    console.log("this is the A form");
    } else if(window.location.href.indexOf('Form_ID_B') > 0){
    document.querySelector('.form-b-text').style.display = "block";
    console.log("this is the B form");
    }
    }

    ticketFormText();
    });
    1
  • Ifra Saqlain
    Community Moderator
    Most Engaged Community Member of The Year - 2021

    Hi Lila Kingsley, I know I'm too late to reply but I tried it with the curlybars but nothing happened throughing error so I used the JavaScript and thanks to share the solution for newbies.

    If users are using jQuery so they can do like this:

     

    1). Add the jQuery CDN on document_head.hbs file.

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

     

     

    2). Add the script code at the bottom of your script.js file.




    $(document).ready(function(){
    function ticketFormText(){
    $("h1.form-a-text, h1.form-b-text").hide();

    if (window.location.href.indexOf("Form_ID_A") > -1){
    $("h1.form-a-text").show();
    }else if (window.location.href.indexOf("Form_ID_B") > -1){
    $("h1.form-b-text").show();
    }
    }
    ticketFormText();
    })

     

    3). The title which would be add on new_request_page.hbs

    <h1 class="form-a-text">
    <p>Text A</p>
    </h1>

    <h1 class="form-b-text">
    <p>Text B</p>
    </h1>

     

    Thanks

    Ifra

     

    2
  • Lila Kingsley

    Thanks Ifra! :)

    0
  • Ifra Saqlain
    Community Moderator
    Most Engaged Community Member of The Year - 2021

    :)

    0

Please sign in to leave a comment.

Powered by Zendesk