Issue when separating JS code from grails view to external JS file - javascript

I have some working JS code which I put on the sections of my create and edit views, and it's working fine.
However, when I attempted to move the code to a separate JS file, the code would no longer call the controller action.
Here the JS code:
<g:javascript>
$(document).ready(function(){
<g:remoteFunction controller="project" action="ajaxGetClient" onSuccess="updateClient(data)"/>
});
function updateClient(data){
var element = $("#project\\.client");
element.empty();
element.val(data.name);
}
</g:javascript>
Here's the controller action:
def ajaxGetClient = {
if(!params.id){
params.id = Project.find("FROM Project ORDER BY id").id
}
def projectInstance = Project.get(params.id)
render projectInstance?.client as JSON
}
And here's the GSP code:
<g:textField name="project.client" id="project.client" maxlength="9" required="" disabled=""/>
<g:select id="project" name="project.id" from="${myPackage.Project.list()}" optionKey="id" required="" value="${productInstance?.project?.id}" class="many-to-one"
onchange="${
remoteFunction(
controller: 'project',
action: 'ajaxGetClient',
onSuccess: 'updateClient(data)',
params: '\'id=\' + this.value'
)}"
/>
I added a resource to ApplicationResources.groovy and changed the above JS code to this:
<g:javascript library="updateclient"/>
I simply copy/pasted the code into a JS file and then got a message:
Uncaught SyntaxError: Unexpected token <
which I understood came from it not recognizing the GSP syntax, so I tried some AJAX, which I'm pretty unexperienced at:
$(document).ready(function(){
$.ajax({
type: 'POST',
url: "${remoteFunction(controller:'project', action:'ajaxGetClient', onSuccess:'updateClient(data)')}"
});
});
Here's what I'm getting from the browser console:
http://localhost:8080/MyApp/product/$%7BremoteFunction(controller:'project',%20action:'ajaxGetClient',%20onSuccess:'updateClient(data)')%7D 404 (Not Found)
Quite frankly, I'm at a loss right now. Any help would be appreciated.

The reason for this is that Javascript (.js) and other non GSP (.gsp) files aren't parsed through the Groovy server pages engine. Thus, tag libraries such as the or ${g.remoteFunction} aren't parsed.
There are several ways to accomplish this however.
One is to keep the code in your GSP and not externalize it into javascript files.
Second is to move your code into javascript files but have configuration values in your GSP file. Here is a very simple example of using the message taglib:
// inside the .js file
function myFunction() {
console.log("I would use this value: "+_VALUE_FROM_GSP);
}
<script type="text/javascript">
// inside the .gsp file
var _VALUE_FROM_GSP = "${message(code: 'just.an.example')";
</script>
Finally, there plugins (listed below) that allows you specify some resources (javascript files in your case) to be parsed through the Groovy Server Pages engine.
GSP-arse plugin and GSP Resources

I'll be answering my own question here, since the bulk of it came from valuable advice from a friend of mine, but Joshua's answer was also very important, so I ended up combining both of them.
This is how I solved it:
On the GSP:
<script type="text/javascript">
var _URL = '${resource(dir: "")}/project/ajaxGetClient';
</script>
<g:javascript library="updateclient"/>
The reason I'm using the <script> tag is because in order for the _URL variable to become usable across different files, it had to be declared before the file using it. At least that's what this other SO answer said:
Global variables in Javascript across multiple files
Separate JS file:
$(document).ready(function(){
getClientAjax(null);
});
function getClientAjax(id) {
$.ajax({
url: _URL,
type: "POST",
data: { id: id },
success: function(data) {
updateClient(data);
}
});
}
function updateClient(data){
var element = $("#project\\.client");
element.empty();
element.val(data.name);
}
And the controller action remained the same.
At the end, there had to be created another JS function, but I gotta say I'm happy with the result.
Thanks for all the help.

Related

How to run shell command from javascript client-side?

