I made a webpage that inputs user's feedback using a form. On successful submit I display a thank you message on the same page, for which I'm using javascript.
The code executes well when I put the javascript on the same page. However, when I tried to separate the script onto a file (in a test webserver), it stopped executing.
Can you please help?
Relevant codes are mentioned below:
Head Element
<head>
<meta charset="utf-8" />
<!-- For proper rendering and touch zooming in mobile devices -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="shortcut icon" type="image/x-icon" href="images/logo.ico" />
<title><?= htmlspecialchars($title) ?></title>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css" />
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/pure/0.6.0/pure-min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/style.css" />
<script type="text/javascript" src="../javascript/submit-logic.js"></script>
</head>
First 2-3 lines of the javascript function:
$(function ()
{
$('form').submit(function (e)
{
e.preventDefault();
Detailed code (HTML, CSS, Javascript) can be found in my codepen (this is working as expected) : http://codepen.io/abbor123/pen/YGwVXg
Javascript folder is placed outside the Public folder and has 755 permission.
Edit 1:
File Tree Screenshot:
Console Error Screenshot: (submit-logic.js is the name of my javascript file. The URL mentioned on hovering over this link is: /javascript/submit-logic.js:1 )
The javascript code page is available at the following URL:
https://gist.github.com/abor123/3193eb399c3f973be453ae9a8fcc0ce5
Move your javascript folder into public_html. As Quentin commented, your server likely isn't set up to serve any files outside public_html.
Related
I am trying to integrate a custom html SaaS template in Laravel 7. I have put the template JS and CSS files in public directory and created a master blade in which I have link these js and css files. But somehow it is not working correctly. I do know that there is some issue with the app.js file but I am unable to identify the actual reason.
I will appreciate if anyone can guide me in this regard.
CSS Files Path:
<head>
<meta charset="utf-8" />
<title>{{ config('site_name')}} | Dashboard</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- App favicon -->
<link rel="shortcut icon" href="{{url('images/favicon.ico')}}">
<!-- Bootstrap Css -->
<link href="{{ url('css/bootstrap.min.css')}}" id="bootstrap-style" rel="stylesheet" type="text/css" />
<!-- Icons Css -->
<link href="{{ url('css/icons.min.css')}}" rel="stylesheet" type="text/css" />
<!-- App Css-->
<link href="{{ url('css/app.min.css')}}" id="app-style" rel="stylesheet" type="text/css" />
#yield('theme_style')
</head>
JS Files Path:
<script src="{{url('libs/jquery/jquery.min.js')}}"></script>
<script src="{{url('libs/bootstrap/js/bootstrap.bundle.min.js')}}"></script>
<script src="{{url('libs/metismenu/metisMenu.min.js')}}"></script>
<script src="{{url('libs/simplebar/simplebar.min.js')}}"></script>
<script src="{{url('libs/node-waves/waves.min.js')}}"></script>
<!-- apexcharts -->
<script src="{{url('libs/apexcharts/apexcharts.min.js')}}"></script>
<script src="{{url('js/pages/dashboard.init.js')}}"></script>
<!-- App js -->
<script src="{{url('js/app.js')}}"></script>
#yield('theme_script')
The blade is loading but functionality related to some css and js is not working. All the files are linked correctly and loading in view page source.
Note: I also try 'npm run dev' to compile the files.
I found a solution to this question, actually I was using url() helper function for linking css/js path. I made two changes to my files:
1) I put all files in a folder as it was placed in a default html template.
2) I used URL::asset() OR asset() helper function to link my files.
After that i clear the cache and run the project. It just worked.
I have finished an assignment for a bed and breakfast website. I completed everything offline, and all was working well; but when I went live the none of the interaction followed. I have an FAQ page with drop down and a fancybox for viewing the rooms.
I tried rearranging my links and scripts, i moved all my JS to separate files and called them all individually. I have checked everything I can think of, but still no luck. How/why would it all work fine offline, but fail when live?
Have been following the website since I began studying. Hopefully the community can help!
Puzzled as to what the issue might be. all links and scripts are accounted for in the appropiate folders.
You can view the website here
I hope I have provided enough information. Let me know if I should include something else.
Cheers, Gav.
JavaScript
$(document).ready(function() {
$(".answer").hide();
$(".question").click(function()
{
$(this).next(".answer").slideToggle(500);
});
});
HTML
<head>
<meta charset="utf-8"/>
<meta name="description" content="Gimme Moore BnB, luxury, affordable accomodation located in Galway. Explore Irelands beautiful West Coast in style and comfort."/>
<link rel="icon" type="image/ico" href="imgs/favicon.ico" />
<link rel="stylesheet" href="css/reset.css" />
<link rel="stylesheet" href="css/styles.css" />
<script type="text/javascript" src="javascript/jquery-3.0.0.min.js" ></script>
<link rel="stylesheet" href="javascript/fancyBox/source/jquery.fancybox.css" media="screen" />
<script type="text/javascript" src="javascript/fancyBox/source/jquery.fancybox.pack.js"></script>
<script type="text/javascript" src="javascript/faq.js"></script>
<script type="text/javascript" src="javascript/fancyJava.js"></script>
<title>FAQ</title>
</head>
Check your console via Inspect Element,
The file location cannot be found :), you need to make sure the path is reachable by the server.
I cant understand the error where $ is unidentified when using onload on my page. This is just as sample page I created where I need to call a function after loading the page.
Jquery Code
$(document).ready(function(){
alert("loaded");
});
<html>
<head>
</head>
<body>
</body>
<script src="../Jquery/contact.js"></script>
<script src="../Jquery/jquery-1.12.0.min.js"></script>
<script src="../Jquery/jquery-migrate-1.2.1.min.js"></script>
<script src="../Jquery/jquery.SPServices-2014.01.min.js"></script>
<link rel="stylesheet" type="text/css" href="../CSS/default.css"/>
<link rel="stylesheet" type="text/css" href="../bootstrap-3.3.6-dist/css/bootstrap.css"/>
<link rel="stylesheet" type="text/css" href="../bootstrap-3.3.6-dist/css/bootstrap.min.css"/>
<link rel="stylesheet" type="text/css" href="../bootstrap-3.3.6-dist/css/bootstrap-theme.css"/>
<link rel="stylesheet" type="text/css" href="../bootstrap-3.3.6-dist/css/bootstrap-theme.min.css"/>
</html>
Two issues here:
It's invalid to put script or link tags as direct children of html, so it doesn't surprise me that it doesn't work correctly on at least some browsers. You need to put them in the body or head. The only valid content of the html element is a single head element followed by a single body element.
Standard guidance, for instance in the YUI Best Practices for Speeding Up your Website is:
Put the link tags in head
Put the script tags at the bottom of body, just prior to the closing </body> tag
It looks like your contact.js file calls $() immediately (not in response to an event). If so, then contact.js must be after jQuery in the list of scripts, so that jQuery has been loaded when your code runs.
So:
<html>
<head>
<link rel="stylesheet" type="text/css" href="../CSS/default.css"/>
<link rel="stylesheet" type="text/css" href="../bootstrap-3.3.6-dist/css/bootstrap.css"/>
<link rel="stylesheet" type="text/css" href="../bootstrap-3.3.6-dist/css/bootstrap.min.css"/>
<link rel="stylesheet" type="text/css" href="../bootstrap-3.3.6-dist/css/bootstrap-theme.css"/>
<link rel="stylesheet" type="text/css" href="../bootstrap-3.3.6-dist/css/bootstrap-theme.min.css"/>
</head>
<body>
<script src="../Jquery/jquery-1.12.0.min.js"></script>
<script src="../Jquery/jquery-migrate-1.2.1.min.js"></script>
<script src="../Jquery/jquery.SPServices-2014.01.min.js"></script>
<script src="../Jquery/contact.js"></script>
</body>
</html>
Side notes:
You might look at script and CSS combining and minifying, to avoid having a lot of HTTP requests.
Consider adding <!doctype html> at the very top to ensure the browser is in standards mode (not quirks mode).
Consider adding <meta charset="UTF-8"> at the top of head (ensuring that the file is indeed in UTF-8, or changing the "UTF-8" in that to whatever encoding you're actually using in the file).
thanks for the input. so basically I had 2 problems on this. I solved the first one by moving the contact.js to the bottom and removing the migrate plugin.
I am using Bootstrap Validator(bootstrapValidator.js) for form validations. With this I added jQuery UI Multiselect component in to my bootstrap page. But this component requires 1.5.1/jquery.min.js and Bootstrap Validator requires jquery-1.10.2.min.js, Because of this two different version on the same page validator is not working. If I use only updated version of Js (jquery-1.10.2.min.js) then Multiselect component stops working. Please help....
try to add the files in the order:
js/jquery-1.10.2.min.js
js/jquery-ui.js (if file exists in the project :))
jquery.min.js (1.5.1)
js/bootstrap.min.js (if file exists in the project :))
js/bootstrapValidator.min.js (if file exists in the project :))
other js
if it does not work http://api.jquery.com/jQuery.noConflict/
Have you tried inncluding all js and css files in the head tag, and include order is critical: first include jquery library, next bootstrap, next plugin for validator. Then check your html code for errors. I found this tutoral online [http://www.jqueryscript.net/form/Powerful-Form-Validation-Plugin-For-jQuery-Bootstrap-3.html]
<head>
<!-- <link rel="stylesheet" href="css/Style_sheet.css" type="text/css" /> -->
<title>The Transformers</title>
<link rel="icon" href="/title_icon2.jpg">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- // <script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js"></script> -->
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="http://getbootstrap.com/assets/js/docs.min.js"></script>
<link rel="stylesheet" href="//cdn.jsdelivr.net/jquery.bootstrapvalidator/0.5.1/css/bootstrapValidator.min.css"/>
<script type="text/javascript" src="//cdn.jsdelivr.net/jquery.bootstrapvalidator/0.5.1/js/bootstrapValidator.min.js"></script>
</head>
I have a master page with the following lines inside my <head> tags.
<link href="Styles/Style.css" rel="stylesheet" type="text/css" />
<script src="Scripts/navmenu.js" type="text/javascript"></script>
When I navigate to a page that uses URL routing, the lines above generate the following HTML.
<link href="../../Styles/Style.css" rel="stylesheet" type="text/css" />
<script src="Scripts/navmenu.js" type="text/javascript"></script>
Based on the mapped URL, the stylesheet link is correct. How can I get the script link to also be correct?
P.S. I tried setting runat="server" in the script link but that just seems to confuse ASP.NET. The entire project fails to compile based on bogus errors reported in my JavaScript file. (The javascript file runs fine otherwise.)
It looks like the best answer is this:
<link href="Styles/Style.css" rel="stylesheet" type="text/css" />
<script src='<%= ResolveClientUrl("~/Scripts/navmenu.js") %>' type="text/javascript"></script>
Note that if I use the ResolveClientUrl() for the stylesheet <link> tag, it doesn't work. Apparently, there is special handing for this tag.