Ember, generating URL `url-to`? - javascript

I would like to generate a URL to a resource and show it to the User. I found the link-to but I don't want the whole <a> element but only the URL.
Something like:
{{#url-to 'photos.show' photo}}

I am not sure what Emberjs version you are using but in any case this may work for you. I haven't try my self but probably will help you.
{{#url-to 'photos.show' photo}}
Ember.Handlebars.registerHelper('url-to', function() {
return Ember.Handlebars.helpers['link-to'].apply(this, args);
});
Check this tutorial which goes more in details. Also you can search for how to create blocs helpers in emebrjs.

there is addon which adds such helper {{href-to}} have a look https://github.com/intercom/ember-href-to

Related

Custom Unobtrusive Validation Method Not Firing as Per Documentation

I've been attempting to implement a ASP.NET MVC custom validation method. Tutorials I've used such as codeproject explain that you add data-val-customname to the element. Then jQuery.validate.unobtrusive.js then uses the third segment of the attribute
data-val-<customname>
as the name of the rule, as shown below.
$.validator.addMethod('customname', function(value, element, param) {
//... return true or false
});
However I just can't get the customname method to fire. By playing around I have been able to get the below code to work, but according to all the sources I've read Unobtrusive validation should not work like this.
$.validator.addMethod('data-val-customname', function(value, element, param) {
//... return true or false
});
I've posted an example of both methods
jsfiddle example
Any help would be much appreciated
I've updated my question hopefully to make clearer.
I have finally found got there in the end, but still feels like too much hard work and therefore I've probably got something wrong. Initial I was scuppered by a bug in Chrome Canary 62 which refused to allow the adding of a custom method.
My next issue was having to load jQuery, jQuery.validate and jQuery.validate.unobtrusive in the markup and then isolate javascript implementation in a ES6 class. I didn't want to add my adaptors before $().ready() because of my class structure and loading of the app file independent of jQuery. So I had to force $.validator.unobtrusive.parse(document);.
Despite this I was still having issues and finally debugged the source code and found that an existing validator information that is attached to the form was not merging with the updated parsed rules, and essentially ignoring any new adaptors added.
My final work around and admit feels like I've done too much, was to destroy the initial validation information before my forced re-parse.
Here is the working jsfiddle demo
Here is some simplified code
onJQueryReady() {
let formValidator = $.data(document.querySelector('form'), "validator" );
formValidator.destroy();
$.validator.unobtrusive.adapters.add("telephone", [], function (options) {
options.rules['telephone'] = {};
options.messages['telephone'] = options.message;
});
$.validator.unobtrusive.parse(document);
$.validator.addMethod("telephone", this.handleValidateTelephoneNumber);
}

How to read the HTML DOM in protractor

I want to retrieve the value for our version which is stored in HTML DOM.
Using node.js and protractor. I don't know how to go about it.
Please provide your valuable knowledge for the same :)
I want the value 2016.R08.1.RC1
The simplest way is to select html by selector and get manifest property:
element(by.css('html')).getAttribute('manifest');
Then you should receive the full value of manifest property.
I've just come through this question and it's answer while doing protractor e2e angular 5/6 tests.
The answer from #Konstantin Azizov is good but element(by.css('html')).getAttribute('manifest') will return a promise not the value itself indicated by it's API:
So you can do something like:
element(by.css('html')).getAttribute('manifest').then((data) => {
elementHtmlValue = data;
});
The content then of elementHtmlValue is what you are looking for :)

How to redirect to a play framework url from within javascript without hard-coding the url

I need to do something seemingly quite simple.
In the same way that I can, from my scala.html file, create a link to another url, /entry, I need to do that from a javascript file.
i.e., from the scala.html:
<div class="footer">
<a href='#routes.Application.index()'>Home</a>
</div>
from my javascript event:
function() myEvent {
window.location="#routes.Application.entry()"; // DOESN'T WORK!
}
For routing from javascript, I've already had to setup my javascript routes for some ajax work I've already had to do.
My ajax work was calling a method 'findPersons()' so in my Application.java file, I had already:
public Result jsRoutes()
{
response().setContentType("text/javascript");
return ok(Routes.javascriptRouter( "appRoutes",
routes.javascript.Application.findPersons()));
}
Because I want to be able to redirect to my GET entry() method, I modified it to look like this:
public Result jsRoutes()
{
response().setContentType("text/javascript");
return ok(Routes.javascriptRouter( "appRoutes",
routes.javascript.Application.findPersons(),
routes.javascript.Application.entry()));
}
Additionally I have these in my routes file:
GET /entry controllers.Application.entry()
POST /findPersons controllers.Application.findPersons()
When I am invoking my findPersons method, it is really nice and simple.
It looks like this:
appRoutes.controllers.Application.findPersons().ajax({
data: {
personIdentifier : personIdentifier,
surname : surname,
givenNames : givenNames
},
success : processDBQuery
});
For my simple redirect, I would like to be able to maintain the same loose coupling between my html/javascript code and the urls, as I can the ajax call above.
My redirect needs to occur on an event. Therefore, the easiest and quickest solution would have been simple to write:
function() myEvent {
window.location="/entry";
}
However, then I would be hard-coding the URL (which I have managed to avoid for my ajax call above), no longer maintaining that loose coupling I would so much like to have.
However, I see no examples in the documentation, and from what I have in the generated javascript (for my routes) there is no chance.
Is there any way to achieve what I am after?
thanks for reading!
p.s., I should add; I guess I have also thought of the possibility of using the ajax call that is generated, I guess I can probably fetch the page I want... and there is probably a means of replacing the current document with the entire content of the fetched page. but that just sounds bad.... wrong...
or not?
I was rather hoping for a substitution, as is done in my html
i.e, my link as shown above is generated to look like this:
<div class="footer">
<a href='/'>Home</a>
</div>
In the same way, I hoped there was some means of substitution in the javascript, so that the event function above ends up in being massaged into looking like this:
function() myEvent {
window.location="/entry";
}
Jacques, from the above comments, helped me to realize a work-around.
From within my "assets located" javascript file, I can still refer to page/template located javascript.
Own-file/assets located javascript doesn't seem to be transformed how I expected.
However, Page/template located javascript is transformed exactly how I require.
I can refer to a template located javascript function from my assets located javascript.
This means, I have a little work-around of one extra little function inside the template which does the redirection for me.
i.e.,
myJavascript.js:
function personResultsListClickHandler(personId) {
var fpersonId = personId;
return function() {
window.alert("hello! " + fpersonId);
affectRedirect();
};
}
myTemplate.scala.html
#main("person lookup") {
<script type="text/javascript">
function affectRedirect(){
window.location="#routes.Application.entry()";
} // Need this here so it will be transformed.
// asset located javascript doesn't seem to get transformed like javascript here in template! :(...
</script>
Another possibility is the fact that the Javascript object retrieved by calling:
appRoutes.controllers.Application.entry()
contains a url member. This url member is exactly what I can use to assign to window.location. However, it looks a bit unofficial.. in terms of
1. the member not being documented
2. not sure if the url member will exist in the future
3. the generated javascript is constructing an object dealing with ajax... and i'm just grabbing the URL member from it... it just feels... like a hack.
But i've tested this, and it works. See code below:
function patientResultsListClickHandler(personId) {
var fpersonId = personId;
return function() {
window.location=appRoutes.controllers.Application.entry(personId).url;
// window.location="/entry/" + fpersonId; // the sort of hard-coding of URL that
}; // I wanted to avoid, but don't seem able to.
}
Does anyone else have a better solution?

Is it possible to change $location without firing associated $route

Is it possible to change the location path in Angular.js without triggering the associated route. Perhaps something like the following (not working code):
$location.path("/booking/1234/", {silent: true})
You can set reloadOnSearch to false in your router, and you can change the "search" part of the url.
The idea is that you should design your URL scheme such that if the base url changes, it represents a different resource and should reload. If the search part changes (the part after the ?, you might just be changing a filter, or a sort order or something).
Here is the solution, compiled in angular module — https://github.com/garakh/ngSilent
just add the module and then use this way:
$ngSilentLocation.silent('/new/path/');
Yes it is possible using a workaround.
var off = $scope.$on('$stateChangeStart', function (e) {
e.preventDefault();
off();
});
$location.path("/booking/1234/");
The way it works is - it is caching the next state change event - make him not happen (by calling "preventDefault", and then calling itself to deregister this eventhandler).
Tested only on Chrome.
Saw it in this post: https://github.com/angular-ui/ui-router/issues/64
Hope it helps

How to use g:message from Javascript

There are some messages coming from a Javascript file to a GSP page. How can I implement g:message in a Javascript page?
For example:
if ($('#name').val() == "") {
$('#nameStatus').show();
$('#nameStatus').html('<font color=red>Company Name can not be blank</font>');
return false;
Try this kind of syntax :
function foo() {
return "${message(code:'my.message.code')}";
}
If I understand correctly, you want to be able to use the output from g:message in your javascript.
There is a very helpful blog post which talks about how to use g:createLink in a similar way that you want, so you can easily adapt it to use g:message as well. Check out the post here, there is some useful info in the comments as well.
The idea is to create javascript objects in your GSP file; which should be defined before including your javascript file; and then just access those global objects in your js code.
Edit:
You might also be interested in the GSParse Plugin. I haven't tried it my self but I think it accomplishes what you are looking for as well.

Categories

Resources