1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

JQuery at the bottom of the page with function call before it

Discussion in 'jQuery' started by ncc1966, May 18, 2020.

0
  1. #1
    I have this PHP application with Bootstrap 4 I am working on and I am trying to pop a toast in screen. For this I have to do:

    

$('.toast').toast('show');
    Code (JavaScript):
    The problem is that the JQuery include (along with BS include) is at the bottom of the page (therefore it's AFTER my BS/JQuery call and it causes the error:

    Uncaught ReferenceError: $ is not defined

    I figured that if I move my includes from the bottom to the top of the page the problem disappear but I have been told that for the sake of the new good coding practices I should keep them at the bottom.

    Said that how can I fix such issue?

    Thanks!
     
    ncc1966, May 18, 2020 IP
  2. justinmidlet

    justinmidlet Member

    Messages:
    23
    Likes Received:
    4
    Best Answers:
    0
    Trophy Points:
    33
    #2
    im not professional in scripting but JQuery should in the top of the page to work
     
    justinmidlet, May 18, 2020 IP
  3. ncc1966

    ncc1966 Greenhorn

    Messages:
    8
    Likes Received:
    6
    Best Answers:
    0
    Trophy Points:
    13
    #3
    Yeah, I just figured it the worse way possible: struggling! Now there is something very weird happening to my project. I realized that in fact I have to keep a duplicate of all my JS stuff both in the top as well at the bottom of my pages otherwise it won't work.

    I am not sure if there is something to do but I am using CodeIgniter 4 and also all my pages are "broken" in three parts: a top template, the main body and a bottom template. This is the only way I found then everything works fine. This is SO weird.
     
    ncc1966, May 18, 2020 IP
  4. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #4
    Which is why jQuery is a steaming pile of ineptly developed trash.

    Hence the poor OP's problem with garbage scripting and nonsensical code orders. Big tip, if you're declaring scripting like that in the markup, you're doing it ALL WRONG. Good scripting should enhance markup AFTER it's been written, not be slopped into the middle of it. That you've double boned yourself with the train wreck of ignorance, incompetence, and ineptitude that is bootcrap is only further exacerbating your issues.

    All this framework garbage is just making you work harder, not smarter... If you think that bootstrap, jQuery, or any of the rest of such chazerei has made anything simpler, easier, or better you haven't learned enough HTML or CSS to even have an informed opinion on the topic, and ANYONE telling you to use these systems isn't qualified to flap their damned yap on the topic; being in desperate need of a quadruple helping of sierra tango foxtrot uniform.

    Bootstrap 4 and jQuery? You've been suckered. Throw the entire bloated overthought mess of ineptitude in the trash and start over vanilla. It'll save you time, effort, and headaches in the long run. I shudder to think what the actual page looks like.
     
    deathshadow, May 31, 2020 IP
    JEET likes this.
  5. sarahk

    sarahk iTamer Staff

    Messages:
    28,500
    Likes Received:
    4,460
    Best Answers:
    123
    Trophy Points:
    665
    #5
    the whole idea of javascript being at the bottom is so that the page loads before the javascript - everything should look ok without it.

    Now, there will be things that will be broken and not look right but hopefully your load times will be ok because you won't have bloat anywhere except the jquery & bootstrap.

    javascript shouldn't be on your page - so your code for your toast needs to be in a linked .js file that is loaded AFTER jquery.
     
    sarahk, May 31, 2020 IP
  6. JEET

    JEET Notable Member

    Messages:
    3,825
    Likes Received:
    502
    Best Answers:
    19
    Trophy Points:
    265
    #6
    @ncc1966
    I don't use jquery, but try putting your jquery code inside <head> </head> section, and not outside it.
    And if you have to execute a function, put that call at the end of the jquery/js file itself, then doesn't matters where you include that file, the function call will be made only after the function has loaded and is defined.

    Why do you guys use jquery in the first place, specially when you are concerned about page load time etc?
    Doesn't it loads a big library code file, when you actually need only 3-4 functions out of it in your total webpage?
    How difficult is it to code those 4 functions in basic javascript?
     
    JEET, Jun 1, 2020 IP