The forum of the forums
Welcome to the Official Support Forum of Forumotion!

To take full advantage of everything offered by our forum, please log in if you are already a member, or join our community if you've not yet.



Create a free forum like this one.

jQuery to JS not workin

View previous topic View next topic Go down

jQuery to JS not workin

Post by BloodDrunk on April 28th 2017, 3:41 pm

Hello,

I have this jQuery code
Code:
$(document).ready(function(){
  var path = location.pathname;
  var links_members = `<ul class="linklist">
             <li><a href="/memberlist?mode=posts&order=DESC&submit=Ok&tt=1&username">Most Messages</a>&nbsp;&bull;&nbsp;</li>
                        <li><a href="/memberlist?mode=lastvisit&order=DESC&submit=Ok&tt=1&username">Last Visited</a>&nbsp;&bull;&nbsp;</li>
                        <li><a href="/memberlist?mode=username&order&submit=Ok&tt=1&username">Members by name</a>&nbsp;&bull;&nbsp;</li>
                        <li><a href="/memberlist?mode=groups&order&submit=Ok&username">Member in usergroups</a></li>
                      </ul>`;
 
if(path.indexOf("/u") >= 0 || path == "/privmsg" || path == "/profile" || path == "/" || path == "/groups" || path == "/register" || path == "/login"){
  $("#underNav").html("");
} else if (path == "/memberlist"){
  $(".user-relative-forum-statistics").html(links_members);
}
});
which I've rewritten to JS like the following:
Code:
//Variables
var path = location.pathname;
var x = document.getElementById("underNav");
var links_members = '<ul class="linklist"><li><a href="/memberlist?mode=posts&order=DESC&submit=Ok&tt=1&username">Most Messages</a>&nbsp;&bull;&nbsp;</li><li><a href="/memberlist?mode=lastvisit&order=DESC&submit=Ok&tt=1&username">Last Visited</a>&nbsp;&bull;&nbsp;</li><li><a href="/memberlist?mode=username&order&submit=Ok&tt=1&username">Members by name</a>&nbsp;&bull;&nbsp;</li><li><a href="/memberlist?mode=groups&order&submit=Ok&username">Member in usergroups</a></li></ul>';

//Function
if (path.indexOf("/u") >= 0 || path == "/privmsg" || path == "/profile" || path == "/" || path == "/groups" || path == "/register" || path == "/login"){
  x.innerHTML = "";
}
else if (path == "/memberlist"){
          x.innerHTML = links_members;
}
but the JS code doesn't seem to work, while jQuery works just fine.
I've tried testing JS with alert command, and the code runs, but it simply doesn't manipulate the content of the "#underNav".


Last edited by BloodDrunk on May 2nd 2017, 7:33 pm; edited 1 time in total
avatar
BloodDrunk
Forumember

Posts : 122
Reputation : 4
Language : English

http://www.nfssecrets.tk/

Back to top Go down

Re: jQuery to JS not workin

Post by APE on April 28th 2017, 3:43 pm

What is this code made to do ?



avatar
APE
Manager
Manager

Male Posts : 10684
Reputation : 997
Language : fluent in dork / mumbojumbo & English haha
Location : STUCK IN FORUMOTIONS SERVERS HELP ME !!!!!!

http://chatworld.forumotion.co.uk/

Back to top Go down

Re: jQuery to JS not workin

Post by BloodDrunk on April 28th 2017, 3:55 pm

It's supposed, depending on which page you currently are, display appropriate HTML content in #underNav.
It's not complete code yet.

The reason I want to use JS is because it's faster than jQuery. jQuery gives noticeable delay, unlike JS, and it bothers me really much.
avatar
BloodDrunk
Forumember

Posts : 122
Reputation : 4
Language : English

http://www.nfssecrets.tk/

Back to top Go down

Re: jQuery to JS not workin

Post by Ange Tuteur on April 28th 2017, 4:28 pm

Hey,

The problem is that your code is executing before the document is ready. All JavaScript on Forumotion is executed in the <head> section, so trying the retrieve an element before it has been parsed will throw an error. ( i.e. "cannot set innerHTML property of null" where null is "x" ) Wrap your code with this and it should work without issue :
Code:
document.addEventListener('DOMContentLoaded', function () {
  // code to execute when the document is ready
});

It's pretty much the equivalent of jQuery's document ready function. i.e.
Code:
$(document).ready(function () {

});

and the shorthand version :
Code:
$(function() {

});
avatar
Ange Tuteur
Forumaster

Male Posts : 13175
Reputation : 2876
Language : EN10, FR5
Location : Macungie, PA

