how to use datePicker() plugin in jquery - javascript

In reference to the site "
http://www.kelvinluck.com/assets/jquery/datePicker/v2/demo/datePickerClickInput.html
", i used the datePicker() plugin of jquery. But its not working for me!!
I've updated my codings in
http://jsfiddle.net/9L7kE/7/
. Kindly help!!!. Thanks in advance

in js fiddle you have:
$(document).ready(function(){
$(function() {
$( "#date_picker" ).datePicker({clickInput:true});
});
});
​
$(function_to_tun) is the same as $(document).ready(function_to_tun)
adding a onready event after the event was fired will not not fire it again so you just need to use only one of the 2
$(document).ready(function(){
$( "#date_picker" ).datePicker({clickInput:true});
});
or
$(function() {
$( "#date_picker" ).datePicker({clickInput:true});
});
and also don't forget to add the librarys

Use this one. It's very easy to use.
http://keith-wood.name/datepick.html

Related

How to trigger Bootstrap fileinput change event?

I am using fileinput control managed by this js in my project. I want to validate if fileinput has file or not. For that, I am trying to trigger change event of fileinput control. But change event is not being triggered. This is my fiddle. Below is my change event to catch changes done to Fileinput.
$(document).ready(function() {
$(document).on('change', '#testImageInput', function () {
alert($(this).val());
});
});
Thank you for suggestions and answers.
here is the updated fiddle link check it
https://jsfiddle.net/b7059pk1/2/
$('#testImageInput').change(function () {
alert($(this).val())
});
It depends on the jQuery version, try this:
<script type="text/javascript">
$(function() {
$("#testImageInput").change(function (){
alert($(this).val());
});
});
</script>
It is always better to target element directly instead of whole document.
Updated fiddle --
https://jsfiddle.net/b7059pk1/1/
$(document).ready(function() {
$("#testImageInput").on('change', function () {
alert($(this).val());
});
});
P.S : I have used jquery 3.2.1 in the updated fiddle

Android Browser .click() not working javascript

I'm trying to click a button programmatically with javascript. Using the following code works fine:
var pbutton= document.getElementById('psubmit');
pbutton.click();
but when I try it on my mobile browser it wont fire the click event. Is their another way to do this for Mobile Browsers?
You will need to implement jquery for this or use a simple javascript.
You can add following code to implement through pure javascript
document.getElementById('psubmit').click();
You can check jsfiddle here
or for jquery you can implement by
$(document).ready(function(){
$('#btn').click(function(){ alert("JQuery Running!");});
$( "#btn" ).trigger( "click" );
});
You can check jsfiddle here
For both this to work you need to have id property defined. And to implement jquery you will need to add jquery file in you code. Hope this helps. Cheers :)
You could use jQuery
$(function(){
$('#psubmit').click()
});
Try using jquery:
$('psubmit').live("click",function(){
//Function code here
});

jQuery radio button on change does not work

