The following jquery code works just fine on the latest version of Chrome,
On focus event of the input field it should trigger the autocompletion of the field itself using ajax to retrieve the suggestions but it does not work at all on IE10
The console is empty...
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script>
$(function() {
function log( message ) {
$( "<div>" ).text( message ).prependTo( "#log" );
$( "#log" ).scrollTop( 0 );
}
$( "#myBut").click(function(){
if($('#city').val() == "")
return;
log("selected: " + $("#city").val() );
$('#city').val("");
$('#city').blur("");
});
$( "#city" ).autocomplete({
source: function( request, response ) {
$.ajax({
url: "http://localhost:8085/TestJsonArrayAJAX/MyServlet",
dataType: "json",
data: {
q: request.term
},
success: function( data ) {
alert("ciao");
response( data );
}
});
},
minLength: 0,
select: function( event, ui )
{
alert('ccc');
},
open: function() {
$( this ).removeClass( "ui-corner-all" ).addClass( "ui-corner-top" );
},
close: function() {
$( this ).removeClass( "ui-corner-top" ).addClass( "ui-corner-all" );
}}).focus(function() { alert("c");
//Use the below line instead of triggering keydown
$(this).data("uiAutocomplete").search($(this).val()) });
});
</script>
</head>
<body>
<div class="ui-widget">
<label for="city">Your city: </label>
<input id="city">
Powered by geonames.org
</div>
<button name="subject" id="myBut" value="HTML">HTML</button>
<div class="ui-widget" style="margin-top:2em; font-family:Arial">
Result:
<div id="log" style="height: 200px; width: 300px; overflow: auto;" class="ui-widget-content"></div>
</div>
</body>
</html>
There are known issues with scrollTop on IE. Might this help? document.body.scrollTop is always 0 in IE even when scrolling
Related
i'm creating a project to change color, contrast ... of a picture. I use filtrr plugin. I want to use slider to choose value of effect
It works well but it's not fast enough.
You can download plugin here to execute code : https://github.com/alexmic/filtrr/tree/master/filtrr2
Code :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css">
<style>
#slider {
width: 200px!important;
}
</style>
</head>
<body>
<div id="slider"></div>
<img id="img" src="./o8rvhb.jpg">
<canvas class="main" width="1024" height="512"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script>
<script src="./filtrr2.js"></script>
<script src="./util.js"></script>
<script src="./effects.js"></script>
<script src="./layers.js"></script>
<script src="./events.js"></script>
<script type="text/javascript">
$( document ).ready( function() {
var i = 0;
$( "#slider" ).slider({
max: 100,
min: 0,
orientation: "horizontal",
slide: function(t, e) {
$( "img" ).hide();
Filtrr2.fx( 'color', function( value ) {
value = Filtrr2.Util.clamp(value, -100, 100);
this.process(function(rgba) {
rgba.r += value;
});
});
var canvas = document.createElement( "canvas" );
canvas.setAttribute( "id", "test" + i );
canvas.setAttribute( "width", 1024 );
canvas.setAttribute( "height", 512 );
var canvasCtx = canvas.getContext( "2d" );
canvasCtx.drawImage( $( "img" )[0], 0, 0 );
$( "body" ).append( canvas );
var newfilter = Filtrr2( "#test" + i, function() {
this.contrast( e.value ).color( e.value ).render();
} )
$( ".main" )[0].getContext( "2d" ).drawImage( $( "#test" + i )[0] , 0, 0 )
$( "#test" + i ).remove();
i++;
},
stop: function(t, e) {
}
});
} )
</script>
</body>
</html>
I am testing my jquery skills and want to use the slider found in the jquery ui over here. I have tried implementing this on my code but the slider does not appear. All that appears is 'Rpice Range: $75- $300'. I have tried making sure I have the right jquery version. This is my code. Nothing too complex, just my trying to test out the slider:
<!DOCTYPE html>
<html lang="en">
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="jquery-ui.js"></script>
<link rel="stylesheet" href="jquery-ui.js">
<style>
div{
padding-right: 30%;
padding-left: 30%;
}
</style>
<script>
$(document).ready(function(){
$( "#slider-range" ).slider({
range: true,
min: 0,
max: 500,
values: [ 75, 300 ],
slide: function( event, ui ) {
$( "#amount" ).val( "$" + ui.values[ 0 ] + " - $" + ui.values[ 1 ] );
}
});
$( "#amount" ).val( "$" + $( "#slider-range" ).slider( "values", 0 ) +
" - $" + $( "#slider-range" ).slider( "values", 1 ) );
});
</script>
</head>
<body>
<div> <h1>Resorts 'R' Us</h1>
<p>
<label for="amount">Price range:</label>
<input type="text" id="amount" readonly style="border:0; color:#f6931f; font-weight:bold;">
</p>
<div id="slider-range"></div>
</div>
</body>
</html>
I looked at the console window when my chrome browser was running it but there was no error. So why is this not displaying? Also another question, would I be able to use bootstrap with all the jquery uis?
I've had problems for retriving the data with Jquery plugin autocomplete. this is my example:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Autocomplete - Remote JSONP datasource</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<!-- <link rel="stylesheet" href="/resources/demos/style.css"> -->
<style>
.ui-autocomplete-loading {
background: white url("images/ui-anim_basic_16x16.gif") right center no-repeat;
}
#city { width: 25em; }
</style>
<script>
$(function() {
function log( message ) {
$( "<div>" ).text( message ).prependTo( "#log" );
$( "#log" ).scrollTop( 0 );
}
$( "#city" ).autocomplete({
source: function( request, response ) {
//$.getJSON('/http://search-profuturo-iiwjjl6diqb7gluv2inqunahea.us-west-2.cloudsearch.amazonaws.com/2013-01-01/search?', { q: request.term }, function(data){ response(data); });
$.ajax({
url: "http://search-DOMAIN-iiwjjl6diqb7gluv2inqunahea.us-west-2.cloudsearch.amazonaws.com/2013-01-01/search?",
dataType: "jsonp",
data: {
q: request.term
},
success: function( data ) {
response( data );
}
});
},
minLength: 3,
select: function( event, ui ) {
log( ui.item ?
"Selected: " + ui.item.label :
"Nothing selected, input was " + this.value);
},
open: function() {
$( this ).removeClass( "ui-corner-all" ).addClass( "ui-corner-top" );
},
close: function() {
$( this ).removeClass( "ui-corner-top" ).addClass( "ui-corner-all" );
}
});
});
</script>
</head>
<body>
<div class="ui-widget">
<label for="city">Your city: </label>
<input id="city">
</div>
<div class="ui-widget" style="margin-top:2em; font-family:Arial">
Result:
<div id="log" style="height: 200px; width: 300px; overflow: auto;" class="ui-widget-content"></div>
</div>
</body>
</html>
And this is the response:
http://search-DOMAIN-iiwjjl6diqb7gluv2inqunahea.us-west-2.cloudsearch.amazonaws.com/2013-01-01/search?&callback=jQuery11020041068303398787975_1421364823901&q=starwars&_=1421364823902
This appends all the string:
&callback=jQuery11020041068303398787975_1421364823901
That is the error, that string is not necesary.
I need the url in this way:
http://search-DOMAIN-iiwjjl6diqb7gluv2inqunahea.us-west-2.cloudsearch.amazonaws.com/2013-01-01/search?q=starwars
and I need a JSON response.
How can I do?
Try this
$.ajax({
url: 'http://search-DOMAIN-iiwjjl6diqb7gluv2inqunahea.us-west-2.cloudsearch.amazonaws.com/2013-01-01/search',
data: {
q: 'starwars'
}
jsonp : false,
jsonpCallback: 'jsonCallback',
cache: 'true',
dataType: 'jsonp'
});
function jsonCallback(data) {
console.log(data);
}
I was working on JQuery UI Date Picker.
before it was working great but now the calendar won't show up.
any ideas?
here's my code.
http://pastebin.com/L4j2TmyY
my code is too long so i placed it in pastebin.
I follow this exactly but calendar is not showing
http://jqueryui.com/datepicker/
I think you should download all the JavaScript files into your project folder and call the JavaScript files.
Example :
Calling JavaScript from external URL (Not working)
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>undelegate demo</title>
<style>
button {
margin: 5px;
}
button#theone {
color: red;
background: yellow;
}
</style>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<button id="theone">Does nothing...</button>
<button id="bind">Bind Click</button>
<button id="unbind">Unbind Click</button>
<div style="display:none;">Click!</div>
<script>
function aClick() {
$( "div" ).show().fadeOut( "slow" );
}
$( "#bind" ).click(function() {
$( "body" )
.delegate( "#theone", "click", aClick )
.find( "#theone" ).text( "Can Click!" );
});
$( "#unbind" ).click(function() {
$( "body" )
.undelegate( "#theone", "click", aClick )
.find( "#theone" ).text( "Does nothing..." );
});
</script>
</body>
</html>
Calling from project Folder(Working fine)
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>undelegate demo</title>
<style>
button {
margin: 5px;
}
button#theone {
color: red;
background: yellow;
}
</style>
<script src="jQuery.js"></script>
</head>
<body>
<button id="theone">Does nothing...</button>
<button id="bind">Bind Click</button>
<button id="unbind">Unbind Click</button>
<div style="display:none;">Click!</div>
<script>
function aClick() {
$( "div" ).show().fadeOut( "slow" );
}
$( "#bind" ).click(function() {
$( "body" )
.delegate( "#theone", "click", aClick )
.find( "#theone" ).text( "Can Click!" );
});
$( "#unbind" ).click(function() {
$( "body" )
.undelegate( "#theone", "click", aClick )
.find( "#theone" ).text( "Does nothing..." );
});
</script>
</body>
</html>
As i saw your pastebin you are loading two jQuery libraries, which is not recommended, although you can use it with jQuery.noConflict(). So the quick fix is this:
Remove this library:
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
#Kim Carlo
I continue with #Rohit Bandooni's answer.
As his answer, it should work correctly.
A pastebin cloned from your paste: http://pastebin.com/2yNiXy44
I did some changes:
- comment yours 2 "die"
- change the method name (search for text "CHANGE_BY_ME" in pastebin)
I run on my EasyPHP, it works well: http://imgur.com/kfmLkLY,lHsEUyv (2 images for 2 controls)
I found only 2 date controls on your page.
I'm looking at the jQuery API, and they have this example:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>fadeOut demo</title>
<style>
span {
cursor: pointer;
}
span.hilite {
background: yellow;
}
div {
display: inline;
color: red;
}
</style>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<h3>Find the modifiers - <div></div></h3>
<p>
If you <span>really</span> want to go outside
<span>in the cold</span> then make sure to wear
your <span>warm</span> jacket given to you by
your <span>favorite</span> teacher.
</p>
<script>
$( "span" ).click(function() {
$( this ).fadeOut( 1000, function() {
$( "div" ).text( "'" + $( this ).text() + "' has faded!" );
$( this ).remove();
});
});
$( "span" ).hover(function() {
$( this ).addClass( "hilite" );
}, function() {
$( this ).removeClass( "hilite" );
});
</script>
</body>
</html>
This is similar to my code. Is there a way to make the remaining paragraph slide to the left when the phrase is removed, to make that transition smoother?
I think you will have to animate the p tag. It's the parent of what you have clicked on, so something like this should work...
$( this ).remove().parent('p').animate({
'margin-left' : '-500px'
}, 300);