I am currently building a web page and it will not display when i put in the javascript in the head section
this is my code for the head section:
<head>
<meta charset="utf-8">
<title>***************</title>
<link href="css/style.css" rel="stylesheet" type="text/css">
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script>
$(document).ready(function(){
$("#generalAdmissionList").change(function () {
var selected = $("#generalAdmissionList option:selected").val();
$('div').hide();
$('#' + selected).show();
});
$(document).ready(function (e) {
$('div').hide();
});
});
</script>
</head>
while using fire bug in firefox the webpage is not giving me any errors and when I take out the javascript the page works.
I have also tested the javascript in jsFiddle and it is working ok
Link to jsFiddle: http://jsfiddle.net/Dobby90/8xeNw/
Thanks in advance to anyone who can help me.
This hide all you main div element. Remove this string.
$('div').hide();
Related
Quick background:
I got a project that some developer worked on a couple of years ago and his code is a nightmare, let alone that almost all the software is outdated. The JQuery in the project is still 1.5.2 but I was able to work around that using the non-conflict option of JQuery.
However, I still can't seem to make the change() function work properly - it fires when the page is being loaded. Furthermore, for some strange reason, the On() function doesn't work either.
Here's the code (below the body):
jQuery_3_2_1(document).ready(function(){
jQuery_3_2_1("input[id^=DepartureDay]").on('change',alert('dd'));
And here's the non-conflict function (if it's relevant):
<script type="text/javascript">
var jQuery_3_2_1 = $.noConflict(true);
</script>
I don't know if it's relevant, but wired thing about the code is that the previous programmer decided load all the HTML using JS strings. Another thing that I should note is that I'm trying to detect a change in the value of a uikit datepicker.
Thank you for your help!
I add a fiddle:
https://jsfiddle.net/vzeuhohm/1/#&togetherjs=Sietj3k5oM
Another edit:
https://jsfiddle.net/vzeuhohm/2/
Another edit:
I attach the full code in the hope that someone would be able to understand what is wrong with it -
<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="uikit.docs.min.css" type="text/css">
<script language="javascript" src="https://getuikit.com/v2/vendor/jquery.js"></script>
<script language="javascript" src="https://getuikit.com/v2/docs/js/uikit.min.js"></script>
<script language="javascript" src="https://getuikit.com/v2/src/js/components/datepicker.js"></script>
<link href="example160/css/jquery.autocomplete.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="example160/js/jquery-1.5.2.min.js"></script>
<script type="text/javascript" src="example160/js/jquery.autocomplete.js"></script>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.slim.js"></script>
<script type="text/javascript">
var jQuery_3_2_1 = $.noConflict(true);
</script>
<script type="text/javascript">
jQuery_3_2_1(document).ready(function(){
jQuery_3_2_1("[id^=DepartureDay]").ready(function(){
jQuery_3_2_1("[id^=DepartureDay]").on('input',function(e){
alert('ff');
});
});
});
</script>
</head>
<body>
<form method="post">
<input type="text" name="DepartureDay1" id="DepartureDay1" data-uk-datepicker="{format:'DD.MM.YYYY'}" placeholder="mm/dd/yyyy" />
</form>
<div>TODO write content</div>
</body>
</html>
You're trying to use the result of calling alert('dd') as the change handler.
You probably want to wrap the alert in a function, and pass that function as the handler instead:
jQuery_3_2_1("input[id^=DepartureDay]").on("change", function() {
alert("dd");
});
Instead of using $(document).ready(), try using
$(window).on('load', function() {
$("input[id^=DepartureDay]").on('change',alert('dd');
});
EDIT
var jQuery_3_2_1 = $.noConflict(true);
jQuery_3_2_1(document).ready(function(){
jQuery_3_2_1('[id^=DepartureDay]').on('input', function(){alert('dd');});
});
Instead of .on('change'..., use .on('input'...).
You also have to say function(){alert('dd');} instead of just alert('dd').
try following code
textbox change event doesn't fire until textbox loses focus.
that's why i am posting both example
jQuery_3_2_1(document).ready(function(){
jQuery_3_2_1("input[id^='DepartureDay']").on("change", function() {
alert("your change event is working !!!");
});
});
jQuery_3_2_1("input[id^='DepartureDay2']").on('change keyup paste', function() {
console.log('your change/keyup event is working !!!');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js">
</script>
<script type="text/javascript">
var jQuery_3_2_1 = $.noConflict(true);
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form method="post">
<input type="text" name="DepartureDay" id="DepartureDay" />
<input type="text" name="DepartureDay2" id="DepartureDay2" />
</form>
I'm trying to just implement a simple automatic slideshow with JQuery on my webpage.
I followed this tutorial : https://www.youtube.com/watch?v=r5iPoJZjXnU. But, it seems that my fadeOut() and fadeIn() functions aren't working well. The code works but the transitions between images are too fast and not smooth.
Here's what i did:
added these lines in my head tags for upload jquery and jquery UI librairies:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
then, at the end of my body tags i simply added:
<script type="text/javascript">
function galerie(){
var active = $("#slideshow .active");
var next = (active.next().length > 0) ? active.next() : $("#slideshow img:first");
active.fadeOut(function(){
active.removeClass("active");
});
next.fadeIn("slow").addClass("active");
}
</script>
and call this function whenever i click on my h1 tag:
<h1 onClick="galerie()">Pure</h1>
Do you have any suggestions ?
Problem soleved, it was my html structure which wasn't right
I'm trying to create a responsive drop down navigation menu for my webpage. I already have a working drop down menu, but I want to make it so that when the screen reaches a certain size, I get a ☰ icon with my menu items. However, when I test this (by re-sizing my browser), I only see my drop down menu displayed as a block element, and the ☰ icon doesn't show. Here is a fiddle with my code:
http://jsfiddle.net/Lwdc4/
My JavaScript code is in an external file. This is what the file looks like:
$("#nav").addClass("js").before('<div id="menu">☰ </div>');
$("#menu").click(function(){
$("#nav").toggle();
});
$(window).resize(function(){
if(window.innerWidth > 768){
$("#nav").removeAttr("style");
}
});
And my import to HTML:
<head>
<title>Title</title>
<link rel="stylesheet" type="text/css" href="nav-menu.css"
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="nav-menu.js"></script>
</head>
What is wrong with my code? Any help is appreciated. Thanks in advance.
You need to add the jquery library to use the $ object
Add this line in your HTML to use it
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
Or choose your version directly on the jQuery website http://jquery.com/download/
Updated fiddle :
http://jsfiddle.net/Lwdc4/1/
I'm a beginner in Javascript and I struggle with a problem for a while. I want to open a new content in an existing div from another local html document. So in main content I have a simple list of projects and when I click on one project I want it to open in same the div '#content' as my projects. For this I use code:
$(document).ready(function() {
$('a.th-link').click(function() {
var url = $(this).attr('href');
$('#content').html('<h4>Loading...</h4>').load(url+ '#mynewdiv');
$.getScript('js/jquery.js');
$.getScript('js/jquery.horizontal.scroll.js');
$.getScript('js/jquery.mousewheel.js');
$(url).remove();
return false;
});
});
The problem is when I want to go back to my main div with projects '#content', with back-button on mouse or with browser, I stuck on other div '#mynewdiv', or I get to the previous open site.
Can anybody help with the code?
I'm still dealing with this problem. I found a rough example that is similar to mine and I have transformed it, to work like I want, but still doesn't work as it should. To refresh my problem.
I want to open in certain div, a new html page and it will work back button.
I also tried benalman bbq but I can't figure out, what I'm doing wrong.
Here is what I'm doing
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>TEST</title>
<script src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("jquery", "1.4.1");
</script>
<script src="jquery.address-1.1.min.js"></script>
<script type="text/javascript">
/*<![CDATA[*/
$("document").ready(function(){
function loadURL(url) {
console.log("loadURL: " + url);
$("#area").load(url);
}
// Event handlers
$.address.externalChange(function(event) {
console.log("init: " + $('[rel=address:' + event.value + ']').attr('href'));
$("#area").load($('[rel=address:' + event.value + ']').attr('href'));
}).change(function(event) {
console.log("change");
});
$('a.test').click(function(){
loadURL($(this).attr('href'));
});
});
/*]]>*/
</script>
<style type="text/css">
#area {border-style:solid;
border-width:5px;
height:300px;
width:100%;}
</style>
</head>
<body>
<p>Test</p>
<div id="area">
<a class='test' href="test1.html" rel="address:/test1">Test 1</a> <br />
<a class='test' href="test2.html" rel="address:/test2">Test 2</a> <br /> <br /> <br />
</body>
</html>
Thanks for the answer
.load() gets the data and displays it on the same site. The browser is never changing page. So when you click back, the browser will go to the previous open site.
You can use a plugin like jQuery Address to simulate the behavior you want.
I'm having a bit of trouble with jQuery, and I really have no idea what I'm doing wrong.
I have a simple page with static content and a few buttons. My problem comes when I want to attach a click event to one of my buttons - it just won't work!
Here is the code I have in my html:
<head>
<link rel="stylesheet" href="css/main.css" type="text/css">
<link rel="stylesheet" href="css/bootstrap.min.css" type="text/css">
<script type="text/javascript" src="js/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="js/my.js"></script>
</head>
<body>
....
<button class="btn btn-success" id="my-button">BUTTON</button>
</body>
And here is the code I have in my.js:
$('#my-button').click(function()
{
console.log("Button Clicked");
});
No matter how many times I click the button, no matter which browser I use the message is never entered to the console. I just don't get it, I've not had a problem like this before... I'm hoping it's not an obvious mistake.
I should also point out that when I change this to $(document).ready it works fine!!
Help :(
You said it your self, wrapping it in a document-ready callback will solve the problem.
The reason to this is that your JavaScript is run before the element actually is in the DOM, so at the time the JavaScript is run, no element match your selector, and therefor no clickevent-listener can be attached.
If you for some reason don't want to use a DOM-ready callback, another solution would be to include your JavaScript the last thing you do, just before you close your body element. When the browser get to that point, your element should be in the DOM, so your code should be fine.
Solution 1: Wait for DOM to be ready
$(function () {
$('#my-button').click(function() {
console.log("Button Clicked");
});
});
Solution 2: Load JavaScript last
<head>
<link rel="stylesheet" href="css/main.css" type="text/css">
<link rel="stylesheet" href="css/bootstrap.min.css" type="text/css">
<script type="text/javascript" src="js/jquery-1.8.2.min.js"></script>
</head>
<body>
....
<button class="btn btn-success" id="my-button">BUTTON</button>
<script type="text/javascript" src="js/my.js"></script>
</body>
Try wrapping it inside document ready function like below,
$(function () {
//content below will be executed only after DOM is ready
$('#my-button').click(function() {
console.log("Button Clicked");
});
});
This is not a mistake. Problem is when your script runs, your button is not rendered on the page. When you wrap the script in $(document).ready(), it will ensure that the script runs only after the whole content is rendered correctly.
Your js precedes your html, which means the $('#my-button') selector comes up empty. You could try event delegation, to ensure no matter when an element that matches your criteria comes into existence, there is a click listener for it:
$(document).on("click",'#my-button',function()
{
console.log("Button Clicked");
});