I'm trying the simplest example of getting datepicker to work, and I just can't seem to get it. There is almost nothing in my fiddle.
The top of my web page has this:
<script src="~/Scripts/jquery-1.6.2.js" type="text/javascript" />
<script src="~/Scripts/jquery-ui-1.8.11.js" type="text/javascript" />
<script>
$(function(){
$("#datepicker").datepicker();
});
</script>
Note: I tried putting the first two script lines in _Layout.cshtml, but I got an error (don't recall the error at the moment). That's why I just put it all on the one page.
And down a bit, in that same page, is this:
<td><input type="text" id="datepicker"></td>
When I click on the input control, nothings happens. However, when I click on the control in the fiddle, it works. What am I missing?
Also, you'll notice I'm using jquery 1.6.2 and jquery-ui 1.8.11. That's different than the fiddle example because fiddle didn't provide those versions as options. I'd be surprised if the version was the difference.
Script tag must have both opening and closing items. You cannot shorthand close them.
Instead of this
<script src="~/Scripts/jquery-1.6.2.js" type="text/javascript" />
do this
<script src="~/Scripts/jquery-1.6.2.js" type="text/javascript"></script>
I'm hoping this won't be the final answer, but I finally got the datepicker to display. After much trial and error, and research, I seem to have a jquery conflict, but I don't know why. Someone suggested something called non-conflict mode. So I changed my datepicker code to this:
<script type="text/javascript">
(function ($) {
$(document).ready(function () {
$("#endTime").datepicker();
});
})(jQuery);
</script>
And it worked. I'm not sure why, but it's finally at least working. If anyone can provide more insight, or a better answer, I'd gladly pick it.
The above example is explained in this answer: Basically, what I did was define a function that takes a parameter (the $) and then execute that function with jQuery as the parameter.
What I still don't understand though, is why this code won't work:
<script type="text/javascript">
jQuery(document).ready(function () {
jQuery("#endTime").datepicker();
});
</script>
If there was a conflict because of the $, and I replaced $ with jQuery, shouldn't it work?
The datepicker is pretty much straight forward why dont you use something like firebug in mozilla to see if it is throwing some error also date picker internally uses the Jquery theme roller so please download and add the jquery "css/custom-Theme/jquery-custom.css" css.
Related
I'm trying to get a functional lightbox to work on my page using code from 'bootply.com/' but it does't seem to work. It works as a link, but not as a lightbox. I get an error relating to the Javascript which states '$ is not defined', but I can't seem to locate the issue. I'm simply replicating the code, so not sure what I'm missing!
<script type="text/JavaScript">
$('.thumbnail').click(function(){
$('.modal-body').empty();
var title = $(this).parent('a').attr("title");
$('.modal-title').html(title);
$($(this).parents('div').html()).appendTo('.modal-body');
$('#myModal').modal({show:true});
});
http://www.bootply.com/71401
Any help is appreciated.
you have to include jQuery.
if you have jQuery lib then
<script src="jquery-1.11.2.min.js"></script>
or
use jQuery CDN
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
You are missing the jQuery library..
Include this in the top of your HTML before you attempt to use the $
<script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
Alternatively you can download the jQuery library and reference it yourself.
This should resolve the issue.
I'm trying to use the jquery tokeninput plugin, the demos work fine however when I try to implement it I'm hitting a brick wall. Chrome chucks this at me:
Uncaught TypeError: Object [object Object] has no method 'tokenInput'
Below is an excerpt from my <head>, chrome's resource browser shows both jQuery and jquery.tokeninput are loaded fine. No URL issues.
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script type="text/javascript" src="/media/js/jquery.tokeninput.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#token").tokenInput("/members/api/members/tokeninput_members/?format=json");
});
</script>
And showing that tokeninput has loaded:
Right, bare-bones page worked fine. After digging a while longer I found this buried at the base of the page:
<script src="http://code.jquery.com/jquery.js"></script>
It seems having multiple versions of jQuery loaded is not a good thing to do.
I am not sure if you already solved it or not. But Try this it should work if your sequence of jquery library inclusion is right (which it seems right), also remove one of jquery.min.js, jquery.js.
Then try this
<script type="text/javascript">
// Any valid variable name is fine.
var j = jQuery.noConflict();
j(document).ready(function () {
j("#token").tokenInput("/members/api/members/tokeninput_members/?format=json");
});
</script>
Check this out to understand why you might need this.
http://api.jquery.com/jQuery.noConflict/
I can't get the noConflict() method to work properly. I've been searching online for hours and can't seem to get a solid answer. Here's what I have in my header...
<script type="text/javascript" src="js/mootools.js"></script>
<script type="text/javascript" src="js/slimbox.js"></script>
<script type="text/javascript" src="js/jquery.js"></script><!-- jQuery script -->
<script type="text/javascript" src="js/page_scroll.js"></script><!-- JavaScript -->
<script src="js/jquery.easing.1.3.js" type="text/javascript"></script><!-- jQuery easing plug-in -->
<script type="text/javascript">
var $j = jQuery.noConflict();
// Use jQuery via $j(...)
$j(document).ready(function(){
$j("div").hide();
});
// Use Mootools with $(...), etc.
$('someid').hide();
</script>
There's no other jQuery or JavaScript within my HTML (just what I have externally), so "placing anything that uses the $ variable in the noConlict method" is not an option.
Essentially what I'm trying to do is have slimbox and easing page scroll (for my navigation) to work together. The problem is of course one works when the other is removed and vice versa. Also, when I use the noConflict() method I get slimbox to work and not pagescroll, but when I remove the noConflict() method I get pagescroll to work and not slimbox. So apperently noConflict is doing something, I just don't know what that is or how to go about it.
If anyone can help me out, I'd appreciate it. Thanks.
when using other js libs that leverage the $ alias,
I have found reliable results by using
$.noConflict();
jQuery(document).ready(function($) {
// your jQuery code here i.e.
// jQuery('some-selector-expression').somefunction();
});
// prototype or mootools code that uses the $ alias works fine here
So are you saying it does not work when you declare $j? You can define your own alternate names (e.g. jq, $J, awesomeQuery - anything you want). Try calling it something w/o the $
Wrap it in an anonymous function:
(function($){
$(document).ready(function() {
// function here...
});
})(jQuery);
Seeing the exact code might help.
I am currently designing a website where I am using the jQuery ScrollTo plug-in, which uses the jQuery 1.6.2 library. As part of the website, I am required to create an Ajax contact form (I need to make sure it does not take the user to another page, as it's a vertically scrolling site in which all content is on one page). The only jQuery Ajax form I could find uses jQuery 1.3.2. I've done a little bit of reading around about the noConflict() mode, but being a bit of a beginner in Java/PHP, I'm really not sure of how to use it.
My current <head> code is as follows:
<script type="text/javascript" src="jquery/jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="form/js/jquery-1.3.2.js"></script>
<script type="text/javascript" src="jquery/jquery.scrollTo.js"></script>
<script type="text/javascript" src="form/js/js.js"></script>
The first two lines are calling on the two jQuery libraries, and the second ones are the specific codes for the scroll and the form.
I'm really unclear of how to use noConflict with these codes, can someone please help me? I know this question has been asked a lot of times before, but I'm just confused by it!
Please note that I call on my libraries within the page, but no JS is actually written WITHIN the homepage document, it's all in other files, eg: form/js/js.js.
Thanks a lot to anyone that can help me, very much appreciated.
try this:
var jq = jQuery.noConflict();
(function($) {
$(function() {
// more code using $ as alias to jQuery
});
})(jq );
I has solved my similar problem by using the below code.
HTML Code:
<div class="mycssclass">
<h2 >FAQs</h2>
<p >01. This is my first Question?
</p>
</div>
----
----
<p><a name="01Answer"></a>
<br>This is my Answer.</p>
JQuery Code:
customfaq: function(){
$('.mycssclass p:eq(1)').click(function(){
var p = $(".mycssclass p:eq(1)");
var position = p.position();
$(document).scrollTo( {top:position.top,left:position.left}, 800 ); });}
For more details, Please look into http://api.jquery.com/scrollTop/
and http://api.jquery.com/category/offset/
This is the same question as THIS ONE, I can't answer that anymore, so I'm re-posting it with my account.
Sorry for the mess.
I need a Greasemonkey script that on a page load activates a href link like 'javascript:FUNCTION'.
I've seen this code:
<script language="Javascript" type="text/javascript">
function somescript() {
window.location.href = document.getElementById('ololo').href;
}
</script>
test
<br />
click me
and, while it works on a local page even when using onload, it doesn't work when I use it in my script.
Probably I'm missing something when transferring the code from the body of an html page to a Greasemonkey script.
I hope this time the question is more clear, excuse me for any misunderstanding, but I'm still a beginner with JS.
Solved it like this:
window.location=document.getElementById('foo').href;
Thanks everyone for answering anyway.
<script type="text/javascript">
function somescript() {
eval(document.getElementById('ololo').getAttribute('href').replace('javascript:', ''));
}
</script>
I can see the alert box..
Please note that this will only work when its javascript code into the href attribute...
Will this work for your scenario?
<script type="text/javascript">
function somescript() {
document.getElementById('ololo').click();//fake a click on the link
}
</script>