External Javascript Library not working

Question

I have a problem about external javascript file. It is not working

<script type="text/javascript" src="ozel.js"></script>

Ozel.js file only work if i add at the end of the page but i want to add <head> part. What is the problem? Could you help me? Thanks

<?php
include "connect.php";
session_start();
header('Content-Type: text/html; charset=utf-8');
?>
<head>
<link rel="shortcut icon" type="image/png" href="favicon.png"/>
<link rel="shortcut icon" type="image/png" href="favicon.png"/>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ekko-lightbox/5.3.0/ekko-lightbox.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/ekko-lightbox/5.3.0/ekko-lightbox.min.js"></script>
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.12/css/all.css" integrity="sha384-G0fIWCsCzJIMAVNQPfjH08cyYaUtMwjJwqiRKxxE/rx96Uroj1BtIQ6MLJuheaO9" crossorigin="anonymous">
  <link rel="stylesheet" type="text/css" href="style.css">

<script>
$(document).on('click', '[data-toggle="lightbox"]', function(event) {
                event.preventDefault();
                $(this).ekkoLightbox();
                    lightbox.option({
      'resizeDuration': 200,
      'albumLabel': "Image %1 of %2"
    })
            });

function goBack() {
    window.history.back()
}
function goNext() {
    window.location.href='index.php'
}
</script>
</head>

Ozel.js

$("#gonderelim").click(function(){
    $("#rating").hide();
    $.ajax({ 
        type:"post",
        url:"voting.php",
        data:$("#voting").serialize(),
        success:function(cevap) {
            $("b").text(cevap);
        }
    })
    $("#stats").load("stats.php");
})

score 0 · Answer 1 · answered Aug 17 '18 at 21:29

Usually when stuff like this happens, it is the code in the Javascript part, that won't wait, until the full of body has loaded. For that same reason, you put the javascript files at the end, to allow the html to be fully loaded. The other way to get around this issue, is to listen for the https://developer.mozilla.org/en/docs/Web/Events/DOMContentLoaded event to be triggered and run your DOM-related actions there.

In your case, since you are already using jQuery, just add this around your ozel.js code

$( document ).ready(function() {
    // your code here
});

This block will start when your page has finished loading

External Javascript Library not working

1 Answers1