<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.
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>
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 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.