I have seen this question and I have seen this fiddle.
My Fiddle here. It's a simple question. Why doesn't it work?
#html
<input checked="checked" id="article_format_html" name="article[format]" type="radio" value="html">Some meaningful value
<input id="article_format_text" name="article[format]" type="radio" value="text">Another Value
#js
$("input[name='article[format]']:radio").change(alert('hola'));
Edit:
On popular demand I did this:
.change(function(){alert('hola')});
Fiddle.
Result: Doesn't work.
Edit 2: (Why I had the problem)
So, JS-Fiddle wraps your js code in the head of the iframe that is your Result section. For jQuery selectors (or any js that manipulates the DOM) to work properly, it has to be executed *after* the DOM element has been rendered. Hence, wrapping your code on ready and/or just before body closes, is the safest way to ensure that your query selectors don't return undefined.
Use a callback or anonymous function block
You are using jQuery 1.11 (better to use .on syntax)
Demo: http://jsfiddle.net/abhitalks/e5ByP/2/
$("input[name='article[format]']:radio").on("change", function() {
alert('hola');
});
You code is not working because you are not wrapping your jQuery inside document.ready function:
$(document).ready(function()
{
$("input[name='article[format]']:radio").change(function()
{
alert('hola')
});
});
FIDDLE DEMO
The code with .on() should be:
$(document).on('change',"input[name='article[format]']:radio",function(){alert('hola')});
Working fiddle:
http://jsfiddle.net/e5ByP/10/
Wrap that in a anonymous function and DOM ready:
$(function () {
$("input[name='article[format]']:radio").change(function () {
alert('hola')
});
});
Demo:http://jsfiddle.net/e5ByP/6/
That is because you have incorrect change handler syntax. also you need to wrap the code in DOM ready :
$("input[name='article[format]']:radio").change(function(){
alert('hola')
});
Demo
In your code you not wrap handler with .change()
handler is A function to execute each time the event is triggered.
Type: Function( Event eventObject )
Try This :
$("input[name='article[format]']:radio").change(function(){
alert('hola')
});
Working Example
Please use anonymous callback function in change event
$("input[name='article[format]']:radio").change(function(){
alert('hola');
});
Put the code in document ready and try like this. Please see the syntax too
$(function () {
$("input[name='article[format]']:radio").change(function () {
alert('hola')
});
});
put that in side document raedy
like this:
$(document).ready(function () {
$("input[name='article[format]']:radio").change(function(){
alert('hola')
});
});
demo
Use the below code
Always use DOM manipulation and events only after DOM gets fully loaded
$(document).ready(function(){
$("input[name='article[format]']:radio").change(function(){alert('hola')});
});
You forgot the $(document).ready() and also u forgot to write function() in change()
$(document).ready(function(){
$("input[name='article[format]']:radio").change(function(){
alert('hola')
});
});

Bind a click to a jquery plugin

I have followed most of the beginners tutorials, but now I am trying to do a clean jquery plugin. My goal (right now) is to show an alert when a user click on a link (using a plugin).
my code to call the plugin is :
//custom.js
$(document).ready(function(){
$("a").click(function(event){
alert("TEST1");
myPlugin();
event.preventDefault();
});
});
and my plugin code is :
//myPlugin.jquery.js
(function( $ ){
$.fn.myPlugin = function() {
alert("TEST2");
};
})( jQuery );
TEST1 is showed but not TEST2 !
What's wrong ?
Thank you very much for your help!
Because you are using $.fn.myPlugin that means you need to use $(this).myPlugin() to call the plugin.
$(document).ready(function(){
$("a").click(function(event){
alert("TEST1");
$(this).myPlugin();
event.preventDefault();
});
});
http://jsfiddle.net/3nf5b/
Your plugin extends the jQuery object, so to invoke it you need a jQuery object. Change your call from myPlugin(); to $(this).myPlugin();

Refresh conent with JQuery/AJAX after using a MVC partial view

Using the following JQuery/AJAX function I'm calling a partial view when an option is changed in a combobox named "ReportedIssue" that is also in the partial view. The is named "tableContent".
<script type="text/javascript">
$(function() {
$('#ReportedIssue')
.change(function() {
var styleValue = $(this).val();
$('#tableContent').load(
'/CurReport/TableResults',
{ style: styleValue }
);
})
.change();
});
</script>
My problem is that after the jump to the partial view I lose the link to the javascript. I think I'm supposed to use the JQuery ".live()" but I'm unsure.
In short, I want to re-establish the link between my JavaScript and my combobox and after the inclusion of the partial view's HTML.
I hope I'm being clear enough,
Aaron
This answer is deprecated, see Mike's answer
As of jQuery 1.4 you can use the live handler with the change event. Simply change your code to work with it. If you are stuck with an earlier version of jQuery, you need to reapply the handler in the AJAX callback.
$(function() {
$('#ReportedIssue').live('change', function() {
var styleValue = $(this).val();
$('#tableContent').load(
'/CurReport/TableResults',
{ style: styleValue }
);
})
});
Since .live() is now deprecated. Use .on(). Or, in my success callback, I simply did a .load()
$('#container').load('index.php', '#right'); Worked like a charm.
Yes you should use live():
$('#ReportedIssue').live('click', function() {

Categories

Resources