I have a test using jquery that s work fine when in html file but when I put it in anexternal js file it doesn t work , help please , I need it to continue my application. query.js is in /js directory
HTML : detail.jsp
<%# taglib uri="http://www.springframework.org/tags/form" prefix="springform" %>
<%# taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html>
<html >
<head>
<meta charset="utf-8">
<title>Ajouter annonce</title>
<link type="text/css" href="/bootstrap/dist/css/bootstrap.css" rel="stylesheet" >
<link type="text/css" href="/css/style.css" rel="stylesheet" >
<script src="https://code.jquery.com/jquery-2.1.1.js"></script>
<script type="text/javascript" src="js/query.js"></script>
<script type="text/javascript" src="js/main.js"></script>
</head>
<body class="body2">
<div id="test" class="test" > Allo</div>
</body>
</html>
Js file : query.js
$(document).ready(function(){
$("#test").click(function(){
alert("hello");
})
});
with the help of the comments, I found the error was in the path :
<script type="text/javascript" src="/js/query.js"></script>
instead of :
<script type="text/javascript" src="js/query.js"></script>
Related
I am getting error for jQuery datepicker with master page and content page.
The same jQuery datepicker is working without any issue in page which is independent without/ not part of master page. Tried various solution provided with online but did not help. Please help me to resolve the issue.
0x800a01b6 - JavaScript runtime error: Object doesn't support property
or method 'datepicker'
Master Page
<%# Master Language="C#" AutoEventWireup="true" CodeFile="Site.master.cs" Inherits="SiteMaster" %>
<!doctype html>
<html class="no-js" lang="en">
<head >
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>ModularAdmin - Free Dashboard Theme | HTML Version </title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="apple-touch-icon" href="apple-touch-icon.png">
<!-- Place favicon.ico in the root directory -->
<link rel="stylesheet" href="css/vendor.css">
<!-- Theme initialization -->
<script>
var themeSettings = (localStorage.getItem('themeSettings')) ? JSON.parse(localStorage.getItem('themeSettings')) :
{};
var themeName = themeSettings.themeName || '';
if (themeName) {
document.write('<link rel="stylesheet" id="theme-style" href="css/app-' + themeName + '.css">');
}
else {
document.write('<link rel="stylesheet" id="theme-style" href="css/app.css">');
}
</script>
<script type="text/javascript" src="<%= ResolveUrl("~/Scripts/jquery-1.7.1.js") %>"></script>
<script src="<%= ResolveUrl("~/Scripts/jquery-ui-1.8.20.js") %>" type="text/javascript"></script>
<script src="<%= ResolveUrl("~/Scripts/jquery-ui-1.8.20.js") %>" type="text/javascript"></script>
<asp:ContentPlaceHolder ID="head" runat="Server"></asp:ContentPlaceHolder>
</head>
<body>
<div class="main-wrapper">
<div class="app" id="app">
<header class="header">
<div class="header-block header-block-collapse hidden-lg-up">
<button class="collapse-btn" id="sidebar-collapse-btn">
<i class="fa fa-bars"></i>
</button>
</div>
<div class="header-block header-block-buttons">
</div>
<div class="header-block header-block-nav">
<ul class="nav-profile">
Content page / Client
<%# Page Title="" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true" CodeFile="Default3.aspx.cs" Inherits="Default3" %>
<asp:Content ID="Content2" ContentPlaceHolderID="head" Runat="Server">
<%-- <script src="Scripts/jquery-1.7.1.js"></script>
<script src="Scripts/jquery-ui-1.8.20.js"></script>--%>
<script type="text/javascript" src="<%= ResolveUrl("~/Scripts/jquery-1.7.1.js") %>"></script>
<script src="<%= ResolveUrl("~/Scripts/jquery-ui-1.8.20.js") %>" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#<%=TEXTBX_DISP_DT1.ClientID%>").datepicker();
});
</script>
</asp:Content>
<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
<form runat="server" accept-charset="UTF-8" id="new_user" method="post">
<asp:TextBox ID="TEXTBX_DISP_DT1" runat="server"></asp:TextBox>
</form>
</asp:Content>
Making site with bootstrap carousel that works with jQuery v.2.1.4 and prettyPhoto gallery that works with jQuery v.1.7.1. Cant find solution to my problem, noConflict is not working for me - here is the code and how I tried to launch js files:
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<meta charset="utf-8">
<meta http-equiv= "X-UA-Compatible" content="IE=edge" >
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="css/prettyPhoto.css" rel="stylesheet">
<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<script src="/js/jquery.easing.js"></script>
<script src="/js/galleryScript.js"></script>
<script src="/js/jquery.prettyPhoto.js"></script>
<script src="/js/jquery-1.7.1.min.js"></script>
<script src="/js/jquery-2.1.4.js"></script>
</head>
<body>
<% include partials/template/header.ejs %>
<div class="mainMargin">
<% include partials/template/nav.ejs %>
<% include partials/template/slider.ejs %>
<% include partials/content/main.ejs %>
</div>
<% include partials/template/footer.ejs %>
</body>
</html>
Here is code of js that activeate plugin:
var jq162 = jQuery.noConflict(true);
jQuery(document).ready(function($)
{
function lightboxPhoto()
{
jQuery("a[rel^='prettyPhoto']").prettyPhoto({
animationSpeed: 'fast',
slideshow: 1000,
theme: 'facebook',
show_title: false,
overlay_gallery: false
});
}
if(jQuery().prettyPhoto)
{
lightboxPhoto();
}
});
Have found a solution, just changed places of js files loading, now how it looks like:
<script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="/js/bootstrap.min.js"></script>
<script src="/js/galleryScript.js"></script>
<script src="/js/jquery.easing.js"></script>
<script src="/js/jquery.prettyPhoto.js"></script>
<script src="/js/scroll.js"></script>
I am very new to web development. I am trying to use jquery to show slider on the web-page. However, I am not able to see the silder on the web-page. I tried debugging the code via. firebug. However, I don't see any error over there. Can somebody please tell me on what I am missing possibly?
I am using Linux - Fedora core 16 and Firefox- 38.0.5 to run this code
index.html
<!DOCTYPE html>
<html>
<script src= "jquery-2.1.4.min.js"> </script>
<script src= "js/jquery-ui.js"> </script>
<script src= "js/jqueryTutorial.js"> </script>
<title> "My Page"</title>
<head> "Hello Jquery"</head>
<body>
<div id="slider"> </div>
</body>
</html>
Here is the jqueryTutorial.js file.
(function() {
$("#slider").slider();
})();
There are no errors in the firebug console.
Here is the screen shot.
Finally, I did the following from the source - jquery slider
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Slider - Default functionality</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<script>
$(function() {
$( "#slider" ).slider();
});
</script>
</head>
<body>
<div id="slider"></div>
</body>
</html>
Now, I see the following error on the firebug.
ReferenceError: $ is not defined
$(function() {
index.html (line 11, col 2)
Try this:
jQuery(document).ready(function () {
(function() {
$("#slider").slider();
})();
});
EDITED:
Ok , the issue comes from the tags.
You wrote this:
<!DOCTYPE html>
<html>
<script src= "jquery-2.1.4.min.js"> </script>
<script src= "js/jquery-ui.js"> </script>
<script src= "js/jqueryTutorial.js"> </script>
<title> "My Page"</title>
<head> "Hello Jquery"</head>
<body>
<div id="slider"> </div>
</body>
</html>
And you HAVE to write this:
<!DOCTYPE html>
<html>
<head>
<script src= "jquery-2.1.4.min.js"> </script>
<script src= "js/jquery-ui.js"> </script>
<script src= "js/jqueryTutorial.js"> </script>
<title> "My Page"</title>
</head>
<body>
<div id="slider"> </div>
</body>
</html>
;-)
EDITED AGAIN
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Slider - Default functionality</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<script>
jQuery(function() {
$( "#slider" ).slider();
});
</script>
</head>
<body>
<div id="slider"></div>
</body>
</html>
Include your <script> tags before closing body tag </body>. Moreover you have some mistakes in your markup, like the <title> should be inside <head> tag( for heading use <h1> upto <h7> tags ). Like this:
<!DOCTYPE html>
<html>
<head>
<title>"My Page"</title>
</head>
<body>
<h1>hello jQuery</h1>
<div id="slider"></div>
<!-- load scripts -->
<script src="jquery-2.1.4.min.js">
</script>
<script src="js/jquery-ui.js">
</script>
<script src="js/jqueryTutorial.js">
</script>
</body>
</html>
And your javascript will simply be:
$('#slider').slider();
if that doesn't works try:
$(document).ready( function () {
$('#slider').slider();
}
Because if you include them at beginning, whole HTML document will not be completely loaded at the time the scripts get executed, so the script won't be able to find elements.
And I don't think .slider() gives you what you want. I suggest you learn more first. Try www.codecademy.com
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript" src="../../fancybox/source/jquery.fancybox.pack.js"></script>
<link rel="stylesheet" href="../../fancybox/source/jquery.fancybox.css" type="text/css" media="screen"/>
</head>
<body>
<a id = "single_image" href = "images/decoration/bottom4.jpg"><img src="images/decoration/bottom4.jpg" alt=""/></a>
<script type="text/javascript">
$(document).ready(function(){
$("a#single_image").fancybox();
});
</script>
</body>
</html>
I'm trying to get fancybox to display an image but it just keeps linking to the image externally. This is the very shortened version of my code but it still won't work properly as is. Typically, this issue is caused by loading jQuery twice, but that doesn't seem to be the case here.
Make sure to use the instructions given here http://fancyapps.com/fancybox/
Working code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<link rel="stylesheet" href="../../fancybox/source/jquery.fancybox.css?v=2.1.5" type="text/css" media="screen" />
<script type="text/javascript" src="../../fancybox/source/jquery.fancybox.pack.js?v=2.1.5"></script>
</head>
<body>
<a class="fancybox" rel="group" href="images/decoration/bottom4.jpg"><img src="images/decoration/bottom4.jpg" alt="" /></a>
<script type="text/javascript">
$(document).ready(function() {
$(".fancybox").fancybox();
});
</script>
</body>
</html>
I want to make a javascript file uploader. The location of css for this uploader is "~/Scripts/fileuploader/fileuploader.css" and the js location is "~/Scripts/fileuploader/fileuploader.js" . I want to do the following:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link href="~/Scripts/fileuploader/fileuploader.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="demo"></div>
<ul id="separate-list"></ul>
<script src="~/Scripts/fileuploader/fileuploader.js" type="text/javascript"></script>
<script>
function createUploader() {
var uploader = new qq.FileUploader({
element: document.getElementById('demo'),
listElement: document.getElementById('separate-list'),
action: '~/Scripts/fileuploader/do-nothing.htm'
});
}
window.onload = createUploader;
</script>
</body>
</html>
However, <link href="~/Scripts/fileuploader/fileuploader.css" and <script src="~/Scripts/fileuploader/fileuploader.js" become http://localhost:1304/Administration/blue/en-gb/Entity/Index/~/Scripts/fileuploader/fileuploader.js?_=1325540158292
and http://localhost:1304/Administration/blue/en-gb/Entity/Index/~/Scripts/fileuploader/fileuploader.js?
How can I change this so that it does ~/Scripts/fileuploader/fileuploader.js instead of http://localhost:1304/Administration/blue/en-gb/Entity/Index/~/Scripts/fileuploader/fileuploader.js
Why do you need to put that ~ symbol to there? If your html file (or php I don't know) are at the place where that you mean with that ~ symbol, deleting ~/ symbols will solve the problem.
<link href="Scripts/fileuploader/fileuploader.css" rel="stylesheet" type="text/css">
<script src="Scripts/fileuploader/fileuploader.js" type="text/javascript"></script>