http://fmdesign.forumotion.com

Back to top Go down

Re: jQuery to JS not workin

Post by BloodDrunk on April 28th 2017, 4:44 pm

Hey Angie,

So that's why JS doesn't work, and jQuery does..
But this still brings me back to the problem, even if I use JS. How do I avoid that delay (or can it be avoided?) I want to change the content while the page is loading, because once it fully loads, it's very noticeable how elements get changed and that doesn't look pretty.

You can check it yourself: www.nfssecrets.tk
Just click any navigation button and see how bad it performs.. (bad, as in quite the delay, atleast for me).
avatar
BloodDrunk
Forumember

Posts : 122
Reputation : 4
Language : English

http://www.nfssecrets.tk/

Back to top Go down

Re: jQuery to JS not workin

Post by Justice™ on April 30th 2017, 2:48 pm

BloodDrunk wrote:How do I avoid that delay (or can it be avoided?) I want to change the content while the page is loading, because once it fully loads, it's very noticeable how elements get changed and that doesn't look pretty.
You could set the opacity of the page to 0 from the css:
Code:
body{opacity:0.0}
, then turn it back to 1 just after the page loads and javascript changes stuff. Smile
avatar
Justice™
Forumember

Posts : 515
Reputation : 118
Language : Romanian and English

http://board.realmsn.com

Back to top Go down

Re: jQuery to JS not workin

Post by BloodDrunk on April 30th 2017, 2:56 pm

Wolfuryo wrote:
BloodDrunk wrote:How do I avoid that delay (or can it be avoided?) I want to change the content while the page is loading, because once it fully loads, it's very noticeable how elements get changed and that doesn't look pretty.
You could set the opacity of the page to 0 from the css:
Code:
body{opacity:0.0}
, then turn it back to 1 just after the page loads and javascript changes stuff. Smile
Actually, that is a very good idea! I'll try it out and see how that'll workout.
avatar
BloodDrunk
Forumember

Posts : 122
Reputation : 4
Language : English

http://www.nfssecrets.tk/

Back to top Go down

Re: jQuery to JS not workin

Post by Justice™ on April 30th 2017, 2:57 pm

BloodDrunk wrote:
Wolfuryo wrote:
BloodDrunk wrote:How do I avoid that delay (or can it be avoided?) I want to change the content while the page is loading, because once it fully loads, it's very noticeable how elements get changed and that doesn't look pretty.
You could set the opacity of the page to 0 from the css:
Code:
body{opacity:0.0}
, then turn it back to 1 just after the page loads and javascript changes stuff. Smile
Actually, that is a very good idea! I'll try it out and see how that'll workout.
Good luck! thumright
avatar
Justice™
Forumember

Posts : 515
Reputation : 118
Language : Romanian and English

http://board.realmsn.com

Back to top Go down

Re: jQuery to JS not workin

Post by BloodDrunk on April 30th 2017, 3:19 pm

This could work I think, does it "feel" bad? Could you test it out little bit, I'm not sure whether to use that approach or not.
avatar
BloodDrunk
Forumember

Posts : 122
Reputation : 4
Language : English

http://www.nfssecrets.tk/

Back to top Go down

Re: jQuery to JS not workin

Post by Justice™ on April 30th 2017, 3:39 pm

I used that method on my forum for quite a lot of time and no one seemed to be bothered 'bout it, or even notice it.
avatar
Justice™
Forumember

Posts : 515
Reputation : 118
Language : Romanian and English

http://board.realmsn.com

Back to top Go down

Re: jQuery to JS not workin

Post by BloodDrunk on April 30th 2017, 5:07 pm

I tried using it, but it causes some other problems, so I guess I'll just have it the way it is, until I figure what could be done to "fasten" it..
avatar
BloodDrunk
Forumember

Posts : 122
Reputation : 4
Language : English

http://www.nfssecrets.tk/

Back to top Go down

Re: jQuery to JS not workin

Post by BloodDrunk on May 2nd 2017, 7:32 pm

Close this thread, I'll stick to the way it currently is.
avatar
BloodDrunk
Forumember

Posts : 122
Reputation : 4
Language : English

http://www.nfssecrets.tk/

Back to top Go down

Re: jQuery to JS not workin

Post by SLGray on May 2nd 2017, 8:09 pm

Locked as Requested


When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.

avatar
SLGray
Administrator
Administrator

Male Posts : 40227
Reputation : 2717
Language : English
Location : United States

https://fmthemes.forumotion.com/

Back to top Go down

View previous topic View next topic Back to top


 
Permissions in this forum:
You cannot reply to topics in this forum