I have the simplest program: 1 HTML file, 1 CSS file, and 1 JS file, just run directly on my own computer. And all I'm trying to do is that when you press a button in the program, one single shell command (Windows) is run directly on the computer. This will generate file, which in turn will be used further inside the program.
It appears you cannot access your local files through JS alone, so I installed NodeJS (which is completely new to me). But I still can't get it to work that way either.
The only way I finally got NodeJS to host the HTML page in a way that the JS and CSS files also work, is by copying the code I got here: https://stackoverflow.com/a/13635318. (I called it server.js).
But I still haven't been able to find a way to call upon server.js while client-sided to run that shell command. Some posts suggest using AJAX for this, like here https://stackoverflow.com/a/53897335, but I haven't been able to find any way to successfully catch that in server.js.
I figured out how do it in another roundabout way:
With Django you can easily combine JS and Python, and Python can run shell commands much more easily.
In case someone wants the exact code:
Python (views.py):
import subprocess
def home(request):
if request.META.get('HTTP_X_REQUESTED_WITH') == 'XMLHttpRequest':
subprocess.call(["ls", "-l"])
return render(request, 'index.html')
Javascript:
function toView() {
var csrftoken = $("[name=csrfmiddlewaretoken]").val();
$.ajax({
method: 'POST',
url: '',
headers:{
"X-CSRFToken": csrftoken
},
data: {},
success: function (data) {
alert("it worked!");
},
error: function (data) {
alert("it didnt work");
}
});
}
HTML (index.html):
<form method="post">
{% csrf_token %}
<button type="button" onclick="toView()">Do x</button>
</form>

How to allow my java script to resolve the relative URL as ~/ does in razor view

I have an asp.net mvc web application , which is deployed under /sites as follow:-
http://servername/sites/
but if i reference the URL as follow:-
url:'/ControllerName/ActionMethodName'
the result will be http://servername/ControllerName/ActionMethodName and NOT http://servername/ControllerName/sites/ActionMethodName
i usually solve this issue inside my razor view by writting the following:-
url: "#Url.Content("~/ControllerName/ActionMethodName")" . but seems that javascript does snot have the same ability. so can anyone advice?
Thanks
There are many ways to solve this, not so elegant.
I prefer to put a Hidden field in _Layout.cshtml (or any other master page)
#Html.Hidden("HiddenCurrentUrl", Url.Content("~"))
In a common js file:
var baseUrl = "";
$(document).ready(function () {
baseUrl = $("#HiddenCurrentUrl").val();
});
Then just refer Urls like this:
$.ajax({
type: 'POST',
url: baseUrl + 'solicitacoes/obtertipo/' + value
})
I'm not sure yet about this practice, but it worked for me (fixing tons of legacy code)
In your javascript file, use variables for all paths.
var ActionSubmit;
In your View include this:
<script>
ActionSubmit = '#(#Url.Content("~/ControllerName/ActionMethodName")';
</script>

Embedding Javascript in html document

