The forum of the forums
Would you like to react to this message? Create an account in a few clicks or log in to continue.

jQuery to JS not workin

4 posters

Go down

jQuery to JS not workin Empty jQuery to JS not workin

Post by BloodDrunk 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
BloodDrunk
BloodDrunk
Forumember

Posts : 127
Reputation : 4
Language : English

http://www.nfssecrets.tk/

Back to top Go down

jQuery to JS not workin Empty Re: jQuery to JS not workin

Post by Ape April 28th 2017, 3:43 pm

What is this code made to do ?


jQuery to JS not workin Left1212jQuery to JS not workin Center11jQuery to JS not workin Right112
jQuery to JS not workin Ape_b110
jQuery to JS not workin Ape1010
Ape
Ape
Administrator
Administrator

Male Posts : 19075
Reputation : 1988
Language : fluent in dork / mumbojumbo & English haha

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

Back to top Go down

jQuery to JS not workin Empty Re: jQuery to JS not workin

Post by BloodDrunk 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.
BloodDrunk
BloodDrunk
Forumember

Posts : 127
Reputation : 4
Language : English

http://www.nfssecrets.tk/

Back to top Go down

jQuery to JS not workin Empty Re: jQuery to JS not workin

Post by Ange Tuteur 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() {

});
Ange Tuteur
Ange Tuteur
Forumaster

Male Posts : 13246
Reputation : 3000
Language : English & 日本語
Location : Pennsylvania

https://fmdesign.forumotion.com

Back to top Go down

jQuery to JS not workin Empty Re: jQuery to JS not workin

Post by BloodDrunk 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).
BloodDrunk
BloodDrunk
Forumember

Posts : 127
Reputation : 4
Language : English

http://www.nfssecrets.tk/

Back to top Go down

jQuery to JS not workin Empty Re: jQuery to JS not workin

Post by Guest 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
Guest
Guest


Back to top Go down

jQuery to JS not workin Empty Re: jQuery to JS not workin

Post by BloodDrunk 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.
BloodDrunk
BloodDrunk
Forumember

Posts : 127
Reputation : 4
Language : English

http://www.nfssecrets.tk/

Back to top Go down

jQuery to JS not workin Empty Re: jQuery to JS not workin

Post by Guest 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
Guest
Guest


Back to top Go down

jQuery to JS not workin Empty Re: jQuery to JS not workin

Post by BloodDrunk 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.
BloodDrunk
BloodDrunk
Forumember

Posts : 127
Reputation : 4
Language : English

http://www.nfssecrets.tk/

Back to top Go down

jQuery to JS not workin Empty Re: jQuery to JS not workin

Post by Guest 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
Guest
Guest


Back to top Go down

jQuery to JS not workin Empty Re: jQuery to JS not workin

Post by BloodDrunk 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..
BloodDrunk
BloodDrunk
Forumember

Posts : 127
Reputation : 4
Language : English

http://www.nfssecrets.tk/

Back to top Go down

jQuery to JS not workin Empty Re: jQuery to JS not workin

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

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

Posts : 127
Reputation : 4
Language : English

http://www.nfssecrets.tk/

Back to top Go down

jQuery to JS not workin Empty Re: jQuery to JS not workin

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

Locked as Requested


jQuery to JS not workin Slgray10

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

Male Posts : 51453
Reputation : 3519
Language : English
Location : United States

https://forumsclub.com/gc/128-link-directory/

Back to top Go down

Back to top

- Similar topics

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