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';
}
Related
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>
I have same problem as "element.dispatchEvent is not a function" js error caught in firebug of FF3.0 but in google chrome.
I have wrote <script>jQuery.noConflict();</script>
after all scripts. But now I have another problem:
...
$("a.try").click(function () {
...
undefined is not a function
and
...
var blockHeight = $(window).height();
...
undefined is not a function
Thus first fix is not valid.
P.S.
html part where I include scripts:
....
<script type="text/javascript"
src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<script type="text/javascript"
src="<c:url value='/resources/js/underscore.js'/>"></script>
<script type="text/javascript"
src="<c:url value='/resources/js/jquery-1.8.2.min.js'/>"></script>
<script type="text/javascript"
src="<c:url value='/resources/js/jquery.mousewheel.js'/>"></script>
<script type="text/javascript"
src="<c:url value='/resources/js/popup.js'/>"></script>
<script type="text/javascript"
src="<c:url value='/resources/js/jquery.jscrollpane.min.js'/>"></script>
<script type="text/javascript"
src="<c:url value='/resources/js/scroll-startstop.events.jquery.js'/>"></script>
<script type="text/javascript"
src="<c:url value='/resources/js/jquery-ui-1.10.0.custom.min.js'/>"></script>
<script type="text/javascript"
src="<c:url value='/resources/js/script-ini.js'/>"></script>
<script type="text/javascript"
src="<c:url value='/resources/js/map/map.js'/>"></script>
<script type="text/javascript"
src="//maps.google.com/maps/api/js?sensor=true&js?v=3.exp&libraries=places"></script>
<script type="text/template" id="terminal-template">
...
</script>
<style>
.grey-terminal {
background-color: rgb(226, 226, 226);
}
</style>
<script type="text/javascript"
src="<c:url value='/resources/js/addTerminal.js'/>"></script>
<script>jQuery.noConflict();</script>
...
Can you advise another way?
When you call jQuery.noConflict(); you no longer associate jQuery with the $ variable.
So things like $().click or $(selector) will throw errors. Instead, you can do something like this:
jQuery.noConflict();
jQuery('a.try').click(handler);
jQuery(window).height();
Or, you can also assign jQuery to a new variable, like this:
var j$ = jQuery.noConflict();
j$('a.try').click(handler);
j$(window).height();
http://jsfiddle.net/wL4mc03a/
Edit
As for dispatching events, one way you can do this (using jQuery) is to trigger the event. Say you have some code that looks like this:
jQuery(document).on('keydown', function(e){
if (e.which === 42) {
alert('That is the key to life!');
}
});
Later, you can trigger this event. Instead of triggering the event using a string ('keydown'), we'll create an jQuery event and pass that.
var evt = jQuery.Event('keydown');
evt.which = 42;
jQuery(document).trigger(evt);
This helped me!
Adding jQuery.noConflict(); just before starting the jquery code and then replacing all '$' with 'jQuery'.
<script type="text/javascript">
jQuery.noConflict();
jQuery(document).ready(function() {
....
....
});
</script>
Same as mentioned in the above solution #Jack
I was trying to show the text field if yes and hide it if we select no radio button.
<html>
<head>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">
$(document).ready(function(){
$("input[type='radio']").change(function(){
if ($(this).val() == "yes") {
$("#OrderNumber").show();
}
else {
$("#OrderNumber").hide();
}
});
});
</script>
</head>
<body>
Yes:<input type="radio" name="Order" value="yes" id="order_yes"/>
No:<input type="radio" name="Order" value="no" id="order_no" checked="checked" /><br><br>
<input style="display:none;" name="OrderNumber" id="OrderNumber" size="5" /><br>
</body>
</html>
i had tried the same code online and it was working fine but on my server the text field is not showing up. Anyone who could help me out with this.
You need to put the googleapi jQuery script and your own jQuery code in separate script tags:
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("input[type='radio']").change(function(){
if ($(this).val() == "yes") {
$("#OrderNumber").show();
}
else {
$("#OrderNumber").hide();
}
});
});
</script>
You need to put the jQuery script in it's own script tag.
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script>
Your script here
</script>
Works fine in jsfiddle
You are not appending your code with in the <script type='text/javascript'>
So make sure it is placed between script tag like...
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" ></script>
<script type='text/javascript'>
$(document).ready(function(){
$("input[type='radio']").change(function(){
if ($(this).val() == "yes") {
$("#OrderNumber").show();
}
else {
$("#OrderNumber").hide();
}
});
});
</script>
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/
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.