I'm trying to implement the following code in a html document:
$(function () {
$.ajax({
type: "GET",
url: "/projects/img/Bathurst/PhotoGallery.xml", // location of your gallery's xml file
dataType: "xml",
success: function(xml) {
$(xml).find('img').each(function() {
var location = '/projects/img/Bathurst/'; // relative path to the directory that holds your images
var url = $(this).attr('src');
var alt = $(this).attr('alt');
$('<li></li>').html('<img class="thumb" src="'+location+''+url+'" alt="'+alt+'" title="'+alt+'" />').appendTo('#gallery-ul');
});
$('<script type="text/javascript"></script>').html('Shadowbox.clearCache(); Shadowbox.setup();').appendTo('#photo-gallery');
}
});
});
The code works perfectly when I use it in an external .js file, but I cant get it working when i implement it, it just renders with error in the code.
II'm I missing something and dos anyone have a suggestion to this? The reason why I need to implement it, in case some one wonderes, is that I'm building a custom webapp and the line "/projects/img/Bathurst/PhotoGallery.xml" and "/projects/img/Bathurst/" is dynamic variables.
All answers are very much appreciated! :)
The problematic line ($('<script type="text/javascript">...) is a convluted and unnecessarily complicated way to run two lines of Javascript.
You should replace it with simple method calls. (Shadowbox.clearCache(); Shadowbox.setup();)
You can't have a </script> inside a script.
Change
$('<script type="text/javascript"></script>')
to
$('<script type="text/javascript"><\/script>')

Django reverse() for JavaScript

In my project I have a lot of Ajax methods, with external client-side scripts (I don't want to include JavaScript into templates!) and changing URLs is kind of pain for me because I need to change URLs in my Ajax calls manually.
Is there is some way to emulate the behavior of {% url %} templatetag in JavaScript?
For example, print urlpatterns starting with ^ajax and later in scripts replace patterns with their actual values?
That's what on my mind, and my question is - are there any common practices to do things like that? Maybe some reusable applications? Also I will be happy to read any advices and relevant thoughts you have.
Update 1:
I'm talking about computed URLs, not static ones:
url(r'^ajax/delete/(?P<type>image|audio)/(?P<item_id>\d+)/from/set/(?P<set_id>\d+)/$', 'blog.ajax.remove_item_from_set'),
Try creating javascript helper functions (in django template) for generating url string. In simple form they could look like this:
function generete_some_url(id){
return "{% url some_url itemid=112233 %}".replace("112233", id);
}
Maybe this has some other implications but I think it should work.
What's wrong with putting JavaScript in your templates?
You often want to call an initialisation function in your HTML template anyway, so why not pass it an object containing URLs you'll be using?
<script>
MYGLOBAL.mymodule.init({
fancy_ajax_url: '{% url fancy %}',
fancier_ajax_url: '{% url fancier %}'
});
</script>
If you find yourself passing a lot of variable this way, or wanting to use logic in your JavaScript that you do in your HTML templates, then why not render your script through Django's templating engine? Remember, Django templates are not just for HTML documents - often it helps to use templates for plain text, XML, JSON, and yes even JavaScript. Worried about performance? Then cache the result.
I created a mechanism that builds a list of url patterns in your Django project and outputs that in a Javascript file. It is a fork of django-js-utils.
The repo link is here:
https://github.com/Dimitri-Gnidash/django-js-utils
https://github.com/mlouro/django-js-utils
dutils is a small utility library that aims to provide JavaScript/Django developers with a few utilities that will help the development of RIA on top of a Django Backend.
It currently supports the following features:
Reverse method for generating Django urls...
We created a small app called django-js-reverse for this purpose.
For example you can retrieve a named url
urls.py:
url(r'^/betterliving/(?P[-\w]+)/(?P\d+)/$', 'get_house', name='betterliving_get_house'),
in javascript like:
Urls.betterliving_get_house('house', 12)
result:
/betterliving/house/12/
What I usually do is put the URL in either an <input type="hidden" /> element, or in the rel="" attribute.
Then, when writing the JS (using jQuery below) I do:
$('div#show_more').click(function () {
var url = $(this).attr('rel');
// or
var url = $('#more_url').val();
$.get(url, function () { /* ... */ });
});
Nonstandard attributes are well supported by all major browsers and hidden elements don't have to be in forms.
First, you should name your url:
url(r'^blog/(?P<item_id>\d+)/$', 'blog.ajax.remove_item', name='blog-item'),
Then you could pass urls as variables to your module:
<script src="{{ STATIC_URL }}js/my-module.js"></script>
<script>
$(function(){
MyModule.init('{% url blog-item item.id %}');
});
</script>
// js/my-module.js
var MyModule = {
init: function(url) {
console.log(url);
}
};
You could use tokens in your url:
<script src="{{ STATIC_URL }}js/my-module.js"></script>
<script>
$(function(){
MyModule.init("{% url blog-item item_id='0000' %}");
});
</script>
// js/my-module.js
var MyModule = {
init: function(url) {
var id = 1;
this._url = url;
console.log(this.url(id));
},
url: function(id) {
return this._url.replace('0000', id);
}
};
Notice that your token should match the regex type to resolve successfully (I can't use {item_id} as token because it's defined with \d+).
I was a little bit unsatisfied with this solution and I ended by writing my own application to handle javascript with django: django.js. With this application, I can do:
{% load js %}
{% django_js %}
{% js "js/my-module.js" %}
// js/my-module.js
var MyModule = {
init: function() {
var id = 1;
console.log(Django.url('blog-item', id));
}
};
$(function(){
MyModule.init();
});
You can remove the parameters from the URL, and pass the dynamic parts as query parameters:
$('#add-choice-button').on('click', function () {
var thing_id = $(this).closest('.thing').attr('data-item-id');
$.get('{% url 'addThing' %}?t='+thing_id, function (data) {
...
});
});
I have found this cool django app called Django JS reverse
https://github.com/ierror/django-js-reverse
If you have a url like
url(r'^/betterliving/(?P<category_slug>[-\w]+)/(?P<entry_pk>\d+)/$', 'get_house', name='betterliving_get_house'),
Then you do
Urls.betterliving_get_house('house', 12)
The result is
/betterliving/house/12/

ASP.NET - path to use to reference .CSS and .JS

I have a Master Page in the root of my project. I have Content Pages throughout my project and in subfolders referencing this Master Page. What is the correct way to reference my .CSS and .JS files if I always want them to be relative to the root?
Here is how I'm doing it now:
link href="/common/css/global.css"
script src="/common/javascript/global.js"
But that breaks the link. I tried without the leading "/" but that didn't work on my pages in the subfolders.
I would use something like
Server.ResolveClientUrl("~/common/css/global.css")
This will get a proper url for you at all times.
Example:
Per the comment this would be full usage.
<link type="text/css" rel="stylesheet"
href='<%= Server.ResolveClientUrl("~/common/css/global.css") %>' />
According to comments, other validated usage, no "error CS1061: 'System.Web.HttpServerUtility' does not contain a definition" error:
<script type="text/javascript"
src="<%= Page.ResolveUrl("~/Scripts/YourScript.js") %>" ></script>
Also is important to always put the closing tag .
You can make the <link> tag to run at server so Asp.Net will resolve the URL for you like this:
<link href="~/common/css/global.css" runat="server" />
(Notice the '~')
I don't know if it can be applied to the <script> tag though, you should try...
EDIT: I discovered recently on a project that you can (and should) use a ScriptManager to hold your scripts (you can only have 1 per page). You can put one in your MasterPage and reference all your scripts. Inside your content page, you then add a ScriptManagerProxy that will 'reference' the scripts on the master page and you can even add other scripts for that content page only.
I do it as simple as this: link href="<%=ResolveUrl("~/common/css/global.css")%>"
The solutions I saw so far didn't work in my project (especially not for .css links). The issues were the following:
inside <link> it didn't resolve the <%=...%> expression
it did not find the Page.ResolveURL in all cases
there was some trouble with ' and " quotes if you embedd <%=...%>
So I'd like to offer this solution: In code behind (your master page's C# class), add the the following 3 methods:
public partial class SiteBasic : System.Web.UI.MasterPage
{
public string ResolveURL(string url)
{
var resolvedURL=this.Page.ResolveClientUrl(url);
return resolvedURL;
}
public string cssLink(string cssURL)
{
return string.Format("<link href='{0}' rel='stylesheet' type='text/css'/>",
ResolveURL(cssURL));
}
public string jsLink(string jsURL)
{
return string.Format("<script src='{0}' type='text/javascript'></script>",
ResolveURL(jsURL));
}
}
For stylsheet references, you can then say:
<%=cssLink("~/css/custom-theme/jquery-ui-1.8.20.custom.css")%>
For JavaScript references, it looks like so:
<%=jsLink("~/Scripts/jquery-1.7.2.js")%>
And for other references, you can use:
<a href='<%=ResolveURL("~/Default.htm")%>'>link</a>
<img title='image' src='<%=ResolveURL("~/Images/logo.png")%>'/>
Note: I found it is better to use single quotes outside and double quotes inside the href or src attribute as shown in the example above. Doing it vice versa caused trouble in some cases as I found.
This solution is simple and it worked well in my case, even if the pages referencing the master page reside in different subdirectories. What it basically does is translating the ~ path (which needs to be absolute from the root of your web site) into a relative path (using as many ../ in the path as needed) based on the page you're currently displaying.
Advanced hint:
If you're using AJAX calls to invoke web service methods, then you'll have the same issue referencing them if you have ASPX pages on different directory levels. I recommend you define something like (assuming that your web services reside in the directory ~/AJAX):
<script type="text/javascript">
function getWebServicePath() { return '<%=ResolveURL("~/AJAX/")%>'; }
</script>
inside the <head> ... </head> section of your master page. This will make the entry path of the web service available in your JavaScript. You can use it like
$.ajax({
type: "POST",
url: getWebServicePath()+"myWebService.asmx/myMethod",
data: $.toJSON({ param: "" }),
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (msg) {
// ... code on success ...
},
error: function (ex) {
// ... code on error ...
}
});

Categories