Here's a part of the code that I have, why isn't the init function called? I am trying to use the javascript here http://www.openjs.com/scripts/ui/calendar/
<link href="http://www.openjs.com/scripts/ui/calendar/calendar.css" type="text/css" rel="stylesheet" /><script type="text/javascript">
<SCRIPT LANGUAGE="JavaScript" SRC="http://www.openjs.com/scripts/ui/calendar/calendar.js"></SCRIPT>
<script language="javascript">
function init() {
calendar.set("DOB");
}
</script>
<input name="DOB" id="DOB" value="Client's Date of Birth"/>
You're only defining the init function but not calling it.
Try to add a call to that function when the page loads:
<script type="text/javascript">
window.onload = function(){ init(); }
</script>
OR:
<body onload="init()">...
you need to register init(){..} to DOM ready event. They do it in
<script src="http://www.openjs.com/common.js" type="text/javascript"></script>
common.js
function siteInit() {
if(typeof window.init == "function") init();
On the example website, it has this near the closing tag:
<script src="http://www.openjs.com/js/jsl.js" type="text/javascript"></script>
<script src="http://www.openjs.com/common.js" type="text/javascript"></script>
Adding this to your page before the closing tag should launch the calendar.
Related
I want to call a function from java-script file in my html page. My code is shown below.
index.html
<!DOCTYPE html>
<html><body>
<h2>Web1</h2>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="js/main.js"></script>
<script type="text/javascript">
$(function() {
myFunction1(); // call function
});
</script>
<script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="socket.io.js"></script>
</body>
</html>
main.js
$(function() {
function myFunction1() {
alert("ff");
}
myFunction1() is my function. It is inside $(function() {}. But it is not working.
It is working when wrote in main.js
function myFunction1() { // function declaration in global scope
alert("ff");
}
How to define myFunction1() inside $(function() {} in main.js? Please help me?
Try this:
(function() {
function myFunction1() {
alert("ff");
}
})()
Notice the syntax errors in the last line })().
In my opinion it doesn't look like it really need to be nested inside the anonymous function. If you remove it it should just fine.
Try to call your function myFunction1() inside .ready() event
It will execute when the DOM is fully loaded.
<script type="text/javascript">
$(document).ready(function(){
myFunction1();
});
</script>
<!DOCTYPE html>
<html>
<head>
<!--
You can uncomment this in your case
<script type="text/javascript" src="js/main.js"></script>
-->
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
</head>
<body>
<h2>Web1</h2>
<script>
$(document).ready(function(){
myFunction1();
});
function myFunction1() {
alert("ff");
}
</script>
</body>
</html>
Here is your answer.
Let me inform if it is helpful to you or not. Thank you!
You are missing import jQuery and syntax errors in the last line })()
Try This :
<!DOCTYPE html>
<html><body>
<h2>Web1</h2>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="js/main.js"></script>
<script type="text/javascript">
$(document).ready(function(){
myFunction1();
});
function myFunction1() {
alert("ff");
}
</script>
</body>
</html>
OR
<!DOCTYPE html>
<html><body>
<h2>Web1</h2>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="js/main.js"></script>
<script type="text/javascript">
$(function(){
myFunction1();
});
function myFunction1() {
alert("ff");
}
</script>
</body>
</html>
You need jquery for using parts of it later.
Basically you need to switch function declaration and function call, because inside of jquery's onload, you need the call of the function.
Puth the function declaration outside in the global scope.
function myFunction1() { // function declaration in global scope
alert("ff");
}
$(function() {
myFunction1(); // call function
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h2>Web1</h2>
Version with local function declaration.
$(function() {
function myFunction1() { // local function declaration
alert("ff");
}
myFunction1(); // call function
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h2>Web1</h2>
I am very new to jquery and have been working on some snippets I found online. I have reached a problem where I think because I have 2 different jquery libraries called to the page and 2 functions both using $(function) are causing the page not to work. I've tried using the no.conflict option but not sure I used this properly or missed something out elsewhere. Would appreciate if someone can explain or tell me what the solution would be? Thanks in advance.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="jquery.revolution.js"></script>
</head>
<body>
<div id="overlay"></div>
<div id="container">
<div id="jstwitter"></div>
<script type="text/javascript" >
$(function() {
$('#container').revolution();
});
</script>
</body>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="nested.jstwitter.js"></script>
<script type="text/javascript" src="automate.js"></script>
<script type="text/javascript" src="base.js"></script>
<script type="text/javascript">
$(function () {
// start jqtweet!
JQTWEET.loadTweets();
});
</script>
</html>
Don't know why do you need two versions, but you can try something like this:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
var jQuery_1_10_2 = $.noConflict(true);
</script>
<script type="text/javascript" >
(function( $ ) {
$('#container').revolution();
})( jQuery_1_10_2 );
</script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
var jQuery_1_8_2 = $.noConflict(true);
</script>
<script type="text/javascript" >
(function( $ ) {
JQTWEET.loadTweets();
})( jQuery_1_8_2 );
</script>
Could you not just combine them?
<script type="text/javascript">
$(function () {
// Container Revolution
$('#container').revolution();
// start jqtweet!
JQTWEET.loadTweets();
});
</script>
It could be because its late, but I've been at this for a good while now and still getting no further and running out of time.
Basically when I move the following code:
var test = "hell";
$('#qrcodeCanvas').qrcode({ text: test });
out from the function method and into the script it works fine, but if I put it within the button click function I get the following error:
Uncaught TypeError: undefined is not a function
I need it to work on button click, Here is the main code involved:
<script type="text/javascript" src="~/js/lib/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="~/Scripts/jquery.qrcode.js"></script>
<script type="text/javascript" src="~/Scripts/qrcode.js"></script>
<div id="first">
<p>hello</p>
<input type="text" id="qr-text" value="" placeholder="Enter QR Data..."/>
<br />
<br />
<button id="button">Click on button</button>
</div>
<div id="qrcodeCanvas"></div>
<script>
$(document).ready(function () {
$('#button').click(function () {
var test = "hell";
$('#qrcodeCanvas').qrcode({ text: test });
});
});
</script>
UPDATE:
Here is the js file in question: http://jquer.in/javascript-and-jquery-solutions-for-fantastic-mobile-websites/qr-code/
If you're trying to use the "un-minified" version, you need to load qrcode.js first. If you use the jquery.qrcode.min.js version, it packs the qrcode.js code into the same file.
So instead of
<script type="text/javascript" src="~/Scripts/jquery.qrcode.js"></script>
<script type="text/javascript" src="~/Scripts/qrcode.js"></script>
use
<script type="text/javascript" src="~/Scripts/qrcode.js"></script>
<script type="text/javascript" src="~/Scripts/jquery.qrcode.js"></script>
or
<script type="text/javascript" src="~/Scripts/jquery.qrcode.min.js"></script>
I created jquery code and when a value is assigned into the input ,this will show a div.
Here is the demo working:
<script>
$(document).ready(function () {
if ($("#mont1").val() == '9') {
$("#di1").show();
}
});
</script>
<input id="mont1" value="9" />
<div id="di1">
<input type="submit" value="Submit" />
</div>
But In my project I'm getting this error:
$(document).ready(function(){ Uncaught ReferenceError: $ is not defined
I have lots of scripts:
<script src="/javascripts/prototype.js?1375798764" type="text/javascript"></script>
<script src="/javascripts/effects.js?1375798766" type="text/javascript"></script>
<script src="/javascripts/dragdrop.js?1375798766" type="text/javascript"></script>
<script src="/javascripts/controls.js?1375798766" type="text/javascript"></script>
<script src="/javascripts/application.js?1393972990" type="text/javascript"></script>
<script src="/javascripts/jquery/jquery-1.4.min.js?1375798764" type="text/javascript"></script>
<script src="/javascripts/jquery/easyTooltip.js?1375798764" type="text/javascript"></script>
<script src="/javascripts/jquery/jquery-ui-1.7.2.custom.min.js?1375798764" type="text/javascript"></script><script src="/javascripts/jquery/jquery.wysiwyg.js?1375798764" type="text/javascript"></script>
<script src="/javascripts/jquery/hoverIntent.js?1375798764" type="text/javascript"></script>
<script src="/javascripts/jquery/superfish.js?1375798764" type="text/javascript"></script>
<script src="/javascripts/jquery/jquery_popup.js?1405027324" type="text/javascript"></script>
<script src="/javascripts/jquery/jquery.validationEngine.js?1375798764" type="text/javascript"></script>
<script src="/javascripts/jquery/jquery.validationEngine-en.js?1403629546" type="text/javascript"></script><script src="/javascripts/calendar_date_select/calendar_date_select.js?1375798764" type="text/javascript"></script>
<script src="/javascripts/calendar_date_select/format_hyphen_ampm.js?1375798764" type="text/javascript"></script>
<script src="/javascripts/autoNumeric.js?1375798766" type="text/javascript"></script>
Somebody can help me with this jquery conflict?
The problem is with jsfiddle link what have posted:
Your script is wrapped in onLoad event. So this line fails to execute.
window.onload=function(){
Either you change the wrapped to No wrap in head it works fine. Or you may simply remove the annonymous function in the jsfiddle that will also do:
window.onload=function(){ //<-- remove this
...
} //<-- remove this
EDIT:
script
jQuery(document).ready(function ($) {
$(document).ready(function () {
if ($("#mont1").val() == '9') {
$("#di1").show();
}
});
});
you can add a class wich appropriate style
.hidden { display: block; }
.inline { display: inline; }
in js
window.onload=function(){
var inputval = document.getElementById("input-hi").value;
var div = document.getElementById("div-hi");
if (inputval == 5)
div.className = "hidden";
else
div.className = 'inline';
}
I've set an onclick event unobtrusively to one of my buttons which is working fine in Firefox, Chrome, Safari and Opera. But in IE8 te script is never called (debugger statement is never executed).
The script:
$(function () {
$('#template-button').click(function () {
debugger;
var $templateDdl = $('#templateDdl');
var selTempID = $templateDdl.val();
var url = $templateDdl.data('url');
$.post(url, { selectedTemplateID: selTempID }, function (data) {
$('#template').html(data);
});
});
});
The button:
<input type="button" value="Verander template" id="template-button" />
The JQuery is in a seperate file called artsportaal.js which is loaded in the _Layout.cshtml:
<script src="#Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/modernizr-1.7.min.js")" type="text/javascript"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery.ui.core.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery.ui.datepicker.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/IG/infragistics.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/IG/infragistics.loader.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/artsportaal.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/DatePickerReady.js")" type="text/javascript"></script>
It is being loaded as almost the last script.
Is this a well known issue with a work around? Have I done something wrong? Thanks for your time and interest in my question.
This code works perfectly. As #ravisoni commented, I could have been because of name collision.
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" ></script>
<script type="text/javascript">
$(function () {
$('#my_button').click(function () {
alert('button got clicked!');
});
});
</script>
</head>
<body>
<input type="button" value="click_me" id="my_button" />
</body>
</html>
EDIT: I edit to comment to #devnull69 as to "debugging;". Statements with no side efects are accepted in JS, and therefore the script does not crash because of that "debugging;"
This is valid JS:
$(function () {
$('#my_button').click(function () {
'use strict';
'or better, do not use strict';
var x = 83;
x;
alert('button got clicked!');
});
});
Try it out: http://jsfiddle.net/SQgdK/1/