Cannot understand why jquery doesn't work when live?

When I run xampp on localhost to code, certain jquery functions do not pick up once the website is uploaded to a live server (you may wanna check out https://syncitt.co.za).

In conjunction with my own code, I am using a script called “bootstrap 4 admin dashboard”, and the code from the bootstrap dashboard isn’t picking up. As an example, on my localhost, the “user” icon opens a few menus. This does not happen when the page is uploaded live. For some reason, the live version is not picking up one of the files. I tried to figure out what the problem is, and all I can assume that the jquery scripts are clashing. What can I do?

Have you checked the developer tools console in your browser for errors?

Yes, that’s why it’s so confusing. No errors come up and apparently all the files are showing as status code 200 so I don’t know what’s the problem

If the code worked on the development system, and all the same files are being used on the live server, the problem is most likely due to some initial condition not being met or (server-side) error. Are you logging all php errors and have checked the web server’s error log?

It would take having all the code needed to reproduce the problem to even suggest where to start debugging, i.e. we don’t know what the code may even be dependent on in order for it to work.

The last web-server error is logged 6 days ago so I’m baffled as to where to start debugging as well. I have an idea it may be the position of the scripts being called. I have a file called header.php and footer.php that looks like this:

Header.php

<!DOCTYPE html>
<html>
<head>
    <link rel="icon" type="image/png" href="https://syncitt.co.za/logo.png"/>
	  <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
    <meta name="description" content="Contemporary POS system specifically designed for small businesses and home-based businesses" />
    <meta name="author" content="SyncItt" />

    <link rel="stylesheet" type="text/css" href="styles.css">
    <link href="https://fonts.googleapis.com/css?family=Roboto|Work+Sans:400,600" rel="stylesheet">
    <!-- CSS only Bootstrap's jsdelivr-->
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
    <!-- <link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css" rel="stylesheet"> -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
    <!-- JavsScript only Bootstrap's jsdelivr-->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-+YQ4JLhjyBLPDQt//I+STsc9iw4uQqACwlvpslubQzn4u2UU2UFM80nGisd026JF" crossorigin="anonymous"></script>

    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
    <link rel="stylesheet" type="text/css" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">

    <script src="https://cdn.jsdelivr.net/npm/simple-datatables[email protected]" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/js/all.min.js" crossorigin="anonymous"></script>
    <link href="admin-dashboard/dist/css/styles.css" rel="stylesheet" />

    <script src="admin-dashboard/dist/js/scripts.js"></script>
	<title>SyncItt - POS System and Synchronisation Technology</title>
</head>

Footer.php

<script type="text/javascript">
$(".dismiss").click(function(){
    $(".alert-success, .alert-danger, .alert-warning").fadeOut("slow");
}); 
</script>

        <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" crossorigin="anonymous"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.js" crossorigin="anonymous"></script>
        <!-- <script src="assets/demo/chart-area-demo.js"></script> -->
        <!-- <script src="admin-dashboard/dist/assets/demo/chart-bar-demo.js"></script> -->
        <script src="https://cdn.jsdelivr.net/npm/[email protected]" crossorigin="anonymous"></script>
        <script src="admin-dashboard/dist/js/datatables-simple-demo.js"></script>

</body>
</html>

When I move the script tags from the footer to the header, some errors are produced in the console. I don’t know if this has anything to do with it

Note that the errors only appear if I change the positions of the script tags on the LIVE server. On localhost, it doesn’t make a difference and everything works as it’s supposed to :confused:

Whats the link to the dashboard? I only see the scanner

I removed it for the time-being because I couldn’t figure out the problem. I’ll put it back now if you’d like to have a look,

Just updated back to the sidebar-script now

To see how the sidebar should actually look and interact, follow the link
https://syncitt.co.za/admin-dashboard/dist/layout-static.html

I can’t access the site at all now! Not sure what is going on with it if I can’t see anything

It’s my web server this time :rofl:. They busy migrating, hopefully will be up again shortly

Hi @astonecipher. Will you have a look when you get a chance? site is live again:)

Can you zip the files and send me the code?

I don’t see the script file for the event listener for the top menus. That may likely be the issue.

<link href="admin-dashboard/dist/css/styles.css" rel="stylesheet">

This stylesheet is there, but this is not,

<script src="admin-dashboard/dist/js/scripts.js"></script>

@mslilafowler

The link to the script is inside the footer of the code,

Alright. I made a downloadable link to the code (please don’t mind the mess lol, I’m still in prototype mode and there’s like zero security, will do all of that at a later stage):
https://drive.google.com/file/d/1Zo2j5RMHdyNO4Gaym5b-6u0suN-Sj5OX/view?usp=sharing

The php is working exactly as I intended but I am really bad at client-stuff and javascript and even worse at debugging, I’d be so grateful if you can send me any pointers where I can learn and improve on these fields (especially debugging)

@mslilafowler

Line 868 in the index.php file, you have the file commented out

Yes, I was playing around with commenting/uncommenting the scripts, but haven’t come right with the end results. Whether that scripts.js is called or not - the live website doesn’t corrently display and function the side-bar

Later on, I realized that I had included 2 php documents, and both of them had bootstrap calls in them, so bootstrap was loaded twice on my page, and THAT was the mind-boggling thing. Crazy and silly, this is actually what made me check html - Bootstrap dropdown not working - Stack Overflow

Sponsor our Newsletter | Privacy Policy | Terms of Service