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);
}
Related
I have an $.each block that iterates over all the select elements on a form, and invokes a $.post for each one.
var deferredObjects = [];
$('#form').find('select').each(
function(i, o) {
var jqxhr = $.post("data.json", {} ));
deferredObjects.push( jqxhr) ;
}
);
I'd like to have an event-handler fire when all the post operations are complete. I'm collecting all the deferred objects returned from the post method into an array. I was hoping to use something like
$.when( ... ).then( ... );
but I can't see how to fit this construct into my scenario?
You can use promise() (it will execute once all collective actions are done) available in jquery. For example, you can see
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>promise demo</title>
<style>
div {
height: 50px;
width: 50px;
float: left;
margin-right: 10px;
display: none;
background-color: #090;
}
</style>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<button>Go</button>
<p>Ready...</p>
<div></div>
<div></div>
<div></div>
<div></div>
<script>
$( "button" ).on( "click", function() {
$( "p" ).append( "Started..." );
$( "div" ).each(function( i ) {
$( this ).fadeIn().fadeOut( 1000 * ( i + 1 ) );
});
$( "div" ).promise().done(function() {
$( "p" ).append( " Finished! " );
});
});
</script>
</body>
</html>
https://jsfiddle.net/mzo5Lhbk/
Also, read these links if you want to use when()
https://api.jquery.com/jquery.when/
Hope it will help you!!!
You can use the spread syntax like this.
$.when(...deferredObjects)
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>
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
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);