I'm looking to do a Play Scala project where I'll do especially drag & drop.
Is jQuery UI the best and the simplest way to do that? and How could one do this? could someone give me some examples or pointers?
In Play 1.0 there is a good example on how to use jQuery UI (http://www.playframework.com/modules/jqueryui-1.0/home) but I don't found examples or documentation on Play2.0 Scala !
first of all you need to define an endpoint for your data in the controller.
Simething like this:
def autocompleteSearch(a: String) = Action {
request =>
val data = List("apple", "apple iphone", "apple ipad", "microsoft windows", "microsot office");
val filteredData = data.filter(_.startsWith(a))
Ok(Json.toJson(filteredData))
}
Then you need to add this endpoint to your routes:
GET /some-ajax controllers.Application.autocompleteSearch
Then in your .scala.html file you can write a script that will do a get you you, example:
var updateTime = function() {
$.get("#routes.Application.timeUpdate()", function(data) {
display.html(data)
})
return false
}
When you have the var you just pass it to the jQueryUI.
My examples are copied from different things and they don't really fit together :) but I hope you can grasp the general idea.
Sorry the answer is not more specific, but I'm no JavaScript master and had to fight with the jQuery once, and this is what I have left from the struggle.
Cheers!
Related
after several rounds of research, I found there is no clear answer about the situation like below:
I have a js file called 'AAA.js', and there is simple code in side like this:
var AAA = {
listenForMenuLayer: function () {
console.log("menu initiated");
$('.nav-menu').on('click', function() { console.log("menu clicked")});
}
init: function(){
this.listenForMenuLayer();
}
};
And in the dart, I wrote like below (using 'dart:js'):
js.context['AAA'].callMethod('init');
Then, when I run it, everything looks fine, the "menu initiated" shows properly, which means the 'listenForMenuLayer' is initiated, but when click on the '.nav-menu', there is nothing happened. (I check many times, there is no spelling error or else)
My question is: Can Dart accept this kind of initiating of external JS event? or we should re-write those JS events at all, please advise, many thanks.
Updates:
I found that if we write the js code like above, the jquery will not be initiated properly, which means all the features begin with '$' will not be functional.
guys, I update it to using 'package:js/js.dart';
#JS('AAA.init')
external void aInit();
then some where, just simply call after including:
aInit();
Youtube 3.0 is going to kill off some useful slider code, instead I want to get it updated.
To start off, I've looked through the API and the migration tips and the deprecated functions lists, and it makes sense. However I'm not familiar enough with how this gallery was coded to easily update this to function on 3.0 quickly.
So i figured I'd ask the question on here to see if anyone can get it done sooner to save some time.
I did not code this! This was distributed under the apache license and made by Simone Gianni. It's been useful for me and many others so I want it to be updated and continue being useful for everyone.
The Original: http://jsfiddle.net/NmvA9/490/
I'm pretty sure at this point that everything is fine except for the use of getJSON which is deprecated in 3.0.
$.getJSON('http://gdata.youtube.com/feeds/users/' + allopts.user + '/uploads?alt=json-in-script&format=5&callback=?', null, function(data) {
var feed = data.feed;
var videos = [];
$.each(feed.entry, function(i, entry) {
var video = {
title: entry.title.$t,
id: entry.id.$t.match('[^/]*$'),
thumbnails: entry.media$group.media$thumbnail
};
videos.push(video);
});
Thanks in advance.
Edit: Thanks to jlmcdonald for the help. You really rocketed me forward on this. You were right by the way, it was the thumbnails, or so I thought? Once resolving all the problems with the thumbnails i'm left with what seems to be blank returns for no reason. Viewable here: http://jsfiddle.net/ynAtb/10/
Not sure why, I'm assuming I'm making a valid get to the wrong place.
Thanks again.
First of all, a couple of caveats:
1) In V3 of the YouTube API, any read request will require an API key, which each developer has to get on his/her own at http://console.developers.google.com. This will make it so that, if you are redistributing the new code, it won't be truly plug and play ... devs will have to edit it to include their own API key in the relevant location.
2) You might need to slightly change any code that actually implements the thumbnails ... the thumbnail object in V3 uses different parameter names for the various types of thumbnails.
Anyway, having said that, here's how you'd translate the above code to V3:
var videos = [];
$.get('https://www.googleapis.com/youtube/v3/channels?part=snippet&forUsername='+allopts.user+'&key=', function(channeldata) {
$.get('https://www.googleapis.com/youtube/v3/search?order=date&part=id,snippet&channelId='+channeldata.items[0].id+'&key=', function(videodata) {
$.each(videodata.items, function(k,v) {
var video = {
title: v.snippet.title,
id: v.id.videoId,
thumbnails: v.snippet.thumbnails
};
videos.push(video);
});
});
});
As title suggests I am building a mobile website with JQuery Mobile (1.3.0) and am trying to implement Google Places Autocomplete (API v3) to aid user input of location data.
The autocomplete functions correctly on desktop device, but not when used on a mobile device (I have only tested on iOS 6).
When used on mobile device the dropdown list of relevant locations do appear, but simply disappear when you press one without loading the selection on the map.
I have looked around and seen some solutions that sight the z-index of
.pac-container
as the culprit (see: http://osdir.com/ml/google-maps-js-api-v3/2012-01/msg00823.html).
I have implemented these fixes but to no avail, and I am not convinced that z-index is the problem because I can see that the selected item does change to it's :hover state/colour when pressed on mobile.
Please if anyone has suggestions I am all ears, need any more details let me know.
Saravanan's answer is a bit overkill. To fix the conflict with FastClick and PAC, add the needsclick class to both the pac-item and all its children.
$(document).on({
'DOMNodeInserted': function() {
$('.pac-item, .pac-item span', this).addClass('needsclick');
}
}, '.pac-container');
Thanks Daniel. But the solution I have given has some performance impact.
I have modifed the FastClick library little bit to accomplish that.
First I have added a param to FastClick constructor, where defaultElCls will be the elements which should not implement fastclick.
function FastClick(layer, defaultElCls) {
'use strict';
var oldOnClick, self = this;
this.defaultElCls = defaultElCls;
Then modify needsClick method:
FastClick.prototype.needsClick = function(target) {
'use strict';
var nodeName = target.nodeName.toLowerCase();
if (nodeName === 'button' || nodeName === 'input') {
// File inputs need real clicks on iOS 6 due to a browser bug (issue #68)
// Don't send a synthetic click to disabled inputs (issue #62)
if ((this.deviceIsIOS && target.type === 'file') || target.disabled) {
return true;
}
} else if (nodeName === 'label' || nodeName === 'video') {
return true;
}
return ((/\bneedsclick\b/).test(target.className) || (new RegExp(this.defaultElCls).test(target.className)));
};
Then pass pac-item to the FastClick constructor
new FastClick(document.body, "pac-item");
Hope this will be taken care by FastClick library as well :)
I've also encountered this bug, and determined fastclick to be the culprit. I was originally going to go with Devin Smith's answer, but epegzz's warning about MutationEvents being deprecated led me to MutationObservers, and since I haven't seen a fix involving them I thought I'd share my solution.
var observer_config = { attributes: false, childList: true, subTree: false, characterData: false }
var observer = new MutationObserver( function(mutations) {
var self = this;
mutations.forEach(function(mutation){
// look for the container being added to the DOM
var pac_container_added = $(mutation.addedNodes).hasClass('pac-container');
// if it is, begin observing it
if (pac_container_added){
var pac_container = mutation.addedNodes[0];
self.observe(pac_container, observer_config);
}
// look for pac-items being added (as children of pac_container)
// This will not resolve if the observer on pac-container has not been created
var pac_item_added = $(mutation.addedNodes).hasClass('pac-item');
// when pac items are added, add the needsclick class
if (pac_item_added) {
$('.pac-item, .pac-item span').addClass('needsclick')
}
});
});
observer.observe(document.body, observer_config);
It is more complex than I'd like it to be because we can't just add observer.observe('pac_container') in the top level, since its added asynchronously. Luckily, the solution for that problem is also MutationObservers.
We add another observer to pac_container when it is created. That way, it detects the pac-items being added, and when they are, we add the needsclick class.
This is my first time using MutationObservers, so feedback/improvements would be appreciated. As you can see, I used both jquery, but it should be pretty easy to pull it out.
There is a patch for fastclick that makes it work well with google places autocomplete. See This answer :)
After much hair pulling I have found the problem to be the "FastClick" library I added to my project.
As #Saravanan Shanmugam points out in this comment https://stackoverflow.com/a/16932543/1177832
FastClick seems to interfere with autocomplete. Also see above link for the workaround he has added to get the two to play nice.
As the subject states, how do I trigger the actions to take place inside a
modelController.$parsers(...)
without user input... the only way I can think of is wrapping them inside a function and call it, but is there a better way to trigger
**//pseudo
$(modelController).trigger('just got dirty');**
the reason I would need this is to trigger the input field to validate itself on submitting page.
I have found a way to solve this - just call the parsers with the model value:
angular.forEach(ngModel.$parsers, function (parser) {
parser(ngModel.$viewValue);
});
It`s so simple, and it seems to be the most correct solution.
This question is actual for me also... Because i am resolving this issue with:
var triggerParsers = function() {
var val = ngModel.$viewValue;
ngModel.$setViewValue(null);
ngModel.$setViewValue(val);
};
i'm still new to the mobile / fluid / responsive game and am having issues with the submenu on this site: http://www.medowsconstruction.com/
the click on mobile should replace the :hover function automagically right? seems to be the case with the standard Foundation theme.
i hadn't changed anything in those mobile specific areas of the framework, so what did I do to mess it up and cause the submenu to not show on iPad / touch?
thanks for any help
It seems that the problem is that this is not a standard pure CSS dropdown menu, as one might assume. Instead, it's been controled by jQuery. You can see it in the app.js file:
$('.nav-bar>li.has-flyout').hover(function() {
$(this).children('.flyout').show();
}, function() {
$(this).children('.flyout').hide();
});
So you should modify the script in order to work with a touch for selected devices (there is a good discussion on that topic here). Here I am using a simple statement. I have not been able to test it in iPad, but you could have good results if you try to use something like (untested!):
if (navigator.userAgent.match(/(iPod|iPhone|iPad)/)) {
$('.nav-bar>li.has-flyout').bind('touch', function() {
$(this).children('.flyout').slideToggle();
});
} else {
$('.nav-bar>li.has-flyout').hover(function() {
$(this).children('.flyout').show();
}, function() {
$(this).children('.flyout').hide();
});
}
This should give you some clues on how to deal with that. Let us know if it works.
There is also a lot of information in this stackoverflow discussion about hover and touch devices.
thanks to #hernan for setting me in the right direction with things.
i ended up fixing it up by mixing the Foundation code with his code with some better selectors. here's what I landed with:
if (navigator.userAgent.match(Modernizr.touch || navigator.userAgent.match(/Windows Phone/i))) {
$('.nav-bar>li.has-flyout').on('click.fndtn touchstart.fndtn', function(e) {
e.preventDefault();
var flyout = $(this).children('.flyout').first();
if (lockNavBar === false) {
$('.nav-bar .flyout').not(flyout).slideUp(500);
flyout.slideToggle(500, function(){
lockNavBar = false;
});
}
else
{
flyout.slideToggle(500);
}
});
i'l definitely be checking into those two links / discussions you mentioned, too, hernan.
thanks again-