I am trying to program what should be an easy concept: a webpage with a form (two textboxes) and when the form is submitted if the two textboxes do not have the same content, then an alert pops up.
I have the following code:
<!DOCTYPE html>
<html>
<head>
<title>Examples of using jQuery Alerts</title>
<link rel="stylesheet" type="text/css" href="jquery.alerts.css" />
<script src="jquery.js" type="text/javascript"></script>
<script src="jquery-ui.js"></script>
<script src="jquery.alerts.js" type="text/javascript"></script>
<script src="jquery.ui.draggable.js"></script>
<script type="text/javascript">
$(document).ready( function() {
$('#myform').submit( function() {
var x = $('#mytext').val();
var y = $('#mytext2').val();
if ( x!=y) {
jAlert('Values do not match','Info!');
return false;
}
});
});
</script>
</head>
<body>
<form name="myform" id="myform" action="#">
<input type="text" id="mytext" />
<input type="text" id="mytext2" />
<input type="submit">
</form>
</body>
</html>
All file names are checked and they are correct, but I get nothing when I submit the form (same as when I do $.jAlert()) - if jAlert is replaced by alert everything works, but I get the standard Javascript alert). Where am I am going wrong?
Regards,
George
I have tested your code. The problem is in your jquery.alerts.js. Its using '$.browser' in 2 or 3 places inside the plugin.
The $.browser method has been removed as of jQuery 1.9.
jQuery.browser() removed
The jQuery.browser() method has been deprecated since jQuery 1.3 and is removed in 1.9. If needed, it is available as part of the jQuery Migrate plugin. We recommend using feature detection with a library such as Modernizr.
— jQuery Core 1.9 Upgrade Guide.
As stated in the Upgrade Guide you can try using the jQuery Migrate plugin to restore this functionality and let jQuery Tools work.
You have remove that from the plugin to work this otherwise you need to change the plugin or use the jquery version below Jquery 1.9
Related
Quick background:
I got a project that some developer worked on a couple of years ago and his code is a nightmare, let alone that almost all the software is outdated. The JQuery in the project is still 1.5.2 but I was able to work around that using the non-conflict option of JQuery.
However, I still can't seem to make the change() function work properly - it fires when the page is being loaded. Furthermore, for some strange reason, the On() function doesn't work either.
Here's the code (below the body):
jQuery_3_2_1(document).ready(function(){
jQuery_3_2_1("input[id^=DepartureDay]").on('change',alert('dd'));
And here's the non-conflict function (if it's relevant):
<script type="text/javascript">
var jQuery_3_2_1 = $.noConflict(true);
</script>
I don't know if it's relevant, but wired thing about the code is that the previous programmer decided load all the HTML using JS strings. Another thing that I should note is that I'm trying to detect a change in the value of a uikit datepicker.
Thank you for your help!
I add a fiddle:
https://jsfiddle.net/vzeuhohm/1/#&togetherjs=Sietj3k5oM
Another edit:
https://jsfiddle.net/vzeuhohm/2/
Another edit:
I attach the full code in the hope that someone would be able to understand what is wrong with it -
<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="uikit.docs.min.css" type="text/css">
<script language="javascript" src="https://getuikit.com/v2/vendor/jquery.js"></script>
<script language="javascript" src="https://getuikit.com/v2/docs/js/uikit.min.js"></script>
<script language="javascript" src="https://getuikit.com/v2/src/js/components/datepicker.js"></script>
<link href="example160/css/jquery.autocomplete.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="example160/js/jquery-1.5.2.min.js"></script>
<script type="text/javascript" src="example160/js/jquery.autocomplete.js"></script>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.slim.js"></script>
<script type="text/javascript">
var jQuery_3_2_1 = $.noConflict(true);
</script>
<script type="text/javascript">
jQuery_3_2_1(document).ready(function(){
jQuery_3_2_1("[id^=DepartureDay]").ready(function(){
jQuery_3_2_1("[id^=DepartureDay]").on('input',function(e){
alert('ff');
});
});
});
</script>
</head>
<body>
<form method="post">
<input type="text" name="DepartureDay1" id="DepartureDay1" data-uk-datepicker="{format:'DD.MM.YYYY'}" placeholder="mm/dd/yyyy" />
</form>
<div>TODO write content</div>
</body>
</html>
You're trying to use the result of calling alert('dd') as the change handler.
You probably want to wrap the alert in a function, and pass that function as the handler instead:
jQuery_3_2_1("input[id^=DepartureDay]").on("change", function() {
alert("dd");
});
Instead of using $(document).ready(), try using
$(window).on('load', function() {
$("input[id^=DepartureDay]").on('change',alert('dd');
});
EDIT
var jQuery_3_2_1 = $.noConflict(true);
jQuery_3_2_1(document).ready(function(){
jQuery_3_2_1('[id^=DepartureDay]').on('input', function(){alert('dd');});
});
Instead of .on('change'..., use .on('input'...).
You also have to say function(){alert('dd');} instead of just alert('dd').
try following code
textbox change event doesn't fire until textbox loses focus.
that's why i am posting both example
jQuery_3_2_1(document).ready(function(){
jQuery_3_2_1("input[id^='DepartureDay']").on("change", function() {
alert("your change event is working !!!");
});
});
jQuery_3_2_1("input[id^='DepartureDay2']").on('change keyup paste', function() {
console.log('your change/keyup event is working !!!');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js">
</script>
<script type="text/javascript">
var jQuery_3_2_1 = $.noConflict(true);
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form method="post">
<input type="text" name="DepartureDay" id="DepartureDay" />
<input type="text" name="DepartureDay2" id="DepartureDay2" />
</form>
I need build code such : http://fiddle.jshell.net/bwKZt/152/
but my code dosen't work ! I am a beginner. Please help me.
index.php:
<!DOCTYPE html><html>
<head>
<script>
$("#label").bind("keyup", changed).bind("change", changed);
function changed() {
$("#url").val(this.value);
}
</script>
</head>
<body>
<input type="text" id="label" />
<input type="text" id="url" readonly />
</body>
</html>
Some of the JavaScript here isn't native JavaScript , but is using a plugin called jQuery that makes searching and manipulating HTML elements easier.
When you see $(), that's the jQuery way of finding elements. But it won't work because you don't have jQuery referenced at all.
If you don't want to use jQuery, you can find elements with something like document.getElementById('label').
But lots of people use jQuery to make referencing page elements short and sweet, as with $('#label').
Try to reference jQuery first, like:
<!DOCTYPE html><html>
<head>
<!-- The below line references an externally hosted copy of jQuery 2.2.4 -->
<script type="text/javascript" src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script>
// The below chunk is telling it to bind to the keyup event only AFTER the document has fully loaded.
// Sometimes when your binding code is executed, the elements you wish to bind to aren't loaded yet.
$(document).ready(function(){
$("#label").bind("keyup", changed).bind("change", changed);
});
function changed() {
$("#url").val(this.value);
}
</script>
</head>
<body>
<input type="text" id="label" />
<input type="text" id="url" readonly />
</body>
</html>
The first problem is because you haven't include jquery with a script tag to solve that add this code in the head of you html file if you have the Internet connection to load Jquery from CDN
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script>
or you can download Jquery file from Jquery site and you will have it locally
after that you must execute this code after the executing the jquery ready function
$(document).ready(function(){
$("#label").bind("keyup", changed).bind("change", changed);
function changed() {
$("#url").val(this.value);
}
})
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"/>
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>
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.