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.
The forum of the forums
4 posters

    jQuery to JS not workin

    BloodDrunk
    BloodDrunk
    BloodDrunk
    Forumember


    Posts : 127
    Reputation : 4
    Language : English
    • Post n°1

    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
    • Back to top
    Ape
    Ape
    Ape
    Administrator
    Administrator


    Male Posts : 19325
    Reputation : 2005
    Language : fluent in dork / mumbojumbo & English haha
    • Post n°2

    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
    • Back to top
    BloodDrunk
    BloodDrunk
    BloodDrunk
    Forumember


    Posts : 127
    Reputation : 4
    Language : English
    • Post n°3

    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.
    • Back to top
    Ange Tuteur
    Ange Tuteur
    Ange Tuteur
    Forumaster


    Male Posts : 13207
    Reputation : 3000
    Language : English & 日本語
    Location : Pennsylvania
    • Post n°4

    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() {

    });
    • Back to top
    BloodDrunk
    BloodDrunk
    BloodDrunk
    Forumember


    Posts : 127
    Reputation : 4
    Language : English
    • Post n°5

    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).
    • Back to top
    Guest
    avatar
    Guest
    Guest


    • Post n°6

    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
    • Back to top
    BloodDrunk
    BloodDrunk
    BloodDrunk
    Forumember


    Posts : 127
    Reputation : 4
    Language : English
    • Post n°7

    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.
    • Back to top
    Guest
    avatar
    Guest
    Guest


    • Post n°8

    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
    • Back to top
    BloodDrunk
    BloodDrunk
    BloodDrunk
    Forumember


    Posts : 127
    Reputation : 4
    Language : English
    • Post n°9

    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.
    • Back to top
    Guest
    avatar
    Guest
    Guest


    • Post n°10

    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.
    • Back to top
    BloodDrunk
    BloodDrunk
    BloodDrunk
    Forumember


    Posts : 127
    Reputation : 4
    Language : English
    • Post n°11

    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..
    • Back to top
    BloodDrunk
    BloodDrunk
    BloodDrunk
    Forumember


    Posts : 127
    Reputation : 4
    Language : English
    • Post n°12

    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.
    • Back to top
    SLGray
    SLGray
    SLGray
    Administrator
    Administrator


    Male Posts : 51498
    Reputation : 3523
    Language : English
    Location : United States
    • Post n°13

    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.
    • Back to top

      Current date/time is September 23rd 2024, 1:28 am