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/
Related
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=true&libraries=places"></script>
<script type="text/javascript" src="assets/js/jquery.placepicker.js"></script>
<script>
$(document).ready(function () {
$(".placepicker").placepicker();
}); // END document.ready
</script>
<input class="placepicker form-control" name="location" placeholder="location"/>
Please help me. It's not working properly.
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=APIKEY&sensor=true&libraries=places"></script>
you have to provide api key only, then it will work fine.
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';
}
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.