JQuery Help: using multiple values

[shawnatdgk]

So I just started studying up on JQuery and was interested: could I have coded this better?

On the posting page, I'm replacing the title bar text "Create Thread" with the "Welcome USER." text located on the top right of the page and also adding some text after the "Welcome USER" text


<script>

   $(function(){


//Get the Welcome USER text
       welcomeText = $("span").first()


//Check I'm on posting page ("New thread")
   if(pb.data("route").name == "new_thread"){


//Get title bar and add "Welcome USER. Please answer the questions below"
   $(".title-bar h2").html(welcomeText).append(" Please answer the questions below")
   
}});

</script>

[Chris]

Jun 15, 2023 3:01:38 GMT -8 shawnatdgk said:

So I just started studying up on JQuery and was interested: could I have coded this better?

On the posting page, I'm replacing the title bar text "Create Thread" with the "Welcome USER." text located on the top right of the page and also adding some text after the "Welcome USER" text


<script>

   $(function(){


//Get the Welcome USER text
       welcomeText = $("span").first()


//Check I'm on posting page ("New thread")
   if(pb.data("route").name == "new_thread"){


//Get title bar and add "Welcome USER. Please answer the questions below"
   $(".title-bar h2").html(welcomeText).append(" Please answer the questions below")
   
}});

</script>

That's actually very impressive for your first time coding in jQuery.

The word "better" is a subjective term, if it works for you then it's better than the code that did not work.

The thing that immediately stood out to me was the assumption that the welcome text would be the first span on the page. In your case and with your default theme, it probably is, but when coding for the future and for multiple forums and themes it is best to anticipate. A theme where that welcome text has been relocated, or even a code such as yours that just relocated that welcome span, means any code that executed after yours and is also assuming the welcome text would be the first span on the page would be in for a rude awakening.

The more resilient approach would be to grab the span using #welcome > span given that an id is unique on a page (no other element can share that id), so anywhere it is initially located on the page would be irrelevant. The code that runs after your code would then make sure it actually got the intended span lest it ends up unintentionally moving something it shouldn't have, and so should your code since it might not always be the first code running. If you want to be nice, you could even make a clone() of the span and use that instead of moving the actual span that way any code that comes after yours can still access that span.

[shawnatdgk]

Interesting ... and thank you. 
So, as you suggested, I made a clone instead, and I also grabbed the welcome span by using the parent id. 
Question about that, I kinda just guessed that you were showing me the actual syntax of telling the browser how to find that particular element; hence: #welcome > span
Although, after doing some quick research about JQuery selectors, i didn't find anything about the greater than sign you used here. Of course, i know that it doesn't mean "greater than" in this particular situation. I know it's referring to the path to take but do you know what this is called in JQuery language, therefore I can look it up and get more familiar with the method? Thanks

Also, I could only get this code to work by storing the clone in a variable and then calling on it within the statement. 
Is this the correct way? 
Although I'm learning to get these codes to work, I also don't want to start any dirty habits along the way. 
Thanks!



<script>

   $(function(){


   //create clone of Welcome USER text
      var clone = $("#welcome>span").clone();

   
   //Check I'm on posting page ("New thread")
   if(pb.data("route").name == "new_thread"){


   //Append clone + add message text to title bar, replacing original text
      $(".title-bar h2").html(clone).append( " Please answer the questions about the customer below")

   
}});

</script>

[Chris]

Jun 16, 2023 18:44:41 GMT -8 shawnatdgk said:

Question about that, I kinda just guessed that you were showing me the actual syntax of telling the browser how to find that particular element; hence: #welcome > span
Although, after doing some quick research about JQuery selectors, i didn't find anything about the greater than sign you used here. Of course, i know that it doesn't mean "greater than" in this particular situation. I know it's referring to the path to take but do you know what this is called in JQuery language, therefore I can look it up and get more familiar with the method? Thanks

The syntax adopted by jQuery (and the newer querySelector functionality now built into modern browsers) is taken directly from the syntax used in Cascading Style Sheets (CSS) and that particular relationship would be called a child combinator

Jun 16, 2023 18:44:41 GMT -8 shawnatdgk said:

Also, I could only get this code to work by storing the clone in a variable and then calling on it within the statement. 
Is this the correct way? 
Although I'm learning to get these codes to work, I also don't want to start any dirty habits along the way. 
Thanks!



<script>

   $(function(){


   //create clone of Welcome USER text
      var clone = $("#welcome>span").clone();

   
   //Check I'm on posting page ("New thread")
   if(pb.data("route").name == "new_thread"){


   //Append clone + add message text to title bar, replacing original text
      $(".title-bar h2").html(clone).append( " Please answer the questions about the customer below")

   
}});

</script>

The return from the clone method would be a newly created element that has no attachment to the document so you would need to save a reference to it if you were not going to use it immediately as an intermediate value (e.g. $(".title-bar h2").html($("#welcome>span").clone())...) but in this scenario you would want it in a variable so you could also test for existence in your if statement (clone.length > 0) to be sure you actually grabbed the span and that some code that ran before yours did not just move it and left you with nothing to work with.