I seem to have this working except for the fact that once the link is clicked, the datepicker opens, then I select a date and all is good and well, then once I try to click the link again, the date picker does not open again.
What am I doing wrong?
<html>
<head>
<!-- LOAD JQUERY LIBRARY: -->
<link href="jq/jquery-ui.css" type="text/css" rel="stylesheet" />
<script src="jq/jquery.min.js" type="text/javascript"> </script>
<script src="jq/jquery-ui.min.js" type="text/javascript"> </script>
<script type="text/javascript">
function test() {
var datePickerValue = null;
$("#d1").datepicker().datepicker("show").change(function ()
{
$('#d1').datepicker({onSelect: datePickerValue = $(this).val() }).hide();
alert("You picked: " + datePickerValue);
});
}
</script>
</head>
<body>
<div id="d1"></div>
test
</body>
</html>
Just add the show method before the datepicker() as like below:
$("#d1").show().unbind().datepicker().datepicker("show").change(function () {
$('#d1').datepicker({onSelect: datePickerValue = $(this).val() }).hide();
alert("You picked: " + datePickerValue);
});
This will fix your issue.
function test() {
$('#d1').datepicker({onSelect: function(){alert("You picked: " + $(this).val())})} );
}
Sorry if i am completely off the mark here but you might have more success if you use, jquery .on - http://api.jquery.com/on/
so add a id or class to your link:
<a class="clicky" href="#">test</a>
then call your function like this:
$("body").on("click", ".clicky", test);
I think this will solve your issue but I may be wrong
Related
Special thanks to Raúl Monge for posting a fully working code for me.
My problem was getting JSON data from a file.json and using this data to autocomplete search on it with JavaScript. The code that finaly got it working for me is the following:
<script>
$(document).ready(function(){
var arrayAutocomplete = new Array();
$.getJSON('json/telefoonnummers.json', function(json) {
$.each(json.personen.persoon,function(index, value){
arrayAutocomplete[index] = new Array();
arrayAutocomplete[index]['label'] = value.naam+" - "+value.telefoonnummer;
});
$( "#search" ).autocomplete({source: arrayAutocomplete});
});
});
This is the html:
<body>
<div id="content">
<input type="text" id="search" />
</div>
And this has to be included in the head:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css"/>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
Thanks stackoverflow!
NEW EDIT CODE WORKING:
<script>
$(document).ready(function(){
var arrayAutocomplete = new Array();
$.getJSON('data.json', function(json) {
$.each(json.persons.person,function(index, value){
arrayAutocomplete[index] = new Array();
arrayAutocomplete[index]['label'] = value.name;
arrayAutocomplete[index]['value'] = value.phoneno;
});
$( "#search" ).autocomplete({source: arrayAutocomplete});
});
});
</script>
Add this in head
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css"/>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
This is the html
<body>
<div id="content">
<input type="text" id="search" />
</div>
</body>
why not use
var data = [
"Aragorn",
"Arwen",
....
];
since all of those data are labels?
There you go
A working example with the data structure you have.
Just initialize the autocomplete once the JSON is loaded & the data is formatted.
$( "#search" ).autocomplete({source: availableTags});
Your document ready is within your function.
Try to write your function outside of your document ready.
Then write your document ready to call your function.
Some something like this:
function loadJson() {
//alert("Whoohoo, you called the loadJson function!"); //uncomment for testing
var mycontainer = [];
$.getJSON( "data.json" , function(data) {
//alert(data) //uncomment for testing
$.each( data, function( key, val ) {
//alert("key: "+key+" | val: "+val); //uncomment for testing
array.push([key , val]);
});
});
return mycontainer;
}
$(document).ready(function(){
//alert("Boojah! jQuery library loaded!"); //uncomment for testing
var content = loadJson();
dosomethingwitharray(content);
});
Hope this helps!
Also make sure you have jQuery included in your head ( <head> </head> ):
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
And add your javascript at the end of your body ( <body> </body> ).
To test if jquery does it's job try this:
<html>
<head>
<title>getting started with jquery</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
</head>
<body>
<h1>my page</h1>
<p>this paragraph contains some text.</p>
<!-- javascript at end -->
<script>
$(document).ready(function(){
//show a dialog, confirming when the document is loaded and jquery is used.
alert("boojah, jquery called the document ready function");
//do something with jquery, for example, modify the dom
$("p").append('<br /> i am able to modify the dom with the help of jquery and added this line, i am awesome.');
});
</script>
</body>
</html>
PS. Uncomment alerts for testing stuff, so you can test what happens. If you have space in your document i suggest using $.append to an div that log's all action's so you can see exactly what's going on because alert's in a loop like the .each are quite annoying! more about append: http://api.jquery.com/append/
It seems simple enough, but nothing I try is working. I have a jquery ui datepicker, I use val() to get the value of that input on button click(), then log it. The click event is working. I can log a string I write myself, but when I pass console.log() the variable that stores the datepicker value...nothing. I've tried using html() and text() instead of val(), still nothing
//JS
$(function(){
$("button").button();
$("#date").datepicker();
var date = $("#date").val();
$("button").click(function(){
// this logs
console.log("event working");
// but this logs nothing
console.log(date);
});//close click
});//closes function
//HTML
<!DOCTYPE html>
<html>
<head>
<script src="http://www.parsecdn.com/js/parse-1.2.8.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" href="http://myDomain/bn/lbStyle.css"/>
<script src="http://myDomain/index.js"></script>
<title>
Welcome to The Bringer Network
</title>
</head>
<body>
<form id="dialog">
<p>Date <input type="text" id="date"/></p>
<button>Submit</button>
</form>
</body>
</html>
You should declare date variable within click if you want to assign the value of input field. Go through code below. You actually initialized soon after the page is loaded whixh is not the correct way in your case.
$(function(){
$("button").button();
$("#date").datepicker();
$("button").click(function(e){
e.preventDefault();
var date = $("#date").val();// look this line. It should be inside.
console.log("event working");
console.log(date);
});//close click
});
I'm not sure what are you trying to do. But I think you should place this: var date = $("#date").val(); in your click event. Because your code assigns the .val() of the field when it's empty. That's why your var date is empty.
http://jsfiddle.net/FnGmS/ - Here is a working demo of this code:
$(function () {
$("button").button();
$("#date").datepicker();
$("button").click(function () {
var date = $("#date").val();
console.log("event working");
console.log(date);
});
});
I'm trying to reuse a function i made, but with any help yet.
Here is my index.html.
<html>
<head>
<script src="jquery-1.5.1.js")" type="text/javascript"></script>
<script src="JqueryScript.js")" type="text/javascript"></script>
<script type="text/javascript">
//MYLIBRARY.init(['#button1']);
execute(['#button1']);
execute(['#button2']);
</script>
</head>
<body>
<button type="button" id="button1">Click Me!</button>
<button type="button" id="button2">Click Me!</button>
</body>
</html>
And here is my script.
function execute (Args){
_args = Args;
$(function() {
$(_args[0]).click(function() {
alert("hello " + _args[0]);
return false;
});
});
}
The problem is always triggers the second alert windows (#button2). How can i make it work with both alert windows?
My guess is that you are wondering why both buttons alert the same output.
Because _args is global. Thus the second invokation will overwrite _args.
Use var to make it local:
var _args = Args;
Your code could still be improved (see #Town's answer), but this should get you started.
You also have errors in your HTML
<script src="jquery-1.5.1.js")" type="text/javascript"></script>
<!-- ^^ -->
<script src="JqueryScript.js")" type="text/javascript"></script>
<!-- ^^ -->
What exactly are you trying to do?
From what I can see, you could achieve the same functionality as what you have with simply:
$(function() {
$('button').click(function() {
alert("hello #" + this.id);
});
});
Example
Looks like C to me :)
You'd be better off with
<script type="text/javascript">
$(function () {
execute('#button1');
execute('#button2');
}
function execute(buttonId)
{
$(buttonId).click(function () { alert('Hello ' + this.id); });
}
</script>
I have a piece of code that is working fine in IE, but it doesn’t run in Firefox. I think the problem is that I have not been able to implement $('document').ready(function). The structure of my json is like [{"options":"smart_exp"},{"options":"user_intf"},{"options":"blahblah"}].
I will be very thankful if someone can see my code & help me in correctly implementing it. Here is my code:
<html><head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2
/jquery.min.js"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function() {
$.getJSON("http://127.0.0.1/conn_mysql.php", function (jsonData) {
$.each(jsonData, function (i, j) {
document.form1.fruits.options[i] = new Option(j.options);
});});
});
</script></head>
<body><form name="form1">
My favourite fruit is :
<select name="fruits" id="fruits" /></form></body>
</html>
Short version (suggested by meeger): don't use single quotes around document.
document is a variable that comes with JavaScript (at least in the browser context). Instead, try the following for the relevant line.
$(document).ready(function() {
You'll also want to take the onLoad attribute off of the body tag, else it will run twice.
Just run $(document).ready(function() {doStuff}). This will automatically run when the document is ready.
It's best practice, at least in my opinion, that you don't put any events in the html itself. This way you separate the structure of an html document from it's behavior. Instead attach events in the $(document).ready function.
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$.getJSON("http://localhost/conn_mysql.php", function (jsonData) {
var selectElem = $('#fruits');
for(var i = 0; i < jsonData.length; i++) {
selectElem.append($('<option>').html(jsonData[i].options));
}
});
});
</script>
</head>
<body>
<form name="form1">
My favourite fruit is :
<select name="fruits" id="fruits" />
</form>
</body>
</html>
EDIT:
I tested with the following and mocked the json object since I can't make that call myself.
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var jsonData = JSON.parse('[{"options":"smart_exp"},{"options":"user_intf"},{"options":"blahblah"}]');
var selectElem = $('#fruits');
for(var i = 0; i < jsonData.length; i++) {
selectElem.append($('<option>').html(jsonData[i].options));
}
});
</script>
</head>
<body>
<form name="form1">
My favourite fruit is :
<select name="fruits" id="fruits" />
</form>
</body>
</html>
Here it is in all its glory. The shorthand, awesome version:
UPDATED
<script type="text/javascript" language="javascript">
$(function() {
$.getJSON("http://localhost/conn_mysql.php", function (jsonData) {
var cacheFruits = $('#fruits'),
cacheOption = $(document.createElement('option'));
$.each(jsonData, function (i, j) {
cacheFruits.append(
cacheOption.clone().attr('value', j.options).html(j.options)
);
});
});
});
</script>
Of course, I don't know what your JSON structure is, so you may need to play around with the append section of the code.
There should be no reason why the above would not work.
You do not need quotes around document. Once the page has completely loaded, it will start executing whatever you have defined in ready()
$(document).ready(function() {
$(this).getJSON("http://localhost/conn_mysql.php", function (jsonData) {
$(this).each(jsonData, function (i, j) {
document.form1.fruits.options[i] = new Option(j.options);
});
});
});
Try this, your json data should be in this format:
[{'text':'sometext','value':'somevalue'},{'text':'sometext','value':'somevalue'}];
$(document).ready(function() {
$(this).getJSON("http://localhost/conn_mysql.php", function (jsonData) {
var options = [];
$.each(jsonData, function (i, j) {
options.push('<option value="' + j.value + '">' + j.text + '</option>');
});
$('#fruits').html( options.join(''));
});
});
Please note that there may be an encoding/escaping issues here.
Make sure that you escape the text properly from the server side.
htmlentities, htmlspecialchars can help you with that.
This should work in most browsers
I want to do display time-changing data on a web page. I use the JQuery framework. I use the following code as a test : display a different random number each second. It does not work. Why ? What is a correct, working way ?
<html>
<head>
<title>test</title>
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
function refreshRandomNumber() {
var lHtmlBlob = "<p> random = " + Math.random() + "</p>";
$('#random_number').html(lHtmlBlob);
}
setInterval(refreshRandomNumber(), 1000);
});
</script>
</head>
<body>
<div id="random_number"></div>
</body>
</html>
You need to pass setInterval just the function referenced by refreshRandomNumber and not the return value of that function what you do by using refreshRandomNumber(). So try this:
setInterval(refreshRandomNumber, 1000);
Small difference. instead of:
setInterval(refreshRandomNumber(), 1000);
use:
setInterval(refreshRandomNumber, 1000);
That passes the function rather than the function return value.