We Keep Coding

How to apply Jquery to textbox, CssClass instead of ID in Jquery,Bootstrap

I am using one JQuery plugin which is giving me Calendar with Time selection on click of that textbox this plugin very flexible to use.
below is the code which I am referring to use this plugin.
<link href="DateTimePicker/jquery.datetimepicker.css" rel="stylesheet" type="text/css" />
<script src="DateTimePicker/jquery.js" type="text/javascript"></script>
<script src="DateTimePicker/jquery.datetimepicker.full.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#datetimepicker_mask').datetimepicker({
mask: '9999/19/39 29:59'
});
});
</script>
<h3>Mask DateTimePicker</h3>
<input type="text" value="" id="datetimepicker_mask"/><br><br>
Above code works fine for me for single Textbox.
but I have to use this plugin for more then one textbox so this I can use only if this plugin is taking by Class instaed of Id.
so I am not getting what change I have to do in the Jquery to achieve the task.
there are so many Jquery & Css which is dependent on this.
Can anyone help me for this.

JQuery's selectors are very similar to CSS selectors. So you can use .class to select by class.
In your example you would change your selector to
$('.datetimepicker_mask')
And use a class on your input instead of id
<input type="text" value="" class="datetimepicker_mask"/>

JQuery Autocomplete not working within current code

I am using autocomplete with mysql to look up possible matches from a database...
It works if I empty the page out completely... but doesn't work once I add my page content...
I am getting no errors in the console either..
This is where I add the JS libraries
<script src="templates/bower_components/jquery-1.6.2.js"></script>
<script src="templates/bower_components/ui/jquery.ui.core.js"></script>
<script src="templates/bower_components/ui/jquery.ui.widget.js"></script>
<script src="templates/bower_components/ui/jquery.ui.position.js"></script>
<script src="templates/bower_components/ui/jquery.ui.autocomplete.js"></script>
<script src="templates/bower_components/modernizr/modernizr.js"></script>
and this is my autocomplete function...
<script type="text/javascript">
$(document).ready(function() {
$("#tags").autocomplete({
source: "templates/search2.php?field=sire",
minLength: 5
});
});
</script>
And this is my text box
<input type="text" class="input tiny search-term" name="proposeddam" id = "tags">
I have added an alert box within the function but it never seems to be called..
Any suggestions?

AngularJS conflicts with jQuery Mobile

I run this simple script that comes from Angular documentation, and it's working fine:
http://plnkr.co/edit/6uIlw6HGVVpT0amF2vhj
If I add jQuery and jQuery Mobile, then the example doesn't work anymore. The radiobuttons are not clickable.
Example: If I add these two scripts and the following CSS in the above example:
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquerymobile/1.4.3/jquery.mobile.min.js"></script>
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jquerymobile/1.4.3/jquery.mobile.min.css" />
If I put them before the include of angular.js, then the radiobutton are clickable, but the display of the choice ("You choose...") doesn't work anymore.
Does somebody knows why is it not working?

Use this Sequence. dont know the reason but worked in plunkr.
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0-rc.2/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquerymobile/1.4.3/jquery.mobile.min.js"></script>

populating first field in form with cursor

I'm designing a series of forms. Is there a way I can mark a field to be populated by the browsers cursor (just like this pages loads with the cursor already in the title field above).
Thanks
Giles

Use focus() function like this in Javascript. Put this code at the end of your HTML code, just before the </body> tag:
<script language="javascript" type="text/javascript">
document.getElementById("textboxid").focus();
</script>
Replace the textboxid with the ID of the <input> text box you are using in your form.

You can use Javascript to set your desired input focus:
Using JavaScript:
<script language="javascript" type="text/javascript">
document.getElementById("xtpo_1").focus();
</script>
Using a JavaScript Library like Jquery:
<script language="javascript" type="text/javascript">
$(document).ready(function() {
$("#xtpo_1").focus();
});
</script>

Even better, write an function
function autoFocus(x){
document.getElementById(x).focus();
}
and put it in a separate javascript file called basic_functions.js or something.
Load that file at the top of your page in the header like this
<script type="text/javascript" src="basic_functions.js"></script>
In your body tag, call the function onload.
<body onload="focus('first_name')" >
Then create you input:
<input type='text' value='' name='first_name' id='first_name' />
That way you keep javascript functions out of your page and you can reuse the function on other pages. you can then put other basic functions like this in that file and include it in all pages where it is needed

In a HTML5 page, for browser supporting HTML5, you can do:
<input name="lorem" autofocus>
Vanilla Javascript:
<input id="lorem" name="lorem">
...
<script language="javascript" type="text/javascript">
document.getElementById("lorem").focus();
</script>
</body>
</html>
jQuery:
jQuery(document).ready(function($){
$('#email').focus();
});

Also you can do it in jQuery style and paste js-code anywhere:
HTML:
<input type="text" id="name"><br />
<input type="text" id="email">
Javascript:
jQuery(document).ready(function($){
$('#email').focus();
});
Check it online: http://www.jsfiddle.net/4d5JG/

Why is jqueryUI datepicker throwing an error?

I am trying out jqueryUI, but firebug catches the following error on this script:
$(function(){$("#date").datepicker()});
The firebug error reads:
$("#date").datepicker is not a function
On my html, the "date" id looks like this:
<input type="text" name="date" id="date" >
NB: I have used the correct JqueryUI css/js scripts on the section
Nothing is executing...

jQuery documentation says you can call the datepicker by this command:
$("#datepicker").datepicker();
If you click the 'view source' button on the documentation page you can see that they've wrapped it into the ready function:
$(document).ready(function(){
$("#datepicker").datepicker();
});
EDIT: It should work with INPUT (thanks for pointing this out Steerpike). This is the test I've written and it works, try it yourself:
<html>
<head>
<link type="text/css" href="http://jqueryui.com/latest/themes/base/ui.all.css" rel="stylesheet" />
<script type="text/javascript" src="http://jqueryui.com/latest/jquery-1.3.2.js"></script>
<script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.core.js"></script>
<script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.datepicker.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#datepicker").datepicker();
});
</script>
</head>
<body>
<input type="text" id="datepicker" value="this is a test">
</body>
</html>

You're almost certainly not loading the datepicker plugin properly. Please supply us the code you're using to include the javascript files.
If you keep having problems, load the jquery and the UI from the google api.
<link type="text/css" href="http://jqueryui.com/latest/themes/base/ui.all.css" rel="stylesheet" />
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("jquery", "1.3.2");
google.load("jqueryui", "1.7.0");
</script>

for me it was just case of making sure the jquery ui was the last one in the list of all the js includes.

$(document).ready(function(){
// Your code here
});
make sure your function is inside the .ready main function.

It's an old post but I got here when looking for a solution so people still read it ;) I have or rather had the same problem. In my case it turned out that I was attaching js in html in wrong way (notice in what way I was ending script tag)
WRONG: <script type="text/javascript" src="/fbo/js/jquery-ui-1.8.14.custom.min.js"/>
GOOD: <script type="text/javascript" src="/fbo/js/jquery-ui-1.8.14.custom.min.js"></script>
When I was doing it in the wrong way I had the same error.

You are probably loading prototype.js or another library that uses $ as an alias.
Try to replace $ with jQuery.